@charset "UTF-8";

:root {
   --system: system-ui, sans-serif;

   --handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
   --slab-serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
   --humanist: Seravek, 'Gill Sans Nova', Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
   --geometric-humanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
   --transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
   --monospace-code: 'Nimbus Mono PS', 'Courier New', monospace;
   --monospace-slab-serif: 'Nimbus Mono PS', 'Courier New', monospace;
   --didone: Didot, 'Bodoni MT', 'URW Palladio L', P052, Sylfaen, serif;
   --antique: 'Georgia Pro', Georgia, Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', serif;

   --black: #111;
   --white: #fff;
   --win: lch(20% 100 260);
   --lose: lch(20% 100 0);

   --fg: var(--black);
   --bg: var(--white);
   --shadow: #888;

   --fg-eggplant: lch(23% 55 331);

   --bg-link-hover: lch(95% 8 30);

   --bg-blue: lch(65% 60 260);
   --bg-green: lch(80% 50 140);
   --bg-yellow: lch(91% 88 93);
   --bg-pink: lch(82% 40 320);
   --bg-purple: lch(41% 90 321);
   --bg-orange: lch(75% 75 60);

   --bg-error: lch(90% 85 31);

   --bg-lavender: lch(80% 26 310);
   --bg-lemongrass: lch(76% 79 115);
   --bg-papyrus: lch(97% 23 70);
}

.dark {
   --win: lch(60% 100 280);
   --lose: lch(60% 100 30);

   --fg: var(--white);
   --bg: var(--black);

   --bg-lavender: lch(20% 26 310);
   --bg-papyrus: lch(3% 23 250);
}

@keyframes spin {
   0% {
      rotate: 0deg;
   }
   100% {
      rotate: 360deg;
   }
}

@keyframes flip {
   0% {
      rotate: 0deg;
   }
   50% {
      rotate: y 180deg;
   }
   100% {
      rotate: 0deg;
   }
}

@keyframes progress {
   0% {
      transform: translateX(-100%);
   }
   100% {
      transform: translateX(250%);
   }
}

@layer base {
   html {
      background-color: var(--bg-lavender);
      font-family: var(--antique);
      overflow-y: scroll;
      -webkit-text-size-adjust: 100%;
         -moz-text-size-adjust: 100%;
              text-size-adjust: 100%;

      /* Font clamp */
      font-size: 16px;
      font-size: calc(2.4vw + -1.6px);
   }

   @media (min-width: 900px) {
      html {
         font-size: 20px;
      }
   }

   @media (max-width: 733.3333333333px) {
      html {
         font-size: 16px;
      }
   }

   * {
      box-sizing: border-box;
   }

   main {
      line-height: 1.6em;
   }

   ::-moz-selection {
      background: #dbfaff;
      text-shadow: none;
   }

   ::selection {
      background: #dbfaff;
      text-shadow: none;
   }
}

@layer content {
   a {
      color: inherit;
      transition: background-color 0.2s, border-color 0.2s;
      text-decoration: underline;
      text-decoration-thickness: 0.09em;
      text-underline-offset: 2px;
   }

   a:visited {
      color: inherit;
   }

   a:hover {
      background-color: var(--bg-link-hover);
   }

   h1, h2 {
      font-family: var(--geometric-humanist);
      font-weight: normal;
      margin-top: 1.6rem;
      margin-bottom: 0.3rem;
   }

   h1 a {
      text-decoration: none
   }

   h1 {
      border-bottom: 2px solid var(--black);
      padding-bottom: 0.2em;
      font-size: 1.5em;
   }

   h2 {
      border-bottom: 1px solid var(--black);
      padding-bottom: 0.1em;
      font-size: 1.4em;
   }

   h3, h4, h5, h6 {
      font-size: 1.05em;
      font-weight: normal;
      margin-top: 1em;
      margin-bottom: 0;
   }

   dt:not(:first-child) {
      margin-top: 0.2em;
   }

   dt {
      font-weight: bold;
   }

   ol, ul {
      padding-left: 2em;
   }

   button {
      background: var(--bg);
      border: none;
      cursor: pointer;
      font-family: var(--antique);
      font-size: 1em;
      font-weight: normal;
      padding: 0.2em 0.4em;
      transition: background-color 0.2s;
      text-decoration: underline;
      text-decoration-thickness: 2px;

      &:hover {
         background-color: #f8eaea;
      }

      &:active {
         background-color: var(--bg);
      }
   }

   code {
      font-family: var(--monospace-slab-serif);
      font-size: 0.9rem;
      padding: 0.2rem;
      background-color: lch(97% 0% 0);
   }

   dt code {
      background-color: transparent;
   }

   figure {
      margin: 0;
   }

   main table {
      border-spacing: 0px;
      border-collapse: collapse;
      overflow-x: auto;

      & td,
      & th {
         padding: 0.1em 0.3em;
         border-bottom: 1px solid currentColor;
      }
   }

   :where(table, div, p, ul, ol, dl) {
      margin-bottom: 0;
   }

   :where(main, section) >
   :where(table, div, p, ul, ol, dl, h1, h2) +
   :where(table, div, p, ul, ol, dl) {
      margin-top: 1rem;
   }

   select {
      font-size: 0.9em;
   }
}

@layer layout {
   body {
      background-color: var(--bg);
      padding: 0;
      margin: 0;
      color: var(--fg);
      min-height: 100vh;
      display: flex;
      flex-flow: column nowrap;
   }

   main {
      --main-top-inset: 1.2rem;
      --main-bottom-inset: 4rem;
      --main-pad: 0.5rem;
      --main-max-width: 60rem;
      --games-list-max-width: 65rem;
      margin: var(--main-top-inset) auto var(--main-bottom-inset);
      max-width: var(--main-max-width);
      padding: 0 var(--main-pad);
      width: 100%;
   }

   .sticky {
      background-color: var(--bg);
      position: sticky;
      top: 0;
   }

   .canvas {
      padding: 0;
      margin: 0;
      max-width: initial;

      & > * {
         margin: 0;

         & > section {
            margin: 0 auto;
            max-width: var(--main-max-width);
            position: relative;
         }
      }

      & > * + * {
         border-top: 2px solid var(--fg);
      }

      & h1 {
         font-size: 1.8em;
         padding-bottom: 0.8rem;
         padding-top: 1rem;
         margin-bottom: 1.2rem;
         margin-top: -0.5rem;
         z-index: 1;
      }

      & > *:not(:first-child) section {
         padding-bottom: var(--main-bottom-inset)
      }
   }

   section {
      padding: var(--main-top-inset) var(--main-pad);
   }

   .document {
      max-width: 45rem;
   }

   .dual {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      margin-top: 0;
      margin-bottom: 0;
      padding: 0;
      max-width: unset;
   }

   .dual-half {
      display: flex;
      margin: 0;
      padding: var(--main-top-inset) 0.75rem var(--main-bottom-inset);

      & > div {
         max-width: 60rem;
         width: 100%;
      }
   }

   :where(.dual-half:first-child) {
      justify-content: end;
   }

   :where(.dual-half:last-child) {
      justify-content: start;
   }

   .dual::after {
      content: "";
      display: block;
      height: 100%;
      width: 2px;
      grid-column: 2;
      grid-row: 1;
      background-color: currentColor;
   }

   .pastel {
      background-image: url("/assets/pastel-cloud.png");
      background-size: cover;
      background-repeat: no-repeat;
   }

   @media (max-width: 1500px) {
      .dual {
         grid-template-columns: auto;
         grid-template-rows: auto auto auto;
      }

      .dual-half {
         justify-content: center;
         padding: 1em;
      }

      .dual::after {
         width: 100%;
         height: 2px;
         grid-row: 2;
         grid-column: 1;
      }
   }

   @media (max-width: 800px) {
      .dual-half {
         padding-left: 0.5em;
         padding-right: 0.5em;
      }
   }

   main > ul {
      padding-left: 2em;
   }

   header {
      border-bottom: 2px solid currentColor;
      padding: 0.2em 1em;
   }

   header > * {
      margin: 0 auto;
      max-width: 60rem;
   }

   header.global-message {
      background-color: var(--bg-error);
      padding: 0.5em 1em;
   }

   .header-container {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;

      & a {
         text-decoration: none;
      }

      & ul {
         display: flex;
         flex-flow: row wrap;
         gap: 0 0.2em;
         font-size: 1.1em;
         list-style-type: none;
         margin: 0;
         padding-left: 0;
         & li a {
            display: block;
            padding: 0.4em;
         }
      }

      .site-index {
         border: none;
         font-size: 2em;
         margin: 0;
         text-align: center;

         & a {
            display: block;
            padding: 0.1em 0.2em;
         }
      }

      .site-tagline {
         justify-self: end;
         font-size: 0.8em;
      }
   }

   @media (max-width: 650px) {
      .site-tagline {
         display: none;
      }

      .header-container {
         display: flex;
         flex-direction: row nowrap;
         justify-content: space-between;
      }
   }

   @media (max-width: 450px) {
      .header-container {
         flex-direction: column-reverse;
      }
   }

   footer {
      background-color: var(--bg-lavender);
      border-top: 2px solid currentColor;
      padding: 2rem 1.2rem;
      flex-grow: 1;
   }

   .footer-stats {
      line-height: 2;
      display: grid;
      font-size: 0.9em;
      gap: 2em;
      grid-template-columns: 1fr auto 1fr;
      justify-content: center;
   }

   .footer-divider {
      background-color: currentColor;
      width: 2px;
   }

   .summary-stats {
      align-self: start;
      justify-self: end;
      display: table;
      & > div { display: table-row; }
      & > div span { display: table-cell; }
      & > div span:first-child { padding-right: 1em; }
   }

   .hourly-games {
      display: flex;
      flex-flow: column nowrap;
   }

   .footer-sosumi {
      font-size: 0.8em;
      margin-top: 1.5rem;
      text-align: center;
   }

   @media (max-width: 733.3333333px) {
      .footer-stats {
         display: flex;
         flex-flow: column nowrap;
      }

      .footer-divider {
         display: none;
      }
   }
}

@layer components {
   .papyrus {
      --bg: var(--bg-papyrus);
      background-color: var(--bg);
   }

   .lavender {
      --bg: var(--bg-lavender);
      background-color: var(--bg);
   }

   :where(.card-surface :last-child) {
      margin-bottom: 0;
   }

   :where(.card-surface :first-child) {
      margin-top: 0;
   }

   .badge,
   .card {
      position: relative;
   }

   .card {
      font-size: 0.9em;
      left: -0.15em;
   }

   .badge::before,
   .badge-surface,
   .card::before,
   .card-surface {
      background-color: var(--bg);
      border: 2px solid currentColor;
      border-radius: 4px;
   }

   .badge::before,
   .card::before {
      content: '';
      display: block;
      position: absolute;
      height: calc(100% - 3px);
      width: calc(100% - 3px);
   }

   .badge::before {
      left: 3px;
      top: 3px;
   }

   .card::before {
      left: 5px;
      top: 5px;
   }

   .badge-surface {
      padding: 0 0.5em;
   }

   .card-surface {
      --h-pad: 0.8rem;
      padding: 0.5em var(--h-pad);
   }

   .card-error .card-surface {
      background-color: var(--bg-error);
      padding-bottom: 0.3em;
   }

   .badge-surface,
   .card-surface {
      position: relative;
   }

   .card-surface h2 {
      margin-top: 0;
      margin-bottom: 0.4em;
      border: 0;
   }

   .card-surface hr {
      color: var(--fg);
      margin: 0.3em calc(var(--h-pad) * -1);
   }

   .card-lavender::before {
      background-color: var(--bg-lavender);
   }

   .card-green::before {
      background-color: var(--bg-green);
   }

   :where(.card-error,.card-black,.badge-black)::before {
      background-color: var(--fg);
   }

   :where(.card,.badge).am::before {
      background-color: var(--bg-blue);
   }

   :where(.card,.badge).asia::before {
      background-color: var(--bg-pink);
   }

   :where(.card,.badge).me::before {
      background-color: var(--bg-yellow);
   }

   :where(.card,.badge).eu::before {
      background-color: var(--bg-lemongrass);
   }

   :where(.card,.badge).oce::before {
      background-color: var(--bg-purple);
   }

   :where(.card,.badge).africa::before {
      background-color: var(--bg-orange);
   }

   :where(.card,.badge).unknown::before {
      background-color: var(--black);
   }

   @media (max-width: 800px) {
      .card {
         left: -0.2em;
      }
   }

   .platform-icon {
      vertical-align: text-bottom;
      height: 1em;
      width: auto;
   }

   .dotlist {
      display: block;
      gap: 0 0.3em;
      list-style-type: none;
      padding-left: 0;

      & > li {
         display: inline;
      }

      & > li:not(:last-child)::after {
         content: " · ";
         font-weight: bold;
         white-space: nowrap;
      }
   }

   .htmx-progress {
      height: 3px;
      overflow: clip;
      position: relative;
      container-type: inline-size;
   }

   .htmx-progress::before {
      background: linear-gradient(to left, transparent, var(--bg-blue) 17%, var(--bg-blue) 50%, transparent);
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      top: 0;
      transform: translateX(-100%);
      width: 50%;
      z-index: 0;
   }

   .htmx-progress.htmx-request {
      &::before {
         animation-name: progress;
         animation-duration: 1500ms;
         animation-iteration-count: infinite;
         animation-timing-function: linear;
      }

      @container (width < 900px) {
         &::before {
            animation-duration: 1350ms;
         }
      }

      @container (width < 800px) {
         &::before {
            animation-duration: 1200ms;
         }
      }

      @container (width < 700px) {
         &::before {
            animation-duration: 1050ms;
         }
      }

      @container (width < 600px) {
         &::before {
            animation-duration: 900ms;
         }
      }

      @container (width < 500px) {
         &::before {
            animation-duration: 750ms;
         }
      }

      @container (width < 400px) {
         &::before {
            animation-duration: 600ms;
         }
      }
   }
}

@layer pages {
   .player-search-ctn {
      position: relative;
   }

   .player-search {
      position: relative;
      margin: 0 1em 1em 1em;
      border: 2px solid var(--fg);
      border-radius: 1.5rem;
      overflow: clip;

      &:has(:focus) {
         outline: 1px solid var(--bg-blue);
      }

      [type=search] {
         color: color-mix(in lch, var(--fg) 80%, transparent);
         border: none;
         border-radius: 1.5rem;
         padding: 0.4em 1em 0.4em 2em;
         margin: 1px;
         font-size: 1.3em;
         width: -moz-available;
         width: -webkit-fill-available;

         &:focus {
            outline: none;
         }
      }

      .search-icon {
         color: color-mix(in lch, var(--fg) 75%, transparent);
         height: 1.5rem;
         left: 0.8rem;
         pointer-events: none;
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         width: 1.5rem;
      }

      &.htmx-request .search-indicator {
         animation-name: progress;
         animation-duration: 1000ms;
         animation-iteration-count: infinite;
         animation-timing-function: linear;
      }

      .search-indicator {
         position: absolute;
         top: calc(100% - 2px);
         height: 3px;
         width: 40%;
         transform: translateX(-100%);
         background-color: var(--bg-blue);
         z-index: 0;
      }
   }

   .player-search-ctn {
      #search-results {
         background-color: var(--bg);
         border: 2px solid var(--fg);
         border-top: none;
         left: 2.5em;
         max-height: 25em;
         max-width: 40em;
         overflow-y: auto;
         padding: 1em 1em 0 1em;
         position: absolute;
         top: calc(100% + 1px);
         width: calc(100% - 5em);
         z-index: 2;

         & table {
            width: 100%;
         }
      }

      #search-results:empty {
         display: none;
      }
   }

   #search-results {
      .container {
         container-type: inline-size;
      }

      & table {
         line-height: 1.2;

         & td:nth-child(1) > :where( :nth-child(2), :nth-child(3) ) {
            display: none;
         }

         & td:nth-child(3),
         & td:nth-child(1) > :nth-child(3) {
            white-space: nowrap;
         }

         & td {
            border: none;
            padding: 0.3rem;
         }

         @container ( width < 48ch ) {
            & td:nth-child(2) {
               display: none;
            }

            & td:nth-child(1) > :nth-child(2) {
               display: block;
            }
         }

         @container ( width < 35ch ) {
            & td:nth-child(3) {
               display: none;
            }

            & td:nth-child(1) > :nth-child(3) {
               display: block;
            }
         }
      }
   }

   .leaderboard-regions {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      font-size: 1.2em;
      gap: 0.8em;
      margin-bottom: 0.3em;

      & .badge-surface {
         padding-top: 0.2em;
         padding-bottom: 0.2em;
      }
   }

   .recently-viewed-players {
      display: flex;
      flex-flow: row wrap;
      gap: 0.8em;
      margin-bottom: 0.8em;
   }

   .add-fav,
   .del-fav {
      cursor: pointer;
   }

   .add-fav::before,
   .del-fav:hover::before {
      content: "🤍";
   }

   .add-fav:hover::before,
   .del-fav::before {
      content: "🧡";
   }

   :where(.del-fav,.add-fav)::before {
      rotate: 0deg;
      display: inline flow-root;
   }

   :where(.del-fav,.add-fav).htmx-request::before {
      animation-name: flip;
      animation-duration: 1500ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
   }

   #poi > .card + .card {
      margin-top: 1.5em;
   }

   .favs .card-surface {
      padding-bottom: 0;
   }

   .favs-table {
      margin-right: -0.6em;
      padding-right: 0.6em;
      padding-bottom: 0.6em;
      max-height: 18em;
      line-height: 1;
      overflow-y: auto;
      position: relative;
      text-align: center;

      & table {
         width: 100%;
         border-collapse: separate;
      }

      & td,
      & th {
         border: none;
         padding: 0.3em 0.2em;
      }

      & thead {
         position: sticky;
         top: 0;
         z-index: 1;

         & th {
            background-color: var(--bg);
            border-bottom: 2px solid currentColor;
            font-family: var(--geometric-humanist);
            font-weight: normal;
            font-size: 1.2em;
         }
      }

      & tbody {
         & tr:first-child td {
            padding-top: 0.6em;
         }

         & td:first-child {
            padding-left: 0;
            padding-right: 0;
         }

         & td:nth-child(2) {
            text-align: start;
            white-space: nowrap;
         }

         & td:last-child {
            text-align: end;
         }
      }

      & :where(td,th):where(:nth-child(2),:nth-child(4)) div:last-child {
         display: none;
      }

      @media (max-width: 640px) {
         & :where(td,th):nth-child(2) div:last-child {
            display: block;
         }

         & :where(td,th):nth-child(3) {
            display: none;
         }
      }

      @media (max-width: 480px) {
         & :where(td,th):nth-child(4) div:last-child {
            display: block;
         }

         & :where(td,th):nth-child(5) {
            display: none;
         }
      }
   }

   .index-map-ctn {
      margin-top: calc(var(--main-bottom-inset) - var(--main-top-inset));
   }

   .index-map-ctn > * {
      background-color: rgba(0, 0, 0, 0.2);
   }

   .index-map-ctn h2 {
      border: none;
      display: inline-block;
      margin: 0;
      font-size: 1.6em;
      padding: 0.8rem;
      padding-bottom: 0.5rem;
   }

   .index-map {
      align-items: center;
      aspect-ratio: 6 / 5;
      background-image: url("/assets/world-map-4.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      display: grid;
      font-size: 0.85em;
      gap: 1em;
      grid-template-columns: repeat(24, 1fr);
      grid-template-rows: repeat(24, 1fr);
      line-height: 1.25em;
      padding: 0.5em;
      width: 100%;

      & td {
         border: none;
         padding: 0 0.15em;
      }

      & h3 {
         margin: 0;
         margin-bottom: 0.2em;
         font-size: 1.2em;
         text-align: center;
      }

      & > div {
         background-color: rgba(255, 255, 255, 0.9);
         border: 2px solid rgba(0, 0, 0, 0.6);
         border-radius: 0.25rem;
         padding: 0.3rem;
         justify-self: center;
      }

      .am {
         grid-column: 1 / span 12;
         grid-row: 1 / span 6;
      }

      .africa {
         grid-column: 1 / span 12;
         grid-row: 19 / span 6;
      }

      .asia {
         grid-column: 13 / span 12;
         grid-row: 1 / span 6;
      }

      .eu {
         grid-column: 7 / span 12;
         grid-row: 7 / span 6;
      }

      .me {
         grid-column: 11 / span 12;
         grid-row: 13 / span 6;
      }

      .oce {
         grid-column: 13 / span 12;
         grid-row: 19 / span 6;
      }
   }

   @media (max-width: 600px) {
      .index-map {
         aspect-ratio: initial;
         display: flex;
         flex-flow: column nowrap;
         font-size: 1em;
         gap: 1em;
      }
   }

   .leaderboard {
      font-size: 1.1em;
      line-height: 1.2;
      margin-top: 2em;

      & tbody {
         display: grid;
         grid-template-columns: repeat(7, auto);
         grid-auto-rows: auto;
         grid-auto-flow: row;
      }

      & tr {
         align-items: center;
         border-bottom: 1px solid var(--fg);
         display: grid;
         padding: 0.2em 0 0.2em 0.5em;
         gap: 0.2em 0.5em;
         grid-column: 1 / -1;
         grid-template-columns: subgrid;
         grid-template-areas: "rank name char games mu sigma graph";
      }

      .rank { grid-area: rank; }
      .name { grid-area: name; }
      .char { grid-area: char; }
      .games { grid-area: games; }
      .sigma { grid-area: sigma; }
      .mu { grid-area: mu; }
      .graph { grid-area: graph; }

      .char { text-align: start; }
      .games { text-align: end; }
      .graph { align-self: end; }

      & td {
         border: none;
         padding: 0;
         text-align: center;
         white-space: nowrap;
      }

      .name {
         text-align: start;
         word-break: break-word;
         white-space: initial;
      }

      .rating-graph {
         margin-left: 0.5em;
         transform: translateY(0.5ex);

         & svg {
            margin-top: -60px;
         }
      }

      .rank::after { content: '.'; }

      .hide-char .char {
         display: none;
      }

      @media (width < 980px) {
         & tbody:where(:not(.hide-char)) .graph {
            display: none;
         }
      }

      @media (width < 680px) {
         & tbody:where(.hide-char) .graph {
            display: none;
         }
      }

      @media (width < 550px) {
         & tbody:where(:not(.hide-char)) {
            & tr {
               grid-template-areas:
                  "rank name name name name"
                  "char char games mu sigma";
            }

            .graph { display: none }
         }
      }

      @media (width < 440px) {
         & tbody:where(.hide-char) {
            grid-template-columns: repeat(3, auto) 1fr;

            & tr {
               grid-template-areas:
                  "rank name name name"
                  "games games mu sigma";
            }

            .games, .sigma { text-align: start }
            .mu { text-align: end }
         }
      }

      @media (width < 360px) {
         & tbody:where(:not(.hide-char)) {
            grid-template-columns: repeat(3, auto) 1fr;

            & tr {
               grid-template-areas:
                  "rank name name name"
                  "char char char char"
                  "games games mu sigma";
            }

            .games, .sigma { text-align: start }
            .mu { text-align: end }
         }
      }
   }

   .player-header {
      align-items: start;
      display: grid;
      grid-template-areas: "meta meta" "ratings hist" "tabs hist";
      grid-template-columns: 1fr max-content;
      padding-bottom: 0;
      padding-top: 0.75em;
      justify-content: start;
   }

   .player-meta {
      grid-area: meta;
      margin-top: 1.5em;
      margin-left: 1em;

      .name {
         font-size: 3em;
         line-height: 1;
         word-break: break-word;
      }

      .other {
         font-size: 0.85em;
         display: flex;
         flex-flow: row wrap;
         gap: 0 0.8em;
      }

      .banned {
         margin: 0 auto;
         max-width: 100%;
         padding-top: 0.75em;
         padding-bottom: 1.25em;
         padding-right: 1em;
         width: max-content;
      }

      .reason {
         margin-bottom: 0.2em;
         margin-top: 0.15em;
         text-align: center;
      }
   }

   .player-ratings {
      align-self: start;
      grid-area: ratings;
      width: 0;
      padding-left: 0.75em;
      min-width: 100%;
      line-height: 1.2;

      .card-surface {
         padding-left: 0;
         padding-right: 0;
         padding-bottom: 0;
      }

      :where(h2, .carousel) {
         padding-left: var(--h-pad);
         padding-right: var(--h-pad);
      }

      .carousel {
         display: flex;
         flex-flow: row nowrap;
         gap: 0 2em;
         margin-top: 0;
         padding-bottom: 0.3em;
         overflow-x: auto;
      }

      .label {
         border-bottom: 2px solid var(--fg);
         margin-bottom: 0.4em;
         padding-bottom: 0.1em;
         white-space: nowrap;
      }

      .rating-group {
         display: flex;
         flex-flow: column nowrap;
      }

      .ratings {
         align-self: center;
         display: flex;
         line-height: 1.1;
         text-align: center;
         flex-flow: row nowrap;

         .char {
            font-size: 1.5em;
            margin-bottom: 0.2rem;
            margin-top: 0.2rem;
         }

         .mu {
            font-size: 1.2em;
         }
      }

      .rating {
         width: 9em;
      }
   }

   .name-history {
      align-self: start;
      grid-area: hist;
      justify-self: start;
      line-height: 1.2em;
      margin-left: 1.5em;
      margin-top: 0;
      padding-bottom: 1em;
      height: 0;
      min-height: 100%;
      overflow-y: clip;
      width: max-content;
      z-index: 2;

      & .card {
         height: 100%;
      }

      & .card-surface {
         align-content: start;
         display: grid;
         grid-template-rows: max-content minmax(0, auto) max-content;
         height: 100%;
      }

      & .table {
         font-size: 0.9em;
         margin-bottom: 0.2em;
         margin-top: 0;
         overflow-y: hidden;

         &:has(+ .hidden) {
            margin-bottom: 0.5em;
         }
      }

      & td:last-child {
         text-align: end;
      }

      & tr:first-child {
         display: none;
      }

      & button {
         padding-top: 0.2em;
         justify-self: start;
      }
   }

   .name-history.collapsed {
      .collapse {
         display: none;
      }
   }

   .name-history:not(.collapsed) {
      & {
         overflow: visible;
      }

      .card {
         height: initial;
      }

      .expand {
         display: none;
      }

      .table {
         max-height: initial;
      }
   }

   .player-tabs {
      align-self: end;
      display: flex;
      flex-flow: row wrap;
      gap: 0 0.25em;
      grid-area: tabs;
      position: relative;
      margin-top: 1.5em;
      top: 2px;

      & a {
         border: 2px solid var(--fg);
         border-bottom: none;
         border-radius: 0.5em 0.5em 0 0;
         padding: 0.2em 0.8em;
         text-decoration: none;
      }

      & a.current {
         background-color: var(--bg-papyrus);
      }
   }

   @media (width < 680px) {
      .player-header {
         grid-template-areas: "meta" "hist" "ratings" "tabs";
         grid-template-columns: 100%;
      }

      .player-ratings {
         width: initial;
         margin-right: 0.5em;
         min-width: initial;
      }

      .name-history {
         --collapsed-height: 9.5em;
         height: initial;
         margin-bottom: -1em;
         margin-left: 0.75em;
         margin-right: 0.5em;
         margin-top: 1em;
         min-height: initial;
      }

      .name-history.collapsed {
         height: 0;
         min-height: var(--collapsed-height);
      }
   }

   .player-ratings.short {
      width: max-content;
      min-width: initial;
   }

   #session-plot:empty {
      height: 500px;
   }

   .game-list {
      line-height: 1.2;
      margin-top: 0.5em;
      overflow: clip;

      & td {
         border: none;
         margin: 0;
         padding: 0;
      }

      & tbody {
         text-align: center;
         display: grid;
         gap: 0.2em 0.4em;
         grid-template-columns: repeat(9, auto);
         grid-auto-flow: row;
      }

      & tr {
         display: grid;
         border-bottom: 1px solid currentColor;
         grid-template-areas: "ba left left left result right right right h2h";
         grid-template-columns: subgrid;
         grid-column: 1 / -1;
         padding: 0 0.4em 0.2em 0.2em;
         padding-top: 0;
      }

      .battle-at { grid-area: ba }
      .left { grid-area: left }
      .result { grid-area: result }
      .right { grid-area: right }
      .h2h { grid-area: h2h }

      .battle-at,
      .rating,
      .result {
         white-space: nowrap;
      }

      .left,
      .right {
         align-items: center;
         border-right: 1px solid currentColor;
         border-left: 1px solid currentColor;
         display: grid;
         grid-template-columns: subgrid;
      }

      .left {
         padding-left: 0.8em;
         padding-right: 0.6em;
      }

      .right {
         padding-left: 0.6em;
         padding-right: 0.8em;
      }

      /**
       * Player names can vary in length, from very short ⟨iii⟩ to very long ⟨えんま@漆黒に染まりし混沌の闇⟩.
       * But there _is_ a maximum of 15 chars, so it's possible to have a dense layout in most cases.
       *
       * We don't want the left player's name to wrap, because in most cases it's always the same.
       * Preserving all the text at the cost of doubling the height of the table is not worth it,
       * so we want to clip the left player's name instead of wrapping.
       *
       * Simply using auto columns with nowrap leads to all the space being given to the nowrap columns,
       * even if there isn't any left. The overflow instead happens to the table itself, which is ugly.
       *
       * Forcing balanced tracks with fr units puts the overflow back on the column, but this is inflexibile.
       * For players with short names, their profile would have excessive whitespace in the left column.
       *
       * The trick to get the desired clipping is min-width: 0. Then the columns have no intrinsic width,
       * giving both of them lowest priority on the total available space, preventing blowout,
       * and then equal priority on the remaining space, balancing the remaining space if necessary.
       *
       * Solution adapted from https://css-tricks.com/preventing-a-grid-blowout/
       */
      .player {
         min-width: 0;
         overflow: clip;
         text-overflow: ellipsis;
         white-space: nowrap;
         word-break: break-word;
      }

      .player:where(:hover) {
         white-space: normal;
      }

      .battle-at,
      .h2h,
      .result {
         align-self: center;
      }

      .battle-at {
         font-size: 0.9em;
      }

      .h2h {
         font-size: 0.8em;
      }

      /**
       * The point at which two maximum length non-degenerate English names, e.g. ⟨handsomedada123⟩, stop fitting without clipping.
       * Permits clipping of degenerate English and long CJK names, e.g. ⟨えんま@漆黒に染まりし混沌の闇⟩ and ⟨MMMMMMMMMMMMMMM⟩.
       */
      @media (width < 1100px) {
         & tbody {
            grid-template-columns: repeat(7, auto);
            row-gap: 0.2em;
         }

         & td {
            margin-bottom: 0.1em;
         }

         & tr {
            grid-template-areas: "ba ba ba . h2h h2h h2h" "left left left result right right right";
            padding-left: 0.2em;
            padding-right: 0.2em;
         }

         .left {
            border-left: none;
            padding-left: 0.2em;
         }

         .right {
            border-right: none;
            padding-right: 0.2em;
         }

         .battle-at, .h2h {
            margin: 0;
            font-size: 0.8em;
         }

         .battle-at { text-align: start; }
         .h2h { text-align: end; }
      }

      @media (width < 720px) {
         & tbody {
            grid-template-columns: 1fr 1fr auto auto 1fr 1fr;
            column-gap: 0.5em;
            row-gap: 0.1em;
         }

         & tr {
            grid-template-areas: "ba ba result result h2h h2h" "left left left right right right";
         }

         .left,
         .right {
            align-content: end;
            border: none;
            column-gap: 0.2em;
            display: flex;
            flex-flow: row wrap;
            padding-left: 0;
            padding-right: 0;
            margin-top: 0;
         }

         .left {
            justify-content: end;
            text-align: end;
         }

         .right {
            justify-content: start;
            text-align: start;
         }

         :where(.left, .right) .player {
            order: -2;
            flex-basis: 100%;
            max-width: 100%;
         }

         .char {
            white-space: nowrap;
         }

         :where(.left) .char::after,
         :where(.right) .char::before {
            content: " · ";
         }

         .result {
            border: none;
            margin: 0;
         }
      }

      @media (width < 355px) {
         :where(.left) .char::after,
         :where(.right) .char::before {
            display: none;
         }

         .player {
            white-space: normal;
         }

         .char {
            flex-basis: 100%;
            order: -1;
         }

         & tbody {
            grid-template-columns: 1fr auto auto 1fr;
         }

         & tr {
            grid-template-areas: "h2h h2h h2h h2h" ". result result ." "left left right right";
         }

         .battle-at {
            grid-area: h2h;
         }

         .h2h {
            text-align: end;
         }

         .battle-at {
            white-space: normal;
         }
      }

      @media (width < 190px) {
         & tr {
            grid-template-areas: "ba ba ba ba" "h2h h2h h2h h2h" ". result result ." "left left right right";
         }

         .battle-at {
            grid-area: ba;
         }
      }
   }
}

@layer helpers {
   .hidden {
      display: none;
   }

   .win {
      color: var(--win);
   }

   .lose {
      color: var(--lose);
   }

   .flex-row-wrap {
      display: flex;
      flex-flow: row wrap;
   }

   .col-gap-2 {
      column-gap: 0.5em;
   }

   .gap-2 {
      gap: 0.5em;
   }
}