@font-face {
  font-family:WoW;
  src:url('glue/friz.ttf') format('truetype');
  font-display:swap;
}
@font-face {
  font-family:Morpheus;
  src:url('glue/morpheus.ttf') format('truetype');
  font-display:swap;
}
:root {
  color-scheme:dark;
  font-family:WoW,Georgia,serif;
  font-size:14px;
  color:#ffd100;
  background:#000;
  --gold:#ffd100;
  --white:#fff;
  --muted:#c1b9a3;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,input {
  font:inherit;
}
button {
  cursor:pointer;
  color:var(--gold);
}
button:disabled {
  cursor:not-allowed;
}
[hidden] {
  display:none!important;
}
h1,h2,h3,p {
  margin:0;
  font-weight:400;
}
h1 {
  font-size:22px;
  text-align:center;
}
h2 {
  font-size:18px;
}
h3 {
  font-size:16px;
  margin:20px 0 10px;
}
p {
  line-height:1.5;
}
a {
  color:var(--gold);
}
button:focus-visible,input:focus-visible {
  outline:2px solid #ffd100;
  outline-offset:1px;
}
button,input {
  touch-action:manipulation;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.gold {
  color:var(--gold);
}
.hint,.muted {
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.eyebrow:empty {
  display:none;
}
.eyebrow {
  color:var(--gold);
  font-size:13px;
}
.full {
  width:100%;
}
.form-error {
  color:#ff4040;
  font-size:14px;
  line-height:1.4;
}
.form-error:empty {
  display:none;
}
#wrap {
  position:fixed;
  inset:0;
  background:#000;
}
#kart {
  display:block;
  width:100%;
  height:100%;
  outline:none;
}
#shell {
  position:relative;
  min-height:100svh;
  background:#120d08 url('glue/scene.webp?v=20261014') center/cover no-repeat;
  text-shadow:1px 1px 1px #000,0 0 3px #000;
  isolation:isolate;
}
#shell:after {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(0deg,#0008,transparent 19%,transparent 90%,#0003);
  pointer-events:none;
}
.masthead {
  position:absolute;
  top:8px;
  left:9px;
  width:252px;
  height:118px;
  z-index:2;
}
.wordmark {
  width:100%;
  height:100%;
  border:0;
  background:none;
  color:#e5bc60;
  filter:drop-shadow(2px 3px 1px #000);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:0;
}
.logo-name {
  font-family:WoW,Georgia,serif;
  font-size:48px;
  letter-spacing:1px;
  color:#edca7c;
  -webkit-text-stroke:.6px #80542e;
  text-shadow:0 2px #392d1c,0 -1px #fff0ba,2px 4px #000;
  line-height:1.05;
}
.logo-subtitle {
  font-size:18px;
  letter-spacing:7px;
  padding-left:7px;
  margin-top:3px;
  color:#f5e3b6;
  text-shadow:0 2px #392d1c,1px 2px #000;
}
.wordmark:after {
  content:'';
  width:164px;
  height:2px;
  margin-top:10px;
  background:linear-gradient(90deg,transparent,#72c5bf 35%,#c0ebe1 50%,#72c5bf 65%,transparent);
  box-shadow:0 2px 6px #000;
}
.wordmark:hover .logo-name {
  color:#ffe4a0;
}
#content {
  position:relative;
  min-height:100svh;
}
.character-select {
  position:relative;
  min-height:100svh;
}
.panel {
  background:#090906e8;
  border:16px solid transparent;
  border-image:url('glue/tooltip-border.png') 16 / 16px / 0 round;
  box-shadow:none;
  background-clip:padding-box;
}
.character-list {
  position:absolute;
  right:5px;
  top:15px;
  bottom:120px;
  width:260px;
  padding:0 6px;
  display:flex;
  flex-direction:column;
}
.realm-name {
  text-align:center;
  color:#aaa;
  font-size:17px;
  line-height:1.2;
  margin:0 0 8px;
  padding:0 4px;
  text-shadow:1px 2px #000;
}
.character-rows {
  flex:1;
  margin-top:18px;
}
.character-row {
  display:block;
  border:0;
  background:none;
  width:100%;
  min-height:70px;
  text-align:left;
  padding:8px 8px 10px 14px;
  position:relative;
}
.character-row.selected {
  isolation:isolate;
}
.character-row.selected:before {
  content:'';
  position:absolute;
  inset:0;
  background:url('glue/selected.png') center/100% 100% no-repeat;
  mix-blend-mode:screen;
  opacity:.55;
  z-index:-1;
}
.character-row strong {
  display:block;
  color:#ffd100;
  font-size:18px;
  font-weight:400;
  text-shadow:1px 1px #000;
}
.character-row span {
  display:block;
  font-size:12px;
  color:#fff;
  margin-top:4px;
}
.character-row small {
  display:block;
  font-size:12px;
  color:#ffd100;
  margin-top:4px;
}
.roster-note {
  font-size:12px;
  color:#888;
  text-align:center;
  margin:30px 9px 0;
}
.character-settings {
  margin-top:auto;
  padding:20px 5px 6px;
}
.room-buttons {
  display:grid;
  gap:2px;
  margin-top:8px;
}
.room-buttons button {
  height:42px;
}
.entry-intro {
  text-align:center;
  margin:0 0 24px;
  color:#c1b89e;
}
.entry-actions {
  display:grid;
  margin:14px 0 22px;
  gap:4px;
  text-align:center;
}
.entry-actions button {
  width:100%;
}
.entry-actions .hint {
  margin:0 0 14px;
}
.lobby-course-choice {
  margin-top:16px;
  padding:10px 5px;
  border-top:1px solid #685733;
}
.lobby-course-choice h2 {
  font-size:15px;
  margin-bottom:6px;
}
.lobby-course-choice .hint {
  font-size:11px;
  margin-top:6px;
}
.lobby-map {
  position:absolute;
  left:300px;
  right:300px;
  top:120px;
  max-height:calc(100svh - 255px);
  overflow:auto;
  padding:10px;
  text-align:center;
  z-index:2;
}
.lobby-map h2 {
  margin-bottom:10px;
}
.lobby-map .world-map {
  margin:10px 0;
}
.lobby-map .hint {
  margin:8px 0;
}
.lobby-map .map-location {
  left:67%;
  max-width:32%;
  white-space:normal;
  font-size:11px;
}
@media(max-width:950px) {
  .lobby-map {
    left:230px;
    right:250px;
  }
  .lobby-map .map-location {
    font-size:10px;
  }
}
@media(max-width:620px) {
  .lobby-map {
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    width:100%;
    max-height:none;
    order:1;
    margin-bottom:12px;
  }
}
.selected-name {
  position:absolute;
  left:0;
  right:260px;
  bottom:108px;
  text-align:center;
  font-size:24px;
  color:#ffd100;
  pointer-events:none;
}
.selected-name small {
  display:block;
  font-size:13px;
  color:#ddd;
  margin-top:5px;
}
.bottom-center {
  position:absolute;
  bottom:23px;
  left:0;
  right:260px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px;
}
.bottom-left {
  position:absolute;
  left:20px;
  bottom:18px;
  z-index:2;
}
.bottom-right {
  position:absolute;
  right:45px;
  bottom:25px;
  z-index:2;
}
.bottom-left button,.bottom-right button {
  width:140px;
}
.build-note {
  position:absolute;
  left:14px;
  bottom:3px;
  color:#bbb;
  font-size:10px;
}
.bottom-left:has(+.bottom-center) {
  bottom:23px;
}
.primary,.quiet,.gold-button,.text-button {
  background:transparent url('glue/button-up.png') center/100% 100% no-repeat;
  border:0;
  min-width:118px;
  min-height:40px;
  padding:10px 22px 13px;
  color:#ffd100;
  text-shadow:1px 1px #000,0 0 2px #000;
  font-size:16px;
  position:relative;
  border-radius:0;
  box-shadow:none;
  line-height:1.1;
  white-space:nowrap;
}
.primary:after,.quiet:after,.text-button:after {
  content:'';
  position:absolute;
  inset:0;
  background:url('glue/button-highlight.png') center/100% 100% no-repeat;
  mix-blend-mode:screen;
  opacity:0;
  pointer-events:none;
}
.primary:hover:after,.quiet:hover:after,.text-button:hover:after {
  opacity:.8;
}
.primary:active,.quiet:active,.text-button:active {
  background-image:url('glue/button-down.png');
  padding-top:12px;
  padding-bottom:11px;
}
.primary:disabled,.quiet:disabled {
  background-image:url('glue/button-disabled.png');
  color:#777;
}
.primary:disabled:after,.quiet:disabled:after {
  opacity:0;
}
.small {
  min-height:34px;
  font-size:13px;
  padding:9px 14px 11px;
  min-width:105px;
}
.enter-world {
  width:200px;
  height:60px;
  font-size:19px;
  padding-bottom:17px;
}
.enter-world:active {
  padding-bottom:15px;
}
.panel button.full {
  height:40px;
}
.text-button.back {
  margin-bottom:15px;
}
button[aria-pressed=true]:focus-visible {
  outline:1px solid #ffd100;
}
label {
  display:grid;
  gap:5px;
  color:#ffd100;
  font-size:13px;
}
input[type=text],.invite-link {
  background:#000b;
  border:1px solid #686868;
  box-shadow:inset 1px 1px 2px #000,0 0 0 1px #111;
  color:#fff;
  border-radius:3px;
  min-width:0;
  width:100%;
  font-size:16px;
  padding:7px 9px;
  height:33px;
  font-family:WoW,Georgia,serif;
}
input::placeholder {
  color:#777;
}
#room-code {
  text-transform:uppercase;
  letter-spacing:5px;
  text-align:center;
  font-size:23px;
  height:40px;
}
.opponent-control {
  margin-top:20px;
}
.opponent-control label {
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.opponent-control output {
  color:#fff;
  font-size:18px;
  min-width:24px;
  text-align:right;
}
input[type=range] {
  appearance:none;
  display:block;
  width:100%;
  height:8px;
  margin:15px 0 10px;
  background:#080604;
  border:2px ridge #827156;
  border-radius:2px;
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb {
  appearance:none;
  width:13px;
  height:24px;
  border:3px ridge #d0ba78;
  border-radius:2px;
  background:linear-gradient(90deg,#5c451a,#e4c467,#76531a);
  box-shadow:1px 2px 3px #000;
}
input[type=range]::-moz-range-thumb {
  width:9px;
  height:18px;
  border:3px ridge #d0ba78;
  border-radius:2px;
  background:linear-gradient(90deg,#5c451a,#e4c467,#76531a);
}
.range-limits {
  display:flex;
  justify-content:space-between;
  color:#aaa;
  font-size:11px;
}
.course-settings {
  padding:12px 10px 0;
  grid-column:1/-1;
}
.course-settings .opponent-control {
  margin:0;
}
.course-settings p.hint {
  padding:10px 0 0;
}
.map-footer .form-error {
  max-width:320px;
  margin:8px 5px 0;
}
.character-settings .hint {
  font-size:11px;
  margin-top:8px;
}
.center-dialog {
  position:relative;
  z-index:3;
  width:min(410px,calc(100% - 24px));
  top:50svh;
  transform:translateY(-50%);
  margin:auto;
  padding:16px 18px 12px;
  border-image-source:url('glue/dialog-border.png');
  border-image-slice:32;
  background:#0c0b09 url('glue/dialog-background.png') repeat;
}
.page-heading {
  margin:0 0 21px;
}
.page-heading p:not(.eyebrow) {
  font-size:13px;
  color:#ccc;
  margin-top:9px;
}
.form-stack {
  display:grid;
  gap:18px;
}
.form-stack .hint {
  text-align:center;
}
.dialog-actions {
  display:flex;
  justify-content:center;
  gap:4px;
  margin-top:16px;
}
.dialog-actions button {
  flex:1;
}
.center-dialog>p {
  margin:14px 0;
}
.party-panel {
  position:absolute;
  left:18px;
  top:143px;
  width:258px;
  max-height:calc(100svh - 230px);
  padding:5px 7px 8px;
  overflow:auto;
}
.room-tools {
  display:flex;
  gap:0;
}
.room-tools button {
  width:50%;
  min-width:0;
  font-size:12px;
  padding-left:5px;
  padding-right:5px;
}
.invite-link {
  height:25px;
  font-size:10px;
  padding:4px 6px;
  margin:7px 0;
}
.party-panel>.hint {
  text-align:center;
  font-size:11px;
  min-height:18px;
}
.party-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:12px 0 8px;
  font-size:13px;
}
.party-heading>span:last-child {
  color:#aaa;
  font-size:12px;
}
.roster {
  list-style:none;
  margin:0;
  padding:0;
}
.roster li {
  display:flex;
  gap:9px;
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid #54483755;
}
.roster-name {
  font-size:13px;
  overflow-wrap:anywhere;
}
.roster-role {
  font-size:10px;
  color:#aaa;
  margin-top:4px;
}
.ready-state {
  font-size:11px;
  color:#aaa;
  margin-left:auto;
  white-space:nowrap;
}
.is-ready {
  color:#40ff40;
}
.empty-slot {
  font-size:11px;
  color:#888;
  text-align:center;
  justify-content:center;
}
.lobby-note {
  margin-top:auto;
  padding:18px 9px 10px;
  font-size:12px;
  color:#ccc;
  line-height:1.5;
}
.lobby-note p {
  margin-top:13px;
}
.lobby-note #ready-help {
  color:#ffd100;
}
.lobby-note #lobby-load {
  color:#b7ae91;
}
.racer-info {
  position:absolute;
  left:20px;
  top:145px;
  width:245px;
  padding:8px 12px 18px;
  background-image:url('glue/panel-background.png');
  background-size:100% 100%;
  border-image-source:url('glue/panel-border.png');
  border-image-slice:32;
  border-width:25px;
  border-image-width:25px;
}
.racer-info p {
  font-size:13px;
  color:#eee;
  line-height:1.55;
  margin-top:9px;
}
.racer-info h2 {
  font-size:21px;
}
.racer-info .gold {
  color:#ffd100;
}
.racer-info .hint {
  color:#aaa;
  font-size:12px;
}
hr {
  height:1px;
  border:0;
  background:linear-gradient(90deg,transparent,#817144,transparent);
  margin:15px 0;
}
.map-window,.controls-window,.results-window {
  position:relative;
  z-index:3;
  margin:auto;
  top:8svh;
  width:min(1040px,calc(100% - 36px));
  padding:10px 14px 15px;
  background:#080806f5;
  border-image-source:url('glue/dialog-border.png');
  border-image-slice:32;
}
.map-window .page-heading {
  margin-bottom:11px;
}
.map-toolbar {
  display:flex;
  gap:25px;
  justify-content:center;
  border-top:1px solid #786947;
  border-bottom:1px solid #786947;
  padding:7px;
  color:#ffd100;
  background:#262012;
}
.map-layout {
  display:grid;
  grid-template-columns:1fr 215px;
  gap:12px;
  margin-top:12px;
}
.world-map {
  position:relative;
  line-height:0;
}
.world-map img {
  width:100%;
  height:auto;
  display:block;
}
.map-location {
  position:absolute;
  left:67%;
  top:72%;
  border:1px solid #978161;
  background:#080808cc;
  color:#ffd100;
  text-shadow:1px 1px #000;
  padding:5px 7px;
  font-size:12px;
  line-height:1.4;
  white-space:nowrap;
}
.map-location:before {
  content:'◆';
  color:#ffcf00;
  margin-right:5px;
}
.course-list p {
  font-size:13px;
  color:#eee;
  padding:10px;
}
.course-list .hint {
  color:#999;
  font-size:12px;
}
.route-preview {
  display:block;
  margin:10px auto 0;
  background:#ccb57a;
  width:90%;
  padding:5px;
  border:1px solid #927644;
}
.map-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 5px 0;
}
.map-footer button {
  width:150px;
}
.controls-window {
  width:min(820px,calc(100% - 30px));
  top:15svh;
  padding:20px 25px;
}
.controls-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.controls-grid h2 {
  text-align:center;
  margin-bottom:15px;
}
.control-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:11px 0;
  font-size:13px;
}
.control-row span:last-child {
  color:#fff;
  text-align:right;
}
.controls-grid .hint {
  margin-top:15px;
}
.controls-window .dialog-actions button {
  flex:0 1 145px;
}
.results-window {
  top:7svh;
  width:min(940px,calc(100% - 30px));
  padding:12px 22px 25px;
}
.results-window .page-heading {
  margin-bottom:6px;
}
.results-course {
  text-align:center;
  color:#ccc;
  font-size:14px;
  margin-bottom:24px;
}
.results-grid {
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:30px;
}
.result-table {
  border-collapse:collapse;
  width:100%;
  font-size:14px;
  color:#fff;
}
.result-table th {
  text-align:left;
  color:#aaa;
  font-size:12px;
  font-weight:400;
  border-bottom:1px solid #5e502f;
  padding:7px;
}
.result-table td {
  padding:9px 7px;
  border-bottom:1px solid #5e502f66;
}
.result-table td:last-child,.result-table th:last-child {
  text-align:right;
  white-space:nowrap;
}
.result-table .you {
  color:#ffd100;
  background:#bd9e3619;
}
.result-table .rank {
  width:42px;
}
.your-time {
  font-size:30px;
  margin:13px 0 22px;
  color:#fff;
}
.lap-row {
  display:flex;
  justify-content:space-between;
  padding:13px 0;
  border-bottom:1px solid #5e502f66;
  font-size:13px;
}
.lap-row strong {
  color:#fff;
  font-weight:400;
}
.result-actions {
  display:grid;
  margin-top:23px;
  gap:4px;
}
.results-grid>.party-heading {
  margin-top:0;
}
#shell[data-screen=loading] {
  background:#000 url('glue/loading.png') center/100% 100% no-repeat;
}
#shell[data-screen=loading] .masthead {
  display:none;
}
.loading-screen {
  position:relative;
  min-height:100svh;
}
.loading-caption {
  position:absolute;
  top:8%;
  left:0;
  width:100%;
  text-align:center;
  font-size:32px;
}
.loading-brand {
  display:block;
  margin-bottom:10px;
  color:#f5e3b6;
  font-size:14px;
  letter-spacing:3px;
  text-transform:uppercase;
}
.loading-bottom {
  position:absolute;
  bottom:4%;
  left:50%;
  transform:translateX(-50%);
  width:min(600px,85%);
  text-align:center;
}
.loading-bottom p {
  font-size:13px;
  color:#eee;
}
.load-frame {
  height:27px;
  border:4px ridge #b3a581;
  border-radius:4px;
  background:#111;
  margin:14px 0 10px;
  box-shadow:0 0 0 2px #332518;
}
progress {
  appearance:none;
  display:block;
  width:100%;
  height:19px;
  border:0;
  background:#111;
}
progress::-webkit-progress-bar {
  background:#111;
}
progress::-webkit-progress-value {
  background:linear-gradient(#6b85cf,#293eaa,#1d2764);
}
progress::-moz-progress-bar {
  background:#3c53b4;
}
.loading-tip {
  margin-bottom:13px;
}
.loading-bottom button {
  font-size:13px;
}
#race-menu {
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:3;
}
#race-menu kbd {
  font-size:11px;
  margin-left:8px;
  color:#ccc;
}
#status {
  position:fixed;
  z-index:10;
  left:50%;
  bottom:5px;
  transform:translateX(-50%);
  color:#ffd100;
  background:#000d;
  padding:8px 18px;
  border:1px solid #999;
  border-radius:4px;
  font-size:13px;
  text-align:center;
  max-width:90%;
  pointer-events:none;
}
#status:empty {
  display:none;
}
dialog {
  font-family:WoW,Georgia,serif;
  text-shadow:1px 1px #000;
  background:#12110e url('glue/dialog-background.png') repeat;
  color:#ffd100;
  border:16px solid transparent;
  border-image:url('glue/dialog-border.png') 32 / 16px / 0 round;
  max-width:420px;
  width:calc(100% - 24px);
  padding:19px 20px;
  box-shadow:0 0 40px #000a;
}
dialog::backdrop {
  background:#0007;
}
dialog h2 {
  text-align:center;
  font-size:20px;
  margin-bottom:17px;
}
dialog p {
  color:#fff;
  font-size:14px;
}
.no-script {
  position:relative;
  color:#ffd100;
  background:#000;
  padding:25px;
}
@media(min-height:900px) and (min-width:900px) {
  .character-list {
    width:280px;
    bottom:145px;
  }
  .selected-name,.bottom-center {
    right:280px;
  }
  .character-row {
    min-height:80px;
  }
  .party-panel {
    top:160px;
  }
  .selected-name {
    bottom:123px;
  }
  .bottom-center {
    bottom:38px;
  }
  .masthead {
    width:275px;
    height:130px;
  }
  .logo-name {
    font-size:53px;
  }
  .racer-info {
    top:160px;
  }
}
@media(max-width:950px) {
  .party-panel,.racer-info {
    width:210px;
    left:8px;
    padding-left:4px;
    padding-right:4px;
  }
  .character-list {
    width:235px;
  }
  .selected-name,.bottom-center {
    right:235px;
  }
  .party-panel .room-tools {
    flex-direction:column;
  }
  .party-panel .room-tools button {
    width:100%;
  }
  .bottom-center:has(#start-button) {
    left:210px;
    right:235px;
    flex-direction:column;
    bottom:15px;
    gap:0;
  }
  .bottom-center:has(#start-button) button {
    width:180px;
    height:44px;
    font-size:16px;
  }
  .bottom-center:has(#start-button) button[hidden] {
    display:none;
  }
  .selected-name {
    font-size:21px;
  }
  .map-layout {
    grid-template-columns:1fr 180px;
  }
  .map-location {
    font-size:10px;
  }
  .masthead {
    width:220px;
  }
  .logo-name {
    font-size:42px;
  }
}
@media(max-width:620px) {
  #shell {
    background-position:50% 0;
    background-size:auto 390px;
    background-attachment:scroll;
    background-color:#120d08;
  }
  .masthead {
    position:relative;
    height:96px;
    top:0;
    left:0;
    width:220px;
    margin:auto;
  }
  #content {
    min-height:calc(100svh - 96px);
  }
  .character-select {
    min-height:calc(100svh - 96px);
    display:flex;
    flex-direction:column;
    padding:240px 12px 15px;
  }
  .character-list,.party-panel,.racer-info {
    position:relative;
    top:auto;
    bottom:auto;
    left:auto;
    right:auto;
    width:100%;
    max-height:none;
    margin:0 auto 12px;
  }
  .character-list {
    min-height:300px;
    padding:5px 10px 12px;
    order:1;
  }
  .selected-name {
    position:absolute;
    top:173px;
    bottom:auto;
    left:0;
    right:0;
    font-size:22px;
  }
  .character-rows {
    flex:0;
  }
  .roster-note {
    margin:12px 5px;
  }
  .character-settings {
    padding-top:18px;
  }
  .room-buttons {
    grid-template-columns:1fr 1fr;
    gap:0;
  }
  .bottom-center,.bottom-center:has(#start-button) {
    position:static;
    order:2;
    flex-direction:row;
    flex-wrap:wrap;
    gap:0;
  }
  .bottom-left,.bottom-right {
    position:static;
    order:3;
    text-align:center;
    margin:6px 0;
  }
  .bottom-right {
    order:4;
  }
  .build-note {
    position:static;
    order:5;
    text-align:center;
    margin-top:10px;
  }
  .party-panel {
    order:0;
  }
  .party-panel .room-tools {
    flex-direction:row;
  }
  .party-panel .room-tools button {
    width:50%;
  }
  .roster li {
    padding:10px;
  }
  .racer-info {
    order:0;
    padding:10px 17px;
  }
  .center-dialog {
    top:10svh;
    transform:none;
    margin-bottom:40px;
  }
  .map-window,.controls-window,.results-window {
    top:8px;
    width:calc(100% - 14px);
    padding:10px 8px;
    margin-bottom:25px;
  }
  .map-layout {
    grid-template-columns:1fr;
  }
  .map-location {
    font-size:11px;
  }
  .course-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:start;
    gap:5px;
  }
  .course-list .hint {
    grid-column:1/-1;
  }
  .course-list>p:not(.hint) {
    display:none;
  }
  .route-preview {
    margin:0;
  }
  .map-footer {
    gap:10px;
  }
  .map-footer button {
    width:120px;
  }
  .controls-grid,.results-grid {
    grid-template-columns:1fr;
    gap:20px;
  }
  .controls-window {
    padding:15px;
  }
  .control-row {
    font-size:12px;
  }
  .controls-grid .hint {
    font-size:12px;
  }
  .result-table {
    font-size:13px;
  }
  .results-grid {
    gap:28px;
  }
  .results-window {
    padding:12px;
  }
  .result-actions {
    grid-template-columns:1fr 1fr;
  }
  .your-time {
    font-size:27px;
    margin-bottom:10px;
  }
  .loading-screen {
    min-height:100svh;
  }
  .loading-bottom {
    bottom:4%;
  }
  .loading-caption {
    font-size:27px;
  }
  .loading-bottom p {
    font-size:12px;
  }
  .loading-tip {
    margin-bottom:6px;
  }
  #shell[data-screen=loading] #content {
    min-height:100svh;
  }
  dialog .dialog-actions {
    flex-wrap:wrap;
  }
}

/* The racer select (D-0084): WoW's character select, roster on the left, the class kit on the
   right, the racer in their race's 1.12 creation scene behind (glue/racers, a build output). */
#shell.racer-scene {
  background-image:var(--racer-scene),url('glue/scene.webp?v=20261014');
}
.racer-row {
  display:flex;
  align-items:center;
  gap:11px;
  min-height:64px;
  padding:7px 8px 7px 10px;
}
.racer-row .racer-text {
  display:block;
  margin:0;
  min-width:0;
}
.racer-row .racer-text strong {
  font-size:16px;
}
.racer-row .racer-text span,.racer-row .racer-text small {
  margin-top:2px;
}
.racer-row .racer-text small {
  color:#bbb;
  font-size:11px;
}
.portrait {
  flex:none;
  width:50px;
  height:50px;
  border-radius:50%;
  background:#000 center/cover no-repeat;
  box-shadow:0 0 0 2px #6f5418,0 0 0 3px #000,inset 0 0 8px #000;
}
.racer-row.selected .portrait {
  box-shadow:0 0 0 2px #ffd100,0 0 0 3px #000,0 0 10px #ffd10088;
}
.racer-row:hover:not(.selected) .racer-text strong {
  color:#fff;
}
.racer-list {
  position:absolute;
  left:12px;
  top:130px;
  bottom:110px;
  width:300px;
  padding:0 4px;
  display:flex;
  flex-direction:column;
}
.racer-rows {
  overflow-y:auto;
  margin-top:6px;
}
.racer-traits {
  position:absolute;
  right:12px;
  top:15px;
  bottom:110px;
  width:340px;
  padding:4px 10px 10px;
  overflow-y:auto;
}
.racer-traits h2 {
  font-size:24px;
  color:#ffd100;
}
.racer-traits h3 {
  color:#ffd100;
  font-size:15px;
  margin:14px 0 6px;
  font-weight:400;
}
.racer-traits .gold {
  color:#ffd100;
  font-size:14px;
}
.racer-class {
  color:#fff;
  font-size:13px;
  margin-top:3px;
}
.racer-blurb {
  color:#ddd;
  font-size:13px;
  line-height:1.5;
  margin-top:10px;
}
.racer-traits .hint {
  color:#999;
  font-size:11px;
  margin-top:14px;
}
.trait {
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:0 0 10px;
}
.trait p {
  color:#ffd100;
  font-size:12px;
  line-height:1.45;
  margin-top:3px;
}
.trait-name {
  color:#fff;
  font-size:14px;
  display:flex;
  justify-content:space-between;
  gap:6px;
}
.trait-tag {
  color:#aaa;
  font-size:11px;
  white-space:nowrap;
  padding-top:2px;
}
.trait.signature .trait-tag {
  color:#ff8000;
}
.trait.signature .spell-icon {
  box-shadow:0 0 0 1px #000,0 0 0 2px #ff8000,0 0 8px #ff800088;
}
.spell-icon {
  flex:none;
  width:40px;
  height:40px;
  border-radius:3px;
  background:#1a1510 center/cover no-repeat;
  box-shadow:0 0 0 1px #000,0 0 0 2px #5a4a2a;
}
.spell-icon.empty {
  background:radial-gradient(#3a3020,#120e08);
}
.racer-select .selected-name {
  left:312px;
  right:352px;
}
.racer-select .bottom-center {
  left:312px;
  right:352px;
}
.character-rows .racer-row {
  min-height:70px;
}
@media(max-width:950px) {
  .racer-select {
    display:flex;
    flex-direction:column;
    padding:200px 12px 15px;
  }
  .racer-list,.racer-traits {
    position:relative;
    inset:auto;
    width:100%;
    margin:0 auto 12px;
  }
  .racer-select .selected-name {
    position:absolute;
    top:150px;
    bottom:auto;
    left:0;
    right:0;
  }
  .racer-select .bottom-center {
    position:static;
  }
}