html, body {
   padding: 0;
   margin:  0;
}
html {
   background: #000;
   color:      #E8E0D8;
   font-family: "Segoe UI", Calibri, Arial, sans-serif;
}

body {
   display: grid;
   grid-template:
      "player info" minmax(0,1fr)
      /
      minmax(0,1fr) auto
   ;
   width:  100svw;
   height: 100vh; /* fallback */
   height: 100svh;
}

wm-player {
   grid-area: player;
}
section {
   grid-area: info;
   max-width:   25ch;
   padding: 1em;
}

*:first-child { margin-top: 0; }
*:last-child { margin-bottom: 0; }

li { margin: 1em 0; }

form>div {
   display: flex;
   flex-flow: row nowrap;
   gap: 1em;
   
   select {
      flex: 1 1 auto;
      align-self: end;
   }
}

/* mobile */
@media only screen and (min-resolution: 2dppx) and (pointer: coarse),
       only screen and (min-resolution: 2dppx) and (pointer: none) {
   /* portrait */
   @media (max-aspect-ratio: 3/5) {
      body {
         grid-template:
            "player"
            "info"
         ;
      }
      section {
         max-width: none;
      }
   }
}