body { background: radial-gradient(ellipse at 85% 0%, #eae1f6, transparent 650px); }
.game-brand-mark { background: #eee2ff; color: #76508c; font-weight: 900; }
.reflex-card { max-width: 850px; margin: 0 auto; padding: clamp(16px, 3vw, 28px); }
.level-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 20px; }
.level-picker button { display: grid; gap: 4px; min-height: 60px; padding: 10px; border: 2px solid #e6e8e0; border-radius: 13px; background: #fafbf7; color: #43584e; }
.level-picker strong { font-size: 1rem; }
.level-picker small { color: #617568; font-size: .75rem; }
.level-picker button[aria-pressed="true"] { border-color: #a887bf; background: #f5ebff; color: #654575; }
.level-picker button:disabled { cursor: default; }
.challenge-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.score { background: #f0e8f8; }
.question-card { display: grid; gap: 8px; padding: clamp(16px, 3vw, 25px); border: 1px solid #d9e3d6; border-radius: 19px; background: #f5faf1; }
.rule-label { justify-self: center; padding: 8px 25px; border-radius: 30px; background: #dcebd3; color: #315b3c; font-size: clamp(1rem, 3vw, 1.2rem); font-weight: 900; letter-spacing: .12em; }
.question-card[data-opposite] { background: #f7f1fc; border-color: #ded0e9; }
.question-card[data-opposite] .rule-label { color: #654575; background: #e8daf4; }
.stimulus { position: relative; display: grid; place-items: center; min-height: 160px; }
.arrow { color: #315b3c; font: 900 148px/1 system-ui, sans-serif; }
.question-card[data-opposite] .arrow { color: #654575; }
.demo-help { margin: 0 0 10px; color: #53664f; text-align: center; line-height: 1.6; }
.answer-feedback { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 3px; color: #277b58; text-align: center; }
#feedback-symbol { font: 900 98px/.95 system-ui, sans-serif; }
#feedback-label { font-size: 1rem; }
.question-card[data-phase="feedback"] .arrow, .question-card[data-phase="finished"] .arrow { visibility: hidden; }
.question-card[data-wrong] { border-color: #ca8a76; background: #fff3ed; }
.question-card[data-wrong] .answer-feedback { color: #a44936; }
.question-card[data-phase="finished"] .answer-feedback { color: #76508c; }
.question-card[data-phase="finished"] #feedback-symbol { font-size: 80px; }
.time-row { display: flex; align-items: center; justify-content: space-between; color: #617060; font-size: .8rem; }
#timer { min-width: 55px; text-align: right; font-weight: 850; font-variant-numeric: tabular-nums; }
.time-track { height: 7px; border-radius: 9px; overflow: hidden; background: #e3e8de; }
#time-fill { display: block; height: 100%; width: 100%; background: #8f6aa7; transform-origin: left; }
.question-card[data-urgent] #time-fill { background: #bc503d; }
.direction-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 365px; margin: 16px auto 0; }
.direction-pad button { display: grid; place-items: center; gap: 1px; min-height: 76px; padding: 5px 12px 8px; border: 2px solid #cfdfcd; border-radius: 16px; background: #eef6e8; color: #34563a; touch-action: manipulation; }
.direction-pad button > span { font: 850 43px/1 system-ui, sans-serif; }
.direction-pad button > small { font-weight: 700; font-size: .7rem; }
.direction-pad [data-direction="up"] { grid-column: 2; }
.direction-pad [data-direction="left"] { grid-column: 1; grid-row: 2; }
.direction-pad [data-direction="down"] { grid-column: 2; grid-row: 2; }
.direction-pad [data-direction="right"] { grid-column: 3; grid-row: 2; }
.direction-pad button:hover:not(:disabled) { background: #dcebd3; border-color: #87ac7e; }
.direction-pad button:active:not(:disabled) { transform: translateY(2px); }
.direction-pad button:focus-visible { outline: 3px solid #9571ae; outline-offset: 3px; }
.direction-pad button:disabled { opacity: .45; }
.actions { display: flex; gap: 10px; justify-content: center; }
.message { text-align: center; min-height: 2.5em; }
.summary { padding: 20px; margin: 0 0 20px; border-radius: 16px; background: #f5effb; text-align: center; }
.summary h3 { margin: 0 0 18px; color: #654575; }
.result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.result-grid div { display: grid; gap: 5px; }
.result-grid strong { color: #654575; font-size: clamp(1.2rem, 4vw, 1.8rem); }
.result-grid span { font-size: .75rem; color: #6b6270; }
#result-errors { margin: 14px 0 0; font-size: .8rem; }
#save-status { text-align: center; }
#retry { display: block; margin: 10px auto 0; }
.rank-score { text-align: right; }
.rank-score strong { display: block; }
.rank-score small { display: block; font-weight: 500; line-height: 1.5; }
@media(max-width:480px){.game-ranking-list li{grid-template-columns:24px minmax(0,1fr);gap:8px 10px}.rank-score{grid-column:2;text-align:left}}
@media (max-width: 520px) {
  .level-picker { gap: 5px; }
  .level-picker button { padding: 8px 4px; }
  .level-picker small { font-size: .66rem; }
  .direction-pad { max-width: 290px; }
  .direction-pad button { min-height: 68px; }
  .stimulus { min-height: 140px; }
  .arrow { font-size: 130px; }
  .result-grid { gap: 6px; }
  .summary { padding: 18px 10px; }
}