:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #171815;
  background: #f4f2ec;
  font-synthesis: none;
  --ink: #171815;
  --muted: #77786f;
  --line: #d9d7cf;
  --paper: #fffef9;
  --accent: #1e4d3d;
  --danger: #9f342c;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; overscroll-behavior: none; }
body { min-width: 320px; min-height: 100svh; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; touch-action: manipulation; }
#app { min-height: 100svh; }
.game-shell { width: min(100%, 480px); min-height: 100svh; margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; }
.eyebrow, .level-name, .score span, .score strong { margin: 0; }
.eyebrow { font-size: 11px; letter-spacing: .2em; font-weight: 760; color: var(--accent); }
.level-name { margin-top: 3px; font-size: 20px; font-weight: 690; }
.score { text-align: right; display: grid; grid-template-columns: auto auto; gap: 7px; align-items: baseline; }
.score span { font-size: 12px; color: var(--muted); }
.score strong { font-size: 24px; }
.timer { margin: 20px 0 14px; font-size: 40px; font-weight: 580; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.question-card { flex: 1; min-height: 440px; padding: 25px 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 18px; box-shadow: 0 10px 35px rgba(27, 28, 23, .055); }
.answer-count { margin: 0; color: var(--muted); font-size: 14px; }
.answer-count strong { color: var(--ink); }
.symbol-row { width: 100%; display: flex; justify-content: center; gap: clamp(20px, 8vw, 36px); font-size: 32px; line-height: 1; }
.path-line { width: 100%; display: flex; align-items: center; gap: 10px; color: #9a9a91; }
.path-line span { height: 1px; flex: 1; background: var(--line); }
.path-line i { font-size: 9px; font-style: normal; letter-spacing: .18em; }
.options { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.options button { min-height: 60px; border: 1.5px solid #aaa99f; border-radius: 14px; color: var(--ink); background: transparent; font-size: 18px; font-weight: 720; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.options button:active { transform: scale(.97); }
.options button.selected { border-color: var(--ink); background: var(--ink); color: white; box-shadow: 0 0 0 3px rgba(30, 77, 61, .14); }
.options button:disabled { opacity: .35; }
.question-options { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fixed-path { display: flex; align-items: center; gap: 10px; }
.fixed-path span { min-width: 76px; height: 48px; padding-left: .12em; border: 1px solid var(--line); border-radius: 12px; display: grid; place-items: center; background: #f1f0ea; font-size: 16px; font-weight: 750; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.fixed-path b, .tier-arrow { color: #aaa99f; font-weight: 500; }
.tier-block { width: 100%; display: grid; gap: 7px; }
.tier-label { font-size: 10px; color: var(--muted); letter-spacing: .14em; }
.tier-arrow { height: 12px; line-height: 12px; }
.pair-status { width: 100%; min-height: 32px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 11px; }
.pair-status > div { display: flex; gap: 6px; }
.pair-status.empty { border: 1px dashed var(--line); border-radius: 10px; }
.selection-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; color: white; background: var(--accent); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.selection-chip.pending { color: var(--ink); background: #e4e2db; }
.start-panel { width: 100%; min-height: 78px; margin-top: 14px; border: 0; border-radius: 18px; background: var(--ink); color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.start-panel span { font-size: 16px; font-weight: 670; }
.start-panel small { font-size: 11px; color: #c8c8bf; }
.game-hint { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: 11px; }
.overlay, .feedback { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; }
.overlay { background: rgba(20, 21, 18, .58); backdrop-filter: blur(5px); }
.modal-card { width: min(100%, 360px); padding: 28px; border-radius: 24px; background: var(--paper); box-shadow: 0 30px 80px rgba(0, 0, 0, .2); }
.modal-card h2 { margin: 8px 0; font-size: 30px; }
.modal-card > p:not(.eyebrow) { margin: 0 0 24px; color: var(--muted); }
.primary-button, .secondary-button, .continue-panel { width: 100%; min-height: 54px; border-radius: 14px; font-weight: 700; }
.primary-button { border: 1px solid var(--ink); background: var(--ink); color: white; }
.secondary-button { margin-top: 9px; border: 1px solid var(--line); background: transparent; color: var(--ink); }
.feedback { pointer-events: none; background: rgba(244, 242, 236, .88); }
.feedback span { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: white; font-size: 52px; box-shadow: 0 16px 40px rgba(30, 77, 61, .22); }
.feedback p { margin: 12px 0 0; text-align: center; font-weight: 750; }
.review-shell { gap: 20px; }
.review-title h1, .summary-heading h1 { margin: 7px 0 5px; font-size: 34px; letter-spacing: -.04em; }
.review-title > p:last-child, .summary-heading > p:last-child { margin: 0; color: var(--muted); }
.danger-text, .record-wrong { color: var(--danger); }
.review-answers { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.review-answers small { display: block; margin-bottom: 8px; color: var(--muted); }
.answer-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.answer-tags span { min-height: 34px; padding: 0 11px; border-radius: 10px; display: inline-flex; align-items: center; font-weight: 750; }
.answer-tags.wrong span { color: var(--danger); background: #f8e7e3; }
.answer-tags.right span { color: var(--accent); background: #e5eee9; }
.trace-list { display: grid; gap: 10px; }
.trace-card { padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.trace-heading { display: flex; align-items: baseline; gap: 10px; }
.trace-heading strong { min-width: 72px; color: var(--accent); font-size: 12px; }
.trace-heading span { color: var(--muted); font-size: 11px; }
.trace-flow { margin-top: 15px; display: flex; align-items: center; justify-content: center; gap: 7px; overflow-x: auto; }
.trace-flow .symbol-row { width: auto; flex: 0 0 auto; gap: 4px; font-size: 15px; }
.trace-flow b { display: flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 500; }
.trace-flow small { padding: 3px 5px; border-radius: 5px; background: #eceae4; color: var(--ink); }
.continue-panel { margin-top: auto; border: 0; background: var(--ink); color: white; }
.summary-shell { gap: 22px; }
.summary-heading { padding-top: 8px; }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.summary-grid > div { min-height: 84px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); display: flex; flex-direction: column; justify-content: space-between; }
.summary-grid .hero-stat { background: var(--ink); color: white; }
.summary-grid span { color: var(--muted); font-size: 11px; }
.summary-grid .hero-stat span { color: #c6c6bd; }
.summary-grid strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.record-list { min-height: 0; padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.record-head { display: flex; align-items: baseline; justify-content: space-between; }
.record-head h2 { margin: 0 0 12px; font-size: 16px; }
.record-head span { color: var(--muted); font-size: 12px; }
.records { max-height: 210px; overflow-y: auto; }
.record-row { min-height: 42px; display: grid; grid-template-columns: 45px 1fr 1fr 24px; align-items: center; border-top: 1px solid #ebe9e2; font-size: 13px; }
.record-row span { color: var(--muted); }
.record-row strong:last-child { font-size: 18px; }
.record-correct { color: var(--accent); }
.restart-button { margin-top: auto; }
.debug { margin-top: 12px; padding: 12px; border: 1px dashed #aaa99f; border-radius: 12px; background: #eeece5; font-size: 10px; user-select: text; -webkit-user-select: text; }
.debug summary { min-height: 28px; cursor: pointer; font-weight: 800; }
.debug p { line-height: 1.6; }
.debug-grid { display: grid; gap: 3px; }
.debug code { white-space: normal; }
@media (min-width: 700px) { body { padding: 24px 0; } .game-shell { min-height: min(840px, calc(100svh - 48px)); border: 1px solid var(--line); border-radius: 30px; background: #f8f7f2; } }
@media (max-height: 700px) { .timer { font-size: 33px; margin: 10px 0; } .question-card { min-height: 360px; padding-block: 18px; gap: 10px; } .game-shell { padding-top: max(14px, env(safe-area-inset-top)); } .options button { min-height: 50px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }