/* HASLAS side-view menu. Base styles and existing navigation remain intact. */
:root{--nav-h:86px;--menu-gold:#e8c54d;--menu-white:#e4e2d9}
body{background:#060807;position:relative}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ui-icon{width:21px;height:21px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.page-bg{inset:0;transform:none;background:#060807 url('assets/side-drive-v3.png') center/cover no-repeat}
.page-bg.enhanced{background-image:url('assets/side-drive-v3.png');background-size:cover;background-position:center;transform:none}
.page-overlay{background:linear-gradient(180deg,#0003,transparent 45%,#0008)}
.street-vignette{z-index:6;box-shadow:inset 0 0 120px #0005;background:linear-gradient(180deg,#00000018,transparent 43%,transparent 75%,#030504a1)}
.street-haze{z-index:5;opacity:.45}
.navbar{height:var(--nav-h);background:#070806eb;border-bottom:1px solid #a28c2c24}
.navbar-inner{max-width:none;width:100%;padding:0 28px}
.logo-name{font-size:41px;letter-spacing:.09em}
.logo-name,.hero-title{font-family:'Arial Narrow',Impact,sans-serif;font-stretch:condensed}
.logo-tagline{font-size:9px;letter-spacing:.15em}
.logo-crown{width:47px;height:39px;filter:drop-shadow(0 0 8px #e8c54d33)}
.nav-links{gap:10px;padding:0;background:none;border:0;box-shadow:none}
.nav-link,.nav-link--work{min-height:43px;padding:0 21px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #b99b3d80;border-radius:4px;background:#07090780;color:#dad9d2;font-size:11px;letter-spacing:.075em;box-shadow:inset 0 1px #ffe99c0b}
.nav-link[aria-current="page"],.nav-link--work{background:#14120765;color:#ecd055}
.nav-link::before,.nav-link::after{display:none}
.nav-link:hover{color:#fff0a0;border-color:#eed266;background:#d4b34310;box-shadow:0 0 18px #d4b34318}
.nav-icon{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.82}
.hero{min-height:760px;height:100svh;padding:0 24px;display:block}
.hero-inner{height:100%;max-width:none;position:relative;perspective:none}
.animate-up{transition:none}
.char-wrap.animate-up.visible,.btn-row.animate-up.visible{transform:translateX(-50%)}
.drive-caption{position:absolute;top:calc(var(--nav-h) + 19px);left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;font-size:7px;letter-spacing:2.4px;color:#bbad84}
.live-dot,.tiny-dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:#e4c560;box-shadow:0 0 7px #e4c56070}
.caption-rule{width:27px;height:1px;background:#d6b25c60}
.hero-title{position:absolute;top:calc(var(--nav-h) + 40px);left:0;right:0;transform:none;margin:0;padding:0 0 0 .06em;font-size:clamp(112px,11.7vw,190px);line-height:.9;letter-spacing:.06em}
.gold-drip{background-image:linear-gradient(175deg,#fff0a1 0%,#f2d856 25%,#d8b737 60%,#f4d960 79%,#a78729 100%);filter:drop-shadow(0 3px 2px #0007) drop-shadow(0 0 20px #e1bb2920);background-size:100% 160%}
.hero-sub{position:absolute;top:calc(var(--nav-h) + clamp(112px,11.7vw,190px) + 44px);left:0;right:0;transform:none;display:flex;align-items:center;gap:15px;width:max-content;max-width:90%;margin:0 auto;font-family:'Montserrat',Arial,sans-serif;font-size:clamp(10px,1.05vw,15px);font-weight:600;letter-spacing:.19em;color:#e6e6de}
.hero-sub::before,.hero-sub::after{content:'';width:46px;height:1px;background:#cba84b;box-shadow:0 0 5px #cfb85630}
.char-wrap{position:absolute;left:50%;top:37%;transform:translateX(-50%);width:82%;max-width:1500px;height:41%;aspect-ratio:auto;margin:0;border-radius:3px;cursor:default}
.char-wrap::after,.character-aura{display:none}
.char-float{pointer-events:none}
.btn-row{position:absolute;bottom:82px;left:50%;transform:translateX(-50%);display:flex;flex-wrap:nowrap;gap:12px;width:max-content;max-width:calc(100vw - 420px);margin:0}
.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:64px;padding:0 23px;border:1px solid #d1b34f;border-radius:5px;background:linear-gradient(170deg,#17160bec,#040806db);color:#f1d249;box-shadow:inset 0 1px #f7e7951c,0 6px 26px #0006;font-size:11px;font-weight:700;letter-spacing:.03em;backdrop-filter:blur(7px)}
.btn-gold:hover,.btn-gold:focus-visible{border-color:#ffdf76;color:#ffeb9a;box-shadow:inset 0 0 28px #b995251a,0 0 25px #e8c24625}
.btn-gold::after{opacity:.4}
.glass-panel{color:var(--menu-white);border:1px solid #bda244a3;border-radius:5px;background:linear-gradient(135deg,#0b0d0af2,#040706d6);backdrop-filter:blur(12px);box-shadow:inset 0 1px #ffeab51c,0 10px 36px #0006}
.drive-menu{position:absolute;z-index:14;top:calc(var(--nav-h) + 36px);left:26px;width:182px;padding:15px 12px 11px}
.panel-eyebrow{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#96896a;font-size:7px;font-weight:600;letter-spacing:1.4px;line-height:1.5;margin:0 3px 12px}
.drive-menu-item{display:flex;align-items:center;justify-content:space-between;gap:7px;width:100%;min-height:40px;padding:0 8px;border:0;border-bottom:1px solid #cbaa4224;background:transparent;color:#d3d4cc;text-align:left;font-family:'Montserrat',Arial,sans-serif;font-size:10px;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:color .2s,background .2s}
.drive-menu-item.is-selected{color:#090b06;background:#e6c447;border-radius:2px;border:0}
.drive-menu-item:hover{color:#ffe79c;background:#caaa3b15}
.drive-menu-item.is-selected:hover{color:#0b0b06;background:#f0d168}
.drive-menu-item .ui-icon{width:13px;height:13px}
.drive-menu-item kbd{font:inherit;font-size:9px;opacity:.65}
.drive-menu-item:disabled{opacity:.4;cursor:default}
.drive-menu .drive-menu-item{min-height:48px}
.menu-footnote{margin:13px 0 0;text-align:center;font-size:5px;letter-spacing:1.3px;color:#7d745d}
.hud-cluster{display:contents}
.route-hud{position:absolute;z-index:12;bottom:74px;left:26px;width:162px;overflow:hidden}
.route-map{position:relative;height:125px;background:radial-gradient(ellipse at 50% 60%,#1d2521,#080d0c);overflow:hidden}
.route-map svg{width:100%;height:100%}
.map-roads{fill:none;stroke:#303b34;stroke-width:5}
.map-route{fill:none;stroke:#c3a73e;stroke-width:2;stroke-dasharray:4 6;animation:routeFlow 3s linear infinite}
.map-car{fill:#f5d143;filter:drop-shadow(0 0 4px #e3ca55aa)}
.map-pulse{fill:#d6bc5220;stroke:#d6bc5255;stroke-width:1;transform-origin:76px 76px;animation:mapPulse 3s ease-out infinite}
.map-north{position:absolute;bottom:7px;left:10px;font-size:9px;color:#b9bdb3}
.map-caption{display:flex;align-items:center;gap:7px;padding:10px;border-top:1px solid #bb9c3829;color:#b6ad8e;font-size:6px;letter-spacing:1.2px}
.map-caption span:last-child{margin-left:auto;color:#776e54}
.drive-telemetry{position:absolute;z-index:12;bottom:74px;right:26px;width:184px;padding:14px}
.drive-telemetry .panel-eyebrow{color:#d6ba58;margin:0 0 8px;font-size:10px;letter-spacing:1px}
.telemetry-live{color:#8a836b;font-size:5px;letter-spacing:1.2px}
.speed-display{display:flex;align-items:center;gap:10px}
.speed-display strong{font-family:'Bebas Neue','Arial Narrow',Impact,sans-serif;font-size:45px;line-height:1;font-weight:400;letter-spacing:.04em;color:#ead06a}
.speed-display span{color:#bdbda9;font-size:8px;line-height:1.5}
.speed-display small{color:#817b62;font-size:5px;letter-spacing:.8px}
.speed-track{height:3px;margin-top:11px;background:#c7a13a28}
.speed-track span{display:block;height:100%;width:65%;background:#d6ba52;box-shadow:0 0 8px #d7b44b30;transition:width .25s linear}
.telemetry-caption{display:flex;justify-content:space-between;gap:10px;margin-top:9px;font-size:5px;color:#918665;letter-spacing:.7px}
.edition-footer{position:absolute;bottom:22px;left:26px;right:26px;z-index:12;display:flex;justify-content:space-between;color:#7c745b;font-size:6px;letter-spacing:1.8px}
.edition-footer span:first-child{color:#c5b367}
.cinema-streak{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:0;transform:translateX(-110%);background:linear-gradient(105deg,transparent 30%,#edc65207 43%,#ffe29b28 50%,#edc65206 57%,transparent 70%)}
.music-notice{position:absolute;z-index:16;top:calc(var(--nav-h) + clamp(112px,11.7vw,190px) + 65px);left:50%;transform:translateX(-50%);width:max-content}
.music-notice[hidden]{display:none}
.music-notice button{display:flex;align-items:center;gap:9px;min-height:34px;padding:4px 13px 4px 5px;border:1px solid #cdb04466;background:#060806bd;color:#e8ce67;border-radius:999px;font:700 7px/1 Arial,sans-serif;letter-spacing:.1em;cursor:pointer;backdrop-filter:blur(9px);box-shadow:0 8px 25px #0008,0 0 18px #d5b43c12;transition:border-color .2s,color .2s,transform .2s}
.music-notice button:hover{color:#fff0a0;border-color:#efd260;transform:translateY(-1px)}
.music-play{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#090b07;background:#e5c64f;box-shadow:0 0 13px #d6b63d45}
.music-play .ui-icon{width:12px;height:12px;fill:currentColor;stroke-width:0;margin-left:1px}
.effects-off #weatherScene.has-driving-world{display:block}
.effects-off .map-route,.effects-off .map-pulse,.tab-hidden .map-route,.tab-hidden .map-pulse{animation-play-state:paused}
@keyframes routeFlow{to{stroke-dashoffset:-40}}
@keyframes mapPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@media(min-width:769px) and (max-width:1160px){
.nav-link,.nav-link--work{padding:0 14px;font-size:9px}
.drive-menu{width:162px;left:20px;padding:12px 9px}.drive-menu-item{font-size:9px}
.btn-row{gap:8px;max-width:calc(100vw - 350px)}.btn-gold{padding:0 14px;min-height:59px;font-size:9px;gap:8px}.btn-gold .ui-icon{width:17px;height:17px}
.route-hud{left:20px;width:132px}.drive-telemetry{right:20px;width:145px;padding:11px}.telemetry-caption{letter-spacing:0;font-size:4px}
}
@media(min-width:769px) and (max-height:800px){
.hero{min-height:660px}.hero-title{font-size:17vh}.hero-sub{top:calc(var(--nav-h) + 17vh + 42px)}
.btn-row,.route-hud,.drive-telemetry{bottom:58px}.drive-menu{top:calc(var(--nav-h) + 24px)}
}
@media(max-width:768px){
:root{--nav-h:74px}.navbar-inner{padding:0 20px}.logo-name{font-size:32px}.logo-tagline{font-size:6px}.logo-crown{width:36px;height:32px}
.nav-links{position:fixed;top:var(--nav-h);left:0;right:0;padding:16px 20px 22px;background:#080b09f5;border-bottom:1px solid #b39a4540;gap:7px}
.nav-link,.nav-link--work{min-height:44px;width:100%;border-radius:3px;font-size:11px}
.hero{height:auto;min-height:0;padding:calc(var(--nav-h) + 55px) 20px 27px}
.hero-inner{height:auto;display:flex;flex-direction:column;align-items:center;position:static}
.drive-caption{top:calc(var(--nav-h) + 29px);font-size:5px;letter-spacing:1.9px}
.hero-title{position:static;transform:none;font-size:clamp(78px,20vw,126px);order:1;line-height:.9;margin:0;padding-left:.06em}
.hero-sub{position:static;transform:none;order:2;margin:15px 0 0;max-width:100%;gap:8px;font-size:clamp(8px,2vw,11px);letter-spacing:.09em}
.hero-sub::before,.hero-sub::after{width:13px;flex:0 0 13px}
.music-notice{position:static;transform:none;order:3;margin:13px 0 3px}
.char-wrap{position:relative;left:auto;top:auto;transform:none;order:4;height:clamp(200px,62vw,300px);width:100%;max-width:none;min-height:0;margin:0 0 18px}
.btn-row{position:static;transform:none;order:4;width:100%;max-width:340px;flex-direction:column;gap:11px;margin:0}
.char-wrap.animate-up.visible,.btn-row.animate-up.visible{transform:none}
.btn-gold{min-height:54px;font-size:11px;width:100%}
.drive-menu{position:relative;top:auto;left:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px;width:calc(100% - 40px);max-width:340px;margin:0 auto 30px;padding:10px}
.drive-menu .panel-eyebrow,.menu-footnote{display:none}.drive-menu-item{min-height:38px;font-size:8px;border:1px solid #cbaa4224;border-radius:2px;padding:0 9px}
.hud-cluster{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;width:calc(100% - 40px);max-width:340px;margin:0 auto 28px;z-index:12}
.route-hud,.drive-telemetry{position:static;display:block;width:auto;min-width:0}
.route-map{height:108px}.map-caption{padding:8px;font-size:5px}.drive-telemetry{padding:10px}.drive-telemetry .panel-eyebrow{font-size:7px}.telemetry-live{font-size:4px}.speed-display{gap:7px}.speed-display strong{font-size:36px}.speed-display span{font-size:6px}.speed-display small{font-size:4px}.telemetry-caption{font-size:4px;letter-spacing:0}
.edition-footer{position:relative;inset:auto;justify-content:center;gap:20px;padding:0 15px 24px;font-size:5px;letter-spacing:1px}.edition-footer span:first-child{display:none}
.page-bg,.page-bg.enhanced{background-size:98vw auto;background-position:center 260px;background-repeat:no-repeat}
.street-vignette{box-shadow:inset 0 0 50px #0003;background:linear-gradient(180deg,#03050410,transparent 35%,transparent 55%,#030504cc 90%)}
}
@media(prefers-reduced-motion:reduce){.map-route,.map-pulse{animation:none}}
/* HASLAS radio */
.drive-menu{left:26px;right:auto;width:266px;padding:14px}
.drive-menu>.panel-eyebrow{margin:0 0 9px;font-size:8px}
.drive-menu #rideToggle{min-height:32px;margin-bottom:18px;background:transparent;color:#a69d80;border:1px solid #bda24435;font-size:9px}
.drive-menu #rideToggle:hover{color:#ffe79c;background:#caaa3b15}
.player-heading,.player-list-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.player-heading{font-size:15px;letter-spacing:2px;color:#f1e8cc;font-weight:700}
.player-heading b{color:#e8c54d;font-weight:400}
.player-badge{font-size:6px;letter-spacing:1px;border:1px solid #bda24450;padding:4px;color:#c4ae6b}
.player-now{display:flex;gap:12px;align-items:center;margin-top:19px}
.player-disc{width:55px;height:55px;flex:0 0 55px;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#24231a 0 1px,#10110d 2px 4px);border:1px solid #bd9e414d;box-shadow:0 4px 15px #0008}
.player-disc span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#d4b548;color:#16190f;font:bold 15px Georgia,serif}
.player-track-info{min-width:0}.player-kicker{font-size:6px;letter-spacing:1.2px;color:#a99866}
#playerTitle{font-size:13px;font-weight:600;line-height:1.45;color:#eee9d9;margin:4px 0;overflow-wrap:anywhere}
.player-artist{font-size:6px;letter-spacing:1px;color:#9a967f}
.player-status{font-size:9px;color:#a49b7f;min-height:14px;margin:15px 0 5px}
.player-range{display:block;width:100%;height:18px;margin:0;appearance:none;background:transparent;cursor:pointer;--fill:0%;accent-color:#e8c54d}
.player-range::-webkit-slider-runnable-track{height:3px;border-radius:4px;background:linear-gradient(to right,#e8c54d var(--fill),#45402a var(--fill))}
.player-range::-moz-range-track{height:3px;border-radius:4px;background:#45402a}.player-range::-moz-range-progress{height:3px;background:#e8c54d}
.player-range::-webkit-slider-thumb{appearance:none;width:10px;height:10px;margin-top:-3.5px;border-radius:50%;background:#edcf68;border:0}
.player-range::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#edcf68;border:0}
.player-range:disabled{opacity:.4;cursor:default}
.player-time{display:flex;justify-content:space-between;color:#99927d;font:9px/1.5 Arial,sans-serif;font-variant-numeric:tabular-nums}
.player-controls{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:13px 0}
.player-button{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:#b1aa91;cursor:pointer;transition:background .2s,color .2s}
.player-button .ui-icon{width:17px;height:17px}.player-button:hover{color:#ffe79c;background:#caaa3b15}.player-button[aria-pressed=true]{color:#efd064;background:#caaa3b20;border-color:#caaa3b45}
.player-main{width:46px;height:46px;background:#e8c54d;color:#15170d;box-shadow:0 0 20px #e8c54d20}.player-main:hover{background:#f6dc7c;color:#15170d}
.player-volume{display:flex;align-items:center;gap:8px;margin-bottom:17px}.player-volume .player-button{width:28px;height:28px}.player-volume output{min-width:30px;text-align:right;color:#a69f87;font:9px Arial,sans-serif}
.player-list-heading{padding-top:14px;border-top:1px solid #bda24430;font-size:7px;letter-spacing:1.3px;color:#a69a73}
.player-list{list-style:none;padding:0;margin:9px 0 0;max-height:168px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#897437 transparent}
.player-list button{display:flex;align-items:center;gap:9px;width:100%;min-height:43px;text-align:left;background:transparent;border:1px solid transparent;border-radius:4px;color:#aca895;font:10px/1.5 Arial,sans-serif;padding:8px;cursor:pointer}
.player-list button:hover{background:#caaa3b10;color:#f1de99}.player-list button.is-current{background:#caaa3b12;border-color:#caaa3b35;color:#e8cd70}
.player-track-number{font-size:8px;color:#8a8063}.player-row-title{flex:1;overflow-wrap:anywhere}.player-track-indicator{opacity:0;color:#e8c54d}.is-current .player-track-indicator{opacity:.5}.is-playing .is-current .player-track-indicator{opacity:1}
#haslasPlayer :focus-visible{outline:2px solid #f5d66b;outline-offset:3px}
.is-playing .player-disc{animation:recordSpin 9s linear infinite}@keyframes recordSpin{to{transform:rotate(360deg)}}
@media(min-width:769px){
.drive-menu>.panel-eyebrow{margin-bottom:6px}
.drive-menu #rideToggle{min-height:28px;margin-bottom:10px}
.player-now{margin-top:10px;gap:10px}
.player-disc{width:44px;height:44px;flex-basis:44px}
.player-status{margin:8px 0 2px}
.player-controls{margin:6px 0}
.player-main{width:40px;height:40px}
.player-volume{margin-bottom:8px}
.player-list-heading{padding-top:9px}
.player-list{margin-top:6px;max-height:128px}
.player-list button{min-height:32px;padding:6px 7px}
}
@media(min-width:769px) and (max-width:1160px){.drive-menu{left:20px;right:auto;width:242px;padding:12px}.player-heading{font-size:13px}.player-badge{font-size:5px}.hero-title{left:160px}.hero-sub{left:160px}.player-now{gap:9px}#playerTitle{font-size:12px}}
@media(max-width:768px){.drive-menu{display:block;position:relative;right:auto;left:auto;top:auto;width:calc(100% - 40px);max-width:340px;padding:18px}.drive-menu>.panel-eyebrow{display:flex}.player-list button{min-height:46px;font-size:12px}#playerTitle{font-size:14px}.player-kicker,.player-artist{font-size:8px}.player-button{width:40px;height:40px}.player-main{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.is-playing .player-disc{animation:none}}