.tape-trainer-page { padding-top: 46px; }
.tape-trainer-intro { max-width: 920px; }
.tape-trainer-intro .lede { max-width: 880px; }
.tape-trainer-intro h1 { max-width: 760px; }

.tape-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0 12px;
}
.tape-level {
  min-height: 106px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .1s ease, border-color .1s ease, background .1s ease;
}
.tape-level:hover:not(:disabled) { transform: translateY(-1px); border-color: #aab2a3; }
.tape-level.is-selected { border-color: #9dad2f; background: #f3f7d8; box-shadow: inset 0 0 0 1px #dce78c; }
.tape-level:disabled { cursor: default; opacity: .62; }
.tape-level span { display: block; color: #687064; font-size: .6rem; font-weight: 900; letter-spacing: .085em; }
.tape-level strong { display: block; margin-top: 5px; font-size: .94rem; }
.tape-level small { display: block; margin-top: 3px; color: var(--muted); font-size: .7rem; line-height: 1.3; }

.tape-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 24px;
}
.tape-rules span {
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f7f8f3;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.42;
}
.tape-rules strong { display: block; margin-bottom: 4px; color: var(--text); font-size: .81rem; }

.tape-trainer-shell {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(28, 33, 26, .07);
}
.tape-trainer-topbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
  background: #f8f9f4;
}
.tape-stat,
.tape-timer-stat {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  border-right: 1px solid var(--line);
}
.tape-stat:last-child { border-right: 0; }
.tape-stat span,
.tape-timer-stat span { color: var(--muted); font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.tape-stat strong,
.tape-timer-stat strong { margin-top: 2px; font-size: 1.55rem; letter-spacing: -.045em; }
.tape-timer-stat em { margin-top: -2px; color: var(--muted); font-size: .58rem; font-style: normal; }
.tape-timer-track { height: 5px; background: #ecefe7; }
.tape-timer-track span { display: block; width: 100%; height: 100%; background: var(--dark); transform-origin: left center; }

.tape-game-stage { position: relative; min-height: 600px; }
.tape-game-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .45fr); min-width: 0; }
.tape-visual-panel,
.tape-answer-panel { min-width: 0; }
.tape-visual-panel { padding: 20px; border-right: 1px solid var(--line); background: #fbfcf8; }
.tape-answer-panel { padding: 20px; }
.tape-question-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.tape-question-head h2 { margin: 3px 0 0; font-size: 1.28rem; }
.tape-round-tools { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.tape-reset { min-height: 34px; padding: 6px 9px; font-size: .68rem; }

.tape-canvas-wrap {
  overflow: hidden;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.tape-svg { display: block; width: 100%; height: auto; }
.tape-plan-note { margin: 10px 2px 0; color: var(--muted); font-size: .69rem; line-height: 1.45; }

.tape-svg .tape-bg { fill: #fff; }
.tape-svg .tape-blade-shadow { fill: rgba(28, 33, 26, .08); }
.tape-svg .tape-blade { fill: #f1df54; stroke: #1c211a; stroke-width: 3; stroke-linejoin: round; }
.tape-svg .tape-blade-edge { stroke: #c6ae20; stroke-width: 2; }
.tape-svg .tape-tick { stroke: #1c211a; stroke-linecap: square; }
.tape-svg .tape-inch-number,
.tape-svg .tape-read-label {
  fill: #1c211a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.tape-svg .tape-inch-number { font-size: 23px; font-weight: 900; text-anchor: middle; }
.tape-svg .tape-read-label { font-size: 13px; font-weight: 900; letter-spacing: .08em; text-anchor: middle; }
.tape-svg .tape-target-line { stroke: #8ea12a; stroke-width: 4; stroke-linecap: round; }
.tape-svg .tape-target-arrow { fill: #8ea12a; }
.tape-svg .tape-target-ring { fill: none; stroke: #8ea12a; stroke-width: 3; }
.tape-svg .tape-start-note { fill: #687064; font-size: 15px; font-weight: 760; text-anchor: middle; }

.tape-answer-display {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8f9f4;
  color: var(--text);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -.045em;
}
.tape-entry-hint { margin: 8px 2px 12px; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.tape-entry-pad.is-disabled { opacity: .44; pointer-events: none; }
.tape-pad-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 10px 1px 6px; }
.tape-pad-heading span { color: #687064; font-size: .58rem; font-weight: 900; letter-spacing: .08em; }
.tape-pad-heading small { color: var(--muted); font-size: .61rem; }
.tape-whole-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.tape-whole-pad button,
.tape-fraction-pad button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: .81rem;
  font-weight: 850;
  cursor: pointer;
}
.tape-whole-pad button:hover,
.tape-fraction-pad button:hover { border-color: #aeb7a6; background: #f7f8f3; }
.tape-whole-pad button[data-action] { color: #687064; font-size: .72rem; }
.tape-fraction-heading { margin-top: 12px; }
.tape-fraction-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tape-fraction-pad button { min-height: 39px; padding: 5px 3px; font-size: .73rem; }
.tape-fraction-pad button.is-selected { border-color: #9dad2f; background: #edf4b2; color: #29320e; box-shadow: inset 0 0 0 1px #d7e27b; }

.tape-feedback { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; font-size: .75rem; line-height: 1.4; }
.tape-feedback.hidden { display: none; }
.tape-feedback.is-correct { border-color: #d6e176; background: #edf4b2; color: #34410d; }
.tape-primary { width: 100%; min-height: 50px; margin-top: 14px; }

.tape-game-over {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(250, 251, 247, .96);
  backdrop-filter: blur(3px);
}
.tape-game-over.hidden { display: none; }
.tape-game-over-card {
  width: min(520px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(28, 33, 26, .14);
  text-align: center;
}
.tape-loss-visual,
.tape-time-visual { width: min(300px, 74vw); margin: 0 auto 8px; }
.tape-loss-visual.hidden,
.tape-time-visual.hidden { display: none; }
.tape-loss-visual img,
.tape-loss-visual svg,
.tape-time-visual svg { display: block; width: 100%; height: auto; }
 .tape-scrap-shadow { fill: #e2e5dc; }
.tape-board-main,
.tape-board-cutoff { fill: #d7b372; stroke: #5e4a2b; stroke-width: 3; }
.tape-board-cutoff { fill: #cda261; }
.tape-board-grain { fill: none; stroke: #9a7542; stroke-width: 3; stroke-linecap: round; opacity: .78; }
.tape-cut-line { fill: none; stroke: #8e3329; stroke-width: 4; stroke-dasharray: 7 5; }
.tape-scrap-stamp { fill: #8e3329; font-size: 13px; font-weight: 900; letter-spacing: .12em; text-anchor: middle; }
.tape-chip { fill: #e3c387; stroke: #8f6a38; stroke-width: 1.5; }
.tape-mini-blade { fill: #f1df54; stroke: #1c211a; stroke-width: 3; }
.tape-mini-ticks { fill: none; stroke: #1c211a; stroke-width: 3; }
.tape-clock-ring { fill: #fff; stroke: #8ea12a; stroke-width: 5; }
.tape-clock-hand { fill: none; stroke: #1c211a; stroke-width: 4; stroke-linecap: round; }
.tape-game-over-card h2 { margin: 5px 0 0; font-size: 1.7rem; letter-spacing: -.04em; }
.tape-game-over-message { margin: 5px 0 0; color: #4d5549; font-size: 1rem; font-weight: 780; }
.tape-game-over-detail { margin: 12px auto 0; max-width: 420px; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.tape-game-over-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px auto 0; max-width: 310px; }
.tape-game-over-stats span { padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: #f7f8f3; color: var(--muted); font-size: .7rem; }
.tape-game-over-stats strong { display: block; margin-top: 2px; color: var(--text); font-size: 1.25rem; }
.tape-restart { min-width: 210px; min-height: 48px; margin-top: 16px; }

.tape-level-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.tape-level-guide > div { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #f7f8f3; }
.tape-level-guide span { color: #687064; font-size: .58rem; font-weight: 900; letter-spacing: .08em; }
.tape-level-guide strong { display: block; margin-top: 5px; font-size: .84rem; }
.tape-level-guide p { margin: 4px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.4; }

@media (max-width: 920px) {
  .tape-game-grid { grid-template-columns: 1fr; }
  .tape-visual-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .tape-game-stage { min-height: 0; }
}

@media (max-width: 700px) {
  .tape-trainer-page { padding-top: 24px; }
  .tape-levels { gap: 7px; margin-top: 18px; }
  .tape-level { min-height: 92px; padding: 10px; }
  .tape-level span { font-size: .53rem; }
  .tape-level strong { font-size: .76rem; line-height: 1.2; }
  .tape-level small { font-size: .61rem; }
  .tape-rules { grid-template-columns: 1fr; gap: 7px; margin-bottom: 18px; }
  .tape-rules span { min-height: 0; padding: 10px 11px; font-size: .68rem; }
  .tape-trainer-shell { border-radius: 16px; }
  .tape-stat,
  .tape-timer-stat { min-height: 61px; padding: 7px 4px; }
  .tape-stat strong,
  .tape-timer-stat strong { font-size: 1.28rem; }
  .tape-visual-panel,
  .tape-answer-panel { padding: 12px; }
  .tape-question-head { align-items: center; gap: 8px; }
  .tape-question-head h2 { font-size: .98rem; line-height: 1.25; }
  .tape-round-tools { gap: 6px; font-size: .61rem; }
  .tape-round-tools > span { display: none; }
  .tape-reset { min-height: 31px; padding: 5px 7px; font-size: .61rem; }
  .tape-canvas-wrap { margin-top: 11px; border-radius: 12px; }
  .tape-plan-note { font-size: .62rem; }
  .tape-answer-display { min-height: 62px; font-size: 1.65rem; }
  .tape-whole-pad { gap: 6px; }
  .tape-whole-pad button { min-height: 40px; }
  .tape-fraction-pad { gap: 5px; }
  .tape-fraction-pad button { min-height: 37px; font-size: .67rem; }
  .tape-game-over { padding: 12px; align-items: flex-start; overflow-y: auto; }
  .tape-game-over-card { margin: 10px 0; padding: 18px 14px; border-radius: 16px; }
  .tape-loss-visual,
  .tape-time-visual { width: min(225px, 64vw); margin-bottom: 4px; }
  .tape-game-over-card h2 { font-size: 1.42rem; }
  .tape-game-over-message { font-size: .9rem; }
  .tape-level-guide { grid-template-columns: 1fr; gap: 7px; }
}

@media (max-width: 420px) {
  .tape-levels { grid-template-columns: 1fr; }
  .tape-level { min-height: 0; }
  .tape-level small { display: inline; margin-left: 4px; }
  .tape-fraction-pad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}