:root { --orange: #ff8a3a; --gold: #ffd84a; --cream: #f3ecff; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; color: #fff; font-family: 'Oswald', 'Arial Narrow', sans-serif; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; touch-action: manipulation; }
body { position: fixed; inset: 0; }
input { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
#bg { position: fixed; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#stage { position: absolute; left: 0; top: 0; overflow: hidden; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: none; background: #000; }
body.racing #game { display: block; }
#ui { position: absolute; inset: 0; }
.scene { position: absolute; inset: 0; }
body.racing #bg { visibility: hidden; }

/* ------- typography */
.title { position: absolute; left: 1.2rem; top: 0.4rem; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 6.4em; line-height: 1; color: var(--orange); text-shadow: 0 0 0.3em rgba(255, 120, 40, .45), 0.05em 0.05em 0 #000; letter-spacing: .02em; }
.title.sm { position: static; font-size: 5em; margin-bottom: .1em; }
.title.right { left: auto; right: 1em; top: 0.5em; font-size: 5em; text-align: right; }
.desc { position: absolute; left: 2.4rem; top: 8.4rem; width: 30rem; font-size: 2.5em; line-height: 1.28; font-weight: 300; text-shadow: 0.06em 0.06em 0.1em #000; }
.desc2 { font-size: 1.9em; line-height: 1.25; font-weight: 300; margin: .5em 0 .7em; text-shadow: 0.06em 0.06em 0.1em #000; }
.subline { position: absolute; left: 2.4rem; top: 8.4rem; font-size: 2.2em; color: var(--gold); }
.lines { font-size: 2.3em; line-height: 1.3; font-weight: 300; text-shadow: .06em .06em .1em #000; }
.ok { color: #6dff7a; } .bad { color: #ff6a5a; }
b { font-weight: 500; }

/* ------- bottom bar like the original menus */
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 8rem; padding: 0 3em; display: flex; align-items: center; justify-content: space-around; background: linear-gradient(transparent, rgba(0, 0, 0, .82) 40%); }
.bar .it { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 3.4em; color: #c9bdf2; cursor: pointer; text-shadow: .06em .06em 0 #000; opacity: .85; white-space: nowrap; padding: 0 .2em; }
.bar .it.sel { color: var(--gold); opacity: 1; }
.bar .it.sel::before { content: '➔ '; }
.bar.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); height: 9.5em; align-content: center; padding: 0 5em; gap: .1em 2em; justify-items: start; }
.bar.grid3 .it { font-size: 3em; }
.bar.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); height: 9em; align-content: center; padding: 0 4em; gap: 0 1em; justify-items: start; }
.bar.grid4 .it { font-size: 2.8em; }

/* ------- art placement */
.art-right { position: absolute; right: 1rem; top: 5rem; width: 36rem; height: 26rem; }
.portrait { position: absolute; right: 3rem; top: 1.5rem; width: 27rem; height: 36rem; filter: drop-shadow(0 0 1.4em rgba(120, 60, 200, .6)); }
.portrait.small { right: 1.5em; top: 5em; width: 14em; height: 18.5em; }
.bikeart { position: absolute; left: 58%; top: 5.5rem; width: 56rem; height: 25rem; transform: translateX(-50%); }
.bikeart.small { left: auto; right: 17em; top: 8em; width: 34em; height: 16em; transform: none; }
.pinfo { position: absolute; left: 2rem; top: 1.5rem; width: 30rem; }
.binfo { position: absolute; left: 2.4rem; bottom: 9.6rem; width: 28rem; }
.stat { display: flex; align-items: center; gap: .8em; font-size: 1.5em; margin: .12em 0; }
.stat span { width: 5.8em; color: #cfc4ff; font-weight: 300; letter-spacing: .06em; }
.stat div { flex: 1; height: .55em; background: rgba(255, 255, 255, .13); border-radius: .3em; overflow: hidden; }
.stat i { display: block; height: 100%; }
.wallet { position: absolute; right: 2rem; bottom: 9.6rem; font-size: 2.2em; color: var(--gold); text-shadow: .06em .06em .1em #000; }

/* ------- title scene */
.titlescene #art { position: absolute; left: 0; top: 16rem; width: 100%; height: 20rem; }
.logo { position: absolute; left: 0; right: 0; top: 1.2rem; text-align: center; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 11em; line-height: 1; color: #fff; text-shadow: 0 0 .18em #ff3d7f, 0 0 .5em rgba(255, 61, 127, .6), .04em .04em 0 #000; letter-spacing: .04em; }
.logo span { color: var(--orange); margin-left: .12em; text-shadow: 0 0 .18em #ff8a3a, 0 0 .5em rgba(255, 138, 58, .6), .04em .04em 0 #000; }
.tag { position: absolute; left: 0; right: 0; top: 13.6rem; text-align: center; font-size: 2.4em; font-weight: 300; color: #ffe8c8; text-shadow: .06em .06em .1em #000; }
.press { position: absolute; left: 0; right: 0; bottom: 4.2rem; text-align: center; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 3.6em; color: var(--gold); text-shadow: .05em .05em 0 #000; }
.foot { position: absolute; left: 0; right: 0; bottom: 1.2rem; text-align: center; font-size: 1.7em; color: #c9bdf2; font-weight: 300; }
.blink { animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* ------- level cards */
.cards { position: absolute; left: 2rem; right: 2rem; top: 11rem; display: flex; gap: 1.2em; }
.card { flex: 1; height: 24em; border-radius: .6em; padding: 1em .8em; position: relative; border: .25em solid rgba(255, 255, 255, .15); cursor: pointer; opacity: .75; transition: transform .12s, opacity .12s; box-shadow: inset 0 -14em 8em -4em rgba(0, 0, 0, .65); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.card.sel { opacity: 1; transform: translateY(-.8em); border-color: var(--gold); box-shadow: 0 0 1.6em rgba(255, 216, 74, .5), inset 0 -14em 8em -4em rgba(0, 0, 0, .65); }
.card.locked { filter: grayscale(.9) brightness(.6); }
.card .num { position: absolute; left: .2em; top: 0; font-family: 'Bebas Neue', Impact; font-size: 5em; line-height: 1; opacity: .85; text-shadow: .05em .05em 0 #000; }
.card .nm { font-family: 'Bebas Neue', Impact; font-size: 2.6em; line-height: 1; text-shadow: .05em .05em 0 #000; margin-bottom: .2em; }
.card .bl { font-size: 1.4em; font-weight: 300; line-height: 1.2; min-height: 4.6em; }
.card .len { font-size: 1.5em; color: var(--gold); }

/* ------- vertical menu (hub, results) */
.menu { position: absolute; left: 2.4rem; bottom: 1.2rem; }
.menu.low { bottom: 2.5em; display: flex; gap: 3em; }
.mi { font-family: 'Bebas Neue', Impact; font-size: 3em; color: #c9bdf2; cursor: pointer; text-shadow: .05em .05em 0 #000; line-height: 1.1; }
.mi.sel { color: var(--gold); } .mi.sel::before { content: '➔ '; }
.hubl { position: absolute; left: 2.2rem; top: 7.5rem; font-size: 2em; }
.banner { position: absolute; left: 2.4rem; top: 29rem; font-size: 2.4em; color: #6dff7a; }

/* ------- forms */
.rows { position: absolute; left: 2.4rem; top: 18rem; width: 34rem; }
.row { display: flex; justify-content: space-between; align-items: center; font-family: 'Bebas Neue', Impact; font-size: 3em; padding: .1em .5em; margin: .08em 0; color: #c9bdf2; cursor: pointer; border-left: .15em solid transparent; }
.row.sel { color: var(--gold); background: linear-gradient(90deg, rgba(255, 138, 58, .28), transparent); border-left-color: var(--orange); }
.row .vl { display: flex; align-items: center; gap: .5em; font-family: 'Oswald'; font-size: .8em; color: #fff; }
.row .ar { font-style: normal; color: var(--orange); cursor: pointer; padding: 0 .2em; }
.row.go .lb { color: #6dff7a; }
.form { position: absolute; left: 2.4rem; top: 13rem; width: 36rem; display: flex; flex-direction: column; gap: .6rem; }
.form label { font-size: 1.6em; color: #cfc4ff; letter-spacing: .08em; }
input { font-family: 'Bebas Neue', Impact; font-size: 3em; background: rgba(0, 0, 0, .6); color: var(--gold); border: .08em solid #6a4bb5; border-radius: .2em; padding: .1em .4em; outline: none; width: 100%; user-select: text; }
input:focus { border-color: var(--orange); }
.join { display: flex; gap: .8em; } .join input { width: 9em; text-transform: uppercase; letter-spacing: .3em; }
.btn { font-family: 'Bebas Neue', Impact; font-size: 3.2em; background: linear-gradient(#ff9a4a, #d9561e); color: #fff; border: 0; border-radius: .2em; padding: .1em .8em; cursor: pointer; text-shadow: .05em .05em 0 #0006; box-shadow: 0 .12em 0 #7a2c0c; }
.btn:hover { filter: brightness(1.15); } .btn:active { transform: translateY(.08em); box-shadow: 0 .04em 0 #7a2c0c; }
.btn.dim { background: linear-gradient(#59507a, #3a3358); box-shadow: 0 .12em 0 #1c1830; }
.status { font-size: 1.9em; min-height: 1.4em; }
.rooms { position: absolute; right: 2.4rem; top: 16rem; width: 28rem; font-size: 1.8em; }
.rooms h4 { margin: 0 0 .5em; font-family: 'Bebas Neue'; font-size: 1.5em; color: var(--orange); font-weight: 400; letter-spacing: .06em; }
.rm { padding: .3em .6em; background: rgba(0, 0, 0, .5); margin-bottom: .3em; border-left: .2em solid var(--orange); cursor: pointer; } .rm:hover { background: rgba(255, 138, 58, .25); }
.players { position: absolute; right: 2rem; top: 6rem; width: 36rem; font-size: 1.7em; }
.pl { display: grid; grid-template-columns: 1fr 1.5fr .5fr; padding: .3em .6em; margin-bottom: .25em; background: rgba(0, 0, 0, .55); border-left: .2em solid #6a4bb5; }
.pl.me { border-left-color: var(--gold); background: rgba(255, 216, 74, .12); }

/* ------- results */
.bigrank { position: absolute; right: 2rem; top: .5rem; font-family: 'Bebas Neue'; font-size: 14em; line-height: 1; color: var(--gold); text-shadow: 0 0 .2em rgba(255, 216, 74, .5), .03em .03em 0 #000; }
.res { position: absolute; left: 2.4rem; top: 7.5rem; width: 30rem; font-size: 1.6em; }
.rr { display: grid; grid-template-columns: 1.2em 1fr 3.4em; padding: .1em .5em; background: rgba(0, 0, 0, .5); margin-bottom: .1em; }
.rr.me { background: rgba(255, 216, 74, .25); color: var(--gold); }
.payout { position: absolute; right: 2.4rem; top: 21rem; width: 29rem; font-size: 2em; line-height: 1.35; text-align: right; text-shadow: .06em .06em .1em #000; }
.payout .tot { color: var(--gold); border-top: .06em solid #fff4; margin-top: .2em; padding-top: .1em; }

/* ------- toast, pause, touch */
.toast { position: absolute; left: 50%; top: 4rem; transform: translateX(-50%); background: rgba(20, 120, 50, .92); padding: .4em 1.2em; border-radius: .4em; font-size: 2.6em; z-index: 5; box-shadow: 0 .3em 1em #000a; }
.toast.bad { background: rgba(160, 30, 30, .92); }
#pause { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .6); z-index: 10; }
.pbox { text-align: center; display: flex; flex-direction: column; gap: .8em; } .pbox h2 { margin: 0 0 .2em; font-family: 'Bebas Neue'; font-size: 8em; color: var(--orange); }

.loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.loading .lt { font-family: 'Bebas Neue', Impact; font-size: 5rem; color: var(--orange); letter-spacing: .1em; }
.lbar { width: 30rem; height: 1.2rem; background: rgba(255,255,255,.12); border: .15rem solid #6a4bb5; border-radius: .3rem; overflow: hidden; }
.lbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff8a3a, #ffd84a); transition: width .1s; }

.logoimg { position: absolute; left: 50%; top: 1rem; width: 52rem; transform: translateX(-50%); filter: drop-shadow(0 0 1.2rem rgba(255,120,40,.55)); }

.join2 { display: flex; gap: .8rem; } .join2 .btn { flex: 1; font-size: 2.6em; white-space: nowrap; }
.form input { font-size: 2.5em; } .form .btn { font-size: 2.6em; }
.form .status { font-size: 1.7em; min-height: 1.2em; }
.rooms { top: 13rem; }

/* room lobby */
.bikeart.room { left: auto; right: 1.5rem; top: 17rem; width: 25rem; height: 12rem; }
.players { top: 5rem; font-size: 1.5em; }
.pl { grid-template-columns: 1fr 1.8fr .5fr; }
.scene .rows { top: 15rem; }
.scene .row { font-size: 2.5em; padding: .02em .5em; margin: .04em 0; }

/* =================================================================== touch / phones */
#touch, #tback, #rotateHint { display: none; }
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
body.touch.racing:not(.paused) #touch { display: block; }
#touch .tz { position: absolute; display: grid; pointer-events: none; }
#touch .tb, #touch .steer, #touch .tpause {
  pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  border: 2px solid rgba(255, 255, 255, .42); background: rgba(12, 6, 28, .52); color: #fff; font-family: 'Bebas Neue', Impact, sans-serif;
  display: flex; align-items: center; justify-content: center; letter-spacing: .04em; box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#touch .tb { border-radius: 22%; padding: 0; }
#touch .tb small { font-size: .55em; opacity: .8; margin: 0 .1em; }
#touch .tb.on, #touch .steer.on { background: rgba(255, 138, 58, .62); border-color: #ffd84a; }
#touch .tb.nitro { color: #7fd8ff; border-color: rgba(70, 200, 255, .65); }
#touch .tb.brake { color: #ffb3a8; }
#touch .tb.punch { color: #ffd84a; }
body.autogas #touch .tb.gas { display: none; }
#touch .steer { position: relative; border-radius: 999px; justify-content: space-between; padding: 0 7%; color: rgba(255, 255, 255, .75); }
#touch .steer i { position: absolute; left: 50%; top: 50%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffc27a, #ff7a2a 60%, #b84a12); box-shadow: 0 2px 10px rgba(0,0,0,.5); transform: translate(calc(-50% + var(--kx, 0px)), -50%); transition: transform .06s; pointer-events: none; }
#touch .tpause { position: absolute; border-radius: 12px; font-size: 18px; width: 48px; height: 44px; }

/* landscape phones & tablets: controls in the bottom corners, over the road but clear of the gauges */
body:not(.vertical) #touch .tz-left { left: calc(env(safe-area-inset-left) + 1.6vw); bottom: calc(env(safe-area-inset-bottom) + 3vh); grid-template-rows: auto auto; gap: 2.4vh; justify-items: start; }
body:not(.vertical) #touch .steer { width: min(48vh, 30vw); height: min(21vh, 13vw); font-size: min(8vh, 5vw); }
body:not(.vertical) #touch .steer i { width: min(16vh, 10vw); height: min(16vh, 10vw); }
body:not(.vertical) #touch .tz-right { right: calc(env(safe-area-inset-right) + 1.6vw); bottom: calc(env(safe-area-inset-bottom) + 3vh); grid-template-columns: auto auto; grid-template-areas: "punch nitro" "gas brake"; gap: 2.4vh; }
body:not(.vertical) #touch .tb { width: min(17vh, 11vw); height: min(17vh, 11vw); font-size: min(5.4vh, 3.4vw); }
body:not(.vertical) #touch .tpause { top: calc(var(--stage-top, 0px) + 13%); right: calc(env(safe-area-inset-right) + 10px); }

/* portrait phones: the game sits on top, a full controller panel fills the space below it */
body.vertical #touch .tz-left { left: 4vw; bottom: calc(env(safe-area-inset-bottom) + 6vw); grid-template-rows: auto auto; gap: 5vw; justify-items: start; }
body.vertical #touch .steer { width: 57vw; height: 27vw; font-size: 8vw; }
body.vertical:not(.autogas) #touch .steer { width: 44vw; }
body.vertical #touch .steer i { width: 21vw; height: 21vw; }
body.vertical #touch .tz-right { right: 4vw; bottom: calc(env(safe-area-inset-bottom) + 6vw); grid-template-columns: auto auto; grid-template-areas: "punch nitro" "gas brake"; gap: 5vw 4vw; }
body.vertical #touch .tb { width: 21vw; height: 21vw; font-size: 6vw; }
body.vertical #touch .tpause { top: calc(var(--stage-bottom, 50vh) + 12px); right: 4vw; }
body.vertical.touch.racing::after { content: 'SLIDE TO STEER'; position: fixed; left: 4vw; top: calc(var(--stage-bottom, 50vh) + 18px); font: 13px 'Bebas Neue', Impact, sans-serif; letter-spacing: .12em; color: rgba(255, 255, 255, .35); pointer-events: none; }
#touch .punch { grid-area: punch; } #touch .nitro { grid-area: nitro; } #touch .gas { grid-area: gas; } #touch .brake { grid-area: brake; }
#touch .tz-left .punch { grid-area: auto; }

/* menus on touch: an always-visible Back (no Esc key on phones), and a rotate hint in portrait */
body.touch:not(.racing) #tback { display: block; }
body.touch[data-scene="title"] #tback, body.touch[data-scene="modes"] #tback { display: none; }
#tback { position: fixed; z-index: 25; top: calc(env(safe-area-inset-top) + 8px); right: calc(env(safe-area-inset-right) + 8px); font: 18px 'Bebas Neue', Impact, sans-serif; letter-spacing: .06em; color: #fff;
  background: rgba(12, 6, 28, .7); border: 2px solid rgba(255, 255, 255, .4); border-radius: 10px; padding: 6px 14px; touch-action: manipulation; }
body.vertical #tback { top: max(calc(env(safe-area-inset-top) + 8px), calc(var(--stage-top, 0px) - 48px)); }
body.touch.vertical:not(.racing) #rotateHint { display: block; }
#rotateHint { position: fixed; left: 0; right: 0; top: calc(var(--stage-bottom, 60vh) + 18px); text-align: center; font: 15px 'Oswald', sans-serif; color: rgba(255, 255, 255, .55); pointer-events: none; }

/* bigger tap targets in menus on touch */
body.touch .row .ar { padding: 0 .55em; }
body.touch .bar .it { padding: .15em .35em; }