/*-----------------------------------------------------------
||||||||||||||             GENERAL              |||||||||||||||
------------------------------------------------------------*/
@font-face {
  font-family: "Autoscape";
  src: url("fonts/Autoscape.woff2") format("woff2");
  font-weight: 50 140;
  font-style: normal;
}




body {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  place-items: center;
  background-color: #000000;
  color: #111;
  font-family: "Autoscape", monospace;
}

.layout{
  width: min(100vw, 200svh);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.camera {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}





/*-----------------------------------------------------------
||||||||||||||             CAMERA              |||||||||||||||
------------------------------------------------------------*/

.stage {
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

video {
  display: none;

}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

canvas.is-picking {
  cursor: crosshair;
  outline: 1px solid #a8c936;
  outline-offset: -1px;
}

.pick-hint {
  margin: 8px 0 0;
  color: #a8c936;
}

/*-----------------------------------------------------------
||||||||||||||             ASIDE               |||||||||||||||
------------------------------------------------------------*/

.color-tool,
.overlay-toggle {
  --line: #7a7a7a;
  --text: #ffffff;
  --text-dim: #7a7a7a;
  --accent: #a8c936;
}

/* Floats over camera and poster; H or the button shows and hides it.
   Same look as the screens: black, hairline cells, uppercase */
.overlay-toggle {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 11;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #000;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 80;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  /* Invisible until the mouse finds it, so it stays off the screens */
  opacity: 0;
  transition: opacity 0.2s;
}

.overlay-toggle:hover,
.overlay-toggle:focus-visible,
.camera:has(.color-tool:hover) .overlay-toggle {
  opacity: 1;
}

.overlay-toggle:hover,
.overlay-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.overlay-toggle:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.color-tool {
  position: fixed;
  top: 52px;
  left: 12px;
  z-index: 10;
  width: min(340px, calc(100vw - 24px));
  max-height: calc(100svh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid var(--line);
  background: #000;
  color: var(--text);
  font-size: 12px;
  font-weight: 80;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  accent-color: var(--accent);
  scrollbar-width: thin;
  scrollbar-color: var(--line) #000;
}

.color-tool.is-hidden,
.color-tool.is-suppressed,
.overlay-toggle.is-suppressed {
  display: none;
}

/* Panels are cells: stacked without gaps, sharing their borders */
.panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
}

.panel + .panel {
  margin-top: -1px;
}

/* Clicking the title opens and closes the panel */
.panel__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -10px;
  padding: 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 120;
  letter-spacing: 0.08em;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.panel__title::-webkit-details-marker {
  display: none;
}

.panel__title::after {
  content: "+";
  color: var(--text-dim);
  font-weight: 80;
}

.panel[open] > .panel__title::after {
  content: "−";
}

.panel__title:hover,
.panel__title:hover::after {
  color: var(--accent);
}

.panel__title:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.panel__status {
  color: var(--text-dim);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.camera-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #000;
  color: var(--text);
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  cursor: pointer;
}

.camera-select:hover:not(:disabled),
.camera-select:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.camera-select:disabled {
  color: var(--text-dim);
  cursor: default;
}

.panel__status.is-error {
  color: #ed1726;
}

.color-tool button {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #000;
  color: var(--text);
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  cursor: pointer;
}

.color-tool button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.color-tool button:focus-visible,
.color-tool input:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* Square checkbox, filled green when on */
.toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.toggle input {
  appearance: none;
  flex: none;
  width: 12px;
  height: 12px;
  margin: 0;
  border: 1px solid var(--line);
  background: #000;
  cursor: pointer;
}

.toggle input:checked {
  border-color: var(--accent);
  background: var(--accent);
}

/* Hairline slider with a square handle */
.color-tool__field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  align-items: center;
}

.color-tool__field span {
  grid-column: 1 / -1;
}

.color-tool__field input[type="range"] {
  appearance: none;
  width: 100%;
  height: 12px;
  margin: 0;
  background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;
  cursor: pointer;
}

.color-tool__field input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 12px;
  border: none;
  border-radius: 0;
  background: var(--text);
}

.color-tool__field input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 12px;
  border: none;
  border-radius: 0;
  background: var(--text);
}

.color-tool__field input[type="range"]:hover::-webkit-slider-thumb {
  background: var(--accent);
}

.color-tool__field input[type="range"]:hover::-moz-range-thumb {
  background: var(--accent);
}

.color-tool__field output {
  min-width: 3ch;
  color: var(--text-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Color slots are cells too */
.color-slots {
  display: flex;
  flex-direction: column;
}

/* Swatch · name · status on top, eyedropper and on/off below */
.color-slot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "swatch name     name"
    "swatch position position"
    "pick   pick     enable";
  gap: 2px 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
}

.color-slot + .color-slot {
  margin-top: -1px;
}

.color-slot.is-active {
  position: relative;
  border-color: var(--accent);
}

.color-slot input[type="color"] {
  grid-area: swatch;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: none;
  cursor: pointer;
}

.color-slot input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-slot input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 0;
}

.color-slot input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 0;
}

.color-slot__name {
  grid-area: name;
  font-weight: 120;
}

.color-slot__position {
  grid-area: position;
  overflow-wrap: anywhere;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.color-slot__pick {
  grid-area: pick;
  justify-self: start;
  margin-top: 6px;
}

.color-slot.is-active .color-slot__pick {
  border-color: var(--accent);
  color: var(--accent);
}

.color-slot .color-slot__enable {
  grid-area: enable;
  justify-self: end;
  margin-top: 6px;
}

#status {
  display: none;
}




/*-----------------------------------------------------------
||||||||||||||             POSTER              |||||||||||||||
------------------------------------------------------------*/


/*-----------------
\\\     GRID    ///            
-----------------*/
.poster{
  --bulle-color: #ed1726;
  --raser-color: #a8c936;

  background-color: #000000;
  color: #fff;
  border-width: 0.1px;
  border-color: #7a7a7a;
  border-style: solid;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  width: 100%;
  aspect-ratio: 1;
  align-self: start;
  box-sizing: border-box;
  /* Same distance to the poster edge on every screen, no gaps between cells */
  --poster-pad: 10px;
  padding: var(--poster-pad);
  gap: 0;

  /* Shared text sizes. Texts not using these have their own size,
     fitted to their cell (see the cell's rule) */
  --font-xs: clamp(0.5rem, 0.8vw, 0.7rem);
  --font-s: clamp(0.65rem, 1.15vw, 0.95rem);
  --font-m: clamp(1rem, 2vw, 1.5rem);
  --font-l: clamp(1.2rem, 3vw, 2rem);
}

.poster > div{
  border-width: 0.1px;
  border-color: #7a7a7a;
  border-style: solid;
}

.poster .bulle{
  color: var(--bulle-color);
  border-color: #7a7a7a;
}

.poster .raser{
  color: var(--raser-color);
  border-color: #7a7a7a;
}




/*-----------------
\\\     CELLS    ///            
-----------------*/

.title {
    grid-area: title;
}

.bulle {
    grid-area: bulle;
}

.raser {
    grid-area: raser;
}

.distance {
    grid-area: distance;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    color: #fff;
    font-size: clamp(100px, 30vw, 1000px);
    font-weight: 50;
    line-height: 0.8;
    text-align: center;
    white-space: nowrap;
}

/* One span per digit, spaced by typo.js so the glyphs touch */
.distance .glyph {
  flex: none;
}

.race-map {
  grid-area: race-map;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  container-type: size;
}

/* Square character grid of the play area, as large as the cell allows */
.race-map__grid {
  --map-side: min(100cqw, 100cqh);
  display: grid;
  grid-template-columns: repeat(var(--map-size), 1fr);
  grid-template-rows: repeat(var(--map-size), 1fr);
  width: var(--map-side);
  height: var(--map-side);
  font-size: calc(var(--map-side) / var(--map-size));
  font-weight: 140;
  line-height: 1;
}

.race-map__grid > span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.race-map__grid > [data-kind="obstacle"],
.race-map__grid > [data-kind="cone"] {
  color: #fff;
}

.race-map__grid > [data-kind="bulle"] {
  color: var(--bulle-color);
}

.race-map__grid > [data-kind="raser"] {
  color: var(--raser-color);
}

.race-timer {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding: 0;
  font-size: var(--font-m);
  font-weight: 80;
  white-space: nowrap;
}

.race-score {
  flex: none;
  font-size: var(--font-m);
  font-weight: 80;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.race-score [data-racer="bulle"] {
  color: #ed1726;
}

.race-score [data-racer="raser"] {
  color: #a8c936;
}

/* Holds two sections, each with its own border: log (7 parts), radio (1 part) */
.race-sidebar {
  grid-area: race-sidebar;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

/* Score and race time side by side: a small cell under the racer info */
.race-status {
  grid-area: race-status;
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  overflow: hidden;
  padding: 0.5rem;
  border: 1px solid #7a7a7a;
}

/* Section under the log: what the car radio plays */
.race-radio {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  overflow: hidden;
  padding: 0.25rem 0.5rem;
  border: 1px solid #7a7a7a;
}

.race-radio__label {
  color: #7a7a7a;
  font-size: var(--font-xs);
  letter-spacing: 0.08em;
}

/* One line; a title that doesn't fit scrolls (updateRadioScroll in main.js) */
.race-radio__title {
  display: block;
  overflow: hidden;
  font-size: var(--font-s);
  font-weight: 80;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.race-radio__track {
  display: inline-flex;
  gap: 3em;
}

.race-radio__title:not(.is-scrolling) .race-radio__copy {
  display: none;
}

.race-radio__title.is-scrolling .race-radio__track {
  animation: radio-scroll var(--radio-scroll-duration) linear infinite;
}

/* Ends where the copy stands exactly where the text started, so the loop is seamless */
@keyframes radio-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--radio-scroll-distance))); }
}

.race-event-log {
  display: flex;
  min-height: 0;
  flex: 7;
  flex-direction: column;
  gap: 0.2rem;
  overflow: hidden;
  padding: 0.5rem;
  border: 1px solid #7a7a7a;
  font-size: var(--font-s);
  line-height: 1.2;
}

.race-event {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6em;
  overflow-wrap: anywhere;
  font-weight: 80;
  opacity: 0.45;
}

/* Newest event at the bottom stays fully visible */
.race-event:last-child {
  opacity: 1;
}

.race-event__time {
  color: #7a7a7a;
}

.race-event[data-actor="bulle"] .race-event__text {
  color: var(--bulle-color);
}

.race-event[data-actor="raser"] .race-event__text {
  color: var(--raser-color);
}

.race-data {
  grid-area: race-data;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  justify-content: stretch;
  overflow: hidden;
  padding: 0.5rem;
  border: 1px solid #7a7a7a;
}

.racer-data {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  overflow: hidden;
  padding: 0.25rem 0;
}

.positionBulle,
.positionRaser{
  white-space: pre-line;
  line-height: 1.15;
}

.countdownNumber {
    grid-area: countdownNumber;
}

.info {
    grid-area: info;
}

.hit {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  color: #fff;
  font-size: clamp(1.25rem, 4vw, 2.5rem);
  font-weight: 100;
  line-height: 0.95;
}

.hit.is-visible{
  display: flex;
}




/*-----------------
\\\     START    ///            
-----------------*/


.poster.start {
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  grid-template-areas: 
  "title title title title"
  "title title title title"
  "info info info info"
  "info info info info"
  "info info info info"
  "info info info info"
  "info info info info"
  "info info info info"
  "info info info info";
}

.title{
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  font-size: 100px;
  line-height: 0.9;
}

.poster.start > div{
  display: none;
}

.poster.start .title,
.poster.start .info{
  display: block;
}

.poster.start .title{
  display: grid;
  /* The line box is taller than the fitted ink, so center the
     overflowing track too, not only the item inside it */
  place-content: center;
  place-items: center;
  position: relative;
  z-index: 1;
  font-weight: 140;
  letter-spacing: 0;
  line-height: 0.8;
  text-shadow: none;
}

.poster.start .title{
  animation: start-weight 2.4s ease-in-out infinite alternate;
}

@keyframes start-weight{
  from{ font-weight: 50; }
  to{ font-weight: 140; }
}

/* Two columns: Bulle left, Raser right, each with its detection status below */
.poster.start .info{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "bulle-text raser-text"
    "bulle-state raser-state";
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  container-type: inline-size;
}

.start-instruction{
  min-width: 0;
  overflow: hidden;
  padding: 4cqw;
  font-size: 6cqw;
  font-weight: 70;
  line-height: 0.95;
}

.start-instruction--bulle{
  grid-area: bulle-text;
  color: var(--bulle-color);
}

.start-instruction--raser{
  grid-area: raser-text;
  border-left: 1px solid #7a7a7a;
  color: var(--raser-color);
}

/* Lets both status items sit in their own column of the .info grid */
.start-detection{
  display: contents;
}

#bulle-detection{
  grid-area: bulle-state;
}

#raser-detection{
  grid-area: raser-state;
  border-left: 1px solid #7a7a7a;
}

.start-detection__item{
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.4em;
  padding: 4cqw;
  border-top: 1px solid #7a7a7a;
  font-size: clamp(0.65rem, 2cqw, 1.2rem);
  opacity: 0.7;
  transition: opacity 180ms ease;
}

.start-detection__item.is-detected{
  opacity: 1;
}

.start-detection__item::before{
  width: 0.55em;
  height: 0.55em;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
}

.start-detection__item.is-detected::before{
  background: currentColor;
}

.start-detection__name{
  letter-spacing: 0.08em;
}

.start-detection__state{
  min-width: 7ch;
  color: #aaa;
  font-weight: 50;
}

@media (prefers-reduced-motion: reduce){
  .start-detection__item{
    transition: none;
  }

  .poster.start .title{
    animation: none;
  }
}


/*-----------------
\\\     COUNTDOWN    ///            
-----------------*/


.poster.countdown {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-template-areas: 

  "countdownNumber countdownNumber countdownNumber countdownNumber"
"countdownNumber countdownNumber countdownNumber countdownNumber"
"countdownNumber countdownNumber countdownNumber countdownNumber"
"countdownNumber countdownNumber countdownNumber countdownNumber";

}

.poster.ready{
  position: relative;
  border-color: #7a7a7a;
  background-color: #000;
}

.poster.ready > div:not(.ready-message){
  display: none;
}

.poster.ready .ready-message{
  position: absolute;
  inset: var(--poster-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 0 0 4%;
  border: 1px solid #7a7a7a;
}

.ready-message span{
  min-height: 1.2em;
  color: #bdbdbd;
  font-size: clamp(0.6rem, 0.8vw, 1rem);
  font-weight: 80;
  line-height: 1.2;
  white-space: pre;
  visibility: hidden;
}

.ready-message span.is-visible{
  visibility: visible;
}

/* Block cursor while a line is being typed */
.ready-message span.is-typing::after{
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.1em;
  vertical-align: -0.1em;
  background: currentColor;
  animation: ready-cursor 0.8s steps(1) infinite;
}

@keyframes ready-cursor{
  50%{ opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .ready-message span.is-typing::after{
    animation: none;
  }
}

.countdownNumber{
  font-size: clamp(6rem, 22vw, 24rem);
  font-weight: 50;
  line-height: 0.8;
  letter-spacing: -0.08em;
  color: #fff;
}

.poster.countdown > div{
  display: none;
}

.poster.countdown .countdownNumber{
  display: grid;
  place-items: center;
  overflow: hidden;
}

.countdownNumber__value{
  display: inline-block;
}

.poster.countdown .countdownNumber__value.is-counting{
  animation: countdown-pop 1000ms linear both;
}

/* Weight only, no size change: one slow full swing per step, thin (50) to bold (140) and back.
   main.js sizes the text to fit at weight 140, the widest point */
@keyframes countdown-pop{
  0%{
    opacity: 0;
    font-weight: 50;
    animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1);
  }
  10%{
    opacity: 1;
  }
  45%{
    font-weight: 140;
    animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  }
  60%{
    font-weight: 140;
    animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1);
  }
  88%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    font-weight: 50;
  }
}

@media (prefers-reduced-motion: reduce){
  .poster.countdown .countdownNumber__value.is-counting{
    animation: none;
  }
}


/*-----------------
\\\     RACE    ///            
-----------------*/


.poster.race {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Twelve rows so the score/time cell can be half a row tall */
  grid-template-rows: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "race-map race-map race-sidebar race-sidebar"
    "race-map race-map race-sidebar race-sidebar"
    "race-map race-map race-sidebar race-sidebar"
    "race-map race-map race-sidebar race-sidebar"
    "race-map race-map race-sidebar race-sidebar"
    "race-map race-map race-sidebar race-sidebar"
    "distance distance distance race-data"
    "distance distance distance race-data"
    "distance distance distance race-data"
    "distance distance distance race-data"
    "distance distance distance race-data"
    "distance distance distance race-status";
}

.poster.race > div{
  display: none;
}


.poster.race .distance,
.poster.race .race-map,
.poster.race .race-sidebar{
  display: block;

}

.poster.race .hit{
  display: none;
}

.poster.race .hit.is-visible{
  display: flex;
}

.poster.race .race-map.is-hit > .race-map__grid{
  visibility: hidden;
}

.poster.race .race-map,
.poster.race .race-sidebar,
.poster.race .race-data,
.poster.race .race-status{
  display: flex;
}

.poster.race .distance{
  display: flex;
}

.poster.race .race-data .bulle,
.poster.race .race-data .raser{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* One X per life; lost lives stay as dimmed X */
.racer-lives{
  white-space: nowrap;
  overflow: hidden;
  font-size: clamp(0.8rem, 1.4vw, 1.6rem);
  font-weight: 140;
  letter-spacing: 0.05em;
  line-height: 1;
}

.racer-lives__lost{
  color: #3a3a3a;
}

.poster.race .racer-points,
.poster.race .speedBulle,
.poster.race .speedRaser,
.poster.race .positionBulle,
.poster.race .positionRaser{
  font-size: clamp(0.7rem, 1.1vw, 1.35rem);
  font-weight: 80;
}


/*-----------------
\\\  DESTROYED  ///
-----------------*/

.poster.bulle-destroyed,
.poster.raser-destroyed,
.poster.both-destroyed,
.poster.match-over,
.poster.busted{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "ending ending ending ending"
    "ending ending ending ending"
    "ending ending ending ending"
    "ending ending ending ending";
}

.poster.bulle-destroyed > div,
.poster.raser-destroyed > div,
.poster.both-destroyed > div,
.poster.match-over > div,
.poster.busted > div{
  display: none;
}

.poster.bulle-destroyed .ending-screen,
.poster.raser-destroyed .ending-screen,
.poster.both-destroyed .ending-screen,
.poster.match-over .ending-screen,
.poster.busted .ending-screen{
  grid-area: ending;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.5rem, 2vh, 1.25rem);
  overflow: hidden;
  padding: clamp(0.75rem, 4vw, 2.5rem);
  border: 1px solid #7a7a7a;
  /* The title is sized to this cell, not to the window */
  container-type: inline-size;
}

.bulle-info{
  color: var(--bulle-color);
}

.raser-info{
  color: var(--raser-color);
}

.ending-eyebrow,
.ending-time,
.ending-restart{
  font-size: var(--font-s);
  font-weight: 80;
  letter-spacing: 0.12em;
}

.ending-eyebrow{
  color: #aaa;
  font-size: var(--font-l);
  letter-spacing: 0.08em;
}

/* ZERSTÖRT, the longest word, fills about three quarters of the cell's width */
.ending-title{
  max-width: 100%;
  font-size: 15cqi;
  font-weight: 140;
  line-height: 0.85;
  overflow-wrap: anywhere;
}

.ending-detail{
  max-width: 100%;
  color: #ddd;
  font-size: var(--font-l);
  font-weight: 70;
  line-height: 1;
  overflow-wrap: anywhere;
}

.ending-time{
  margin-top: clamp(0.5rem, 3vh, 1.5rem);
  color: #aaa;
}

.ending-restart{
  color: #aaa;
}

/* Final result: a grid of cells like the start screen. Winner on top,
   the score in the middle, Bulle and Raser side by side, then the button */
.poster.match-over .ending-screen{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 2fr) minmax(0, 3fr) auto auto;
  grid-template-areas:
    "title  title"
    "score  score"
    "bulle  raser"
    "detail again";
  align-items: stretch;
  gap: 0;
  padding: 0;
  container-type: size;
}

.poster.match-over .ending-title{
  grid-area: title;
  display: grid;
  place-items: center;
  padding: 0 4cqi;
  border-bottom: 1px solid #7a7a7a;
  font-size: min(17cqi, 13cqb);
  line-height: 0.85;
  text-align: center;
  overflow-wrap: normal;
  animation: start-weight 2.4s ease-in-out infinite alternate;
}

/* UNENTSCHIEDEN is one long word */
.poster.match-over .ending-screen[data-outcome="draw"] .ending-title{
  font-size: min(9cqi, 13cqb);
}

.poster.match-over .ending-eyebrow{
  grid-area: score;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: min(42cqi, 34cqb);
  font-weight: 140;
  line-height: 0.8;
  letter-spacing: 0;
  white-space: nowrap;
}

.poster.match-over .ending-racer{
  display: grid;
  gap: 0.3em;
  min-width: 0;
  padding: 4cqi;
  border-top: 1px solid #7a7a7a;
  font-size: min(3.4cqi, 4cqb);
  font-weight: 80;
  white-space: nowrap;
}

.poster.match-over .ending-racer[data-racer="bulle"]{
  grid-area: bulle;
}

.poster.match-over .ending-racer[data-racer="raser"]{
  grid-area: raser;
  border-left: 1px solid #7a7a7a;
}

.ending-racer__name{
  letter-spacing: 0.08em;
}

.ending-racer__points{
  font-size: 2em;
  font-weight: 120;
  line-height: 0.9;
}

.ending-racer__record{
  color: #aaa;
  font-weight: 50;
}

.poster.match-over .ending-detail{
  grid-area: detail;
  display: flex;
  align-items: center;
  padding: 2cqi 4cqi;
  border-top: 1px solid #7a7a7a;
  color: #aaa;
  font-size: min(3cqi, 4cqb);
  font-weight: 80;
  letter-spacing: 0.08em;
}

/* Empty lines (no time or countdown on the final result) take no space */
.ending-screen > span:empty{
  display: none;
}

/* Highscore and "Nochmal spielen" only belong to the final result */
.ending-racer,
.ending-again{
  display: none;
}

/* The button is a cell of the grid; it fills white on hover */
.poster.match-over .ending-again{
  grid-area: again;
  display: block;
  padding: 2cqi 4cqi;
  border: none;
  border-top: 1px solid #7a7a7a;
  border-left: 1px solid #7a7a7a;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: min(3cqi, 4cqb);
  font-weight: 120;
  letter-spacing: 0.12em;
  text-align: left;
  cursor: pointer;
}

.poster.match-over .ending-again:hover,
.poster.match-over .ending-again:focus-visible{
  background: #fff;
  color: #000;
  outline: none;
}

.ending-screen[data-outcome="bulle"] .ending-title{
  color: var(--bulle-color);
}

.ending-screen[data-outcome="raser"] .ending-title{
  color: var(--raser-color);
}

.ending-screen[data-outcome="draw"] .ending-title{
  color: #fff;
}

@media (prefers-reduced-motion: reduce){
  .ending-screen,
  .poster.match-over .ending-title{
    animation: none;
  }
}