/* One stylesheet for the whole site. Bedrock behind everything, one centered column,
   dark panels for readability. Built to be left alone. */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #1a1a1a url("/bedrock.png") repeat;
  background-size: 64px 64px;
  image-rendering: pixelated;
  color: #e8e8e8;
  font: 21px/1.65 Georgia, "Times New Roman", serif;
  text-align: center;
}

/* The crossed swords sit behind the header as a big faded emblem, anchored to the top of the
   page so they scroll away with it. Dimmed so the bright blade cannot punch through the
   panels, and softened a touch so the text in front stays the sharp thing. */
body {
  position: relative;
}

body.swords::before {
  content: "";
  position: absolute;
  top: -2vh;
  left: 0;
  width: 100%;
  height: 52vw;
  background: url("/swords.png") no-repeat center top;
  background-size: 100% auto;
  opacity: 0.3;
  filter: blur(1px) brightness(0.7);
  pointer-events: none;
  z-index: 0;
}

main {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}

/* Headings in the pixel font; everything else stays a readable serif. */
h1, h2 {
  font-family: "Press Start 2P", "Courier New", monospace;
  color: #ffffff;
  text-shadow: 3px 3px 0 #000;
  line-height: 1.5;
}

h1 {
  font-size: 2.05rem;
  margin: 24px 0 8px;
  color: #ffd83d; /* the classic splash-text gold */
}

h2 {
  font-size: 1.35rem;
  margin: 36px 0 12px;
}

/* The year rides the title line a step darker than the title gold, so the eye reads the
   name first, the year second, and the white Alpha line last. */
.alpha .year {
  color: #d9b526;
}

/* "Alpha v0.1" sits centered on its own line under the title: same pixel font, a bit
   smaller, plain white with the same crisp shadow as the headings. */
.alpha {
  display: block;
  margin: 8px 0 0;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 1.13rem;
  line-height: 1.5;
  color: #ffffff;
  text-shadow: 3px 3px 0 #000;
}

/* Every block of content sits on a dark panel so it reads over the bedrock. */
p, table, form, .panel {
  background: rgba(0, 0, 0, 0.86);
  border: 2px solid #000;
  border-radius: 0;
  padding: 16px 22px;
  margin: 14px auto;
  max-width: 780px;
}

/* A titled panel: the heading sits inside the box, at the top, snug against its content. */
.panel h2 {
  margin: 0 0 10px;
  line-height: 1.3;
}

/* Legal fine print at the foot of About: small and grey, present but not loud. */
.fineprint {
  display: block;
  font-size: 0.75em;
  color: #9a9a9a;
  line-height: 1.5;
}

/* About reads as background: smaller, a darker grey, sitting behind the live parts. */
#status-panel {
  padding-top: 12px;
  padding-bottom: 14px;
}

#status-panel h2 {
  font-size: 1.15rem;
}

/* The Game State panel is cobblestone: the tile repeats behind the text under a dark wash
   so the words still read, and stays pixel-crisp like the bedrock. */
#status-panel {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("/about.png") repeat;
  background-size: auto, 64px 64px;
  image-rendering: pixelated;
}

.about {
  font-size: 0.88em;
  color: #c4c4c4;
  line-height: 1.6;
}

/* The tribute line and a few side notes sit back a step, so About reads in beats. */
.about .tribute, .about .dim {
  color: #8c8c8c;
}

.about code {
  color: #d8c25a;
}

/* "How it works": short punchy rules, bold lead-in on each, tight spacing. */
.about h3 {
  margin: 14px 0 6px;
  font-size: 1em;
  color: #e8e8e8;
}

.about ul.rules {
  margin: 0 0 14px;
  padding-left: 0;
  list-style: none;
}

.about ul.rules li {
  margin: 4px 0;
}

.about ul.rules b, .about .dim b {
  color: #e8e8e8;
}

/* The one line that sells the films: Minecraft's red, so it stands out from the rules. */
.about ul.rules li.rec, .about ul.rules li.rec b {
  color: #ff5555;
}

.about ul.rules li.rec a {
  color: #ff5555;
  text-decoration: underline;
}

.about .closer {
  color: #3fa63f;
  font-weight: bold;
}

/* The gameplay clip between Game State and About: panel width, black border, pixel-crisp. */
.gameplay {
  display: block;
  width: 100%;
  max-width: 780px;
  height: auto;
  margin: 14px auto;
  border: 2px solid #000;
  image-rendering: pixelated;
}

/* A temporary event banner above Game State: gold bordered, pixel date, one line. */
.event-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 780px;
  margin: 14px auto;
  padding: 12px 22px;
  background: rgba(0, 0, 0, 0.86);
  border: 2px solid #ffd83d;
  color: #ffffff;
  text-decoration: none;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 0.85rem;
  text-shadow: 2px 2px 0 #000;
}

.event-banner:hover {
  color: #ffffff;
  background: rgba(20, 20, 0, 0.9);
}

.event-banner .event-date {
  color: #ffd83d;
}

.event-banner .event-title {
  color: #7dff7d;
}

@media (max-width: 600px) {
  .event-banner {
    font-size: 0.65rem;
    gap: 8px;
    padding: 10px 12px;
  }
}

/* The status lines are short and few: keep them close together, a size down. */
#tracker {
  line-height: 1.45;
  font-size: 0.9em;
}

#tracker b {
  display: inline-block;
  margin-bottom: 4px;
}

/* Content already inside a panel does not get a second box of its own. */
.panel p, .panel table {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.panel table {
  width: 100%;
}

a {
  color: #7dff7d; /* Minecraft green */
}

a:hover {
  color: #ffffff;
}

code {
  background: #000;
  color: #ffd83d;
  padding: 1px 6px;
  border-radius: 0;
  font-size: 0.9em;
}

nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 36px;
  margin: 10px 0 30px;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 1rem;
}

nav a {
  padding: 6px 4px;
  text-decoration: none;
}

/* The banner: the ribbon artwork (581x130) with the nav on its flat band and, on the
   homepage, the version line in the gap between the top curls. Everything is placed as a
   percentage of the artwork's height so it scales with the width, phones included. */
.banner {
  position: relative;
  width: 640px;
  max-width: 100%;
  aspect-ratio: 581 / 130;
  margin: 8px auto 10px;
  background: url("/banner.png?v=2") no-repeat center;
  background-size: 100% 100%;
  image-rendering: pixelated;
}

/* The band runs from about 42% to 96% of the height; its middle is 69%. */
.banner nav {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 72%;
  transform: translateY(-50%);
  margin: 0;
  gap: 6px 34px;
}

.banner nav a {
  color: #000;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.35);
  padding: 2px 4px;
}

.banner nav a:hover {
  color: #5a3410;
}

/* The version line in the gap between the curls, unchanged in look, just placed there. */
.banner .alpha {
  position: absolute;
  top: 24%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: 0;
  text-align: center;
}

@media (min-width: 601px) {
  /* Desktop order: address, title, then the ribbon, then the page. Other pages keep the
     ribbon first in markup, so the title is hoisted with flex ordering. */
  main {
    display: flex;
    flex-direction: column;
    padding-top: 6px;
  }

  main > .ip {
    order: -2;
    margin: 0 auto 5px;
  }

  /* Flex items with auto side margins shrink to their content, so every content block is
     told to take the full column (capped by its own max-width). The address pill and the
     ribbon keep their own widths. */
  main > p:not(.ip), main > section, main > details, main > div, main > form, main > table {
    width: 100%;
  }

  main > h1 {
    order: -1;
    margin: 6px 0 6px;
  }

  .banner + h1 {
    margin-top: 10px;
  }
}

@media (max-width: 600px) {
  .banner nav {
    gap: 4px 10px;
    font-size: 0.66rem;
  }

  .banner nav a {
    padding: 2px 3px;
  }

  .banner .alpha {
    font-size: 0.72rem;
  }


}

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

th, td {
  border: 1px solid #444;
  padding: 10px 16px;
}

/* Table shading is done with darker tints, never lighter ones: a light tint over a
   translucent panel lets the bedrock through and the table reads as a hole in the page. */
th {
  background: rgba(0, 0, 0, 0.45);
  color: #ffd83d;
}

td {
  background: rgba(0, 0, 0, 0.15);
}

tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.35);
}

input, button {
  font: inherit;
  padding: 8px 14px;
  border: 2px solid #000;
  border-radius: 0;
}

input {
  background: #101010;
  color: #fff;
  width: 60%;
  max-width: 320px;
}

button {
  background: #3fa63f;
  color: #fff;
  cursor: pointer;
}

button:hover {
  background: #4fc44f;
}

/* A Minecraft GUI button in creeper green: pixel font, hard bevel, a shade lighter on hover
   and pressed flat on click. */
.mc-button {
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 0.8rem;
  padding: 12px 22px;
  color: #ffffff;
  text-shadow: 2px 2px 0 #1e4d1e;
  background: #4fae3c;
  border: 2px solid #000;
  border-radius: 0;
  box-shadow: inset 3px 3px 0 #7ed46a, inset -3px -3px 0 #2f7a25, 0 4px 0 #000;
  image-rendering: pixelated;
  cursor: pointer;
  vertical-align: middle;
}

.mc-button:hover {
  background: #5cc447;
  box-shadow: inset 3px 3px 0 #92e07d, inset -3px -3px 0 #388b2c, 0 4px 0 #000;
}

.mc-button:active {
  transform: translateY(4px);
  box-shadow: inset 3px 3px 0 #2f7a25, inset -3px -3px 0 #7ed46a, 0 0 0 #000;
}

/* The search panel itself: narrower than the content panels, with rounded corners. */
form.search {
  max-width: 545px;
  border-radius: 8px;
}

/* "Total players connected ever", sitting under the search bar: same width, same pixel
   face, no gap between the two, and the number in the same green as the version. */
p.total-players {
  max-width: 545px;
  margin-top: 0;
  border-top: none;
  text-align: center;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 0.7rem;
  line-height: 1.6;
  color: #c8c8c8;
}

p.total-players b {
  color: #3fa63f;
  font-weight: normal;
}

form.search:has(+ p.total-players) {
  margin-bottom: 0;
}

/* The search box matches it: black slab, hard bevel, no rounded corners. */
form.search input {
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 0.75rem;
  padding: 14px 12px;
  border-radius: 0;
  box-shadow: inset 3px 3px 0 #000, inset -3px -3px 0 #3a3a3a;
  border: 2px solid #000;
  background: #101010;
  vertical-align: middle;
  margin-right: 8px;
}

form.search input::placeholder {
  color: #dcdcdc;
}

form.search input:focus {
  outline: none;
  border-color: #7ed46a;
}

/* The server address, one line at the very top of the page, above the title. It is the
   thing people came for, so it gets a little more size than fine print. */
.ip {
  display: inline-block;
  padding: 12px 20px 10px;
  margin: 0 auto;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 0.7rem;
  line-height: 1.6;
  color: #c8c8c8;
  text-shadow: 2px 2px 0 #000;
}

/* The address itself: gold, same pixel face as the label, grows a touch on hover, and a
   click copies it. */
.ip code {
  display: inline-block;
  font-family: inherit;
  font-size: 1em;
  background: transparent;
  padding: 0 4px;
  color: #ffaa00; /* Minecraft chat gold */
  cursor: pointer;
  transition: transform 0.12s ease;
}

.ip code:hover {
  transform: scale(1.07);
}

/* Only the version NUMBER is green, matching the border of the joinable game-state box
   (.live-join). The "MC v" label stays grey, so the number is what the eye lands on. */
.ip .vernum {
  color: #3fa63f;
}


/* The live tracker wears the game's state: a green border while joinable, dimmed
   while a match has the server to itself. */
#tracker b {
  color: #ffd83d;
}

/* The status panel keeps a solid near-black ground in every state, so it always stands
   out against the bedrock — only the accents change with the game. */
.live {
  background: rgba(0, 0, 0, 0.88);
}

.live-join {
  border-color: #3fa63f;
}

/* One thing moves on the site: the address itself, very slowly and very slightly growing and
   shrinking back, same colour throughout. Hovering it pauses that and lifts it a touch. */
.ip code {
  animation: breathe 3.2s ease-in-out infinite;
}

.ip code:hover {
  animation: none;
  transform: scale(1.07);
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
  .ip code {
    animation: none;
  }
}

.live-join b {
  color: #55ffff; /* Minecraft chat aqua */
}

.live-busy {
  border-color: #222;
  color: #a8a8a8;
}

.live-busy b {
  color: #c8c8c8;
}

/* Player page: identity on the left, the numbers stacked on the right. */
.player-header {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  text-align: left;
}

.player-identity {
  background: rgba(0, 0, 0, 0.86);
  border: 2px solid #000;
  border-radius: 0;
  padding: 18px 26px;
  text-align: center;
}

.player-identity .skin {
  image-rendering: auto;
  /* The name sits above the render now, so the gap belongs on top of it. */
  margin-top: 12px;
}

.player-name {
  font-family: "Press Start 2P", "Courier New", monospace;
  color: #ffd83d;
  font-size: 1.1rem;
  text-shadow: 2px 2px 0 #000;
}

.player-totals {
  background: rgba(0, 0, 0, 0.86);
  border: 2px solid #000;
  border-radius: 0;
  padding: 14px 22px;
  min-width: 300px;
  align-self: center;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-row b {
  color: #ffd83d;
}

.playing {
  color: #7dff7d;
  font-weight: bold;
}

/* Kit cards: each kit its own dark tile, name up top, plain black border all round. */
.kit-card {
  background: rgba(0, 0, 0, 0.86);
  border: 2px solid #000;
  padding: 14px 20px;
  margin: 14px auto;
  max-width: 720px;
  text-align: left;
}

/* The showcase video at the top of the kits page, about the width of the kit tiles below. */
.kits-video {
  max-width: 760px;
  margin: 14px auto 22px;
}

/* The one line of instructions above the kits gets room to breathe. */
#kits-intro {
  max-width: 750px;
  margin: 18px auto 20px;
  color: #a8a8a8;
  background: rgba(0, 0, 0, 0.6);
  border-color: #222;
}

.kit-name {
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: 1px;
  color: #ffd83d;
  text-shadow: 3px 3px 0 #000;
  margin-bottom: 6px;
}

.kit-desc {
  color: #d8d8d8;
}

/* FAQ: each question is a dropdown. Closed shows just the question in pixel gold with an
   arrow; open reveals the answer beneath it, left-aligned to read. */
details.faq {
  background: rgba(0, 0, 0, 0.86);
  border: 2px solid #000;
  border-radius: 0;
  padding: 14px 22px;
  margin: 12px auto;
  max-width: 780px;
  text-align: left;
}

details.faq summary {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}

details.faq summary::-webkit-details-marker {
  display: none;
}

details.faq summary::before {
  content: "\25B8";
  color: #7dff7d;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 0.8rem;
  flex: none;
  transition: transform 0.15s;
}

details.faq[open] summary::before {
  transform: rotate(90deg);
}

details.faq summary:hover .faq-q {
  color: #ffffff;
}

.faq-q {
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 0.8rem;
  color: #ffd83d;
  text-shadow: 2px 2px 0 #000;
  line-height: 1.6;
}

.faq-a {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* The command list: one per line, the command in gold code ahead of what it does. */
.commands {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}

.commands li {
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.commands li:last-child {
  border-bottom: none;
}

.commands code {
  margin-right: 10px;
}


[hidden] {
  display: none !important;
}

/* Wide content (the leaderboard) scrolls sideways inside its box rather than the page. */
.scroll-x {
  overflow-x: auto;
}

/* Long names and addresses wrap instead of pushing the layout out. */
.panel, details.faq, .kit-card {
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------- phones
   One column, everything stacked, type a size down, panels flush with a slim gutter. */
@media (max-width: 600px) {
  body {
    font-size: 17px;
    line-height: 1.55;
  }

  main {
    padding: 18px 10px 40px;
  }

  body.swords::before {
    top: 10vh;
    opacity: 0.28;
    /* A light, wide halo around the blades so they read on a small screen without being loud. */
    filter: blur(1px) brightness(0.7) drop-shadow(0 0 40px rgba(255, 255, 255, 0.45));
  }

  /* Phones: the title steps down a touch and the nav steps up, since thumbs are the input. */
  h1 {
    font-size: 1.3rem;
  }

  nav {
    gap: 10px 22px;
    font-size: 0.95rem;
  }

  nav a {
    padding: 8px 6px;
  }

  h1 {
    font-size: 1.45rem;
    margin: 16px 0 6px;
  }

  .alpha {
    font-size: 0.9rem;
    text-shadow: 2px 2px 0 #000;
  }

  h2 {
    font-size: 1rem;
  }

  nav {
    gap: 8px 16px;
    margin: 8px 0 22px;
    font-size: 0.8rem;
  }

  #posts {
    padding: 4px 16px;
  }

  .post h2 {
    font-size: 0.95rem;
  }

  p, table, form, .panel, details.faq {
    padding: 12px 14px;
    margin: 10px auto;
  }

  .kit-card {
    padding: 12px 14px;
    margin: 10px auto;
  }

  .kits-video {
    margin: 0 auto 16px;
  }

  .ip {
    font-size: 0.6rem;
    padding: 10px 12px 8px;
  }

  .faq-q {
    font-size: 0.7rem;
  }

  details.faq summary {
    gap: 10px;
  }

  /* Search: the box on top, the button under it, both full width. */
  form.search {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  input {
    width: 100%;
    max-width: none;
    margin-right: 0;
  }

  /* 16px is the size below which phones zoom into a focused field. */
  form.search input {
    font-size: 16px;
    padding: 12px 12px;
  }

  .mc-button {
    width: 100%;
  }

  /* Leaderboard: tighter cells so five columns fit a phone. */
  th, td {
    padding: 7px 8px;
    font-size: 0.9em;
  }

  /* Player page: identity, then totals, then kits, one under the other. */
  .player-header {
    flex-direction: column;
    gap: 12px;
  }

  .player-identity, .player-totals {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
  }

  .player-name {
    font-size: 0.85rem;
  }

  /* By kit: each row becomes a card, the kit name as its title, one stat per line. */
  .kit-table thead {
    display: none;
  }

  .kit-table, .kit-table tbody, .kit-table tr, .kit-table td {
    display: block;
    width: 100%;
  }

  .kit-table tr {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #444;
    border-radius: 0;
    padding: 8px 12px;
    margin-bottom: 10px;
  }

  .kit-table td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border: none;
    padding: 4px 0;
    background: transparent;
  }

  .kit-table td::before {
    content: attr(data-label);
    color: #c8c8c8;
  }

  .kit-table td:first-child {
    justify-content: center;
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: 0.75rem;
    color: #ffd83d;
    text-shadow: 2px 2px 0 #000;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .kit-table td:first-child::before {
    content: none;
  }
}

/* News: an old blog. Every post sits on one long page, title first, the date under it
   in small grey italics, then the body, and a thin rule before the next one. */
#posts {
  background: rgba(0, 0, 0, 0.86);
  border: 2px solid #000;
  padding: 10px 30px;
  margin: 16px auto;
  max-width: 780px;
  text-align: left;
}

.post {
  padding: 22px 0 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.post:last-child {
  border-bottom: none;
}

.post h2 {
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 1.2rem;
  color: #ffffff;
  text-shadow: 3px 3px 0 #000;
  margin: 0 0 8px;
  line-height: 1.5;
}

.post-date {
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 0.6rem;
  color: #9a9a9a;
  text-shadow: 2px 2px 0 #000;
  margin-bottom: 16px;
}

.post p {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 12px;
  max-width: none;
}

.post ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.post li {
  margin: 4px 0;
}

.post p:last-child, .post ul:last-child {
  margin-bottom: 0;
}

/* An embedded video in a post (and the kit showcase at the top of the kits page): full width
   of the column, 16:9, black bordered like a panel. */
.post .video,
.kits-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 4px 0 16px;
  border: 2px solid #000;
  background: #000;
}

.post .video iframe,
.kits-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Collapsed posts: the body is clipped to a few lines with a fade, every post the same
   height, and a Show more link opens it. */
.post-body {
  max-height: 7.5em;
  overflow: hidden;
  position: relative;
}

.post-body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3em;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.86));
}

.post.open .post-body {
  max-height: none;
}

.post.open .post-body::after {
  content: none;
}

.post-more {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.9em;
}

.post-sign {
  margin-top: 18px;
  color: #c8c8c8;
}

/* The podium: gold, silver, bronze; everyone else in plain white. */
.rank-1 td, .rank-1 a { color: #ffd83d; font-weight: bold; }
.rank-2 td, .rank-2 a { color: #cfcfcf; font-weight: bold; }
.rank-3 td, .rank-3 a { color: #cd8a4f; font-weight: bold; }

/* Legal pages: one long panel, headings inside it, plain lists. */
.legal h2 {
  margin: 22px 0 8px;
  font-size: 1em;
}
.legal h2:first-of-type {
  margin-top: 6px;
}
.legal ul {
  margin: 0 0 10px;
  padding-left: 20px;
}
.legal li {
  margin: 6px 0;
  line-height: 1.5;
}

/* Footer on every page: small, grey, out of the way. */
.site-footer {
  max-width: 780px;
  margin: 26px auto 18px;
  padding: 10px 22px;
  background: rgba(0, 0, 0, 0.86);
  border: 2px solid #000;
  text-align: center;
  font-size: 0.75em;
  color: #9a9a9a;
  line-height: 1.8;
}
.site-footer a {
  margin: 0 10px;
}
.site-footer span {
  display: block;
}

/* profile page: kits and movies. Two buttons switch between them on a phone; a wide
   screen has room for both, side by side. */
.profile-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 18px auto 0;
  max-width: 780px;
}
.profile-tab {
  flex: 1 1 0;
  max-width: 240px;
  padding: 12px 8px;
  font-size: 0.72rem;
  background: #2a2a2a;
  color: #bbb;
  border: 2px solid #000;
}
.profile-tab:hover { background: #3a3a3a; }
.profile-tab.is-on,
.profile-tab.is-on:hover {
  background: #3fa63f;
  color: #fff;
}
.profile-panes.both .profile-pane { display: none; }
.profile-panes.both .profile-pane.is-on { display: block; }
/* the button already names the section */
.profile-panes.both .profile-pane > h2 { display: none; }

.film-list {
  list-style: none;
  background: rgba(0, 0, 0, 0.86);
  border: 2px solid #000;
  padding: 6px 22px;
  margin: 14px auto;
  max-width: 720px;
  text-align: left;
}
.film-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.film-list li:last-child { border-bottom: 0; }
.film-list a { overflow-wrap: anywhere; }
.film-list .muted { opacity: 0.6; font-size: 0.85em; white-space: nowrap; }
.film-none { max-width: 720px; text-align: center; }
.profile-panes.both .film-none { max-width: none; }

@media (min-width: 1100px) {
  .profile-tabs { display: none; }
  /* wider than the page column: the kit table and the movie list each get a real width */
  .profile-panes.both {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    width: min(1240px, 94vw);
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .profile-panes.both .profile-pane,
  .profile-panes.both .profile-pane.is-on { display: block; }
  .profile-panes.both .profile-pane > h2 { display: block; }
  .profile-panes.both .kit-table,
  .profile-panes.both .film-list { max-width: none; width: 100%; }
}

@media (max-width: 600px) {
  .film-list { padding: 4px 14px; }
  .profile-tab { font-size: 0.66rem; padding: 13px 6px; }
}

/* ---------------------------------------------------------------- where to watch
   The three platform marks (site.js): in the footer, in the Watch menu, and as the filter
   over a player's movies. One icon style everywhere, drawn in the text colour. */
.social-icon {
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
  vertical-align: -0.25em;
}
.site-footer .social-row {
  display: inline-flex;
  gap: 4px;
  margin: 0 6px;
  vertical-align: middle;
}
.site-footer .social-row a {
  margin: 0 6px;
  font-size: 1.35em;
  line-height: 1;
}

/* Watch in the nav: a button that looks like the links beside it and opens a small panel. */
.watch {
  position: relative;
  display: inline-block;
}
.watch-toggle {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
  text-shadow: inherit;
}
.banner nav .watch-toggle { color: #000; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.35); }
.banner nav .watch-toggle:hover { color: #5a3410; }
.watch-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  min-width: 190px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.94);
  border: 2px solid #000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  text-shadow: none;
}
.watch.is-open .watch-menu { display: block; }
.watch-menu a,
.banner nav .watch-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: #e8e8e8;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
}
.watch-menu a:hover,
.banner nav .watch-menu a:hover { background: #2a2a2a; color: #fff; }

/* A player's movies: pick the platform. */
.film-filter {
  display: flex;
  gap: 8px;
  margin: 4px 0 12px;
}
.film-platform {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 6px;
  font: inherit;
  font-size: 0.85em;
  color: #bbb;
  background: #2a2a2a;
  border: 2px solid #000;
  cursor: pointer;
}
.film-platform:hover { background: #3a3a3a; }
.film-platform.is-on { background: #3fa63f; color: #fff; }
@media (max-width: 600px) {
  .film-platform span { display: none; } /* logos only on a phone */
  .film-platform { padding: 11px 6px; font-size: 1.05em; }
  .watch-menu { min-width: 170px; }
}