/* Refined workshop identity */
.brand{width:210px;flex-direction:row;align-items:center;justify-content:flex-start;gap:11px;padding:0 20px;font-style:normal;line-height:1}
.brand>span{font-size:inherit;letter-spacing:normal}
.brand .brand-emblem{display:block;width:36px;height:42px;color:#f2b84b;flex-shrink:0}
.brand-emblem svg{width:100%;height:100%}
.brand .brand-type{display:flex;flex-direction:column;gap:3px}
.brand .brand-kicker{font:600 11px/1 'Barlow Condensed',sans-serif;letter-spacing:2px;color:#b9bfc7}
.brand .brand-type strong{font:800 30px/.9 'Barlow Condensed',Impact,sans-serif;color:#e8eaed;letter-spacing:1.9px}
.brand .brand-type small{font:700 6px/1.2 Manrope,sans-serif;letter-spacing:2.3px;color:#d8ad62;margin:2px 0 0}
#header{padding-right:86px}
#display-controls{display:flex;gap:1px;align-items:center}
.install-button{color:var(--gold)}
.install-label{display:none}
.rotate-install{margin:25px auto 0;padding:12px 16px;border:1px solid #f2b84b55;border-radius:3px;color:var(--gold);font-size:11px;min-height:44px}
.installed-app .rotate-install{display:none}
.installed-app .install-button{display:none}
/* Installation is available in both orientations, above the rotate prompt. */
#install-layer:empty{display:none}
#install-layer{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px;isolation:isolate}
.install-backdrop{position:absolute;inset:0;background:#05080ce8;backdrop-filter:blur(7px)}
.install-card{position:relative;width:420px;max-width:100%;max-height:calc(100dvh - 36px);overflow:auto;padding:30px;border:1px solid #ffffff20;background:#1b2026;box-shadow:0 20px 90px #000a;border-radius:5px;animation:content-in .25s ease}
.install-close{position:absolute;right:12px;top:10px;font-size:25px}
.install-emblem{width:49px;height:49px;color:var(--gold);margin-bottom:18px}
.install-emblem svg{width:100%;height:100%}
.install-card h2{font:600 36px/1.04 'Barlow Condensed',sans-serif;margin:12px 0 15px}
.install-card>p{font-size:12px;line-height:1.8;color:#a7afb9}
.install-steps{list-style:none;margin:23px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.install-steps li{display:flex;gap:13px;align-items:flex-start}
.install-steps li>b{font:600 21px/1 'Barlow Condensed',sans-serif;color:var(--gold);padding-top:1px}
.install-steps strong{display:block;font-size:12px;font-weight:700;line-height:1.5}
.install-steps small{display:block;font-size:10px;color:#929aa5;line-height:1.8;margin-top:4px}
.install-card .install-fine{font-size:10px;border-top:1px solid #ffffff15;padding-top:16px;margin:20px 0 0}
.install-native{margin-top:23px;justify-content:space-between}
/* Raze's first-day introduction. */
.tutorial-open .scene{filter:brightness(.68)}
.tutorial-card{position:absolute;left:28px;bottom:113px;width:425px;max-width:calc(100% - 56px);padding:23px 25px 20px;z-index:12;background:#191e25fa;border:1px solid #ffffff26;border-top:2px solid var(--gold);box-shadow:0 18px 50px #0007;animation:content-in .3s ease}
.tutorial-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tutorial-top .eyebrow{font-size:7px;letter-spacing:1.3px}
.tutorial-top button{font-size:9px;color:#929aa5;min-height:28px;padding:0}
.tutorial-top button:hover{color:var(--text)}
.tutorial-speaker{display:flex;gap:9px;align-items:center;margin-top:13px}
.tutorial-speaker>span{display:grid;place-items:center;width:28px;height:32px;border:1px solid #f2b84b40;background:#f2b84b0a;color:var(--gold);font:700 20px 'Barlow Condensed',sans-serif}
.tutorial-speaker strong{display:block;font-size:9px;letter-spacing:1.2px}
.tutorial-speaker small{display:block;margin-top:3px;font-size:8px;color:#929aa5}
.tutorial-card h2{font:600 34px/1.04 'Barlow Condensed',Impact,sans-serif;margin:17px 0 13px}
.tutorial-card>p{font-size:12px;line-height:1.85;color:#b9c0c9;margin:0}
.tutorial-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:20px;border-top:1px solid #ffffff14;padding-top:16px}
.tutorial-bottom .primary{font-size:10px;min-height:40px;padding:0 13px;gap:20px}
.tutorial-progress{display:flex;gap:4px}
.tutorial-progress i{width:15px;height:3px;background:#3a414b}
.tutorial-progress i.active{background:var(--gold)}
.tutorial-flow{display:flex;align-items:center;gap:10px;margin-top:15px;font-size:8px;letter-spacing:1px;color:#d3d8df}
.tutorial-flow b{color:var(--gold)}
.tutorial-inline{padding:14px;background:#f2b84b09;border:1px solid #f2b84b40;border-radius:3px;margin-bottom:20px}
.tutorial-inline .eyebrow{font-size:8px}
.tutorial-inline p{font-size:11px;margin:8px 0}
.tutorial-inline button{font-size:11px;color:var(--gold);min-height:35px;padding:0;font-weight:700}
.tutorial-inspect #vehicle-bar>.primary{outline:2px solid #fff3;outline-offset:4px}
@media(max-width:1150px){.brand{width:180px;padding:0 14px;gap:8px}.brand .brand-emblem{width:30px;height:36px}.brand .brand-type strong{font-size:27px}.brand .brand-kicker{font-size:9px;letter-spacing:1.8px}.brand .brand-type small{font-size:5px;letter-spacing:2px}}
/* Fill the actual phone viewport; crop the scene, never stretch it. */
@media(orientation:landscape) and (max-height:600px), (orientation:landscape) and (hover:none) and (pointer:coarse){
 body,html:fullscreen body,html.expanded-view body{padding:0;width:100%;height:100dvh;min-height:0;overflow:hidden;display:block}
 .game,html:fullscreen .game,html.expanded-view .game{width:100%;height:100dvh;min-width:0;max-width:none;max-height:none;aspect-ratio:auto;border:0;border-radius:0}
 #header{height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) calc(112px + env(safe-area-inset-right)) 0 env(safe-area-inset-left)}
 .brand{width:160px;padding:0 12px;gap:8px}
 .brand .brand-emblem{width:27px;height:33px}
 .brand .brand-type strong{font-size:25px}
 .brand .brand-kicker{font-size:8px;letter-spacing:1.7px}
 .brand .brand-type small{font-size:5px;letter-spacing:1.6px}
 .nav-link{flex-direction:column;font-size:8px;gap:4px;padding:0 6px}
 .nav-link .icon{width:16px;height:16px}
 .utilities{display:none}
 .mobile-menu{display:grid;margin:0 6px;width:36px;height:42px}
 #display-controls{top:calc(7px + env(safe-area-inset-top));right:calc(6px + env(safe-area-inset-right))}
 #display-controls .icon-button{height:42px;width:36px}
 #display-controls .fullscreen-button{display:none}
 #display-controls .install-button{width:auto;padding:0 10px;display:flex;gap:7px}
 #display-controls .install-label{display:inline;font-size:10px;font-weight:700}
 .installed-app #header{padding-right:calc(12px + env(safe-area-inset-right))}
 .installed-app #display-controls{display:none}
 #world{top:calc(56px + env(safe-area-inset-top));bottom:calc(65px + env(safe-area-inset-bottom))}
 .scene{inset:0;background-size:cover;background-position:center 30%}
 #vehicle-bar{height:calc(65px + env(safe-area-inset-bottom));padding:0 calc(17px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(17px + env(safe-area-inset-left));gap:20px}
 .vehicle-name{min-width:185px}.vehicle-name>strong{font-size:23px}.vehicle-name .eyebrow{font-size:6px}
 .condition{width:120px;max-width:145px}.parts-value{display:none}
 .primary{min-height:42px;font-size:10px}.primary .icon{width:17px}
 .scene-heading{top:15px}.scene-heading h1{font-size:25px}.scene-heading .eyebrow{font-size:6px}.scene-heading p{display:none}
 .location{left:calc(17px + env(safe-area-inset-left));top:13px}.location small{font-size:6px}.scene-caption{left:calc(17px + env(safe-area-inset-left))}
 .side-panel{padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);width:440px}
 .tutorial-card{left:calc(18px + env(safe-area-inset-left));bottom:calc(80px + env(safe-area-inset-bottom));width:380px;max-width:calc(100% - 50px);padding:14px 20px}
 .tutorial-speaker{margin-top:5px}.tutorial-speaker>span{width:22px;height:25px;font-size:17px}
 .tutorial-card h2{font-size:28px;margin:10px 0}.tutorial-card>p{font-size:11px;line-height:1.7}
 .tutorial-bottom{margin-top:12px;padding-top:10px}.tutorial-bottom .primary{min-height:36px;font-size:9px}
 .tutorial-flow{margin-top:10px;font-size:7px;gap:8px}
 .dialogue-card{left:calc(18px + env(safe-area-inset-left));bottom:calc(80px + env(safe-area-inset-bottom))}
 .install-card{width:600px;display:grid;grid-template-columns:180px 1fr;column-gap:30px;padding:24px 30px}
 .install-emblem{grid-column:1;margin-bottom:10px;width:38px;height:38px}
 .install-card>.eyebrow,.install-card h2,.install-card>p:first-of-type{grid-column:1}
 .install-card h2{font-size:29px;margin:10px 0}.install-card>p{font-size:10px}
 .install-steps,.install-native{grid-column:2;grid-row:1/5;margin:12px 0 0}.install-native{align-self:center}
 .install-card .install-fine{grid-column:1/-1;margin-top:12px;padding-top:10px;font-size:9px}
}
@media(orientation:landscape) and (max-width:740px){.brand{width:133px;gap:6px;padding:0 9px}.brand .brand-emblem{width:22px}.brand .brand-type strong{font-size:22px}.brand .brand-kicker{font-size:7px;letter-spacing:1.2px}.brand .brand-type small{font-size:4px;letter-spacing:1.3px}.nav-link{font-size:7px;padding:0 4px}.vehicle-name{min-width:160px}.condition{padding-left:12px;width:110px}.primary{font-size:9px;padding:0 12px}.primary .icon:last-child{margin-left:0}}
@media(orientation:landscape) and (max-height:360px){.tutorial-card{bottom:73px;padding:10px 16px;width:365px}.tutorial-speaker{display:none}.tutorial-card h2{font-size:25px;margin:7px 0}.tutorial-card>p{font-size:10px;line-height:1.6}.tutorial-bottom{padding-top:8px;margin-top:9px}.tutorial-top button{min-height:22px}}