.pixel-rider { position:absolute; left:50%; top:50%; width:100%; height:auto; max-width:none; transform:translate(-50%,-50%); transform-origin:center; image-rendering:pixelated; pointer-events:none; }
.rider-profile { position:fixed; inset:0; z-index:90; background:#090d14; overflow:auto; padding:24px; }
.rider-profile[hidden] { display:none; }
.rider-profile header { display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:1150px; margin:auto; }
.rider-profile h1 { font-size:clamp(20px,3vw,34px); margin:8px 0; }
.rider-profile p { color:#aab3c2; font:14px/1.6 sans-serif; }
.rider-profile button,.rider-profile select { font:inherit; color:#f4f5f7; background:#192230; border:1px solid #455268; padding:12px; cursor:pointer; border-radius:5px; }
.rider-profile button:focus-visible,.rider-profile select:focus-visible { outline:2px solid #ff674e;outline-offset:3px; }
.rider-profile button[aria-pressed=true] { border-color:#ff674e;box-shadow:inset 0 0 0 1px #ff674e; }
.rider-profile-grid { display:grid;grid-template-columns:minmax(0,1.6fr) minmax(270px,1fr);gap:24px;max-width:1150px;margin:24px auto; }
.rider-preview-panel,.rider-options { background:#111923;border:1px solid #2a3545;padding:20px;border-radius:10px;min-width:0; }
.rider-preview-panel label { display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px; }
.rider-preview-stage { position:relative;margin:24px 0 10px; padding-top:55px; }
.rider-preview-bike { position:relative;width:100%;aspect-ratio:var(--rider-bike-aspect,1.7); }
.rider-preview-bike > img { position:absolute;height:auto;max-width:none;image-rendering:pixelated;pointer-events:none; }
.rider-poses { display:flex;gap:6px;flex-wrap:wrap; }
.rider-poses button { flex:1;font-size:11px; }
.rider-options fieldset { border:0;padding:0;margin:0 0 24px; }
.rider-options legend { font-size:12px;margin-bottom:12px;color:#c7d0de; }
.rider-swatches { display:flex;gap:8px;flex-wrap:wrap; }
.rider-swatches button { width:32px;height:32px;padding:0;background:var(--swatch);border:2px solid #69758a; }
.rider-swatches button[aria-pressed=true] { outline:2px solid white;outline-offset:2px; }
.rider-helmets { display:flex;gap:6px;flex-wrap:wrap; }
.rider-helmets button { font-size:10px;flex:1; }
.rider-save { background:#c53422!important;width:100%; }
.rider-save-status { min-height:22px; }
.rider-stunt-control { position:absolute;z-index:26;right:2%;top:12%;padding:9px 12px;color:white;background:#182333;border:1px solid #67758a;border-radius:5px;font:10px 'Silkscreen',monospace;pointer-events:auto;touch-action:none; }
.rider-stunt-control[aria-pressed=true] { background:#b83827; }
.rider-stunt-control:disabled { opacity:.5; }
@media(max-width:700px){.rider-profile{padding:14px}.rider-profile-grid{grid-template-columns:1fr;gap:12px;margin:14px auto}.rider-preview-stage{max-width:480px;margin:15px auto 0;padding-top:40px}.rider-preview-panel,.rider-options{padding:14px}.rider-profile select{max-width:65%;font-size:11px}}

/* Profile occupies one viewport; the preview scales into the remaining space. */
.rider-profile {box-sizing:border-box;height:100dvh;overflow:hidden;display:flex;flex-direction:column;gap:16px;padding:clamp(12px,2vw,24px);}
.rider-profile header {width:100%;flex:0 0 auto;margin:0 auto;}
.rider-profile header p {margin:4px 0 0;}
.rider-profile-grid {width:100%;flex:1;min-height:0;margin:0 auto;gap:16px;grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr);}
.rider-preview-panel {display:flex;flex-direction:column;min-height:0;padding:16px;}
.rider-preview-stage {flex:1;min-height:0;margin:0;max-width:none;padding:0;display:flex;align-items:center;justify-content:center;}
.rider-preview-bike {flex:none;max-width:100%;margin-top:8%;}
.rider-options {display:flex;flex-direction:column;min-height:0;padding:16px;}
.rider-options fieldset {margin:0 0 12px;}
.rider-liveries {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.rider-liveries button {min-width:0;min-height:42px;padding:8px 4px;font-size:10px;}
.rider-save {margin-top:auto;min-height:44px;}
.rider-save-status {margin:6px 0 0;font-size:12px;line-height:1.3;min-height:16px;}
@media(max-height:500px) and (min-width:601px){
 .rider-profile {gap:8px;padding:10px 16px;}
 .rider-profile header p {display:none;}
 .rider-profile h1 {font-size:22px;margin:4px 0;}
 .rider-profile small {font-size:10px;}
 .rider-profile-grid {gap:10px;grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr);}
 .rider-preview-panel,.rider-options {padding:10px;}
 .rider-profile button,.rider-profile select {padding:8px;}
 .rider-options p:not(.rider-save-status) {font-size:12px;margin:4px 0;}
 .rider-options legend {margin-bottom:8px;font-size:10px;}
}
@media(max-width:600px){
 .rider-profile {gap:10px;}
 .rider-profile header p {display:none;}
 .rider-profile h1 {font-size:22px;}
 .rider-profile-grid {grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:10px;}
 .rider-preview-panel,.rider-options {padding:12px;}
 .rider-options p:not(.rider-save-status) {display:none;}
 .rider-liveries button {min-height:40px;}
 .rider-save {margin-top:0;}
}

.rider-preview-stage {overflow:hidden;}