/* The shared parts every screen is built from (tokens in css/tokens.css):
   panel / sheet / well, the head and foot rows, titles, buttons, segmented control, picture tiles,
   list rows, badges, faces, stat bars, fields and inputs, switch, stepper, dialog, toast, tooltip.
   Screens only arrange these (css/menu.css); they do not restyle them. */

/* ---------------------------------------------------------------- containers */
.panel {
  color: var(--c-text);
  background: var(--glass-1);
  border: var(--line-thin) solid var(--glass-rim);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-plate);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}

/* a panel with a head row, a body that scrolls only when it must, and a foot row */
.sheet {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--s-4);
  width: min(var(--sheet-w, 44rem), 100%);
  max-height: 100%;
  padding: var(--s-5);
  animation: sheet-in 0.32s var(--ease-pop);
}

.sheet-narrow { --sheet-w: 30rem; }
.sheet-wide { --sheet-w: 62rem; }

.sheet-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-height: 0;
}

/* a message in the middle: logo, a line, maybe a spinner */
.sheet-message {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: center;
  text-align: center;
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(1.2rem) scale(0.95); }
  to { opacity: 1; transform: none; }
}

/* sunk area inside a panel */
.well {
  background: var(--glass-2);
  border-radius: var(--r-md);
}

.scroll {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--c-rim-soft) transparent;
  scrollbar-width: thin;
}

/* ---------------------------------------------------------------- head and foot rows */
.screen-head,
.screen-foot {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-3);
  align-items: center;
  min-width: 0;
  min-height: var(--hit);
}

.screen-head > .title {
  flex: 1 1 auto;
  min-width: 0;
}

/* the main action is always the last one, in the bottom-right corner */
.screen-foot > .btn-primary:last-child,
.screen-foot > .foot-end {
  margin-left: auto;
}

/* (the secondary actions just left of the main one: the gap opens before them, not between - unless they are away) */
.screen-foot > .foot-end:not(.hidden) ~ .btn-primary:last-child {
  margin-left: 0;
}

/* Impressum and Datenschutz on the title screen: small, quiet, always there (impressum.html, datenschutz.html) */
.legal-links {
  display: flex;
  gap: var(--s-4);
  font-size: var(--t-xs);
  font-weight: 700;
}

.legal-links a {
  color: var(--c-text-soft);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  pointer-events: auto;
}

.legal-links a:hover,
.legal-links a:focus-visible { color: var(--c-text); }

/* the game's version beside them (js/version.js) */
.legal-links .app-version { color: var(--c-text-dim); font-weight: 600; }

.screen-foot > .status {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------------------------------------------------------------- lettering */
.title {
  margin: 0;
  overflow: hidden;
  font-size: var(--t-xl);
  font-style: italic;
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  paint-order: stroke fill;
  -webkit-text-stroke: var(--stroke) var(--c-ink);
}

.kicker {
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--c-text-soft);
  text-transform: uppercase;
}

.lead {
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.35;
}

.status {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 800;
  line-height: 1.25;
  color: var(--c-text-soft);
  text-shadow: 0 1px 0 rgb(0 0 0 / 50%);
}

.status:empty {
  visibility: hidden;
}

.status.is-warn { color: #ffe9a8; }

/* line drawings (ui/icons.js) next to text */
.icon {
  display: inline-flex;
  flex: none;
}

.icon svg {
  display: block;
  width: 1.25em;
  height: 1.25em;
  overflow: visible;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-top: var(--c-blue-top);
  --btn-bottom: var(--c-blue-bottom);
  --btn-rim: var(--c-rim);
  --btn-shade: var(--c-blue-shade);
  display: inline-flex;
  flex: none;
  gap: var(--s-2);
  align-items: center;
  justify-content: center;
  min-width: var(--hit);
  min-height: var(--hit-md);
  padding: 0 var(--s-5);
  font-size: var(--t-md);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  background: linear-gradient(var(--btn-top), var(--btn-bottom));
  border: var(--line) solid var(--btn-rim);
  border-radius: var(--r-md);
  box-shadow: var(--sh-raised);
  paint-order: stroke fill;
  -webkit-text-stroke: var(--stroke) var(--c-ink);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), filter var(--dur);
}

.btn:hover { filter: brightness(1.12); }

.btn:active {
  box-shadow: var(--sh-pressed);
  transform: translateY(0.25rem);
}

.btn:disabled {
  cursor: default;
  filter: grayscale(0.8) opacity(0.55);
  transform: none;
}

.btn .icon svg { width: 1.2em; height: 1.2em; }

.btn-primary {
  --btn-top: var(--c-gold-top);
  --btn-bottom: var(--c-gold-bottom);
  --btn-rim: var(--c-gold-rim);
  --btn-shade: var(--c-gold-shade);
}

.btn-ghost {
  --btn-top: #33487c;
  --btn-bottom: var(--c-navy-800);
  --btn-rim: var(--c-rim-soft);
  --btn-shade: var(--c-ink);
}

.btn-danger {
  --btn-top: var(--c-red-top);
  --btn-bottom: var(--c-red-bottom);
  --btn-rim: #ffc2b8;
  --btn-shade: var(--c-red-shade);
}

.btn-sm {
  min-height: var(--hit);
  padding: 0 var(--s-4);
  font-size: var(--t-sm);
}

.btn-lg {
  min-width: min(12rem, 100%);
  min-height: var(--hit-lg);
  padding: 0 var(--s-5);
  font-size: var(--t-lg);
}

.btn-block {
  width: 100%;
}

/* ---------------------------------------------------------------- focus: one ring for everything you can press */
:where(button, input, a, [tabindex]):focus { outline: none; }

:where(button, input, a, [tabindex]):focus-visible,
html.nav-keys :where(button, input, a, [tabindex]):focus {
  outline: 4px solid var(--c-focus);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- segmented control: a few options in a row (role=radiogroup) */
.seg {
  display: flex;
  flex: 0 1 auto;
  gap: var(--s-1);
  min-width: 0;
  padding: var(--s-1);
  background: var(--glass-2);
  border-radius: var(--r-md);
}

/* (as wide as its word, the room left shared out: equal shares of the whole cut the longest words - PlayStation, a
   German "Controller" - while short ones had room to spare) */
.seg > button {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--hit);
  padding: 0 var(--s-3);
  font-size: var(--t-sm);
  font-style: italic;
  font-weight: 900;
  color: var(--c-text-soft);
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: var(--line-thin) solid transparent;
  border-radius: calc(var(--r-md) - 0.25rem);
  transition: background var(--dur), color var(--dur);
}

.seg > button:hover { color: #fff; background: rgb(255 255 255 / 8%); }

.seg > button[aria-checked="true"] {
  color: #fff;
  background: linear-gradient(var(--c-gold-top), var(--c-gold-bottom));
  border-color: var(--c-gold-rim);
  box-shadow: 0 0.15rem 0 var(--c-gold-shade);
  paint-order: stroke fill;
  -webkit-text-stroke: var(--stroke) var(--c-ink);
}

.seg > button:disabled {
  cursor: default;
  opacity: 0.4;
}

/* ---------------------------------------------------------------- tiles: pictures to choose from (drivers, cars, tracks) */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--hit);
  padding: var(--s-1);
  font-style: italic;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(var(--c-navy-600), var(--c-navy-800));
  border: var(--line) solid var(--c-rim-soft);
  border-radius: var(--r-md);
  box-shadow: 0 0.25rem 0 var(--c-ink), inset 0 2px 0 rgb(255 255 255 / 14%);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur);
}

.tile:hover { transform: translateY(-2px); }

.tile[aria-checked="true"] {
  background: linear-gradient(var(--c-gold-top), var(--c-gold-bottom));
  border-color: var(--c-gold-rim);
  box-shadow: var(--sh-glow-gold), 0 0.25rem 0 var(--c-gold-shade), inset 0 2px 0 rgb(255 255 255 / 45%);
  transform: scale(1.06);
}

.tile:disabled { cursor: default; }
.tile:disabled:not([aria-checked="true"]) { opacity: 0.5; }

/* ---------------------------------------------------------------- list rows (racers, results, credits) */
.row-item {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  min-width: 0;
  min-height: var(--hit);
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
  font-weight: 800;
  background: linear-gradient(90deg, rgb(8 16 36 / 74%), rgb(45 68 121 / 55%));
  border-left: 0.5rem solid var(--accent, var(--c-rim-soft));
  border-radius: var(--r-sm);
}

.row-item > .grow-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-item.is-quiet {
  font-weight: 700;
  color: var(--c-text-soft);
}

.row-item.is-me {
  color: var(--c-ink);
  background: linear-gradient(90deg, #ff9d1e, var(--c-gold));
  box-shadow: 0 0 0.9rem rgb(255 190 40 / 55%);
}

/* ---------------------------------------------------------------- badges */
.badge {
  display: inline-flex;
  flex: none;
  gap: var(--s-1);
  align-items: center;
  padding: 0.15rem 0.6rem;
  font-size: var(--t-xs);
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
  color: var(--c-text-soft);
  white-space: nowrap;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: var(--r-pill);
  -webkit-text-stroke: 0;
}

.badge:empty { display: none; }

.badge-gold {
  color: var(--c-on-gold);
  background: linear-gradient(var(--c-gold-top), var(--c-gold-bottom));
  border-color: transparent;
}

.is-me .badge { color: var(--c-ink); border-color: rgb(13 23 48 / 35%); }

/* ---------------------------------------------------------------- faces: a driver's portrait, or a coloured disc with the initial */
.face {
  display: block;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  object-fit: cover;
  border-radius: 28%;
}

.face-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-weight: 900;
  color: #fff;
  background: radial-gradient(circle at 50% 30%, rgb(255 255 255 / 35%), transparent 60%), var(--face-color, #888);
  border-radius: 50%;
  box-shadow: inset 0 -0.18em 0 rgb(0 0 0 / 25%), 0 0 0 2px var(--c-ink);
  container-type: size;
  paint-order: stroke fill;
}

.face-fallback > span {
  font-size: 58cqh;
  line-height: 1;
  -webkit-text-stroke: 0.12em var(--c-ink);
}

/* ---------------------------------------------------------------- stat bar: five pips */
.statbar {
  display: block;
  flex: 1 1 4rem;
  height: 0.85rem;
  overflow: hidden;
  background: rgb(13 23 48 / 80%);
  border-radius: 4px;
  mask-image: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), transparent 0 20%);
}

.statbar > b {
  display: block;
  width: calc(var(--fill, 0) * 100%);
  height: 100%;
  background: linear-gradient(var(--c-gold-top), var(--c-gold-bottom));
  transition: width 0.45s var(--ease-pop);
}

/* ---------------------------------------------------------------- fields */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.input {
  min-width: 0;
  height: var(--hit-md);
  padding: 0 var(--s-3);
  font-size: var(--t-md);
  font-weight: 800;
  color: #fff;
  background: rgb(8 16 36 / 70%);
  border: var(--line) solid var(--c-rim-soft);
  border-radius: var(--r-md);
  -webkit-user-select: text;
  user-select: text;
}

.input::placeholder { color: var(--c-text-dim); }
.input:focus { border-color: var(--c-gold); }

/* ---------------------------------------------------------------- switch: on / off (role=switch) */
.switch {
  position: relative;
  flex: none;
  width: 4.5rem;
  height: var(--hit);
  padding: 0;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: var(--r-pill);
}

.switch::before {
  position: absolute;
  inset: calc(50% - 0.95rem) 0.25rem;
  background: rgb(8 16 36 / 80%);
  border: var(--line-thin) solid var(--c-rim-soft);
  border-radius: var(--r-pill);
  content: "";
  transition: background var(--dur), border-color var(--dur);
}

.switch::after {
  position: absolute;
  top: calc(50% - 0.75rem);
  left: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  background: #c7d3ee;
  border-radius: 50%;
  box-shadow: 0 0.15rem 0 rgb(0 0 0 / 35%);
  content: "";
  transition: transform var(--dur) var(--ease-pop), background var(--dur);
}

.switch[aria-checked="true"]::before {
  background: linear-gradient(var(--c-gold-top), var(--c-gold-bottom));
  border-color: var(--c-gold-rim);
}

.switch[aria-checked="true"]::after {
  background: #fff;
  transform: translateX(2rem);
}

/* ---------------------------------------------------------------- stepper: a level in steps (role=slider; - and + for the mouse) */
.stepper {
  display: flex;
  flex: 0 1 15rem;
  gap: var(--s-2);
  align-items: center;
  min-width: 9rem;
  border-radius: var(--r-md);
}

.stepper-bar {
  display: flex;
  flex: 1 1 auto;
  gap: 3px;
  align-items: flex-end;
  height: 1.3rem;
}

.stepper-bar > i {
  flex: 1 1 0;
  height: calc(35% + var(--h, 0.5) * 65%);
  background: rgb(255 255 255 / 16%);
  border-radius: 3px;
}

.stepper-bar > i.on {
  background: linear-gradient(var(--c-gold-top), var(--c-gold-bottom));
}

.stepper > .btn {
  width: var(--hit);
  padding: 0;
}

/* ---------------------------------------------------------------- dialog: a question over everything */
.dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(var(--gutter), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) max(var(--gutter), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  pointer-events: auto;
  background: var(--c-scrim);
}

.dialog {
  --sheet-w: 32rem;
}

.dialog .lead { color: var(--c-text-soft); }

.dialog .screen-foot { flex-wrap: wrap; justify-content: flex-end; }

/* ---------------------------------------------------------------- legal sheet: Impressum / Datenschutz over the game
   (js/ui/legalSheet.js; the page itself is styled by css/legal.css). As tall as the window allows: an iframe has no height of its own */
.legal-sheet {
  --sheet-w: 52rem;
  height: 100%;
}

.legal-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--c-navy-900);
  border: 0;
  border-radius: var(--r-md);
}

/* ---------------------------------------------------------------- toast: a short line that fades away (above the foot row) */
.toast {
  position: fixed;
  bottom: calc(var(--gutter) + var(--hit-lg) + var(--s-4));
  left: 50%;
  z-index: 30;
  max-width: min(90vw, 36rem);
  padding: var(--s-3) var(--s-5);
  font-weight: 800;
  color: #fff;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(var(--c-navy-700), var(--c-navy-900));
  border: var(--line-thin) solid var(--c-rim);
  border-radius: var(--r-md);
  box-shadow: 0 0 0 var(--line-thin) var(--c-ink), 0 0.5rem 1.4rem rgb(0 0 0 / 40%);
  opacity: 0;
  transform: translate(-50%, 1rem);
  transition: opacity 0.25s, transform 0.25s;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------- tooltip: a word of explanation on hover or focus (data-tip) */
[data-tip] { position: relative; }

[data-tip]:hover::after,
[data-tip]:focus-visible::after,
html.nav-keys [data-tip]:focus::after {
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: 16rem;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-xs);
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-ink);
  text-transform: none;
  white-space: normal;
  pointer-events: none;
  background: #fff;
  border-radius: var(--r-sm);
  box-shadow: 0 0.3rem 0.8rem rgb(0 0 0 / 35%);
  content: attr(data-tip);
  -webkit-text-stroke: 0;
  letter-spacing: 0;
}

/* ---------------------------------------------------------------- spinner */
.spinner {
  width: 3rem;
  height: 3rem;
  border: 0.4rem solid rgb(255 255 255 / 18%);
  border-top-color: var(--c-gold);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}