* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #05060a; color: #f4f4f8;
  font-family: 'Press Start 2P', ui-monospace, Consolas, monospace;
  user-select: none;
}
#stage {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden; background: #000; font-size: 16px;
}
#game, #hud { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#game { image-rendering: pixelated; image-rendering: crisp-edges; }
#ui { position: absolute; inset: 0; pointer-events: none; }
.screen { position: absolute; inset: 0; display: none; pointer-events: auto; }
.screen.active { display: block; }
button { font-family: inherit; color: inherit; cursor: pointer; }

.btn {
  display: block; width: 100%; font-size: .85em; padding: .9em 1em; margin: .55em 0;
  background: #d7383b; border: 0; color: #fff; letter-spacing: .05em; text-align: center;
  box-shadow: 0 .3em 0 #7d1517, inset 0 -.2em 0 #a8242a;
}
.btn.alt { background: #2c3550; box-shadow: 0 .3em 0 #141a2a, inset 0 -.2em 0 #222a40; }
.btn.go { background: #1fa64a; box-shadow: 0 .3em 0 #0d5a24, inset 0 -.2em 0 #17803a; font-size: 1em; }
.btn:hover, .btn:focus { outline: .2em solid #ffd84a; outline-offset: .15em; }
.btn:active { transform: translateY(.2em); }
.btn:disabled { opacity: .35; cursor: default; }
.btn.small { width: auto; min-width: 7.5em; font-size: .6em; padding: .7em .8em; margin: 0; }

.panel {
  background: rgba(8, 10, 20, .88);
  border: .25em solid #2a3150;
  box-shadow: 0 0 0 .25em #0a0c14, 0 1em 2em rgba(0, 0, 0, .5);
  padding: 1.3em;
}
.panel.middle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
h2 { font-size: 1.05em; margin: 0 0 1em; color: #ffd84a; text-shadow: .12em .12em 0 #000; }
.green { color: #7dff8a; }

/* menu */
#scr-menu .center { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); text-align: center; width: 40em; }
.title { font-size: 3.6em; line-height: 1.2; letter-spacing: .04em; text-shadow: .08em .08em 0 #000, 0 0 .5em rgba(255, 60, 80, .55); }
.title .a { color: #ff4a5a; }
.title .b { color: #ffd84a; }
.sub { font-size: .7em; color: #b9c6ea; margin: 1em 0 2em; letter-spacing: .25em; text-shadow: .15em .15em 0 #000; }
.menu-grid { width: 30em; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: .9em; }
.menu-grid .wide { grid-column: span 2; }
.cashbox { position: absolute; right: 1.5em; top: 1.2em; font-size: .9em; color: #7dff8a; text-shadow: .12em .12em 0 #000; background: rgba(0,0,0,.45); padding: .5em .7em; }
.cashbox.leftbox { right: auto; left: 1.5em; }
.footer { position: absolute; left: 0; right: 0; bottom: 1.2em; text-align: center; font-size: .55em; color: #c8cfe6; text-shadow: .15em .15em 0 #000; }

/* setup rows */
.panel.side { position: absolute; right: 1.5em; top: 1.5em; bottom: 1.5em; width: 31em; display: flex; flex-direction: column; }
.row { padding: .5em .6em; margin-bottom: .3em; border: .15em solid transparent; outline: none; }
.row:focus { border-color: #ffd84a; background: rgba(255, 216, 74, .07); }
.row .lbl { font-size: .5em; color: #8d9cc6; margin-bottom: .6em; display: block; }
.row .ctl { display: flex; align-items: center; gap: .6em; }
.arr { background: #2c3550; border: 0; width: 2.2em; height: 2.2em; font-size: .65em; flex: none; }
.arr:hover { background: #ffd84a; color: #000; }
.val { flex: 1; text-align: center; font-size: .7em; line-height: 1.4; }
.row .info { font-size: .45em; color: #aab3cc; text-align: center; margin-top: .7em; min-height: 1.1em; line-height: 1.5; }
.btnrow { display: flex; gap: .8em; margin-top: auto; }
.btnrow .btn { flex: 1; }
#rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; margin-bottom: .6em; }
.panel.side.dense .row { padding: .3em .6em; margin-bottom: .15em; }
.panel.side.dense .row .info { margin-top: .5em; }
.panel.side.dense h2 { margin-bottom: .6em; }

/* tournament + saves */
.panel.tourney { width: 56em; }
.panel.saves { width: 46em; }
.tdesc { font-size: .5em; line-height: 1.8; color: #b9c6ea; margin-bottom: 1.4em; }
.tdesc.win { color: #7dff8a; font-size: .7em; }
.tdesc.lose { color: #ff7a6a; font-size: .7em; }
.tprize { font-size: .5em; color: #7dff8a; margin: 1em 0 1.4em; }
.ladder { margin-bottom: 1.2em; }
.panel.tourney .btnrow .btn { font-size: .7em; }
.rung { display: grid; grid-template-columns: 7em 1fr 12em; grid-template-rows: auto auto; gap: .5em 1em; padding: .8em; margin-bottom: .4em; background: #11152a; border-left: .3em solid #2c3550; font-size: .55em; }
.rung .rn { grid-row: span 2; color: #8d9cc6; align-self: center; }
.rung .rv em { font-style: normal; color: #ffd84a; margin-left: .6em; }
.rung .rc { grid-column: 2; color: #8d9cc6; font-size: .85em; }
.rung .rs { grid-column: 3; grid-row: 1 / span 2; align-self: center; text-align: right; color: #8d9cc6; }
.rung.next { border-color: #ffd84a; background: #1b1f36; }
.rung.next .rs { color: #ffd84a; }
.rung.won { border-color: #3fae49; }
.rung.won .rs { color: #7dff8a; }
.rung.lost { border-color: #d7383b; }
.rung.lost .rs { color: #ff7a6a; }
.cursave { font-size: .55em; color: #7dff8a; margin-bottom: 1.2em; }
.slot { display: grid; grid-template-columns: 1fr auto auto; gap: .8em; align-items: center; padding: .7em .4em; border-bottom: .12em solid #1d2238; }
.slot b { font-weight: normal; font-size: .65em; display: block; }
.slot small { display: block; font-size: .45em; color: #8d9cc6; margin-top: .7em; }
.panel.saves .btnrow { margin-top: .4em; }

/* garage */
.panel.garage { position: absolute; inset: 1.5em; display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.6em; }
.gleft, .gright { display: flex; flex-direction: column; min-height: 0; }
.gpreview { background: linear-gradient(#1b2036, #2a2f45 74%, #3a3b42 74%); padding: .6em 0 .3em; margin: .3em 0 .8em; border: .15em solid #2a3150; }
#gcanvas { width: 62%; margin: 0 auto; image-rendering: pixelated; display: block; }
.desc { font-size: .5em; color: #b9c6ea; line-height: 1.6; margin-bottom: 1.2em; min-height: 3.4em; }
.stats { margin-bottom: .6em; }
.stats .st { display: grid; grid-template-columns: 7em 1fr 7.5em; align-items: center; gap: .8em; font-size: .5em; margin-bottom: .7em; }
.stats .bar { height: 1em; background: #1a1f33; position: relative; }
.stats .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #ffd84a; }
.stats .st span:last-child { text-align: right; color: #c8cfe6; }
.paints { display: flex; flex-wrap: wrap; gap: .4em; }
.sw { width: 1.7em; height: 1.7em; border: .15em solid #0007; padding: 0; }
.sw.on { outline: .2em solid #ffd84a; outline-offset: .1em; }
.cashline { font-size: .8em; text-align: right; margin-bottom: 1em; }
#upgrades { flex: 1; }
.upg { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1em; padding: .65em .4em; border-bottom: .12em solid #1d2238; }
.upg .un { font-size: .65em; }
.upg .un small { display: block; font-size: .7em; color: #8d9cc6; margin-top: .6em; }
.pips { display: flex; gap: .3em; }
.pips i { width: .9em; height: 1.3em; background: #2c3550; display: block; }
.pips i.on { background: #ffd84a; }

/* help */
.panel.help { width: 50em; }
.keys > div { display: grid; grid-template-columns: 10em 1fr; gap: 1em; font-size: .6em; margin-bottom: .9em; align-items: center; }
.keys b { color: #ffd84a; font-weight: normal; }
.keys b.inl { display: inline; }
.keys span { color: #dfe4f5; line-height: 1.5; }
.tips { font-size: .5em; line-height: 1.8; color: #b9c6ea; padding-left: 1.6em; margin: 1.4em 0; }

/* results */
.panel.results { width: 44em; }
.resSub { font-size: .55em; color: #b9c6ea; margin: -.4em 0 1.2em; line-height: 1.6; }
#resTable { width: 100%; border-collapse: collapse; font-size: .6em; margin-bottom: 1.2em; }
#resTable th { color: #8d9cc6; font-weight: normal; text-align: right; padding: .5em; }
#resTable th:first-child, #resTable td:first-child { text-align: left; color: #b9c6ea; }
#resTable td { text-align: right; padding: .55em .5em; border-top: .12em solid #1d2238; }
#resTable td.best { color: #7dff8a; }
.resCash { font-size: .7em; color: #7dff8a; margin-bottom: 1em; line-height: 1.8; }
.resCash small { display: block; font-size: .75em; color: #8d9cc6; }
.panel.pause { width: 22em; text-align: center; }

/* ---------- touch ---------- */
#stage { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; }
.touch-only { display: none; }
body.touch .touch-only { display: initial; }
body.touch .keys.touch-only, body.touch .btn.touch-only { display: block; }
body.touch .kb-only { display: none; }
body.touch .arr { font-size: .9em; width: 2.4em; height: 2.4em; }
body.touch .row { padding-top: .2em; padding-bottom: .2em; }
body.touch .row .info { margin-top: .4em; }
.fsbtn { position: absolute; left: 1.5em; top: 1.2em; width: auto; font-size: .6em; padding: .8em 1em; margin: 0; }

#touch { display: none; position: absolute; inset: 0; pointer-events: none; }
body.touch #touch.on { display: block; }
.tb {
  pointer-events: auto; touch-action: none; position: relative;
  width: 8.4em; height: 8.4em; border-radius: 50%; padding: 0;
  background: rgba(16, 20, 36, .5); border: .2em solid rgba(255, 255, 255, .35);
  color: #fff; font-size: .6em; line-height: 1.5; text-shadow: .12em .12em 0 #000;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.tb.big { width: 11em; height: 11em; font-size: .8em; }
.tb.held { background: rgba(255, 216, 74, .55); border-color: #ffd84a; color: #000; text-shadow: none; }
.tb.gas { border-color: rgba(93, 255, 122, .7); }
.tb.brake { border-color: rgba(255, 90, 74, .7); }
.tb.nos { border-color: rgba(120, 150, 255, .8); }
.tb.up { border-color: rgba(255, 216, 74, .8); }
.tb.pause { position: absolute; left: 1.4em; top: 13.5em; width: 3.6em; height: 3.6em; border-radius: .4em; font-size: .7em; }
.tleft { position: absolute; left: 1.6em; bottom: 1.6em; display: flex; flex-direction: column; align-items: flex-start; gap: .8em; }
.trow { display: flex; gap: .6em; }
.tright { position: absolute; right: 1.6em; top: 30%; display: flex; align-items: flex-end; gap: .8em; }

#rotate { display: none; position: fixed; inset: 0; z-index: 10; background: #05060a; color: #ffd84a; font-size: 14px; text-align: center; align-items: center; justify-content: center; line-height: 1.6; }
@media (orientation: portrait) { body.touch #rotate { display: flex; } }

#toast { position: absolute; left: 50%; bottom: 2em; transform: translateX(-50%); font-size: .7em; background: rgba(0,0,0,.75); padding: .7em 1em; opacity: 0; transition: opacity .3s; pointer-events: none; }
#toast.show { opacity: 1; }