*{box-sizing:border-box}body{margin:0;background:#101514;color:#f4eedf;font:15px/1.65 Arial,sans-serif}a{color:#dfc18a;text-decoration:none}button,input{font:inherit}button{border:1px solid #76623f;background:#28312c;color:#f1e7d2;padding:10px 16px;border-radius:9px;cursor:pointer}button:hover{border-color:#ead09a}button:disabled{opacity:.5;cursor:wait}.gold{background:#dfc18a;color:#161b16;font-weight:bold}input{width:100%;background:#101714;border:1px solid #55604b;color:#f4eddd;padding:12px;border-radius:8px;margin:7px 0 14px}label{display:block;font-size:13px;color:#dcca9e}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #dfc18a;outline-offset:4px}[hidden]{display:none!important}#site-header{height:94px;padding:20px 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #3b4735}.brand{display:flex;align-items:center;gap:15px;color:#eee7d4;font-size:22px;font-weight:bold;letter-spacing:.14em}.brand img{width:50px}.brand small{display:block;font-size:9px;letter-spacing:.17em;color:#d9bc80}nav{display:flex;align-items:center;gap:22px;font-size:13px}#welcome{max-width:1300px;margin:auto;display:grid;grid-template-columns:1.1fr 1fr;gap:70px;padding:70px 35px}.eyebrow{font-size:10px;letter-spacing:.2em;color:#dfc18a;font-weight:bold}h1{font:normal clamp(46px,5vw,76px)/1.08 Georgia,serif;margin:25px 0}h2{font-size:27px;line-height:1.25;margin:15px 0}h3{font-size:16px}.intro>p{color:#bac7b4;font-size:17px;max-width:490px}.features{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0}.features span{border:1px solid #606744;border-radius:20px;padding:7px 12px;font-size:11px;color:#dfc18a}.fine{font-size:12px!important;color:#a9b7a2!important}.card{background:linear-gradient(130deg,#303427,#17221b);border:1px solid #566244;border-radius:20px;padding:30px;align-self:start}.card>p{color:#bfccb7}form{margin:22px 0}form button{width:100%}.check{display:flex;align-items:center;gap:10px}.check input{width:auto;margin:0}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.profile{display:flex;align-items:center;gap:15px}.avatar{width:54px;height:54px;border-radius:14px;object-fit:cover;border:1px solid #bda16a}.profile strong{font-size:19px;display:block}.profile small{color:#dfc18a;display:block}#join{border-top:1px solid #4a553c;padding-top:22px}#room-code{text-transform:uppercase;letter-spacing:.15em}.room{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid #455038}.room small{display:block;color:#aab79e}#auth-status,#lobby-status{overflow-wrap:anywhere;color:#e4bc8e}#drive{position:fixed;inset:0;background:#141810;z-index:50}.drive-bar{height:72px;display:flex;align-items:center;gap:12px;padding:10px 18px;background:#151d18;border-bottom:1px solid #685d41}.drive-bar>div:first-child{margin-right:auto}.drive-bar strong{font-size:14px}.drive-bar small{display:block;color:#b2c3a7;font-size:10px}.drive-bar button,.drive-bar summary{font-size:12px;white-space:nowrap}#simulator{position:absolute;inset:72px 0 0}iframe{border:0;width:100%;height:100%;display:block}#roster{position:relative}summary{cursor:pointer;color:#dfc18a;padding:10px}#players{position:absolute;top:45px;right:0;width:280px;padding:16px;background:#1a261e;border:1px solid #857044;border-radius:12px;z-index:70}.driver{display:flex;align-items:center;gap:12px;padding:10px 0}.driver .avatar{width:38px;height:38px}.driver small{color:#dfc18a}#reconnect{position:absolute;inset:72px 0 0;display:grid;place-items:center;background:#10170fe6;z-index:80}#reconnect .card{max-width:500px;margin:20px}#reconnect button{margin:8px}body:has(#drive:not([hidden])){overflow:hidden}@media(max-width:850px){#welcome{grid-template-columns:1fr;gap:25px;padding:35px 22px}.intro>p{max-width:none}h1{font-size:52px}#site-header{padding:15px 20px;height:auto;gap:15px;flex-wrap:wrap}.drive-bar{padding:8px;gap:5px;flex-wrap:wrap;height:104px}.drive-bar>div:first-child{width:100%;line-height:1.3}.drive-bar button,.drive-bar summary{padding:7px;font-size:10px}#simulator,#reconnect{top:104px}.card{padding:24px}#players{right:-60px}nav{gap:15px}}



/* Mobile game viewport: single scrollable toolbar, no wrapped controls over canvas. */

#drive{height:100dvh;bottom:auto;display:flex;flex-direction:column}.drive-bar{height:auto;min-height:52px;flex:0 0 auto;flex-wrap:nowrap;padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left));gap:6px;overflow-x:auto}.drive-bar>div:first-child{min-width:120px;width:auto;max-width:30vw;flex-shrink:0}.drive-bar strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drive-bar button{min-height:40px;flex-shrink:0}#simulator{position:relative;inset:auto;flex:1;min-height:0}#reconnect{inset:52px 0 0}#players{position:fixed;top:58px;right:8px;width:min(280px,calc(100vw - 16px));max-height:60dvh;overflow:auto}.immersive .drive-bar{position:absolute;top:6px;right:6px;z-index:100;width:auto;max-width:96vw;background:#152018e6;border-radius:10px}.immersive .drive-bar>div:first-child,.immersive #copy-code,.immersive #roster,.immersive #leave{display:none}.immersive #fullscreen{font-size:11px}#welcome{min-width:0}.card,.intro{min-width:0}@media(max-width:600px){#welcome{padding:22px 16px;gap:18px}h1{font-size:36px;margin:16px 0}.intro>p{font-size:14px}.features{margin:16px 0;gap:6px}.card{padding:20px}.drive-bar>div:first-child{min-width:95px}.drive-bar button,.drive-bar summary{font-size:11px;padding:6px 9px}}


/* Mobile game viewport: single scrollable toolbar, no wrapped controls over canvas. */
#drive{height:100dvh;bottom:auto;display:flex;flex-direction:column}.drive-bar{height:auto;min-height:52px;flex:0 0 auto;flex-wrap:nowrap;padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left));gap:6px;overflow-x:auto}.drive-bar>div:first-child{min-width:120px;width:auto;max-width:30vw;flex-shrink:0}.drive-bar strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drive-bar button{min-height:40px;flex-shrink:0}#simulator{position:relative;inset:auto;flex:1;min-height:0}#reconnect{inset:52px 0 0}#players{position:fixed;top:58px;right:8px;width:min(280px,calc(100vw - 16px));max-height:60dvh;overflow:auto}.immersive .drive-bar{position:absolute;top:6px;right:6px;z-index:100;width:auto;max-width:96vw;background:#152018e6;border-radius:10px}.immersive .drive-bar>div:first-child,.immersive #copy-code,.immersive #roster,.immersive #leave{display:none}.immersive #fullscreen{font-size:11px}#welcome{min-width:0}.card,.intro{min-width:0}@media(max-width:600px){#welcome{padding:22px 16px;gap:18px}h1{font-size:36px;margin:16px 0}.intro>p{font-size:14px}.features{margin:16px 0;gap:6px}.card{padding:20px}.drive-bar>div:first-child{min-width:95px}.drive-bar button,.drive-bar summary{font-size:11px;padding:6px 9px}}

#how-to-play ol{padding-left:22px;line-height:1.7}#how-to-play li{padding:6px 0}.download-links{display:flex;gap:10px;flex-wrap:wrap}.download-links a{display:inline-block;padding:12px 16px;border-radius:10px;text-decoration:none;font-weight:700}@media(max-width:500px){.download-links{flex-direction:column}.download-links a{text-align:center}}

/* The outer document owns orientation and native fullscreen, never the iframe. */
#drive{width:var(--view-w,100vw);height:var(--view-h,100dvh);overflow:hidden}
#drive.immersive #simulator{position:absolute;inset:0;width:100%;height:100%}
#view-menu{display:none;position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:110;min-height:40px;padding:6px 16px;background:#14241edb;touch-action:manipulation}
#drive.immersive #view-menu{display:block}
#drive.immersive .drive-bar{display:none;top:auto;bottom:56px;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 16px);overflow:visible;flex-wrap:wrap;justify-content:center}
#drive.immersive.view-menu-open .drive-bar{display:flex}
#drive.immersive .drive-bar #leave,#drive.immersive .drive-bar #roster{display:block}
#drive.immersive #players{position:absolute;top:auto;bottom:48px;right:0}
@media(orientation:portrait){
 #drive.landscape-mode{inset:auto;top:0;left:var(--view-w,100vw);width:var(--view-h,100dvh);height:var(--view-w,100vw);transform:rotate(90deg);transform-origin:0 0}
 #drive.landscape-mode .drive-bar{max-width:calc(var(--view-h,100dvh) - 16px)}
}