/* メサ・ダスク（claude_direct_sonnet-5.5）: 夕暮れの砂漠のダートコース */
[hidden] { display: none !important; }

body:has(.mx) {
  background: radial-gradient(120% 90% at 50% 30%, #2a1f4a 0%, #130f2a 60%, #0a0818 100%) no-repeat fixed;
  color: #fdf1de;
}
body:has(.mx) > main { padding: 0; background: transparent; }

.mx { width: 100%; }
.mx-stage {
  position: relative;
  container-type: size;
  --u: 1cqh;
  overflow: hidden;
  background: #1c1638;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 210, 160, .14), 0 18px 60px rgba(0, 0, 0, .55);
  font-family: "Avenir Next", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}
.mx-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- 一時停止ボタン ---------- */
.mx-pausebtn {
  position: absolute; top: calc(2 * var(--u)); right: calc(2 * var(--u)); z-index: 4;
  min-width: 44px; min-height: 44px; width: calc(8 * var(--u)); height: calc(8 * var(--u));
  border-radius: 50%; border: 2px solid rgba(255, 233, 200, .55);
  background: rgba(20, 14, 40, .55); color: #ffe9c8; font-size: calc(3.2 * var(--u)); line-height: 1;
  cursor: pointer; display: grid; place-items: center; padding: 0; letter-spacing: -1px;
}
.mx-pausebtn:hover, .mx-pausebtn:focus-visible { background: rgba(60, 40, 90, .8); outline: none; border-color: #ffd23f; }

/* ---------- 画面のボタン（タッチ） ---------- */
.mx-touch { position: absolute; inset: 0; z-index: 3; pointer-events: none; touch-action: none; --bs: clamp(44px, 14.5cqh, 120px); }
.mx-tl { position: absolute; left: calc(2 * var(--u)); bottom: calc(2 * var(--u)); display: flex; gap: calc(2 * var(--u)); align-items: flex-end; }
.mx-tr { position: absolute; right: calc(2 * var(--u)); bottom: calc(2 * var(--u)); display: flex; gap: calc(2 * var(--u)); align-items: flex-end; }
.mx-lane { display: flex; flex-direction: column; gap: calc(1.4 * var(--u)); }
.mx-pitch { display: flex; gap: calc(1.4 * var(--u)); }
.mx-tb {
  pointer-events: auto; touch-action: none;
  width: var(--bs); height: var(--bs); min-width: 44px; min-height: 44px;
  border-radius: 22%; border: 2px solid rgba(255, 233, 200, .6);
  background: rgba(24, 16, 46, .55); color: #ffe9c8;
  font: 700 calc(var(--bs) * .34)/1 inherit; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mx-tb small { font-size: calc(var(--bs) * .17); font-weight: 600; opacity: .85; }
.mx-tb.on { background: rgba(255, 210, 63, .6); color: #2a1a05; border-color: #fff3c4; transform: scale(.96); }
.mx-gas { width: calc(var(--bs) * 1.3); height: calc(var(--bs) * 1.3); border-radius: 50%; font-size: calc(var(--bs) * .24); border-color: rgba(120, 255, 210, .8); }
.mx-gas.on { background: rgba(70, 230, 180, .65); color: #04241c; }
.mx-turbo { width: var(--bs); height: var(--bs); border-radius: 50%; font-size: calc(var(--bs) * .2); border-color: rgba(255, 140, 70, .85); margin-bottom: calc(var(--bs) * .5); }
.mx-turbo.on { background: rgba(255, 120, 50, .7); color: #2b0d00; }

/* ---------- パネル ---------- */
.mx-panel {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  background: radial-gradient(90% 90% at 30% 40%, rgba(22, 14, 44, .35), rgba(8, 5, 20, .78));
  padding: calc(2 * var(--u));
}
.mx-card {
  width: min(92%, 560px); max-height: 94cqh; overflow: auto;
  background: linear-gradient(160deg, rgba(48, 31, 78, .92), rgba(24, 15, 46, .94));
  border: 1px solid rgba(255, 200, 140, .35); border-radius: 14px;
  padding: calc(3 * var(--u)) calc(3.6 * var(--u));
  font-size: clamp(12px, calc(3.1 * var(--u)), 19px);
  line-height: 1.5; text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.mx-card-s { width: min(92%, 520px); }
.mx-kicker { margin: 0; letter-spacing: .5em; font-size: .72em; color: #ffb36b; font-weight: 700; }
.mx-h1 {
  margin: .1em 0 0; font-size: 2.7em; line-height: 1.05; letter-spacing: .06em; font-weight: 900;
  background: linear-gradient(180deg, #fff2c6 10%, #ffb04a 55%, #e8552d 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .4));
}
.mx-h2 { margin: 0 0 .4em; font-size: 1.7em; letter-spacing: .12em; }
.mx-sub { margin: .1em 0 .8em; color: #f3dcc0; font-size: .95em; }
.mx-note { margin: 0 0 .6em; color: #ffd9a8; min-height: 1.2em; }
.mx-row { display: flex; gap: .6em; justify-content: center; flex-wrap: wrap; margin: .5em 0; }
.mx-btn {
  font: inherit; font-weight: 800; color: #ffe9c8; cursor: pointer;
  min-height: 44px; padding: .55em 1.3em; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 220, 170, .55);
}
.mx-btn:hover, .mx-btn:focus-visible { background: rgba(255, 255, 255, .18); outline: none; border-color: #fff; }
.mx-primary { background: linear-gradient(180deg, #ffb347, #e8552d); color: #2a0e02; border-color: #ffe0a8; font-size: 1.15em; padding: .55em 2.2em; }
.mx-primary:hover, .mx-primary:focus-visible { background: linear-gradient(180deg, #ffc66b, #f06a3d); }
.mx-seg { display: flex; gap: .4em; justify-content: center; align-items: center; flex-wrap: wrap; margin: .5em 0; }
.mx-seg-l { font-size: .85em; opacity: .8; margin-right: .3em; }
.mx-chip {
  font: inherit; font-size: .9em; color: #ffe9c8; cursor: pointer; min-height: 36px; padding: .25em .9em;
  border-radius: 999px; background: transparent; border: 1.5px solid rgba(255, 220, 170, .45);
}
.mx-chip[aria-checked="true"] { background: #ffd23f; color: #2a1a05; border-color: #ffd23f; font-weight: 800; }
.mx-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mx-best { margin: .3em 0; font-size: .95em; color: #ffd9a8; }
.mx-best b { font-size: 1.2em; color: #fff; font-variant-numeric: tabular-nums; }
.mx-help { text-align: left; margin: .5em 0; font-size: .86em; }
.mx-help summary { cursor: pointer; text-align: center; color: #ffb36b; font-weight: 700; padding: 4px; }
.mx-keys { list-style: none; margin: .4em 0; padding: 0; display: grid; gap: .25em; }
.mx-keys li { display: flex; gap: .3em; align-items: center; flex-wrap: wrap; }
.mx-keys li span { margin-left: .4em; color: #f0d9bd; }
.mx-keys kbd {
  font: 700 .85em/1 inherit; font-family: inherit; padding: .25em .5em; border-radius: 5px;
  background: #ffe9c8; color: #2a1a05; box-shadow: 0 2px 0 #b98a52;
}
.mx-tip { margin: .4em 0 0; font-size: .82em; color: #cdb7d9; }
.mx-opt { display: block; margin: .5em 0 .2em; font-size: .82em; color: #e7d3ee; cursor: pointer; }
.mx-opt input { width: 1.1em; height: 1.1em; vertical-align: -.15em; margin-right: .3em; accent-color: #ffb347; }
.mx-reset { margin-top: .3em; font-size: .78em; }
.mx-link { font: inherit; background: none; border: none; color: #c9b0dc; text-decoration: underline; cursor: pointer; padding: 6px 4px; min-height: 32px; }
.mx-danger { color: #ff8b7a; font-weight: 700; }

/* タイトル（1枚目）: ロゴとスタートだけ。背景は、走るバイクのデモがそのまま見える */
.mx-title {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(5 * var(--u));
  background: radial-gradient(60% 70% at 50% 50%, rgba(14, 8, 30, .42), rgba(8, 5, 20, .7));
  text-align: center; cursor: pointer;
}
.mx-logo { text-shadow: 0 2px 18px rgba(10, 4, 24, .75), 0 0 2px rgba(10, 4, 24, .9); }
.mx-logo .mx-kicker { font-size: calc(2.6 * var(--u)); letter-spacing: .6em; margin-left: .6em; }
.mx-title .mx-h1 { font-size: clamp(36px, calc(15 * var(--u)), 150px); letter-spacing: .04em; margin: .05em 0 .08em; text-shadow: none; }
.mx-title .mx-sub { font-size: clamp(12px, calc(3.4 * var(--u)), 28px); margin: 0; }
.mx-startbox { display: flex; flex-direction: column; align-items: center; gap: calc(1.2 * var(--u)); font-size: clamp(14px, calc(3.4 * var(--u)), 26px); }
.mx-startbox .mx-primary { font-size: 1.25em; padding: .5em 2.6em; min-width: 8em; }
.mx-hint { margin: 0; font-size: .7em; letter-spacing: .12em; color: #f3dcc0; text-shadow: 0 1px 8px rgba(10, 4, 24, .9); }
.mx-quick { font-size: .72em; color: #ffe3b8; text-shadow: 0 1px 8px rgba(10, 4, 24, .9); }
.mx-best-foot { position: absolute; left: 0; right: 0; bottom: calc(2.4 * var(--u)); margin: 0; font-size: clamp(12px, calc(3 * var(--u)), 22px); text-shadow: 0 1px 8px rgba(10, 4, 24, .9); }
.mx-pulse { animation: mx-pulse 2.6s ease-in-out infinite; }
@keyframes mx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 179, 71, .0); } 50% { box-shadow: 0 0 0 10px rgba(255, 179, 71, .25); } }

/* 設定（2枚目） */
.mx-card-w { width: min(94%, 860px); }
.mx-cols { display: grid; grid-template-columns: 1fr; gap: .8em 2em; text-align: left; margin: .4em 0 .6em; }
.mx-col { min-width: 0; }
.mx-col .mx-seg, .mx-col .mx-best, .mx-col .mx-opt, .mx-col .mx-reset { justify-content: flex-start; text-align: left; }
.mx-col .mx-tip { text-align: left; }
@container (min-width: 560px) { .mx-cols { grid-template-columns: 1fr 1fr; align-items: center; } }

/* コース選択（カード） */
.mx-courses { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin: .2em 0 .3em; }
.mx-course {
  font: inherit; color: #ffe9c8; cursor: pointer; text-align: center; min-height: 44px;
  display: flex; flex-direction: column; gap: .1em; padding: .5em .4em .45em; border-radius: 10px;
  background: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 220, 170, .35); position: relative; overflow: hidden;
}
.mx-course::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--sky, linear-gradient(90deg, #5a2a63, #d9694a)); }
.mx-course[data-theme="dusk"] { --sky: linear-gradient(90deg, #5a2a63, #d9694a, #ffc08a); }
.mx-course[data-theme="dawn"] { --sky: linear-gradient(90deg, #4a5a9a, #f4a0a4, #ffe0b0); }
.mx-course[data-theme="night"] { --sky: linear-gradient(90deg, #04061a, #1d2e5a, #6a85c0); }
.mx-course b { font-size: 1.05em; }
.mx-course span { font-size: .8em; color: #f0d9bd; }
.mx-course em { font-style: normal; font-size: .78em; color: #bfe9ff; font-variant-numeric: tabular-nums; }
.mx-course[aria-checked="true"] { background: rgba(255, 210, 63, .2); border-color: #ffd23f; box-shadow: 0 0 0 2px rgba(255, 210, 63, .25); }
.mx-course:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mx-blurb { margin: 0 0 .3em; font-size: .85em; color: #e6d2ec; min-height: 1.2em; }

/* 結果 */
.mx-rank { margin: .1em 0 0; font-size: 1em; display: flex; align-items: baseline; justify-content: center; gap: .15em; }
.mx-rank b { font-size: 4.2em; line-height: 1; color: #ffd23f; text-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
.mx-rank span { font-size: 1.6em; font-weight: 800; }
.mx-rank em { margin-left: .8em; font-style: normal; font-size: .9em; font-weight: 800; color: #2a1a05; background: #7dffd8; padding: .1em .6em; border-radius: 999px; }
.mx-time { margin: 0; font-size: 2.1em; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.mx-board { list-style: none; margin: .6em auto; padding: 0; max-width: 24em; text-align: left; display: grid; gap: 2px; }
.mx-board li { display: grid; grid-template-columns: 2.2em 1fr auto; gap: .5em; padding: .15em .7em; border-radius: 6px; background: rgba(255, 255, 255, .06); font-variant-numeric: tabular-nums; align-items: center; }
.mx-board li.me { background: rgba(255, 210, 63, .22); outline: 1px solid rgba(255, 210, 63, .7); font-weight: 800; }
.mx-board i { display: inline-block; min-width: 2.3em; padding: 0 .3em; border-radius: 4px; margin-right: .6em; text-align: center; font-style: normal; font-weight: 900; font-size: .85em; line-height: 1.4; vertical-align: baseline; }
.mx-stat { margin: .3em 0; font-size: .82em; color: #d9c4e6; }
.mx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 低い画面（スマホ横持ち）: カードをぎゅっと */
@container (max-height: 460px) {
  .mx-card { padding: calc(2 * var(--u)) calc(3 * var(--u)); font-size: clamp(11px, calc(3.4 * var(--u)), 15px); line-height: 1.35; width: min(94%, 520px); }
  .mx-h1 { font-size: 2.1em; }
  .mx-sub { margin-bottom: .4em; }
  .mx-btn { min-height: 44px; padding: .4em 1.2em; }
  .mx-rank b { font-size: 3em; }
  .mx-time { font-size: 1.6em; }
  .mx-board { margin: .3em auto; }
  .mx-board li { padding: 0 .6em; }
  .mx-opt, .mx-reset { display: inline-block; margin-right: 1em; }
  .mx-title { gap: calc(3 * var(--u)); }
  .mx-h2 { font-size: 1.3em; margin-bottom: .2em; }
  .mx-cols { margin: .2em 0 .3em; gap: .3em 1.4em; }
  .mx-keys { font-size: .92em; margin: .1em 0; gap: .1em; }
  .mx-keys kbd { padding: .15em .4em; }
  .mx-seg { margin: .2em 0; }
  .mx-chip { min-height: 32px; padding: .25em .55em; font-size: .86em; }
  .mx-seg { gap: .3em; }
  .mx-seg-l { flex-basis: 100%; text-align: left; margin: 0 0 .1em; }
  .mx-courses { gap: .35em; margin: 0; }
  .mx-course { padding: .35em .3em .3em; min-height: 44px; border-radius: 8px; }
  .mx-course span, .mx-course em { font-size: .74em; }
  .mx-blurb { margin: .1em 0 .1em; font-size: .78em; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-tb.on { transform: none; }
  .mx-pulse { animation: none; }
}