.brake-shell { width: min(1080px, calc(100% - 32px)); }
.game-card { overflow: hidden; border: 3px solid var(--ink); border-radius: 5px; background: var(--panel); box-shadow: 10px 10px 0 var(--shadow); }
.game-heading { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; padding: 30px 34px; border-bottom: 3px solid var(--ink); }
.game-heading .eyebrow { margin: 0 0 10px; color: var(--gold); font-weight: 800; letter-spacing: 0.12em; }
.game-heading h1 { max-width: 850px; margin: 0; font-size: clamp(2.05rem, 6vw, 4.35rem); line-height: 0.95; }
.lede { max-width: 720px; margin: 18px 0 0; color: var(--muted); line-height: 1.6; }
.progress-box { min-width: 150px; padding: 16px; border: 2px solid var(--line); border-radius: 5px; background: #0a2026; text-align: center; }
.progress-box > span, .stat > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; }
.progress-box strong { color: var(--gold); font-size: 1.55rem; }
.mode-panel { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 2px solid var(--line); background: #0a2026; }
.mode-switch { display: flex; flex: 0 0 auto; gap: 6px; }
.mode-switch button { padding: 10px 14px; border: 2px solid var(--line); border-radius: 5px; background: transparent; color: var(--muted); font-weight: 800; cursor: pointer; }
.mode-switch button[aria-pressed="true"] { border-color: var(--gold); background: var(--gold); color: var(--night); }
.mode-switch button:disabled { cursor: not-allowed; opacity: 0.65; }
.mode-description { margin: 0; color: var(--muted); font-size: 0.84rem; line-height: 1.45; text-align: right; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 3px solid var(--ink); }
.stat { min-width: 0; padding: 18px 10px; border-right: 2px solid var(--line); text-align: center; }
.stat:last-child { border-right: 0; }
.stat strong { font-size: clamp(1.02rem, 2.8vw, 1.5rem); }

.brake-stage { display: flex; min-height: 730px; flex-direction: column; align-items: center; padding: 28px 28px 34px; background: linear-gradient(rgba(88,199,215,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(88,199,215,.045) 1px,transparent 1px), radial-gradient(circle at 50% 48%,#173b45 0,transparent 58%); background-size: 24px 24px,24px 24px,auto; }
.stage-copy { min-height: 160px; text-align: center; }
.stage-kicker { margin: 0 0 9px; color: var(--gold); font-size: .78rem; font-weight: 800; letter-spacing: .14em; }
.stage-copy h2 { margin: 0; font-size: clamp(1.5rem,5vw,2.5rem); }
.stage-copy > p:not(.stage-kicker) { max-width: 660px; margin: 10px auto 0; color: var(--muted); line-height: 1.5; }
.result-flash { display: flex; gap: 10px; align-items: baseline; justify-content: center; margin-top: 11px; }
.result-flash[hidden] { display: none; }
.result-flash strong { font-size: 1.12rem; }
.result-flash span { color: var(--muted); font-size: .78rem; }
.brake-stage[data-result="safe"] .result-flash strong { color: var(--green); }
.brake-stage[data-result="early"] .result-flash strong, .brake-stage[data-result="crossed"] .result-flash strong, .brake-stage[data-result="timeout"] .result-flash strong { color: var(--red); }

.timing-wrap { width: min(820px,100%); margin-bottom: 18px; }
.timing-wrap[hidden] { display: none; }
.timing-labels { display: flex; gap: 14px; justify-content: space-between; margin-bottom: 8px; color: var(--muted); font-size: .76rem; font-weight: 800; letter-spacing: .1em; }
.timing-labels strong { color: var(--gold); }
.timing-track { height: 18px; overflow: hidden; border: 3px solid var(--ink); border-radius: 5px; background: #0a2026; }
.timing-fill { display: block; width: 100%; height: 100%; background: var(--gold); transform: scaleX(1); transform-origin: left center; will-change: transform; }
.brake-stage[data-state="driving"] .timing-fill { width: 34%; background: var(--blue); transform: translateX(-120%); animation: hidden-drive 1.25s linear infinite; }
.brake-stage[data-state="active"] .timing-fill { background: linear-gradient(90deg,var(--green),var(--gold),var(--orange)); }

.road { position: relative; width: min(820px,100%); height: 190px; overflow: hidden; border: 4px solid var(--ink); border-radius: 5px; background: #10282e; box-shadow: 7px 7px 0 var(--shadow); }
.road-grid { position: absolute; inset: 0; background: linear-gradient(transparent 47%,rgba(248,241,223,.16) 47% 50%,transparent 50%), repeating-linear-gradient(90deg,transparent 0 9.7%,rgba(88,199,215,.09) 9.7% 10%); }
.road-grid::after { position: absolute; right: 0; bottom: 31px; left: 0; height: 4px; background: var(--line); content: ""; }
.stop-line { position: absolute; top: 15px; bottom: 27px; left: 86%; width: 7px; border: 2px solid var(--ink); background: repeating-linear-gradient(0deg,var(--ink) 0 7px,var(--ink) 7px 14px,var(--ink) 14px 21px,var(--ink) 21px 28px); opacity: 0; transition: opacity .08s linear; }
.stop-line i { position: absolute; inset: 0; background: repeating-linear-gradient(0deg,var(--ink) 0 7px,var(--ink) 7px 14px,var(--ink) 14px 21px,var(--ink) 21px 28px); }
.stop-line::after { position: absolute; inset: 0; background: repeating-linear-gradient(0deg,var(--ink) 0 7px,var(--ink) 7px 14px,var(--ink) 14px 21px,var(--ink) 21px 28px); content: ""; }
.stop-line { background: repeating-linear-gradient(0deg,var(--ink) 0 7px,var(--red) 7px 14px); }
.stop-line i, .stop-line::after { display: none; }
.target-zone { position: absolute; top: 18px; bottom: 30px; left: 82%; width: 4%; border-left: 2px dashed rgba(83,221,131,.7); background: rgba(83,221,131,.12); opacity: 0; }
.brake-stage[data-state="active"] .stop-line, .brake-stage[data-state="feedback"]:not([data-result="early"]) .stop-line, .brake-stage[data-state="active"] .target-zone, .brake-stage[data-state="feedback"]:not([data-result="early"]) .target-zone { opacity: 1; }
.car { position: absolute; bottom: 36px; left: calc(var(--car-position,7) * 1%); width: 68px; height: 34px; border: 3px solid var(--ink); border-radius: 5px; background: var(--gold); box-shadow: 4px 4px 0 var(--shadow); transform: translateX(-50%); will-change: left; }
.car::before { position: absolute; top: -18px; left: 13px; width: 37px; height: 19px; border: 3px solid var(--ink); border-bottom: 0; border-radius: 5px 5px 0 0; background: var(--blue); content: ""; }
.car i, .car b { position: absolute; bottom: -11px; width: 17px; height: 17px; border: 3px solid var(--ink); border-radius: 50%; background: var(--blue); }
.car i { left: 7px; } .car b { right: 7px; }
.brake-stage[data-state="feedback"] .car { transition: left .42s cubic-bezier(.2,.8,.25,1); }
.brake-stage[data-result="safe"] .car { background: var(--green); }
.brake-stage[data-result="crossed"] .car, .brake-stage[data-result="timeout"] .car { background: var(--red); }
.road-status { position: absolute; top: 13px; left: 14px; padding: 6px 8px; border: 2px solid var(--line); border-radius: 5px; background: rgba(7,26,31,.9); color: var(--muted); font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.brake-stage[data-state="active"] .road-status { border-color: var(--red); color: var(--red); }

.drive-pad { display: flex; width: min(600px,100%); min-height: 145px; flex-direction: column; align-items: center; justify-content: center; margin-top: 22px; padding: 18px; border: 4px solid var(--ink); border-radius: 5px; background: #12343c; color: var(--ink); box-shadow: 6px 6px 0 var(--shadow); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.drive-pad:disabled { cursor: not-allowed; opacity: .74; }
.pedal-icon { font-size: 2.4rem; color: var(--gold); transform: rotate(-12deg); }
.drive-pad strong { margin-top: 8px; font-size: clamp(.95rem,3vw,1.25rem); letter-spacing: .08em; }
.drive-pad small { margin-top: 9px; color: var(--muted); font-size: .74rem; font-weight: 800; }
.drive-pad kbd { display: inline-block; padding: 3px 8px; border: 2px solid var(--line); border-radius: 5px; background: var(--night); color: var(--ink); font: inherit; }
.brake-stage[data-state="driving"] .drive-pad { border-color: var(--blue); background: #153f51; }
.brake-stage[data-state="active"] .drive-pad { border-color: var(--red); background: #3a2925; }
.brake-stage[data-state="active"] .pedal-icon, .brake-stage[data-state="active"] .drive-pad strong { color: var(--red); }
.primary-button { min-width: min(420px,100%); margin-top: 24px; padding: 16px 22px; border: 3px solid var(--ink); border-radius: 5px; background: var(--gold); color: var(--night); box-shadow: 5px 5px 0 var(--shadow); font: inherit; font-weight: 900; cursor: pointer; }
.primary-button[hidden] { display: none; }
.control-note { max-width: 720px; margin: 18px auto 0; color: var(--muted); font-size: .8rem; line-height: 1.55; text-align: center; }
.drive-pad:focus-visible, .mode-switch button:focus-visible, .primary-button:focus-visible, .related-links a:focus-visible, .faq-list summary:focus-visible { outline: 4px solid var(--blue); outline-offset: 4px; }

.content-section { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(0,1.4fr); gap: 54px; padding: 82px 12px 56px; }
.section-kicker { margin: 0 0 10px; color: var(--gold); font-size: .78rem; font-weight: 800; letter-spacing: .14em; }
.content-heading h2, .info-panel h2, .faq-section h2, .related-section h2 { margin: 0; line-height: 1.15; }
.steps-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.steps-list li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 18px; border: 2px solid var(--line); border-radius: 5px; background: var(--panel); }
.steps-list li > span { color: var(--gold); font-weight: 900; } .steps-list p { margin: 0; color: var(--muted); line-height: 1.55; }
.reading-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.info-panel { padding: 28px; border: 2px solid var(--line); border-radius: 5px; background: var(--panel); }
.info-panel p:not(.section-kicker) { color: var(--muted); line-height: 1.65; }
.faq-section, .related-section { padding: 76px 12px 0; }
.faq-list { display: grid; gap: 10px; margin-top: 24px; }
.faq-list details { border: 2px solid var(--line); border-radius: 5px; background: var(--panel); }
.faq-list summary { padding: 18px 20px; color: var(--ink); font-weight: 800; cursor: pointer; }
.faq-list details p { margin: 0; padding: 0 20px 20px; color: var(--muted); line-height: 1.6; }
.related-links { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.related-links a { display: flex; min-height: 112px; flex-direction: column; justify-content: space-between; padding: 18px; border: 2px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--ink); font-weight: 800; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.related-links a:hover { border-color: var(--gold); } .related-links small { color: var(--muted); font-size: .76rem; font-weight: 400; }
@keyframes hidden-drive { 0% { transform: translateX(-120%); } 100% { transform: translateX(395%); } }

@media (max-width:860px) { .game-heading { grid-template-columns: 1fr; } .progress-box { display:flex;align-items:center;justify-content:space-between; } .progress-box > span { margin:0; } .related-links { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:650px) {
  .brake-shell { width:min(100% - 18px,620px);padding-top:10px; } .topbar { align-items:flex-start;flex-wrap:wrap;gap:8px; } .topbar-meta { max-width:100%;flex-wrap:wrap;justify-content:flex-end; }
  .game-card { box-shadow:6px 6px 0 var(--shadow); } .game-heading { gap:20px;padding:24px 18px; } .game-heading h1 { font-size:clamp(1.75rem,9.5vw,3.3rem);overflow-wrap:anywhere; }
  .mode-panel { align-items:stretch;flex-direction:column; } .mode-description { text-align:left; } .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .stat:nth-child(2) { border-right:0; } .stat:nth-child(-n+2) { border-bottom:2px solid var(--line); }
  .brake-stage { min-height:700px;padding:26px 12px 28px; } .stage-copy { min-height:180px; } .road { height:170px;box-shadow:5px 5px 0 var(--shadow); } .car { width:55px;height:30px; } .car::before { left:10px;width:30px; }
  .drive-pad { min-height:135px;box-shadow:4px 4px 0 var(--shadow); } .content-section,.reading-grid { grid-template-columns:1fr; } .content-section { gap:30px;padding:58px 8px 44px; } .info-panel { padding:24px 20px; } .faq-section,.related-section { padding:58px 8px 0; } .related-links { grid-template-columns:1fr; } .related-links a { min-height:92px; }
}
@media (max-width:390px) { .topbar-meta { gap:6px;font-size:.68rem; } .topbar-link { font-size:.64rem; } .mode-switch button { flex:1 1 0;padding-inline:8px; } .timing-labels { align-items:flex-start;flex-direction:column;gap:5px;font-size:.67rem; } .road { height:155px; } .road-status { font-size:.6rem; } .result-flash { align-items:center;flex-direction:column;gap:4px; } }
@media (prefers-reduced-motion:reduce) { .brake-stage[data-state="driving"] .timing-fill { width:100%;opacity:.45;animation:drive-pulse 1s steps(2,end) infinite; } .brake-stage[data-state="feedback"] .car { transition:none; } }
@keyframes drive-pulse { 0% { opacity:.25; } 100% { opacity:.65; } }