.home-actions{position:absolute;top:calc(50% + 76px);left:50%;transform:translateX(-50%);width:min(760px,94vw);text-align:center;z-index:5}
.mode-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.mode-buttons button{padding:9px 14px;font-size:14px}
.mode-description{font-size:13px;line-height:1.5;color:#6c5851;margin:10px 0}.account-strip{position:absolute;right:18px;top:18px;background:#fbf5e6;border:2px solid #3a2f2a;border-radius:14px;padding:8px 13px;font-size:14px}
#start .guide{top:calc(50% + 160px);bottom:auto;max-height:calc(50dvh - 176px);overflow-y:auto;box-sizing:border-box}
button[hidden]{display:none!important}button:disabled{opacity:.55;cursor:not-allowed}
.feature-dialog{position:fixed;inset:0;margin:auto;width:min(700px,94vw);max-height:90dvh;overflow:auto;box-sizing:border-box;border:3px solid #3a2f2a;border-radius:24px;padding:24px;background:#fbf5e6;color:#3a2f2a;font-family:inherit;box-shadow:8px 8px 0 #3a2f2a33}
.feature-dialog::backdrop{background:#3a2f2a88;backdrop-filter:blur(4px)}
.feature-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.feature-header h2{font-size:25px;margin:0}.feature-header button{font-size:13px;padding:7px 12px}
#feature-body>button{margin:8px 8px 0 0;font-size:16px;padding:11px 18px}
.auth-tabs{display:flex;gap:8px}.auth-tabs button{font-size:16px;padding:9px 22px}
.auth-form{display:grid;gap:16px;margin-top:22px}.auth-form label{display:grid;gap:7px;font-size:15px}
.auth-form input,.invite-text{box-sizing:border-box;width:100%;padding:12px;background:#fffdf7;border:2px solid #8a776b;border-radius:12px;font:inherit;color:#3a2f2a;user-select:text}
.auth-form input:focus,.invite-text:focus{outline:3px solid #f6a9c0;outline-offset:2px}.auth-form .big{font-size:18px;padding:12px}
.feature-note{font-size:13px;line-height:1.7;color:#756258;margin:16px 0 0}#feature-message{font-size:14px;color:#4b7742;min-height:20px;line-height:1.6;margin:14px 0 0}#feature-message.error{color:#a23246}
.points-summary{font-size:18px;font-weight:bold}.skin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.skin-card{text-align:center;border:2px solid #bca994;border-radius:17px;padding:12px 6px}.skin-card h3{font-size:15px}.skin-card button{font-size:12px;padding:8px 10px}
.skin-avatar{width:64px;height:64px;border:2px solid #3a2f2a;border-radius:50%;margin:auto;font-size:37px;display:grid;place-items:center}.history-table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}.history-table th,.history-table td{padding:10px 4px;border-bottom:1px solid #d8c8b4}.invite-text{height:125px;resize:vertical;font-size:14px;line-height:1.6}
.room-player{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:15px;border:2px solid #d1bea5;border-radius:12px;margin-bottom:10px}.room-player span{font-size:13px;color:#756258}
@media(max-width:600px){.feature-dialog{padding:17px}.feature-header h2{font-size:21px}.skin-grid{grid-template-columns:repeat(2,1fr)}.account-strip{font-size:12px;right:10px;top:10px}.room-player{align-items:flex-start;flex-direction:column}.mode-buttons button{font-size:12px;padding:7px 10px}}
@media(max-height:600px){.home-actions{top:calc(50% + 60px)}.mode-description{font-size:11px;margin:6px 0}.account-strip{font-size:11px;padding:5px 9px}.feature-dialog{max-height:94dvh}.mode-buttons button{padding:5px 9px;font-size:12px}}
@media(max-height:560px) and (min-width:600px){#start .guide{left:auto;right:12px;top:72px;transform:none;width:32vw;max-height:calc(100dvh - 92px)}#start .s-title{left:0;right:34%;top:22px}#start .s-title svg{display:none}#start #btn-start{left:33%}#start .home-actions{left:33%;width:62vw}}
.record-setting{display:flex;align-items:center;gap:10px;margin:16px 0}.record-setting input{width:20px;height:20px}.announcement-banner{position:absolute;left:18px;top:64px;max-width:min(380px,calc(100vw - 36px));z-index:5}.announcement-banner button{max-width:100%;white-space:normal;text-align:left;font-size:13px}.announcement-card{border-bottom:1px solid #eadfe7;padding:8px 0 16px}.announcement-content{white-space:pre-wrap;overflow-wrap:anywhere}
.room-summary{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.room-summary button{font-size:12px;padding:6px 10px}.room-code{letter-spacing:2px;font-size:22px}.room-player [data-kick]{font-size:13px;padding:6px 12px;color:#a23246}#room-tools{position:absolute;right:14px;top:240px;z-index:8;font-size:12px;padding:7px 12px}.room-player{flex-wrap:wrap}
#racer-labels{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}.racer-tag{position:absolute;left:0;top:0;text-align:center;padding:4px 5px;box-sizing:border-box;width:134px;max-width:134px;border:2px solid #fff;border-radius:9px;background:#185c9ae8;color:white;font:600 12px system-ui,sans-serif;white-space:nowrap;overflow:visible;filter:drop-shadow(0 2px 2px #14252c55);pointer-events:none}.racer-tag[data-role=self]{width:62px;font-size:15px;background:#157a56}.racer-tag[data-role=bot]{width:34px;padding:3px 2px;font-size:10px;background:#5c626ee8}.racer-tag::after{content:'';position:absolute;top:100%;left:50%;width:2px;height:var(--leader,5px);background:white;transform:translateX(-50%)}#identity-legend{display:flex;justify-content:center;gap:5px;margin-top:9px;font:600 10px system-ui,sans-serif;background:#fff9eddd;border-radius:8px;padding:4px 3px;white-space:nowrap}#identity-legend [data-role=self],.standing-identity[data-role=self]{color:#157a56}#identity-legend [data-role=human],.standing-identity[data-role=human]{color:#185c9a}#identity-legend [data-role=bot],.standing-identity[data-role=bot]{color:#5c626e}.standing-identity{white-space:nowrap;font-size:11px}.standing-identity[data-role=self]{font-weight:800}#room-tools{top:270px}@media(max-width:600px){.racer-tag[data-role=human]{width:102px;font-size:10px}.standing-identity{font-size:9px}#identity-legend{gap:3px;font-size:9px}#room-tools{top:270px}}
.recent-room-home{margin:10px 0}.recent-room-home>button{font-size:13px;padding:7px 14px}.current-room-home{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:12px;margin:9px auto;background:#fdf9ed;border:2px solid #3a2f2a;border-radius:12px;padding:8px}.current-room-home button{font-size:13px;padding:6px 12px}.current-room-home[hidden]{display:none}.recent-room-card{border:2px solid #d1bea5;border-radius:12px;padding:14px;margin:12px 0;text-align:left}.recent-room-card button{font-size:14px;margin:10px 8px 0 0;padding:8px 14px}#start .guide{top:calc(50% + 205px);max-height:calc(50dvh - 220px)}#start:has(.current-room-home:not([hidden])) .guide{top:calc(50% + 280px);max-height:calc(50dvh - 292px)}@media(max-height:560px) and (min-width:600px){#start .guide,#start:has(.current-room-home:not([hidden])) .guide{top:72px;max-height:calc(100dvh - 92px)}}
.home-actions{max-height:calc(50dvh - 92px);overflow-y:auto;scrollbar-width:thin;padding:0 4px 10px;box-sizing:border-box}#start .home-actions .guide,#start:has(.current-room-home:not([hidden])) .home-actions .guide{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;margin:12px auto 0;width:min(520px,100%);max-height:none}
/* Short landscape screens need a full-height menu, rather than a strip below the CTA. */
.home-actions{touch-action:pan-y;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
@media(orientation:landscape) and (max-height:560px){
  #start .s-title{left:0;right:58%;top:28px}
  #start .s-title svg{display:none}
  #start #btn-start{left:21%;top:52%;max-width:39vw;padding:14px 24px;font-size:23px}
  #start .home-actions{left:44%;right:12px;top:64px;bottom:12px;width:auto;max-height:none;transform:none;display:flex;flex-direction:column;gap:0;padding:0 6px 10px}
  #start .home-actions> *{flex-shrink:0}
  #start .home-actions .friend-home{order:-1;width:100%;box-sizing:border-box;margin:0 0 12px}
  #start .home-actions .friend-list{padding-top:8px}
  #start .home-actions .friend-tools h3{width:auto;font-size:14px}
  #start .home-actions .friend-tools button{font-size:11px;padding:5px 8px}
  #start .home-actions .friend-mini{font-size:11px}
  #start .home-actions .guide{width:100%}
}
/* Mobile HUD and translucent identity panels keep the same warm ink and cream palette. */
.racer-tag{background:#185c9a99;border-color:#ffffffa8;backdrop-filter:blur(2px);text-shadow:0 1px 2px #14252c}
.racer-tag[data-role=self]{background:#157a5699}.racer-tag[data-role=bot]{background:#5c626e88}
#sound-toggle{position:absolute;right:18px;bottom:120px;z-index:12;padding:7px 10px;font-size:17px;pointer-events:auto}
#hammer-use{pointer-events:auto;font-size:14px;padding:8px 10px}#hammer-use[hidden]{display:none}#slot-item{cursor:pointer}
.friend-home{text-align:left;margin:14px auto 0;border:2px solid #d1bea5;border-radius:16px;padding:12px;background:#fbf5e6e8;max-width:620px}.friend-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.friend-tools h3{margin:0 8px 0 0;font-size:16px}.friend-tools button{font-size:12px;padding:6px 9px}.friend-list{display:flex;gap:14px;overflow-x:auto;padding-top:12px}.friend-mini{display:grid;justify-items:center;gap:5px;min-width:62px;font-size:12px}.friend-avatar{width:48px;height:48px;flex-shrink:0;border:2px solid #3a2f2a;border-radius:50%;padding:0;font-size:29px;display:grid;place-items:center}.friend-avatar:hover{transform:translateY(-2px)}.player-id{font:11px system-ui;overflow-wrap:anywhere;color:#756258}.player-bio{white-space:pre-wrap;overflow-wrap:anywhere}.mount-card{display:block;width:100%;padding:22px;margin:16px 0;border:2px solid #3a2f2a;border-radius:18px;text-align:center;color:#3a2f2a;font-size:18px;box-shadow:0 4px 0 #3a2f2a99}.mount-summary{text-align:center}.mount-summary h3{margin:0 0 8px}.mount-stage{height:300px;width:100%;border:3px solid #3a2f2a;border-radius:20px;overflow:hidden;position:relative;background:#c3cdf3;box-shadow:0 5px 0 #3a2f2a88}.mount-stage #gl.mount-canvas{position:relative!important;display:block;inset:auto;width:100%;height:100%;touch-action:none}.profile-form{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.profile-form label{flex:1 1 160px;display:flex;flex-direction:column;gap:6px;font-size:14px}.profile-form input,.profile-form select,.profile-form textarea{box-sizing:border-box;min-width:0;border:2px solid #b59d89;border-radius:10px;background:#fff9ed;padding:10px;color:#3a2f2a;font:inherit;touch-action:manipulation}.profile-form>input{flex:1 1 160px}.profile-form textarea{min-height:70px}.profile-form button{font-size:14px;padding:9px 14px}.feature-dialog input[type=range]{width:100%;accent-color:#e0527a}.feature-dialog,.friend-list{touch-action:pan-y}
body.touch #speedo{width:92px;height:61px}body.touch #hud .hud-bl{top:116px;left:12px;width:154px;gap:8px}body.touch #nitro-track{height:10px}body.touch #nitro-wrap{padding:4px 7px;gap:6px}body.touch #nitro-label{font-size:10px}body.touch #minimap-wrap{top:110px}body.touch #sound-toggle{bottom:auto;top:78px;right:14px;padding:4px 8px;font-size:16px}
@media(max-width:600px){.mount-stage{height:250px}.friend-tools h3{width:100%}.friend-home{padding:10px}.friend-tools button{font-size:11px}.profile-form{gap:8px}}
@media(orientation:landscape){body.touch #hud .hud-br{right:134px;top:14px}body.touch #hud .hud-bl{top:108px}body.touch #minimap-wrap{top:14px}body.touch #sound-toggle{right:134px;top:82px}}
/* Keep extra counters below the compact item tray as they appear during a race. */
body.touch #hud .hud-bl{top:94px}body.touch #race-info #weather-chip{display:none}body.touch #race-info #bean-chip{position:absolute;left:0;top:230px}body.touch #race-info #delta-chip{position:absolute;left:0;top:264px}
body.touch #rotate-tip{left:50%;top:auto;bottom:190px;transform:translateX(-50%);width:auto;max-width:220px;border-width:2px;padding:7px 10px;border-radius:12px;font-size:11px;box-shadow:0 3px 0 #3a2f2a66}body.touch #rotate-tip .big{display:none}
@media(orientation:landscape){body.touch #hud .hud-bl{top:94px}}
body.touch #sound-toggle{top:18px;right:112px}@media(orientation:landscape){body.touch #sound-toggle{top:18px;right:240px}}

@media(orientation:portrait){body.touch #toasts{left:12px;top:178px;transform:none;max-width:230px;align-items:flex-start}body.touch #toasts .toast{font-size:12px;padding:5px 8px}body.touch #race-info #bean-chip{top:300px}body.touch #race-info #delta-chip{top:334px}}
/* Lighter floating identifiers preserve role colors without covering the rider. */
.racer-tag{background:#185c9a55;border-color:#ffffff55;backdrop-filter:none;filter:drop-shadow(0 1px 1px #14252c33)}.racer-tag[data-role=self]{background:#157a5655;border-color:#ffffff55}.racer-tag[data-role=bot]{background:#5c626e44;border-color:#ffffff44}.racer-tag::after{background:#ffffff55}
.skin-shape{font-size:12px;color:#756258;min-height:32px;margin:6px 0 12px}
.game-help-page{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:24px;box-sizing:border-box;border:0;overflow-y:auto;touch-action:pan-y;background:radial-gradient(ellipse at top left,#dbe0f5 0,transparent 55%),#fbf5e6;color:#3a2f2a;font-family:inherit}.game-help-page::backdrop{background:#fbf5e6}.game-help-content{max-width:800px;margin:0 auto;padding-bottom:30px}.game-help-header{display:flex;gap:12px;align-items:center;justify-content:space-between;position:sticky;top:-24px;padding:14px 0;background:#fbf5e6ed;z-index:1}.game-help-header h1{font-size:28px;margin:0}.game-help-header button{font-size:14px;padding:9px 14px}.game-help-page .guide{position:relative;left:auto;top:auto;bottom:auto;transform:none;width:100%;box-sizing:border-box;max-height:none;margin:18px 0;padding:18px}.game-help-page .g-row{font-size:14px;line-height:1.8;padding:7px 0}.game-help-page .gv{overflow-wrap:anywhere}.help-card{border:2px solid #d1bea5;border-radius:16px;padding:16px;background:#fffaf0;margin:16px 0;box-shadow:0 3px 0 #3a2f2a22}.help-card h2{font-size:19px;margin:0 0 8px}.help-card p{font-size:14px;line-height:1.8;margin:0}@media(max-width:600px){.game-help-page{padding:16px}.game-help-header{top:-16px}.game-help-header h1{font-size:23px}.game-help-page .guide{padding:12px}.game-help-page .g-row{font-size:12px}.help-card{padding:13px}}
.model-loading{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(ellipse at 50% 30%,#d9e6c6,#fbf5e6 68%);padding:24px;text-align:center;box-sizing:border-box}.model-loading h2{font-size:24px;color:#3a2f2a;margin:0}.model-loading p{font-size:14px;color:#756258;max-width:420px;line-height:1.7;margin:0}.model-loading button{font-size:16px;padding:10px 24px}.mount-stage{height:360px}.mount-environment-status{position:absolute;z-index:2;bottom:12px;left:50%;transform:translateX(-50%);padding:7px 12px;border-radius:10px;background:#fff9ede8;color:#756258;font-size:12px;cursor:pointer}.mount-stage #gl.mount-canvas{z-index:1}@media(max-width:600px){.mount-stage{height:320px}}
