/* Linda³ Crimson Manual: site theme.
   Source of truth: D:/code/stylelib/styles/linda3-crimson-manual (spec.md, media/web.md).
   Palette is locked. Radius 0 everywhere. No blur shadows, glass, gradients or glow.
   No invented decorative SVGs: the handprint is a real scanned raster or nothing. */

:root {
  --crimson-field: #D42A2C;
  --crimson-deep: #A81C22;
  --rust-page: #C43A2C;
  --ink-bar: #1C1412;
  --paper-cream: #F0E4D0;
  --paper-warm: #E6D4B8;
  --type-white: #F7F1E8;
  --linda-cyan: #3DB8C0;
  --hunter-orange: #C86A38;
  --ochre: #C4A060;
  --forest-inset: #3D6B3C;

  /* Noto Sans JP sits ahead of Yu Gothic so Windows gets real 900-weight titles. */
  --gothic: 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;
  --narrow: 'Arial Narrow', Arial, sans-serif;
  --mono: 'MS Gothic', 'Osaka-Mono', monospace;
  /* 0.45px CMYK misregistration on large type */
  --misregister: 0.45px 0 0 rgba(61, 184, 192, 0.35), -0.45px 0 0 rgba(168, 28, 34, 0.28);
  --frame: 800px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--crimson-deep);
  color: var(--type-white);
  font-family: var(--gothic);
  font-size: 13px;
  line-height: 1.55;
}

/* Offset-print grain over the whole page */
body::after {
  content: '';
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img {
  max-width: 100%;
}

p {
  margin: 0 0 10px;
}

a {
  color: var(--type-white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:visited {
  color: var(--paper-warm);
}

a:hover {
  background: var(--paper-cream);
  color: var(--ink-bar);
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--linda-cyan);
  outline-offset: 1px;
}

.latin,
.lockup {
  font-family: var(--narrow);
  font-stretch: condensed;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.latin sup,
.lockup sup {
  font-size: 0.62em;
  line-height: 0;
}

/* ---------- Frame: fixed 800px column, ink spine on the left ---------- */

.frame {
  position: relative;
  z-index: 1;
  display: flex;
  width: var(--frame);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--crimson-field);
  border-left: 1px solid var(--paper-cream);
  border-right: 1px solid var(--paper-cream);
}

/* Gutter murals either side of the column: greyscale plates multiplied into the red,
   like the monotone panels on the 25th-anniversary posters. */
.mural {
  position: fixed;
  top: 0;
  bottom: 0;
  width: calc((100vw - var(--frame)) / 2);
  overflow: hidden;
  background: var(--crimson-field);
}

.mural-left {
  left: 0;
}

.mural-right {
  right: 0;
}

/* Anchored to the top: when a wide gutter crops the plate, it loses feet, not heads. */
.mural img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  mix-blend-mode: multiply;
  opacity: 0.75;
}

/* The spine quote runs top to bottom, letters turned on their side like a book spine. One line, never wrapped. */
.spine {
  flex: 0 0 48px;
  padding: 16px 10px;
  background: var(--ink-bar);
  color: var(--type-white);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.35em;
  word-spacing: 0.6em;
  white-space: nowrap;
  overflow: hidden;
}

.sheet {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Masthead ---------- */

.banner {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--paper-cream);
}

.banner-text {
  flex: 1;
  min-width: 0;
}

.lockup {
  margin: 0 0 6px;
  font-size: 15px;
  font-style: italic;
}

.mast {
  margin: 0;
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: var(--misregister);
}

.mast a,
.mast a:visited,
.mast a:hover {
  color: var(--type-white);
  background: none;
  text-decoration: none;
}

/* Cover masthead: the canonical split. Cream well a third wide holding a painting, type on red. */
.cover {
  align-items: stretch;
  gap: 0;
  min-height: 250px;
  padding: 0;
}

.cover-well {
  flex: 0 0 34%;
  margin: 0;
  overflow: hidden;
  background: var(--paper-cream);
  border-right: 1px solid var(--paper-cream);
}

.cover-well img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  filter: saturate(0.92) contrast(1.05);
}

.cover-type {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
}

/* The real box-front handprint (70–85% opacity). Never draw one. */
.cover-stamp {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 200px;
  height: auto;
  opacity: 0.9;
}

/* Hum's target emblem: flat concentric rings, the one seal CSS may draw. */
.bullseye {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 5px solid var(--ink-bar);
  border-radius: 50%;
  background: var(--paper-cream);
  animation: stamp 280ms ease-out both;
}

.bullseye span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 5px solid var(--crimson-field);
  border-radius: 50%;
}

.bullseye span::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-bar);
}

/* ---------- Nav column | content plate ---------- */

.cols {
  flex: 1;
  display: flex;
}

.nav {
  flex: 0 0 184px;
  padding-bottom: 16px;
  background: var(--crimson-deep);
  border-right: 1px solid var(--paper-cream);
}

.nav h2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  padding: 5px 12px;
  background: var(--ink-bar);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2em;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 6px 0 10px;
}

.nav a,
.nav a:visited {
  position: relative;
  display: block;
  padding: 3px 12px 3px 22px;
  color: var(--type-white);
  font-weight: 700;
  text-decoration: none;
}

.nav a:hover {
  background: var(--paper-cream);
  color: var(--ink-bar);
}

.nav a::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0.8em;
  width: 5px;
  height: 5px;
  background: var(--paper-cream);
}

.nav a:hover::before {
  background: var(--ink-bar);
}

/* Current page: flip to a cream nameplate. Add a line here when you add a section. */
body[data-section="home"] .nav a[data-section="home"],
body[data-section="about"] .nav a[data-section="about"],
body[data-section="game"] .nav a[data-section="game"],
body[data-section="characters"] .nav a[data-section="characters"],
body[data-section="scenarios"] .nav a[data-section="scenarios"],
body[data-section="dex"] .nav a[data-section="dex"],
body[data-section="items"] .nav a[data-section="items"],
body[data-section="merchants"] .nav a[data-section="merchants"],
body[data-section="ripper"] .nav a[data-section="ripper"],
body[data-section="auction"] .nav a[data-section="auction"],
body[data-section="hunters"] .nav a[data-section="hunters"],
body[data-section="walkthrough"] .nav a[data-section="walkthrough"],
body[data-section="dogs"] .nav a[data-section="dogs"],
body[data-section="cryopods"] .nav a[data-section="cryopods"],
body[data-section="lottery"] .nav a[data-section="lottery"],
body[data-section="voicemail"] .nav a[data-section="voicemail"],
body[data-section="beastman-altars"] .nav a[data-section="beastman-altars"],
body[data-section="annabis"] .nav a[data-section="annabis"],
body[data-section="links"] .nav a[data-section="links"],
body[data-section="guestbook"] .nav a[data-section="guestbook"] {
  background: var(--paper-cream);
  color: var(--ink-bar);
}

.counter {
  margin: 12px 12px 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-align: center;
}

.counter-digits {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin: 4px 0;
}

.counter-digits span {
  width: 16px;
  border: 1px solid var(--paper-cream);
  background: var(--ink-bar);
  font-family: var(--narrow);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.plate {
  flex: 1;
  min-width: 0;
  padding: 16px 20px 24px;
  animation: wipe-down 360ms ease-out both;
}

/* ---------- Page heading ---------- */

.plate-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--paper-cream);
}

.title {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-shadow: var(--misregister);
}

.title-sub {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.42em;
  color: var(--paper-warm);
}

.plate-head .latin {
  margin: 0;
  font-size: 15px;
  white-space: nowrap;
}

/* Serebii-style section header bars */
.bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 24px 0 10px;
  padding: 5px 10px;
  background: var(--ink-bar);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

/* ---------- Canonical split: cream illustration well + type on red ---------- */

.split {
  display: flex;
  margin: 0 0 16px;
  border: 1px solid var(--paper-cream);
}

.well {
  flex: 0 0 34%;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  margin: 0;
  overflow: hidden;
  background: var(--paper-cream);
  color: var(--ink-bar);
}

/* Crop, never letterbox. Nudge scans toward CMYK plates. */
.well > img {
  flex: 1;
  display: block;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.05);
}

.no-plate {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 16px;
  color: var(--crimson-deep);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.3em;
  text-align: center;
}

/* Dex well: battle sprites on the cream, ♂ over ♀. The renderer sets a whole-number zoom; nothing crops
   or smooths them. Wider well (spec allows 38%) so the common 104px sprites still get 2×. */
.well.specimens {
  flex-basis: 38%;
}

.specimen {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 0 12px;
}

.specimen + .specimen {
  border-top: 1px solid var(--paper-warm);
}

.specimen img {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  filter: saturate(0.92) contrast(1.05);
}

.specimen .sex {
  position: absolute;
  top: 4px;
  left: 8px;
  font-size: 15px;
  font-weight: 900;
}

/* Sex marks: owner's call, outside the locked palette. Dark enough to read on cream. */
.specimen .sex.male {
  color: #2A5DB0;
}

.specimen .sex.female {
  color: #D0507A;
}

.nameplate {
  margin: 0;
  padding: 8px 12px;
  background: var(--paper-warm);
  color: var(--ink-bar);
  border-top: 1px solid var(--ink-bar);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.1em;
  animation: stamp 280ms ease-out both;
}

.field {
  flex: 1;
  min-width: 0;
  padding: 14px 16px 4px;
}

/* ---------- Updates log ---------- */

.updates {
  list-style: none;
  margin: 0;
  padding: 0;
}

.updates li {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--paper-cream);
}

.updates time {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 1px 6px;
  background: var(--ink-bar);
  font-family: var(--narrow);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.updates p {
  margin: 0;
}

/* ---------- Data tables ---------- */

table.data {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
}

table.data th,
table.data td {
  padding: 5px 8px;
  border: 1px solid var(--paper-cream);
  text-align: left;
  vertical-align: top;
}

table.data thead th {
  background: var(--ink-bar);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

table.data tbody tr:nth-child(even) {
  background: var(--rust-page);
}

table.data tbody tr:hover {
  background: var(--crimson-deep);
}

table.data td.num {
  width: 1%;
  font-family: var(--narrow);
  font-weight: 700;
  white-space: nowrap;
}

table.dense {
  font-size: 12px;
}

table.dense th,
table.dense td {
  padding: 3px 6px;
}

table.dense thead th {
  white-space: nowrap;
}

table.data td.mark {
  width: 1%;
  text-align: center;
}

/* Field sprites: the overworld sprite beside an animal's name, at 1× and unsmoothed, in a cell of its own so the
   names still line up. The row centres on the sprite. */
table.data td.sprite {
  width: 1%;
  padding: 2px 4px;
  border-right: 0;
}

table.data td.sprite + td {
  border-left: 0;
}

table.data tr:has(td.sprite) > td {
  vertical-align: middle;
}

.field-sprite {
  display: block;
  max-width: none;
  margin: 0 auto;
  image-rendering: pixelated;
  filter: saturate(0.92) contrast(1.05);
}

/* Secret species: name on a deep plate so they read as a separate class */
table.data tr.secret td:nth-child(3) {
  background: var(--ink-bar);
}

/* Resistances: weak spots in hunter orange, hard resists on ink */
table.data td.resist-weak {
  background: var(--hunter-orange);
  color: var(--ink-bar);
}

table.data td.resist-strong {
  background: var(--ink-bar);
}

.sub-bar {
  margin: 14px 0 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--paper-cream);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

table.data tr.quirk td {
  color: var(--paper-warm);
}

table.exp {
  width: auto;
}

details {
  margin: 0 0 16px;
}

summary {
  margin: 0 0 8px;
  font-weight: 700;
  cursor: pointer;
}

.plate ul,
.plate ol {
  margin: 0 0 10px;
  padding-left: 20px;
}

.plate li {
  margin: 0 0 4px;
}

.source-note {
  font-size: 11px;
  color: var(--paper-warm);
}

table.kv th {
  width: 32%;
  background: var(--crimson-deep);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px 0;
  border-top: 1px solid var(--paper-cream);
  border-bottom: 1px solid var(--paper-cream);
  font-weight: 700;
}

/* ---------- Sortable tables (js/sortable.js) ---------- */

/* Headings become buttons that look like the heading; the sorted column flips to a cream nameplate. */
table.data th button.sort {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

table.data th button.sort:hover {
  text-decoration: underline;
}

table.data thead th[aria-sort] {
  background: var(--paper-cream);
  color: var(--ink-bar);
}

table.data th[aria-sort="ascending"] button.sort::after {
  content: " ▲";
}

table.data th[aria-sort="descending"] button.sort::after {
  content: " ▼";
}

/* ---------- Items ---------- */

/* Tabs between the item lists: the current one flips to a cream nameplate, like the nav. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 16px;
  border: 1px solid var(--paper-cream);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.tabs a,
.tabs a:visited {
  flex: 1 1 auto;
  padding: 5px 10px;
  color: var(--type-white);
  text-align: center;
  text-decoration: none;
}

.tabs a + a {
  border-left: 1px solid var(--paper-cream);
}

.tabs a[aria-current="page"],
.tabs a:hover,
.tabs label:hover {
  background: var(--paper-cream);
  color: var(--ink-bar);
}

.tabs label {
  flex: 1 1 auto;
  padding: 5px 10px;
  color: var(--type-white);
  text-align: center;
  cursor: pointer;
}

.tabs label + label {
  border-left: 1px solid var(--paper-cream);
}

/* In-page scenario switch: radios off-screen, labels look like the item tabs. */
.scen-switch {
  position: relative;
}

.scen-switch > input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

#cryo-a:checked ~ .tabs label[for="cryo-a"],
#cryo-b:checked ~ .tabs label[for="cryo-b"],
#cryo-c:checked ~ .tabs label[for="cryo-c"] {
  background: var(--paper-cream);
  color: var(--ink-bar);
}

#cryo-a:focus-visible ~ .tabs label[for="cryo-a"],
#cryo-b:focus-visible ~ .tabs label[for="cryo-b"],
#cryo-c:focus-visible ~ .tabs label[for="cryo-c"] {
  outline: 2px solid var(--linda-cyan);
  outline-offset: 1px;
}

#cryo-a:checked ~ table tr[data-scen]:not([data-scen*="A"]),
#cryo-b:checked ~ table tr[data-scen]:not([data-scen*="B"]),
#cryo-c:checked ~ table tr[data-scen]:not([data-scen*="C"]) {
  display: none;
}

/* The game's 16×16 bag icons, at 1× and unsmoothed */
.item-icon {
  display: block;
  max-width: none;
  margin: 0 auto;
  image-rendering: pixelated;
}

/* Bag item names stay on one line; the effect beside them wraps */
table.data td.name {
  white-space: nowrap;
}

/* Bag item classes: icon, name and count, flowing in columns */
.jump {
  columns: 3;
  column-gap: 16px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0 !important;
}

.jump li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
  break-inside: avoid;
}

.jump a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.jump .item-icon {
  margin: 0;
}

.jump .count {
  font-family: var(--narrow);
  font-weight: 700;
  color: var(--paper-warm);
}

/* An animal's gear set beside the plate: the item on this page is on ink */
table.set th {
  width: 1%;
  background: var(--crimson-deep);
  font-size: 12px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

table.data.set tr.current td,
table.data.set tr.current th {
  background: var(--ink-bar);
  font-weight: 900;
}

/* ---------- Character roster ---------- */

.roster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.roster .card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--paper-cream);
}

.roster .well {
  flex: 0 0 auto;
  min-height: 140px;
}

.roster .card p {
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
}

/* ---------- Construction + verify stamps ---------- */

.wip,
.verify {
  display: inline-block;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  white-space: nowrap;
  vertical-align: 1px;
}

.wip {
  background: var(--hunter-orange);
  color: var(--ink-bar);
}

.verify {
  background: var(--paper-cream);
  color: var(--crimson-deep);
}

/* ---------- Links page: 88x31 buttons, webring, code snippets ---------- */

.button-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 31px;
  background: var(--paper-cream);
  color: var(--ink-bar);
  font-family: var(--narrow);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
}

.snippet {
  margin: 0 0 16px;
  padding: 8px 10px;
  overflow-x: auto;
  background: var(--ink-bar);
  border: 1px solid var(--paper-cream);
  font-family: var(--mono);
  font-size: 12px;
  white-space: pre;
}

.webring {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px 10px;
  background: var(--crimson-deep);
  border: 1px solid var(--paper-cream);
  font-weight: 700;
}

.embed-slot {
  display: grid;
  place-items: center;
  min-height: 200px;
  margin: 0 0 16px;
  border: 1px solid var(--paper-cream);
  background: var(--crimson-deep);
  font-weight: 700;
  letter-spacing: 0.2em;
}

/* ---------- Footer ---------- */

.colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 10px 20px;
  background: var(--crimson-deep);
  border-top: 1px solid var(--paper-cream);
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* ---------- Motion: stamp and wipe only, no bounce ---------- */

@keyframes stamp {
  from { transform: scale(0.92); }
  to { transform: scale(1); }
}

@keyframes wipe-down {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .plate,
  .bullseye,
  .nameplate {
    animation: none;
  }
}

/* Gutters too thin for the murals to read */
@media (max-width: 1060px) {
  .mural {
    display: none;
  }
}

/* ---------- Narrow screens: drop the spine, stack the nav ---------- */

@media (max-width: 820px) {
  .frame {
    width: auto;
    border: 0;
  }

  .spine {
    display: none;
  }

  .banner {
    padding: 16px;
  }

  .cover {
    flex-direction: column;
    padding: 0;
  }

  .cover-well {
    flex-basis: 220px;
    border-right: 0;
    border-bottom: 1px solid var(--paper-cream);
  }

  .cover-type {
    padding-top: 100px;
  }

  .cover-stamp {
    width: 120px;
  }

  .mast {
    font-size: 40px;
  }

  .cols,
  .split {
    flex-direction: column;
  }

  .nav {
    flex-basis: auto;
    border-right: 0;
    border-bottom: 1px solid var(--paper-cream);
  }

  .nav ul {
    display: flex;
    flex-wrap: wrap;
    padding: 4px 4px 8px;
  }

  .nav a,
  .nav a:visited {
    padding: 3px 8px;
  }

  .nav a::before {
    display: none;
  }

  .plate {
    padding: 16px;
  }

  .well {
    flex-basis: auto;
  }

  .roster {
    grid-template-columns: 1fr 1fr;
  }

  .jump {
    columns: 2;
  }

  table.data {
    display: block;
    overflow-x: auto;
  }
}