.player-riding { --ride-gold:#f2d476; --ride-ink:#17392f; color:#f4f2e5; font-family:system-ui,sans-serif; }
.riding-panel { background:linear-gradient(155deg,#143c33,#0e2825); border:1px solid #5b7968; border-radius:18px; padding:20px; box-shadow:0 16px 42px #0003; max-width:1000px; margin:auto; }
.riding-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:14px; }
.riding-heading h2 { color:#fff8da; font-size:clamp(18px,3.7vw,27px); line-height:1.4; margin:4px 0; }
.riding-heading p { margin:4px 0; font-size:12px; color:#d2dfd2; }
.riding-kicker { font-size:10px; color:var(--ride-gold); letter-spacing:.18em; }
.riding-badge { border:1px solid #d1bc6a; color:var(--ride-gold); border-radius:6px; padding:8px; white-space:nowrap; font-size:12px; }
.riding-meters { display:flex; gap:12px; flex-wrap:wrap; font-size:14px; font-weight:700; padding:10px 0; }
.riding-meters span:first-child { color:var(--ride-gold); }
.riding-track { position:relative; border-radius:12px; overflow:hidden; border:1px solid #bca56b; }
.riding-track canvas { display:block; width:100%; height:310px; }
.riding-gate { position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(32px,8vw,68px); font-weight:900; color:#fff5b5; text-shadow:0 3px 14px #000; background:#0d231c55; pointer-events:none; }
.riding-gate[hidden] { display:none; }
.riding-gauges { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:12px 0; }
.riding-gauges label { display:grid; grid-template-columns:auto 1fr 3em; gap:7px; align-items:center; font-size:12px; }
.riding-gauges progress { width:100%; min-width:24px; accent-color:#b3e390; }
.riding-gauges output { text-align:right; }
.riding-guidance { min-height:2.8em; margin:0; color:#fff5c7; background:#ffffff0b; border-left:3px solid var(--ride-gold); padding:9px 12px; font-size:14px; line-height:1.5; }
.riding-live { font-size:12px; line-height:1.4; color:#c8daca; min-height:1.4em; margin:8px 0; }
.riding-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) 1.2fr; gap:8px; }
.player-riding button { appearance:none; background:#f1ecd9; color:var(--ride-ink); border:1px solid #d6c892; border-radius:9px; min-height:48px; font:700 14px/1.3 system-ui,sans-serif; padding:10px; cursor:pointer; }
.player-riding button:focus-visible,.riding-track canvas:focus-visible { outline:3px solid #fff279; outline-offset:3px; }
.player-riding button:disabled { opacity:.48; cursor:default; }
.riding-controls button { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.riding-controls button.is-held,.riding-controls button:active { background:#ffe886; box-shadow:inset 0 3px 6px #735e3644; transform:translateY(1px); }
.riding-controls .riding-launch { background:#ebc95d; border-color:#ffec9a; }
.riding-launch small { display:block; font-weight:400; font-size:10px; }
.riding-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.riding-actions button { min-height:40px; background:#264f43; color:#f0edda; border-color:#769480; font-size:12px; }
.riding-actions button[data-action="begin"] { background:#efd878; color:#253e2b; flex:1; }
.riding-help { border-top:1px solid #5b796866; padding-top:12px; color:#cbdccd; font-size:12px; line-height:1.7; }
.riding-help summary { cursor:pointer; color:#f6e5a9; font-size:14px; }
.riding-help ol { padding-left:22px; margin:8px 0; }
.riding-help p { margin:8px 0; }
.riding-result { background:#eee3ba; color:#183c30; padding:16px; border-radius:10px; line-height:1.7; font-weight:700; margin:12px 0; }
@media(max-width:600px) {
 .riding-panel { padding:12px; border-radius:12px; }
 .riding-heading { gap:6px; align-items:flex-start; }.riding-badge { padding:5px; font-size:10px; }
 .riding-track canvas { height:265px; }.riding-meters { gap:7px; font-size:12px; }
 .riding-gauges { gap:6px; }.riding-gauges label { grid-template-columns:1fr 3em; font-size:11px; }.riding-gauges progress { grid-column:1; grid-row:2; }.riding-gauges output { grid-column:2; grid-row:2; }
 .riding-controls { gap:5px; }.riding-controls button { font-size:12px; padding:10px 4px; min-height:56px; }
 .riding-guidance { font-size:12px; min-height:3.3em; }.riding-actions button { flex:1 1 42%; }
}
@media(prefers-reduced-motion:reduce) {.riding-controls button:active {transform:none;}}

.player-riding [hidden] { display:none !important; }