/* --- Drag states --- */

.keypad-btn {
  cursor: grab;
}

.keypad-btn:active:not(:disabled) {
  cursor: grabbing;
}

/* ドラッグ中に pointermove がスクロールへ奪われないように。
   .question-page button の touch-action:manipulation を上書きするため
   2 クラス分の詳細度で指定する。 */
.keypad-numbers .keypad-btn {
  touch-action: none;
}

/* ドラッグ落下候補マスのハイライト（縦式/横式/1桁HW/あまり共通） */
.vertical-acell.is-drop-hover,
.horizontal-digit-slot.is-drop-hover,
.session-hwbox.is-drop-hover {
  outline: 3px solid var(--color-primary, #2E6FB0);
  outline-offset: -3px;
  background: rgba(46, 111, 176, 0.12);
  border-radius: 12px;
}

/* 初回のみ: 正答の末尾桁 → 回答マスへの 1 ショット軌道デモ */
.keypad-drag-demo-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9998;
  pointer-events: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  background: var(--color-primary, #2E6FB0);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(46, 111, 176, 0.32);
  will-change: transform, opacity;
}

.vertical-acell.is-drop-flash,
.horizontal-digit-slot.is-drop-flash,
.session-hwbox.is-drop-flash {
  outline: 3px solid var(--color-primary, #2E6FB0);
  outline-offset: -3px;
  background: rgba(46, 111, 176, 0.14);
  transition: outline-color 0.2s ease-out, background 0.2s ease-out;
}

/* ドラッグ中に指へ追従する数字ゴースト */
.keypad-digit-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  pointer-events: none;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  background: var(--color-primary, #2E6FB0);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  will-change: transform;
  transform: translate(-9999px, -9999px);
}

/* --- Progress Rail (案2 / 横型) --- */

.progress-rail {
  position: absolute;
  --rail-width: 26px;
  --rail-track-x: 12px;
  --rail-track-w: 2px;
  --rail-star-size: 11px;
  --rail-goal-size: 20px;
  right: 8px;
  top: 0;
  bottom: 0;
  width: var(--rail-width);
  z-index: 6;
}

.progress-rail::before {
  content: "";
  position: absolute;
  top: -18px;
  bottom: -18px;
  left: 7px;
  width: 14px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.30) 15%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(231, 222, 207, 0.16) 82%,
    rgba(231, 222, 207, 0) 100%
  );
}

.progress-rail-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rail-track-x);
  width: var(--rail-track-w);
  border-radius: 3px;
  background: linear-gradient(
    180deg,
    rgba(var(--color-text-rgb), 0) 0%,
    rgba(var(--color-text-rgb), 0.08) 10%,
    rgba(var(--color-text-rgb), 0.08) 90%,
    rgba(var(--color-text-rgb), 0) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.progress-rail-fill {
  position: absolute;
  left: var(--rail-track-x);
  width: var(--rail-track-w);
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(96, 198, 160, 0.08) 0%, #60C6A0 14%, var(--color-primary) 100%);
  opacity: 0.68;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24), 0 0 8px rgba(70, 180, 138, 0.18);
  transition:
    top 0.4s cubic-bezier(0.45, 0, 0.9, 0.5),
    height 0.4s cubic-bezier(0.45, 0, 0.9, 0.5);
}

.progress-rail-fill-head {
  border-radius: 3px 3px 1px 1px;
}

.progress-rail-label {
  position: absolute;
  min-width: 14px;
  height: 14px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  color: var(--color-text-mute);
  line-height: 14px;
  text-align: center;
  background: rgba(255, 247, 238, 0.72);
  z-index: 3;
}

.progress-rail-label-top { top: 4px; left: -13px; }
.progress-rail-label-bottom { bottom: -2px; left: -13px; }

/* --- Rail star markers --- */
.rstar {
  position: absolute;
  left: calc(var(--rail-track-x) + (var(--rail-track-w) / 2) - (var(--rail-star-size) / 2));
  width: var(--rail-star-size);
  height: var(--rail-star-size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D4CFC7;
  font-size: calc(var(--rail-star-size) * 1.34);
  line-height: 1;
  text-shadow:
    0 0.5px 0 rgba(255, 255, 255, 0.55),
    0 1px 1px rgba(var(--color-text-rgb), 0.07);
  filter: drop-shadow(0 0.5px 1px rgba(var(--color-text-rgb), 0.07));
  pointer-events: none;
  z-index: 2;
}

.rstar::before {
  content: "";
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 18 q6 22 20 26 q8 2 14 8 q-16 8 -14 22 q1 10 -5 15 q-7 -2 -15 -5 q-8 2 -15 5 q-5 -5 -7 -15 q2 -14 -14 -22 q6 -6 14 -8 q14 -4 20 -26Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 18 q6 22 20 26 q8 2 14 8 q-16 8 -14 22 q1 10 -5 15 q-7 -2 -15 -5 q-8 2 -15 5 q-5 -5 -7 -15 q2 -14 -14 -22 q6 -6 14 -8 q14 -4 20 -26Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rstar.done {
  color: var(--color-primary);
  filter:
    drop-shadow(0 0.5px 1px rgba(var(--color-text-rgb), 0.07))
    drop-shadow(0 0 1.5px var(--color-surface))
    drop-shadow(0 0 4px rgba(70, 180, 138, 0.45));
}

.rstar.done::before {
  transform: scale(1.25);
}

.rstar.pop { animation: railpop 0.5s ease; }

.rgoal {
  position: absolute;
  left: calc(var(--rail-track-x) + (var(--rail-track-w) / 2) - (var(--rail-goal-size) / 2));
  width: var(--rail-goal-size);
  height: var(--rail-goal-size);
  clip-path: var(--st);
  background: linear-gradient(180deg, #FFE0A0, #F4B046);
  filter: drop-shadow(0 0 7px rgba(244, 176, 70, 0.7));
  animation: railtw 2.1s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

.rgoal.pop { animation: railpop 0.5s ease; }

/* --- Rail mascot (ほっし) --- */
.rmascot {
  position: absolute;
  left: calc(var(--rail-track-x) + (var(--rail-track-w) / 2) - 19px);
  width: 38px;
  height: 38px;
  z-index: 5;
  filter: drop-shadow(0 3px 5px rgba(var(--color-text-rgb), 0.26));
  transform: translateY(-50%);
  pointer-events: none;
}

.rmascot.idle .mascot { animation: idlesway 10s ease-in-out infinite; }
.rmascot.moving-correct { transition: top 0.4s cubic-bezier(0.45, 0.05, 0.75, 0.35); }
.rmascot.moving-correct .mascot { animation: zip 0.4s ease; }
.rmascot.moving-wrong { transition: top 0.4s cubic-bezier(0.45, 0, 0.9, 0.5); }
.rmascot.moving-wrong .mascot { animation: zip 0.4s ease; }
.rmascot.catch .mascot { animation: catch 0.32s ease; }
.rmascot.wrong-stay .mascot { animation: headshake 0.62s ease; }

/* --- Spark burst --- */
.spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 7;
  pointer-events: none;
}

.spark i {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF1C2, #F4B046);
  opacity: 0;
  animation: burst 0.55s ease-out forwards;
}

/* --- Star flyer overlay --- */
.flyer {
  position: fixed;
  z-index: 200;
  width: 0;
  height: 0;
  pointer-events: none;
}

.flyer-ripple {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--color-primary);
  opacity: 0;
  transform: translate(-50%, -50%);
}

.flyer-mover {
  position: absolute;
  left: 0;
  top: 0;
}

.flyer-orb {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  clip-path: var(--st);
  background: linear-gradient(160deg, #CFEEE0, var(--color-primary));
  opacity: 0.88;
}

.flyer.emerge .flyer-ripple { animation: ripplen 0.2s ease-out forwards; }
.flyer.emerge .flyer-orb { opacity: 0.88; }
.flyer.travel .flyer-ripple { display: none; }
.flyer.travel .flyer-orb { opacity: 0.88; }
.flyer.travel .flyer-mover { animation: flypos 0.26s cubic-bezier(0.3, 0, 0.7, 0.5) forwards; }
.flyer.catch { display: none; }

/* --- 最終問題フィナーレ：全画面落下オーバーレイ --- */
.final-mascot {
  position: fixed;
  z-index: 210;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(var(--color-text-rgb), 0.28));
  animation: finaldrop 1.15s cubic-bezier(0.4, 0, 0.9, 0.55) forwards;
}
.rmascot.finale-gone { opacity: 0; }


.question-page-feed {
  padding: 0;
  margin: 0;
  max-width: none;
  width: 100%;
  background: var(--color-bg-quiz);
}

.session-feed-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
}

.session-portrait-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  min-height: 52px;
  padding: 0 0 36px;
  background: linear-gradient(180deg, var(--color-bg-quiz) 0%, var(--color-bg-quiz) 28%, rgba(255, 247, 238, 0) 100%);
  pointer-events: none;
}

.session-portrait-quit {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  margin: 0;
  padding: 0;
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  box-shadow: 0 2px 0 #E7DECF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}

.session-portrait-step-label {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  left: 64px;
  right: 64px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.session-portrait-step-id {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-mute);
  letter-spacing: 0.02em;
}

.session-portrait-main {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.session-portrait-feedbg {
  --portrait-feed-row-gap: 48px;
  --portrait-feed-shift: 70px;
  --portrait-feed-advance-duration: 0.48s;
  --portrait-feed-advance-ease: cubic-bezier(0.33, 1, 0.68, 1);
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  row-gap: var(--portrait-feed-row-gap);
  padding: 0;
}

.session-portrait-feed-above,
.session-portrait-feed-below {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 36px;
  min-height: 0;
  overflow: hidden;
  padding: 0 var(--portrait-rail-reserve, 44px) 0 max(16px, env(safe-area-inset-left));
}

.session-portrait-feed-above.is-advancing,
.session-portrait-feed-below.is-advancing,
.session-portrait-active-preview-back.is-advancing {
  animation: portrait-feed-advance var(--portrait-feed-advance-duration) var(--portrait-feed-advance-ease) forwards;
  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.session-portrait-active-preview-back.is-advancing {
  --portrait-feed-edge-opacity: 0.92;
  animation:
    portrait-feed-advance var(--portrait-feed-advance-duration) var(--portrait-feed-advance-ease) forwards,
    portrait-feed-edge-fade-out var(--portrait-feed-advance-duration) var(--portrait-feed-advance-ease) forwards;
}

.session-portrait-feed-below.is-advancing > .calc-feed-fade-item:first-child {
  animation: portrait-feed-edge-fade-out var(--portrait-feed-advance-duration) var(--portrait-feed-advance-ease) forwards;
}

.session-portrait-feed-above {
  justify-content: flex-end;
  z-index: 1;
}

.session-portrait-feed-below {
  justify-content: flex-start;
  z-index: 0;
}

.session-portrait-feed-active {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  align-self: stretch;
  box-sizing: border-box;
  padding-right: var(--portrait-rail-reserve, 44px);
}

.session-portrait-active-current {
  position: relative;
  z-index: 3;
}

.session-portrait-feed-active.is-advancing .session-portrait-active-current {
  z-index: 4;
}

.session-portrait-active-preview-back {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  right: var(--portrait-rail-reserve, 44px);
  bottom: var(--portrait-active-preview-start-bottom, 15px);
  z-index: 1;
  pointer-events: none;
  opacity: 0.92;
  will-change: transform, opacity;
}

.session-portrait-feedbg.is-advance-settled .session-portrait-feed-above,
.session-portrait-feedbg.is-advance-settled .session-portrait-feed-below,
.session-portrait-feedbg.is-advance-settled .session-portrait-active-preview-back {
  animation: none;
  transform: none;
  will-change: auto;
}

.session-portrait-feedbg.is-advance-settled .session-portrait-feed-above > .calc-feed-fade-item:last-child {
  animation: portrait-feed-above-in 0.24s ease forwards;
}

.question-page-feed {
  --portrait-rail-reserve: 50px;
}

.question-page-feed .session-portrait-feed-active .horizontal-calc-card.is-inline-hw,
.question-page-feed .session-portrait-feed-active .session-problem-card {
  width: 100%;
  max-width: none;
  border-radius: 0 22px 22px 0;
  padding: 22px max(12px, env(safe-area-inset-right)) 22px max(16px, env(safe-area-inset-left));
  box-shadow: 0 10px 26px rgba(var(--color-text-rgb), 0.10);
  background: var(--color-surface);
}

.question-page-feed .session-portrait-feed-active .vertical-calc-card.session-problem-card {
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
}

.session-portrait-btnbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  padding: 30px max(12px, env(safe-area-inset-left)) max(16px, calc(env(safe-area-inset-bottom) + 10px)) max(12px, env(safe-area-inset-right));
  background: linear-gradient(0deg, var(--color-bg-quiz) 0%, var(--color-bg-quiz) 18%, rgba(255, 247, 238, 0) 100%);
  pointer-events: none;
}

.session-feed-shell.has-portrait-btnbar {
  --portrait-btnbar-reserve: 118px;
  --portrait-feed-fade: calc(var(--portrait-btnbar-reserve) + 72px);
}

.session-feed-shell.has-portrait-btnbar .session-portrait-feedbg {
  padding-bottom: var(--portrait-btnbar-reserve);
  box-sizing: border-box;
}

.session-feed-shell.has-portrait-btnbar .session-portrait-feed-below {
  margin-bottom: calc(-1 * var(--portrait-btnbar-reserve));
  overflow: visible;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--portrait-feed-fade)),
    transparent calc(100% - 12px)
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--portrait-feed-fade)),
    transparent calc(100% - 12px)
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.session-feed-shell.has-portrait-btnbar .session-portrait-main::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--portrait-feed-fade);
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(255, 247, 238, 0) 0%,
    var(--color-bg-quiz) 100%
  );
}

.session-feed-shell.has-portrait-btnbar .session-portrait-rail {
  bottom: calc(var(--portrait-btnbar-reserve) + 18px);
}

.session-portrait-btnbar .session-action-bar {
  pointer-events: auto;
  padding: 0;
  background: none;
}

.session-portrait-btnbar .remainder-input {
  pointer-events: auto;
}

@media (max-height: 700px) {
  .session-portrait-btnbar {
    padding-top: 24px;
    padding-bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
  }
}

.session-problem-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  flex-shrink: 0;
  background: var(--color-surface);
  border-radius: 0 22px 22px 0;
  padding: 22px 16px 24px;
  box-shadow: 0 10px 26px rgba(var(--color-text-rgb), 0.10);
}

.session-card-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.session-card-content.canvas-equation-vertical {
  flex-direction: column;
}

.session-card-content.canvas-equation-sequence {
  width: 100%;
}

.vertical-calc-card,
.horizontal-calc-card {
  /* shared shell: .session-problem-card */
}

@media (orientation: landscape) and (min-height: 420px) {
  .question-page-feed .session-portrait-feed-above,
  .question-page-feed .session-portrait-feed-below {
    gap: 30px;
  }

  .question-page-feed .session-portrait-feedbg {
    --portrait-feed-row-gap: 40px;
    row-gap: var(--portrait-feed-row-gap);
  }

  .question-page-feed .session-portrait-rail {
    top: 64px;
    bottom: 0;
  }

  .question-page-feed .session-portrait-topbar {
    min-height: 44px;
    padding-bottom: 20px;
  }

  .question-page-feed .session-portrait-quit {
    top: max(6px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 16px;
  }

  .question-page-feed .session-portrait-step-label {
    top: max(6px, env(safe-area-inset-top));
    left: 56px;
    right: 56px;
    height: 36px;
  }
}

.session-portrait-rail {
  top: 94px;
  bottom: 18px;
  right: 6px;
}

.calc-feed-fade-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  font-weight: 800;
  font-size: 34px;
  color: var(--color-text-mute);
  flex-shrink: 0;
  line-height: 1;
}

.calc-feed-fade-item .problem-count.is-feed-preview {
  gap: 6px;
}

.calc-feed-fade-item .problem-count.is-feed-preview .problem-count-icons {
  gap: 4px 6px;
  max-width: 200px;
}

.calc-feed-fade-item .problem-count.is-feed-preview .problem-count-icon {
  font-size: 22px;
  opacity: 0.55;
  filter: grayscale(1);
}

.calc-feed-eq-fade {
  gap: 9px;
}

.calc-feed-eq-fade .calc-feed-eq-sign {
  color: var(--color-text-mute);
}

.calc-feed-qmark-fade {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 700;
  flex-shrink: 0;
}

.calc-feed-answer-fade {
  font-weight: 700;
}

.calc-feed-answer {
  color: var(--color-primary-dark);
  font-weight: 800;
}

.calc-feed-eq {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
}

.calc-feed-num { white-space: nowrap; }
.calc-feed-op { color: #FF8A65; }
.calc-feed-eq-fade .calc-feed-op { color: #E7C3B4; }
.calc-feed-eq-sign { color: var(--color-text-sub); }

.calc-card-stack {
  position: relative;
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
}

.calc-candidates-attach {
  position: absolute;
  top: calc(100% + 12px);
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 16px;
  border-radius: 22px;
  background: var(--color-surface);
  box-shadow: 0 12px 30px rgba(var(--color-text-rgb), 0.16);
  pointer-events: auto;
  animation: candidatePop 0.18s ease-out;
}

.calc-candidates-attach::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 20px;
  height: 20px;
  background: var(--color-surface);
  border-radius: 4px;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: -3px -3px 8px rgba(var(--color-text-rgb), 0.06);
}

.calc-candidates-status {
  position: relative;
  z-index: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text-sub);
}

@keyframes candidatePop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.calc-candidates-del {
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  font-weight: 800;
  font-size: 13px;
  color: var(--color-coral-dark);
  background: var(--color-coral-soft);
  padding: 8px 22px;
  border-radius: 999px;
}

.calc-candidates-del:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 380px) {
  .calc-candidates-attach {
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    padding: 8px 8px 10px;
    border-radius: 18px;
  }

  .calc-candidates-attach .candidate-chips {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .calc-candidates-attach .candidate-chips-label {
    font-size: 11px;
    white-space: nowrap;
  }

  .calc-candidates-attach .candidate-chip {
    min-width: 54px;
    height: 44px;
    border-radius: 12px;
    font-size: 22px;
  }

  .calc-candidates-attach .calc-candidates-del {
    flex-shrink: 0;
    padding: 7px 12px;
    font-size: 12px;
    white-space: nowrap;
  }
}

/* --- Choice options as a card-attached footer --- */
.choice-attach-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.choice-attach-btn {
  flex: 1 1 auto;
  min-width: 96px;
  min-height: 84px;
  padding: 16px 18px;
  font-size: clamp(1.75rem, 7.5vw, 2.25rem);
  font-weight: 800;
  color: var(--color-text);
  border: 3px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: 0 4px 0 rgba(var(--color-text-rgb), .06);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.08s, box-shadow 0.08s, border-color 0.15s;
}

.choice-attach-btn:active:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(var(--color-text-rgb), .06);
}

.choice-attach-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 380px) {
  .choice-candidates-attach {
    flex-direction: column;
    padding: 12px 12px 14px;
    border-radius: 20px;
  }

  .choice-attach-btn {
    min-width: 84px;
    min-height: 76px;
    padding: 14px 14px;
  }
}

.vertical-calc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  flex-shrink: 0;
  background: var(--color-surface);
  border-radius: 0 22px 22px 0;
  padding: 22px max(8px, env(safe-area-inset-right)) 24px max(8px, env(safe-area-inset-left));
  box-shadow: 0 10px 26px rgba(var(--color-text-rgb), 0.10);
  --vc-num-size: 66px;
  --vc-op-col: 56px;
  --vc-col-width: 120px;
  --vc-cell-height: 140px;
  --vc-col-gap: 8px;
  --vc-carry-size: 30px;
  --vc-answer-size: 78px;
  --vc-pen-size: 25px;
  --vc-cols: 2;
}

.vertical-calc-grid {
  display: grid;
  justify-items: center;
  align-items: center;
  column-gap: var(--vc-col-gap);
  row-gap: 5px;
  grid-template-columns: var(--vc-op-col) repeat(var(--vc-cols), var(--vc-col-width));
}

.vertical-calc-digit,
.vertical-calc-op {
  font-weight: 800;
  line-height: 1;
  font-size: var(--vc-num-size);
}

.vertical-calc-op { color: var(--color-coral); }

.vertical-calc-carry {
  width: var(--vc-carry-size);
  height: var(--vc-carry-size);
  border-radius: 999px;
  background: #FFEFE7;
  color: var(--color-coral-dark);
  font-size: calc(var(--vc-carry-size) * 0.53);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vertical-calc-line {
  grid-column: 1 / -1;
  height: 0;
  border-top: 4px solid var(--color-text);
  width: 100%;
  margin: 4px 0;
}

.vertical-acell {
  width: var(--vc-col-width);
  height: var(--vc-cell-height);
  border-radius: 15px;
  border: 3px dashed #C9E9DA;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--color-text);
}

.vertical-acell.is-active {
  border-style: solid;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(70, 180, 138, 0.16);
  animation: cellglow 2.4s ease-in-out infinite;
}

.vertical-acell.is-done {
  border-style: solid;
  border-color: #D7EADF;
  background: #F4FBF7;
}

.vertical-acell.is-pending {
  border-style: dashed;
  border-color: #C9E9DA;
  background: transparent;
}

.vertical-acell-pen {
  position: absolute;
  left: calc(var(--vc-pen-size) * 0.72);
  top: calc(var(--vc-pen-size) * 0.8);
  font-size: var(--vc-pen-size);
}

.vertical-acell-value {
  font-size: var(--vc-answer-size);
  font-weight: 800;
  line-height: 1;
}

.horizontal-calc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  flex-shrink: 0;
  background: var(--color-surface);
  border-radius: 0 22px 22px 0;
  padding: 24px 16px 22px;
  box-shadow: 0 10px 26px rgba(var(--color-text-rgb), 0.10);
}

.horizontal-calc-card.is-inline-hw {
  --hc-num-size: 48px;
  --hc-op-size: 36px;
  --hc-eq-size: 36px;
  --hc-gap: 8px;
  --hc-hw-width: 175px;
  --hc-hw-height: 214px;
  --hc-hw-grid: 42px;
  gap: 12px;
  padding: 22px 12px 20px;
}

/* --- 割り算（あまりあり）: カード内・式の下の手書き入力欄 --- */
.remainder-calc-card {
  --rc-hw-size: 132px;
  --rc-hw-grid: 28px;
  gap: 18px;
  padding: 22px 14px 22px;
}

.remainder-calc-fields {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  width: 100%;
  min-width: 0;
}

.remainder-calc-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.remainder-calc-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-sub);
  transition: color 0.16s ease-out;
}

.remainder-calc-field.is-active .remainder-calc-label {
  color: var(--color-primary);
}

.remainder-calc-field .session-hwbox.is-portrait {
  width: var(--rc-hw-size, 132px);
  height: var(--rc-hw-size, 132px);
  background-size: var(--rc-hw-grid, 28px) var(--rc-hw-grid, 28px);
  border-color: #C9E9DA;
  border-style: dashed;
  animation: none;
}

.remainder-calc-field.is-active .session-hwbox.is-portrait {
  border-color: var(--color-primary);
  border-style: solid;
  animation: hwglow 2.4s ease-in-out infinite;
}

.remainder-calc-field .session-hwbox.is-portrait .session-hwbox-value {
  --session-hwbox-value-size: clamp(54px, calc(var(--rc-hw-size, 132px) * 0.45), 60px);
}

.horizontal-calc-card.is-inline-hw.is-stacked {
  --hc-hw-width: 200px;
  --hc-hw-height: 130px;
}

.horizontal-calc-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.horizontal-calc-row.is-inline-hw {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 12px;
}

.horizontal-calc-row.is-inline-hw.is-stacked {
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.horizontal-calc-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  line-height: 1;
}

.horizontal-calc-row.is-inline-hw .horizontal-calc-equation {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  gap: var(--hc-gap, 8px);
  min-width: 0;
}

.horizontal-calc-row.is-inline-hw.is-stacked .horizontal-calc-equation {
  width: 100%;
}

.horizontal-calc-row.is-inline-hw.is-stacked .horizontal-calc-answer {
  min-width: calc(var(--hc-num-size, 48px) * 0.72 + 20px);
  min-height: calc(var(--hc-num-size, 48px) * 1.1);
  padding: 0 10px;
  border-width: 3px;
  border-radius: 12px;
}

.horizontal-calc-row.is-inline-hw.is-stacked .horizontal-calc-answer-placeholder {
  font-size: calc(var(--hc-num-size, 48px) * 0.85);
}

.horizontal-calc-card.is-inline-hw .horizontal-calc-num {
  font-size: var(--hc-num-size, 48px);
}

.horizontal-calc-card.is-inline-hw .horizontal-calc-op,
.horizontal-calc-card.is-inline-hw .horizontal-calc-eq {
  font-size: var(--hc-op-size, 36px);
}

.horizontal-calc-row.is-inline-hw .session-hwbox.is-portrait {
  width: var(--hc-hw-width, 175px);
  height: var(--hc-hw-height, 214px);
  border-radius: 18px;
  background-size: var(--hc-hw-grid, 42px) var(--hc-hw-grid, 42px);
  flex-shrink: 0;
}

.horizontal-calc-row.is-inline-hw.is-stacked .session-hwbox.is-portrait {
  width: var(--hc-hw-width, 200px);
  height: var(--hc-hw-height, 130px);
}

.horizontal-calc-card.is-inline-hw .session-hwbox.is-portrait .session-hwbox-value {
  --session-hwbox-value-size: clamp(58px, calc(var(--hc-hw-height, 214px) * 0.32), 66px);
}

.horizontal-calc-card.is-inline-hw .session-hwbox-pen {
  font-size: calc(var(--hc-num-size, 48px) * 0.34);
}

.horizontal-digit-box {
  width: min(100%, var(--horizontal-digit-box-width, 204px));
  height: var(--hc-hw-height, 130px);
  border-radius: 18px;
  border: 3px solid var(--color-primary);
  position: relative;
  overflow: hidden;
  animation: hwglow 2.4s ease-in-out infinite;
  background-size: var(--hc-hw-grid, 30px) var(--hc-hw-grid, 30px);
  display: grid;
  grid-template-columns: repeat(var(--horizontal-digit-count, 2), minmax(0, 1fr));
  gap: 10px;
  padding: 6px;
  flex-shrink: 0;
  transition: border-color 0.16s ease-out, background-color 0.16s ease-out, box-shadow 0.16s ease-out;
}

.horizontal-digit-slot {
  appearance: none;
  border: 2px dashed #C9E9DA;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  touch-action: manipulation;
}

.horizontal-digit-slot.is-active {
  border-style: solid;
  border-color: var(--color-primary);
  background: rgba(244, 251, 247, 0.82);
  box-shadow: 0 0 0 4px rgba(70, 180, 138, 0.16);
}

.horizontal-digit-slot.is-filled {
  border-style: solid;
  border-color: #D7EADF;
  background: rgba(244, 251, 247, 0.92);
}

.horizontal-digit-slot[aria-disabled="true"] {
  cursor: default;
}

.horizontal-digit-slot-value {
  position: relative;
  z-index: 2;
  font-size: min(52px, calc(var(--hc-hw-height, 130px) * 0.42));
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.horizontal-digit-slot-cursor {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  animation: digit-blink 1s step-end infinite;
  pointer-events: none;
  z-index: 2;
}

.horizontal-digit-slot-pen {
  position: absolute;
  left: 10px;
  top: 9px;
  font-size: 20px;
}

.horizontal-digit-slot .digit-cell-canvas {
  z-index: 1;
}

@media (max-width: 360px) {
  .horizontal-digit-box {
    width: min(100%, 258px);
    gap: 6px;
    padding: 6px;
  }
  .remainder-calc-card {
    --rc-hw-size: 110px;
    --rc-hw-grid: 24px;
  }
  .remainder-calc-fields {
    gap: 12px;
  }
}

.horizontal-calc-num {
  font-size: 48px;
  font-weight: 800;
  color: var(--color-text);
  white-space: nowrap;
}

.horizontal-calc-op {
  font-size: 36px;
  font-weight: 800;
  color: var(--color-coral);
}

.horizontal-calc-eq {
  font-size: 36px;
  font-weight: 800;
  color: var(--color-text-sub);
}

.horizontal-calc-answer {
  min-width: calc(var(--answer-digits, 1) * 0.62em + 28px);
  min-height: 64px;
  border-radius: 16px;
  border: 4px dashed #9BE3C6;
  background: rgba(243, 251, 247, 0.82);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
}

.horizontal-calc-answer.is-readonly {
  width: 210px;
  height: 230px;
  border-style: solid;
  border-color: var(--color-primary);
  background-size: 42px 42px;
  animation: hwglow 2.4s ease-in-out infinite;
}

.horizontal-calc-answer-value {
  font-size: 54px;
  font-weight: 800;
  color: #2F8E6B;
  line-height: 1;
}

.horizontal-calc-answer-placeholder {
  font-size: 54px;
  font-weight: 800;
  color: #CDE9DC;
  line-height: 1;
}

.session-hwbox {
  width: 210px;
  height: 230px;
  border-radius: 20px;
  border: 4px solid var(--color-primary);
  position: relative;
  overflow: hidden;
  animation: hwglow 2.4s ease-in-out infinite;
  background-size: 42px 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.16s ease-out, background-color 0.16s ease-out, box-shadow 0.16s ease-out;
}

.session-hwbox.is-portrait {
  width: 168px;
  height: 148px;
  border-radius: 18px;
  border-width: 3px;
  background-size: 34px 34px;
}

.session-hwbox.is-compact {
  width: 118px;
  height: 128px;
  border-width: 3px;
  background-size: 26px 26px;
}

.session-hwbox-value {
  position: relative;
  z-index: 2;
  font-size: var(--session-hwbox-value-size, 64px);
  font-weight: 800;
  line-height: 1;
  color: var(--color-text);
}

.session-hwbox.is-portrait .session-hwbox-value {
  --session-hwbox-value-size: 60px;
}

.session-hwbox.is-compact .session-hwbox-value {
  --session-hwbox-value-size: 56px;
}

.session-hwbox-pen {
  position: absolute;
  left: 24px;
  top: 26px;
  font-size: 32px;
}

.session-hwbox.is-portrait .session-hwbox-pen {
  left: 16px;
  top: 16px;
  font-size: 24px;
}

.session-hwbox.is-compact .session-hwbox-pen {
  left: 13px;
  top: 13px;
  font-size: 20px;
}

@keyframes cellglow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(70, 180, 138, 0.14); }
  50% { box-shadow: 0 0 0 7px rgba(70, 180, 138, 0.22); }
}

.hw-pen-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.62em;
  height: 1.62em;
  border-radius: 999px;
  background: radial-gradient(120% 120% at 32% 26%, #FFFFFF 0%, #ECF8F1 48%, #D8F0E5 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 2px 6px rgba(70, 180, 138, 0.24),
    inset 0 1px 2px rgba(255, 255, 255, 0.9);
  animation: penbob 2.2s ease-in-out infinite;
  transform-origin: 60% 40%;
  pointer-events: none;
  z-index: 2;
}

.hw-pen-hint svg {
  width: 0.94em;
  height: 0.94em;
  display: block;
  filter: drop-shadow(0 1px 0.5px rgba(70, 120, 100, 0.18));
}

/* 書き始めた瞬間にヒントを消す（後続の兄弟に置かれた HwPenHint を隠す） */
.digit-cell-canvas.is-drawing ~ .hw-pen-hint {
  display: none;
}

@keyframes penbob {
  0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); }
  50% { transform: translateY(-2px) rotate(5deg) scale(1.06); }
}

.gridbg {
  background-color: #FBFEFC;
  background-image:
    linear-gradient(#E4F0EA 1px, transparent 1px),
    linear-gradient(90deg, #E4F0EA 1px, transparent 1px);
  background-size: 26px 26px;
}

.candidate-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.candidate-chips-label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--color-text-sub);
}

.candidate-chip {
  min-width: 54px;
  height: 58px;
  border-radius: 15px;
  background: var(--color-surface);
  border: 2px solid #E7DECF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
  color: var(--color-text);
  -webkit-text-fill-color: var(--color-text);
  box-shadow: 0 3px 0 #E7DECF;
  cursor: pointer;
}

.candidate-chip.is-top {
  border-color: var(--color-primary);
  background: #EAF6F0;
  box-shadow: 0 3px 0 #BFE6D5;
}

.session-action-bar {
  position: relative;
  z-index: 4;
  padding: 10px 16px max(12px, env(safe-area-inset-bottom));
  flex-shrink: 0;
}

.session-action-bar.is-portrait {
  padding: 0;
}

.session-action-bar.is-keypad {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calc-feed-qmark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 2px dashed #C9E9DA;
  color: #9BE3C6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
}

/* フィード上下プレビュー: 未回答の ? / 回答済みの数字は控えめに */
.calc-feed-eq-fade .calc-feed-qmark {
  border: 2px dashed #EBE7E1;
  color: #D8D3CB;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.calc-feed-eq-fade .calc-feed-answer {
  color: #C5C0B8;
}

@keyframes hwglow {
  0%, 100% { box-shadow: 0 0 0 5px rgba(70, 180, 138, 0.13); }
  50% { box-shadow: 0 0 0 9px rgba(70, 180, 138, 0.2); }
}

.candidate-chips.is-compact .candidate-chip {
  min-width: 42px;
  height: 44px;
  font-size: 22px;
  border-radius: 12px;
}

.candidate-chips.is-compact .candidate-chips-label {
  font-size: 11px;
}

.session-overlay-feedback {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
  /* 全面ベタ塗りは避け、下部だけをフェード。上部の active 問題は見えるまま残す */
  background: linear-gradient(
    to top,
    rgba(255, 247, 238, 0.97) 0%,
    rgba(255, 247, 238, 0.86) 18%,
    rgba(255, 247, 238, 0) 42%
  );
}

/* オーバーレイ表示中はキーパッドを隠すが、高さ(reserve)は変えない。
   height を 0 にすると ResizeObserver が reserve を書き換えてフィードが再レイアウトされ、
   active カードが上下にジャンプしてかくつくため、opacity のみで視覚的に隠す。 */
.question-page-feed:has(.session-overlay-feedback) .session-portrait-btnbar {
  opacity: 0;
  pointer-events: none;
}


@media (max-width: 480px) {
  .vertical-acell-pen { left: calc(var(--vc-pen-size) * 0.52); top: calc(var(--vc-pen-size) * 0.52); }
  .calc-feed-fade-item { font-size: 30px; }
  .horizontal-calc-card:not(.is-inline-hw) .horizontal-calc-num { font-size: 40px; }
  .horizontal-calc-card:not(.is-inline-hw) .horizontal-calc-op,
  .horizontal-calc-card:not(.is-inline-hw) .horizontal-calc-eq { font-size: 30px; }
  .horizontal-calc-card:not(.is-inline-hw) .horizontal-calc-answer-value,
  .horizontal-calc-card:not(.is-inline-hw) .horizontal-calc-answer-placeholder { font-size: 44px; }
}

/* --- 確認ダイアログ（セッション退出など） --- */
.confirm-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 247, 238, 0.88);
}

.confirm-dialog {
  width: min(320px, calc(100% - 48px));
  padding: 28px 24px 24px;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: 0 12px 32px rgba(var(--color-text-rgb), 0.12);
  text-align: center;
}

.confirm-dialog-title {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--color-text);
}

.confirm-dialog-message {
  margin-top: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-sub);
}

.confirm-dialog-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.confirm-dialog-continue {
  max-width: none;
  width: 100%;
  min-height: 52px;
  font-size: 1.125rem;
}

.confirm-dialog-quit {
  max-width: none;
  width: 100%;
  min-height: 52px;
  font-size: 1rem;
  line-height: 1.35;
}