/* Lightcycle Outrun — on top of Light Cycles' stylesheet (../lc3d/css/style.css). */

body.outrun { background: #05070d; overflow: hidden; }

/* ---------------- menu ---------------- */
.o-title span { color: #ffb31f; }
.o-title em { color: #ff7a3a; }

.o-modes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  width: min(1180px, 95vw);
}
.o-mode {
  display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer;
  padding: 16px 18px; border-radius: 6px; min-height: 150px;
  background: rgba(8, 14, 24, .82); color: var(--text);
  border: 1px solid rgba(255, 179, 31, .35); font: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.o-mode b { font-size: 17px; letter-spacing: .28em; color: #ffb31f; }
.o-mode span { font-size: 13px; line-height: 1.45; opacity: .8; flex: 1; }
.o-mode i { font-style: normal; font-size: 11px; letter-spacing: .24em; color: #ffb31f; text-align: right; }
.o-mode i em { font-style: normal; color: var(--text); opacity: .6; letter-spacing: .1em; }
.o-mode:hover, .o-mode:focus { border-color: #ffb31f; box-shadow: 0 0 18px rgba(255, 179, 31, .35); transform: translateY(-2px); }
.o-mode.soon { opacity: .45; border-color: rgba(255, 255, 255, .15); cursor: default; }
.o-mode.soon b, .o-mode.soon i { color: var(--text); }
.o-mode.soon:hover { transform: none; box-shadow: none; }
.o-menu-row { flex-direction: row; flex-wrap: wrap; justify-content: center; }

@media (max-width: 1000px) {
  .o-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(720px, 94vw); }
  .o-mode { min-height: 0; }
}
@media (max-width: 560px) {
  .o-modes { grid-template-columns: 1fr; }
}
/* Grid Race: the original, in its cyan */
.o-mode[data-mode="grid"] { border-color: rgba(0, 229, 255, .4); }
.o-mode[data-mode="grid"] b, .o-mode[data-mode="grid"] i { color: #00e5ff; }
.o-mode[data-mode="grid"]:hover, .o-mode[data-mode="grid"]:focus { border-color: #00e5ff; box-shadow: 0 0 18px rgba(0, 229, 255, .35); }

/* ---------------- help ---------------- */
.o-help { width: min(860px, 94vw); display: flex; flex-direction: column; gap: 14px; line-height: 1.55; font-size: 14px; }
.o-help h3 { letter-spacing: .3em; font-size: 13px; color: #ffb31f; margin-bottom: 6px; }
.o-help p + p { margin-top: 6px; }
.o-help b { color: #fff; }
.o-scores { opacity: .65; font-size: 12px; }
.o-credit { opacity: .55; font-size: 12px; }

/* ---------------- HUD ---------------- */
#o-score { position: absolute; top: 14px; left: 16px; display: flex; flex-direction: column; }
#o-score span { font-size: calc(11px * var(--ui-scale)); letter-spacing: .32em; color: #ffb31f; }
#o-score b { font-size: calc(30px * var(--ui-scale)); font-weight: 200; letter-spacing: .08em; color: #fff4dc; text-shadow: 0 0 14px rgba(255, 179, 31, .45); }
#o-wave { font-size: calc(13px * var(--ui-scale)); letter-spacing: .3em; color: #ffb31f; }
#o-tanks { font-size: calc(12px * var(--ui-scale)); letter-spacing: .22em; color: #ff7a3a; margin-top: 3px; }
#o-lives { display: flex; justify-content: flex-end; gap: 6px; margin: 6px 0 2px; }
#o-lives i {
  width: 18px; height: 8px; border-radius: 4px; background: #ffb31f;
  box-shadow: 0 0 8px rgba(255, 179, 31, .8);
}

#o-banner {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none; z-index: 18; text-align: center;
}
#o-banner b { font-size: calc(54px * var(--ui-scale)); font-weight: 200; letter-spacing: .3em; color: #fff; text-shadow: 0 0 24px #ff7a3a; }
#o-banner span { font-size: calc(13px * var(--ui-scale)); letter-spacing: .4em; color: #ffb31f; }
#o-banner.pop { animation: o-banner 2.4s ease both; }
@keyframes o-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.toast.o-big { font-size: 15px; letter-spacing: .2em; border-color: rgba(255, 179, 31, .7); color: #ffe2a0; }
.toast.o-gold { border-color: rgba(255, 213, 28, .8); color: #ffe98a; }
.toast.o-warn { border-color: rgba(255, 63, 108, .7); color: #ffb4c4; }

/* ---------------- game over ---------------- */
.o-final { font-size: 56px; font-weight: 200; letter-spacing: .08em; text-align: center; color: #fff4dc; text-shadow: 0 0 22px rgba(255, 179, 31, .5); }
.o-newbest { text-align: center; letter-spacing: .3em; color: #ffd51c; animation: blink 0.9s ease infinite; }
.o-dim { text-align: center; letter-spacing: .25em; opacity: .6; font-size: 13px; }
.o-stats { display: flex; justify-content: center; gap: 28px; margin: 16px 0 6px; }
.o-stats span { display: flex; flex-direction: column; align-items: center; font-size: 11px; letter-spacing: .22em; opacity: .75; }
.o-stats b { font-size: 24px; font-weight: 300; letter-spacing: .05em; color: #fff; opacity: 1; }

/* ---------------- settings / minimap ---------------- */
#scr-settings .tab-body { width: min(560px, 94vw); }
#scr-settings .tabs button.on { color: #ffb31f; border-bottom-color: #ffb31f; }
#minimap { border-color: rgba(255, 179, 31, .35); }

/* ---------------- Tank Chase ---------------- */
#o-exit {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none;
}
#o-exit svg {
  width: calc(64px * var(--ui-scale)); height: calc(64px * var(--ui-scale)); overflow: visible;
  filter: drop-shadow(0 0 4px rgba(120, 230, 255, .9)) drop-shadow(0 0 10px rgba(80, 200, 255, .45));
}
#o-exit .bezel { fill: rgba(4, 12, 24, .45); stroke: rgba(150, 230, 255, .45); stroke-width: 1.2; }
#o-exit .ticks { stroke: rgba(150, 230, 255, .55); stroke-width: 1.4; }
#o-exit .ahead { fill: none; stroke: #ffb31f; stroke-width: 2; stroke-linejoin: miter; }
#o-exit .arrow { fill: rgba(189, 246, 255, .22); stroke: #bdf6ff; stroke-width: 2; stroke-linejoin: miter; }
#o-exit .spine { stroke: #ffffff; stroke-width: 1.2; opacity: .8; }
#o-exit.ahead .arrow { fill: rgba(189, 246, 255, .55); stroke: #ffffff; }
#o-exit span { font-size: calc(11px * var(--ui-scale)); letter-spacing: .3em; color: #bdf6ff; opacity: .85; }
#o-time { font-size: calc(12px * var(--ui-scale)); letter-spacing: .18em; color: #dfe9ff; opacity: .8; margin-top: 3px; }
#o-time.over { color: #ff7a8c; }

/* ---------------- Horizon Run ---------------- */
/* The radio: pick the music before the run, as in the arcade */
.o-radio-sub { letter-spacing: .4em; font-size: 13px; color: #ffb31f; margin: -6px 0 14px; }
.o-radio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(860px, 94vw); }
.o-track {
  display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 6px; font: inherit; color: var(--text);
  background: rgba(8, 14, 24, .82); border: 1px solid rgba(255, 179, 31, .3);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.o-track i { font-style: normal; font-size: 11px; letter-spacing: .3em; color: #ff7a3a; opacity: .8; }
.o-track b { font-size: 16px; letter-spacing: .26em; color: #ffb31f; }
.o-track span { font-size: 12px; letter-spacing: .08em; opacity: .75; }
.o-track:hover, .o-track:focus, .o-track.on { border-color: #ffb31f; box-shadow: 0 0 18px rgba(255, 179, 31, .35); }
.o-track.on { transform: translateY(-2px); }
.o-track.on i::after { content: ' ♪'; animation: blink 0.9s ease infinite; }
.o-radio-hint { margin-top: 12px; }
@media (max-width: 760px) { .o-radio { grid-template-columns: 1fr; } }

/* The clock, big at the top; the speedo at the bottom */
#o-htime {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
#hud-touch-pause:not(.hidden) ~ #o-htime { top: 50px; }
#o-htime span { font-size: calc(11px * var(--ui-scale)); letter-spacing: .4em; color: #ffb31f; }
#o-htime b {
  font-size: calc(46px * var(--ui-scale)); font-weight: 300; line-height: 1; letter-spacing: .04em;
  color: #ffe98a; text-shadow: 0 0 16px rgba(255, 179, 31, .7);
}
#o-htime.hurry b { color: #ff5a4a; text-shadow: 0 0 18px rgba(255, 60, 40, .9); animation: blink 0.5s ease infinite; }
#o-speed {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 6px; pointer-events: none;
}
#o-speed b { font-size: calc(30px * var(--ui-scale)); font-weight: 300; color: #fff4dc; text-shadow: 0 0 12px rgba(255, 179, 31, .5); min-width: 3ch; text-align: right; }
#o-speed span { font-size: calc(11px * var(--ui-scale)); letter-spacing: .3em; color: #ffb31f; }

/* Through a checkpoint gate: a flash of white */
#o-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 17; }
#o-flash.go { animation: o-flash .65s ease-out both; }
#o-flash.soft.go { animation-name: o-flash-soft; }
@keyframes o-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes o-flash-soft { 0% { opacity: .25; } 100% { opacity: 0; } }

/* The route map on the results */
.o-goal { text-align: center; letter-spacing: .3em; font-size: 13px; color: #ffe2a0; margin-top: 4px; }
.o-goal b { color: #fff; }
.o-route { display: block; width: min(600px, 86vw); height: auto; margin: 10px auto 0; overflow: visible; }
.o-route line { stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; }
.o-route line.on { stroke: #ffb31f; stroke-width: 3; filter: drop-shadow(0 0 4px rgba(255, 179, 31, .8)); }
.o-route circle, .o-route rect { fill: var(--c); opacity: .3; }
.o-route circle.on, .o-route rect.on { opacity: 1; filter: drop-shadow(0 0 5px var(--c)); }
.o-route text { fill: #ffe2a0; font-size: 9px; letter-spacing: .14em; text-anchor: middle; opacity: .9; }
.o-route text.goal { text-anchor: start; opacity: .45; }
.o-route text.goal.on { opacity: 1; fill: #fff; }