* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:#111512;
  color:#f2f2e9;
  font-family:'IBM Plex Sans Thai',sans-serif;
  -webkit-font-smoothing:antialiased
}

button,input,select {
  font:inherit
}

button {
  cursor:pointer
}

::selection {
  background:#cafa68;
  color:#17200e
}

.page-shell {
  max-width:1600px;
  margin:auto;
  padding:0 56px
}

.site-header {
  height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #333a33
}

.brand {
  text-decoration:none;
  color:inherit;
  display:flex;
  align-items:center;
  gap:13px
}

.brand-mark {
  width:42px;
  height:42px;
  border:2px solid #cafa68;
  border-radius:11px;
  display:grid;
  place-items:center;
  position:relative;
  transform:rotate(-9deg);
  color:#cafa68;
  font:700 28px/1 'Space Grotesk',sans-serif;
  letter-spacing:-.1em;
  padding-right:5px
}

.brand-mark span {
  transform:rotate(9deg)
}

.brand-mark i {
  position:absolute;
  background:#cafa68;
  width:6px;
  height:6px;
  border-radius:50%;
  right:-5px;
  top:-5px
}

.brand-name {
  font:700 17px/1 'Space Grotesk',sans-serif;
  letter-spacing:-.045em
}

.brand-name>span {
  color:#cafa68
}

.brand-name small {
  display:block;
  margin-top:6px;
  font:500 9px/1 'DM Mono',monospace;
  letter-spacing:.19em;
  color:#89938b
}

.header-meta,.section-kicker,.eyebrow,.hero-footnote,.stat-sub,.table-meta,.table-footer,.data-note,.site-footer,.directory-aside,.search-hint,.art-number,.art-caption {
  font-family:'DM Mono','IBM Plex Sans Thai',monospace
}

.header-meta {
  font-size:10px;
  letter-spacing:.12em;
  color:#a7b0a7;
  display:flex;
  align-items:center;
  gap:12px
}

.live-dot,.online-indicator,.result-dot {
  width:7px;
  height:7px;
  background:#cafa68;
  border-radius:50%;
  display:inline-block;
  box-shadow:0 0 12px #cafa6877;
  flex:none
}

.header-separator {
  color:#5a635a
}

.hero {
  min-height:406px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  border-bottom:1px solid #333a33;
  overflow:hidden
}

.hero-copy {
  padding:64px 20px 52px 0;
  position:relative;
  z-index:1
}

.eyebrow,.section-kicker {
  color:#a6b4a1;
  font-size:11px;
  letter-spacing:.14em;
  font-weight:500
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:12px
}

.eyebrow-line {
  width:27px;
  height:1px;
  background:#cafa68
}

.eyebrow-index {
  color:#6b776b
}

.hero h1 {
  font:700 clamp(55px,6vw,91px)/.99 'Space Grotesk',sans-serif;
  letter-spacing:-.075em;
  margin:24px 0 21px
}

.hero h1 em {
  font-style:normal;
  color:#cafa68
}

.hero-copy>p {
  font-size:15px;
  color:#b5beb3;
  margin:0;
  line-height:1.8
}

.hero-footnote {
  font-size:10px;
  color:#8f9b90;
  margin-top:36px;
  letter-spacing:.02em
}

.hero-footnote-icon {
  color:#cafa68;
  font-size:18px;
  vertical-align:-1px;
  margin-right:6px
}

.footnote-divider {
  padding:0 8px;
  color:#596359
}

.hero-art {
  position:relative;
  overflow:hidden;
  min-height:406px;
  background:radial-gradient(ellipse at 50% 55%,#293b24 0%,#1a251b 42%,#141c15 70%,#111512 100%);
  border-left:1px solid #303c2f
}

.hero-art:before {
  content:'';
  position:absolute;
  inset:0;
  background-image:linear-gradient(#bbdaaa0e 1px,transparent 1px),linear-gradient(90deg,#bbdaaa0e 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(90deg,transparent,#000 25%)
}

.orbit {
  position:absolute;
  border:1px solid #b9f17729;
  border-radius:50%;
  left:50%;
  top:51%;
  transform:translate(-50%,-50%);
  aspect-ratio:1
}

.orbit-one {
  width:285px
}

.orbit-two {
  width:400px
}

.orbit-three {
  width:560px
}

.orbit-two:after {
  content:'';
  position:absolute;
  top:55px;
  right:41px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#cafa68;
  box-shadow:0 0 20px #cafa68
}

.art-monogram {
  position:absolute;
  top:48%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-9deg);
  font:700 160px/.9 'Space Grotesk',sans-serif;
  letter-spacing:-.18em;
  padding-right:30px;
  color:#cafa68;
  text-shadow:0 15px 55px #cafa6838
}

.art-monogram span {
  color:#f2f2e9
}

.art-cross {
  position:absolute;
  color:#b4f274;
  font:400 25px 'DM Mono',monospace
}

.art-cross-one {
  top:88px;
  left:65px
}

.art-cross-two {
  right:50px;
  bottom:92px
}

.art-number,.art-caption {
  position:absolute;
  color:#9cae96;
  letter-spacing:.11em;
  font-size:10px
}

.art-number {
  top:30px;
  right:28px
}

.art-caption {
  bottom:28px;
  left:29px;
  line-height:1.7
}

.overview {
  padding:32px 0 67px
}

.section-kicker span {
  color:#cafa68
}

.stats-grid {
  margin-top:21px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px
}

.stat-card {
  min-height:156px;
  border:1px solid #343d33;
  background:#1b211b;
  padding:20px 22px 18px;
  display:flex;
  flex-direction:column;
  transition:border-color .2s,background .2s
}

.stat-card:hover {
  border-color:#6e8a59;
  background:#20291e
}

.stat-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:13px;
  color:#bfc8bb
}

.stat-icon {
  color:#a5c280;
  font:17px 'DM Mono',monospace
}

.stat-card strong {
  font:600 clamp(29px,3vw,43px)/1 'Space Grotesk',sans-serif;
  letter-spacing:-.055em;
  margin:21px 0 11px;
  font-variant-numeric:tabular-nums
}

.stat-card:nth-child(2) strong {
  color:#cafa68
}

.stat-sub {
  font-size:9px;
  letter-spacing:.1em;
  color:#839182;
  margin-top:auto
}

.stat-sub span {
  color:#cafa68;
  margin-left:6px
}

.directory {
  padding-bottom:70px
}

.directory-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:24px
}

.directory h2 {
  font-size:34px;
  letter-spacing:-.055em;
  line-height:1.2;
  margin:12px 0 0
}

.heading-period {
  color:#cafa68
}

.directory-aside {
  text-align:right;
  font-size:11px;
  line-height:1.8;
  color:#acb9a8
}

.directory-aside span {
  color:#cafa68;
  letter-spacing:.11em;
  font-size:10px
}

.roster-panel {
  border:1px solid #3c453a;
  background:#191e19
}

.toolbar {
  padding:17px 20px;
  display:flex;
  gap:12px;
  justify-content:space-between;
  border-bottom:1px solid #343d34
}

.search-box {
  background:#232a23;
  border:1px solid #465044;
  height:44px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 13px;
  min-width:290px;
  width:390px;
  max-width:100%;
  transition:border-color .2s
}

.search-box:focus-within,.select-wrap:focus-within {
  border-color:#cafa68
}

.search-box svg {
  width:18px;
  height:18px;
  color:#b3c2ac;
  flex:none
}

.search-box input {
  border:0;
  outline:0;
  min-width:0;
  width:100%;
  background:transparent;
  color:#f1f4e9;
  font-size:12px
}

.search-box input::placeholder {
  color:#99a594
}

.search-box input::-webkit-search-cancel-button {
  cursor:pointer
}

.search-hint {
  font-size:9px;
  color:#81907e;
  letter-spacing:.1em
}

.filters {
  display:flex;
  gap:10px
}

.select-wrap {
  height:44px;
  display:flex;
  align-items:center;
  position:relative;
  border:1px solid #465044;
  background:#232a23;
  min-width:160px
}

.select-wrap select {
  appearance:none;
  background:transparent;
  color:#d8e0d4;
  border:0;
  outline:0;
  width:100%;
  height:100%;
  font-size:12px;
  padding:0 36px 0 14px;
  cursor:pointer
}

.select-wrap select option {
  color:#f2f2e9;
  background:#232a23
}

.select-wrap>span:last-child {
  position:absolute;
  right:13px;
  color:#cafa68;
  pointer-events:none;
  font-size:18px;
  top:8px
}

.table-meta {
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 20px;
  font-size:11px;
  color:#aab5a7
}

.table-meta>div:first-child {
  display:flex;
  align-items:center;
  gap:7px
}

.table-meta strong {
  color:#eff5e8;
  font-weight:500
}

.result-dot {
  width:6px;
  height:6px;
  margin-right:3px
}

.sort-tip {
  color:#849080
}

.sort-tip span {
  font-size:17px;
  color:#cafa68;
  vertical-align:-2px
}

.table-scroll {
  max-height:680px;
  overflow:auto;
  scrollbar-color:#5e7156 #202820;
  scrollbar-width:thin
}

.table-scroll:focus-visible {
  outline:2px solid #cafa68;
  outline-offset:-2px
}

table {
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  min-width:1480px;
  text-align:left
}

thead th {
  position:sticky;
  top:0;
  z-index:2;
  background:#283127;
  border-top:1px solid #465345;
  border-bottom:1px solid #53604f;
  white-space:nowrap;
  padding:0;
  font-weight:500
}

thead th:first-child,tbody td:first-child {
  padding-left:22px
}

thead th:last-child,tbody td:last-child {
  padding-right:22px
}

.sort-button {
  height:46px;
  border:0;
  background:transparent;
  color:#b9c5b3;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 12px 0 0;
  text-align:left;
  white-space:nowrap;
  font-size:11px;
  font-weight:600
}

.sort-button:hover,.sort-button:focus-visible,.sort-button.active {
  color:#cafa68
}

.sort-button:focus-visible {
  outline:2px solid #cafa68;
  outline-offset:-3px
}

.sort-arrow {
  font:15px 'DM Mono',monospace;
  color:#71846d
}

.sort-button.active .sort-arrow {
  color:#cafa68
}

tbody tr {
  background:#191e19
}

tbody tr:nth-child(even) {
  background:#1d231d
}

tbody tr:hover {
  background:#293328
}

tbody td {
  height:54px;
  padding:7px 12px 7px 0;
  border-bottom:1px solid #313a30;
  color:#bdc7b9;
  white-space:nowrap;
  font-size:12px;
  font-variant-numeric:tabular-nums
}

.id-cell {
  font:11px 'DM Mono',monospace;
  color:#82907e
}

.player-cell {
  color:#f1f4eb;
  font-weight:600;
  font-size:13px
}

.player-cell .avatar {
  display:inline-grid;
  place-items:center;
  width:29px;
  height:29px;
  margin-right:10px;
  background:#354334;
  color:#cafa68;
  border:1px solid #50684b;
  border-radius:7px;
  font:600 12px 'Space Grotesk','IBM Plex Sans Thai',sans-serif;
  vertical-align:middle
}

.class-cell {
  color:#dbe4d3
}

.numeric-cell {
  font-family:'DM Mono',monospace;
  font-size:11px
}

.gear-cell {
  color:#d7f2b6;
  font-weight:500
}

.status-badge {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:11px
}

.status-badge:before {
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:#748273;
  flex:none
}

.status-badge.online {
  color:#cafa68
}

.status-badge.online:before {
  background:#cafa68;
  box-shadow:0 0 9px #cafa6888
}

.empty-row td {
  text-align:center;
  height:150px;
  color:#abb9a8;
  font-size:14px
}

.table-footer {
  height:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  color:#869484;
  font-size:10px;
  letter-spacing:.12em
}

.footer-star {
  color:#cafa68
}

.data-note {
  margin:15px 0 0;
  color:#879385;
  font-size:10px
}

.site-footer {
  height:90px;
  border-top:1px solid #343e33;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#899686;
  font-size:10px;
  letter-spacing:.08em
}

.footer-heart {
  color:#cafa68
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

@media(max-width:1100px) {
  .page-shell {
    padding:0 32px
  }

  .hero h1 {
    font-size:clamp(50px,6vw,72px)
  }

  .stats-grid {
    gap:8px
  }

  .stat-card {
    padding:18px
  }

  .stat-sub {
    font-size:8px
  }
}

@media(max-width:750px) {
  .page-shell {
    padding:0 20px
  }

  .site-header {
    height:75px
  }

  .header-meta {
    font-size:9px;
    gap:7px
  }

  .header-meta .header-separator {
    display:none
  }

  .hero {
    grid-template-columns:1fr;
    min-height:auto
  }

  .hero-copy {
    padding:57px 0 46px
  }

  .hero h1 {
    font-size:clamp(56px,11vw,80px)
  }

  .hero-art {
    display:none
  }

  .overview {
    padding:28px 0 52px
  }

  .stats-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .stat-card {
    min-height:145px;
    padding:18px
  }

  .stat-card strong {
    font-size:37px
  }

  .directory {
    padding-bottom:54px
  }

  .directory-heading {
    align-items:start
  }

  .directory-aside {
    display:none
  }

  .directory h2 {
    font-size:30px
  }

  .toolbar {
    flex-direction:column;
    padding:15px
  }

  .search-box {
    width:100%
  }

  .filters {
    display:grid;
    grid-template-columns:1fr 1fr
  }

  .select-wrap {
    min-width:0
  }

  .table-meta {
    padding:0 15px
  }

  .table-footer {
    padding:0 15px
  }

  .site-footer {
    font-size:9px
  }
}

@media(max-width:420px) {
  .header-meta {
    font-size:0;
    gap:0
  }

  .header-meta .live-dot {
    margin-right:6px
  }

  .header-meta:after {
    content:'2026';
    font-size:10px
  }

  .hero-copy>p {
    font-size:13px
  }

  .hero-footnote {
    font-size:9px
  }

  .stat-card strong {
    font-size:31px
  }

  .stat-label {
    font-size:11px
  }

  .stat-sub {
    letter-spacing:0;
    font-size:8px
  }

  .sort-tip {
    font-size:0
  }

  .sort-tip span {
    font-size:18px
  }

  .site-footer span:last-child {
    display:none
  }
}

.scroll-hint {
  display:none
}

@media(max-width:750px) {
  .scroll-hint {
    display:block;
    margin:0;
    padding:0 15px 10px;
    color:#a9bf9d;
    font-size:10px
  }
}

.header-party-link {
  color:#cafa68;
  border:1px solid #647e4d;
  background:#263321;
  text-decoration:none;
  padding:10px 15px;
  font-size:12px;
  font-weight:600;
  transition:background .2s, border-color .2s;
}

.header-party-link:hover,.header-party-link:focus-visible {
  background:#354a2b;
  border-color:#cafa68;
}

.header-party-link span {
  margin-left:9px;
}

.party-section {
  padding:0 0 74px;
  scroll-margin-top:26px;
}

.party-intro {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  padding:0 0 24px;
}

.party-intro h2 {
  font-size:clamp(31px,3.4vw,48px);
  line-height:1.2;
  letter-spacing:-.055em;
  margin:12px 0 7px;
}

.party-intro p {
  color:#abb9a8;
  margin:0;
  font-size:14px;
}

.party-cap {
  display:flex;
  align-items:center;
  gap:13px;
  color:#cafa68;
  white-space:nowrap;
}

.party-cap strong {
  font:700 65px/.9 'Space Grotesk',sans-serif;
  letter-spacing:-.09em;
}

.party-cap span {
  font-size:11px;
  line-height:1.7;
  color:#afc69c;
}

.party-rules {
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  padding:14px 20px;
  border:1px solid #4a6140;
  border-bottom:0;
  background:#253222;
  color:#d5e6ca;
  font-size:11px;
}

.party-rules b {
  color:#cafa68;
  font:500 11px 'DM Mono',monospace;
  margin-right:8px;
}

.party-layout {
  display:grid;
  grid-template-columns:minmax(300px,350px) minmax(0,1fr);
  gap:12px;
}

.previous-panel,.lineup-panel {
  border:1px solid #3e4c39;
  background:#1b221b;
  padding:23px;
  min-width:0;
}

.panel-topline {
  color:#cafa68;
  font:500 10px 'DM Mono','IBM Plex Sans Thai',monospace;
  letter-spacing:.09em;
}

.panel-topline span {
  color:#9fad99;
  letter-spacing:0;
}

.previous-panel h3,.lineup-panel h3 {
  font-size:22px;
  line-height:1.3;
  margin:13px 0 0;
  letter-spacing:-.04em;
}

.previous-panel h3 span {
  font:500 14px 'DM Mono',monospace;
  color:#cafa68;
  margin-left:5px;
}

.panel-description,.previous-note {
  color:#aab7a5;
  font-size:11px;
  line-height:1.7;
}

.panel-description {
  margin:11px 0 16px;
}

.party-warning {
  border-left:2px solid #e7b66f;
  background:#352e22;
  color:#f1d6a5;
  padding:11px 13px;
  font-size:11px;
  line-height:1.7;
}

.previous-form {
  margin:23px 0 14px;
}

.previous-form label {
  display:block;
  margin-bottom:9px;
  color:#dbe6d3;
  font-size:12px;
  font-weight:600;
}

.previous-input-row {
  display:flex;
  height:42px;
}

.previous-input-row input {
  background:#273127;
  border:1px solid #53634e;
  color:#f0f4ec;
  min-width:0;
  flex:1;
  padding:0 11px;
  outline:0;
  font-size:12px;
}

.previous-input-row input:focus {
  border-color:#cafa68;
}

.previous-input-row input::placeholder {
  color:#8d9a8b;
}

.previous-input-row button {
  background:#cafa68;
  border:1px solid #cafa68;
  color:#1b2717;
  padding:0 13px;
  font-size:12px;
  font-weight:700;
}

.previous-input-row button:hover {
  background:#ddff9b;
}

.form-error {
  color:#ffb995;
  font-size:11px;
  min-height:17px;
  margin:5px 0 0;
}

.previous-list-heading {
  border-top:1px solid #3d4a3a;
  padding-top:17px;
  margin-bottom:12px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:#d6e0d0;
  font-size:11px;
}

.previous-list-heading span {
  color:#91a78a;
}

.previous-list {
  list-style:none;
  padding:0 4px 0 0;
  margin:0;
  max-height:520px;
  overflow:auto;
  scrollbar-color:#5e7156 #202820;
  scrollbar-width:thin;
}

.previous-person {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #323d31;
  padding:6px 3px;
  min-height:43px;
}

.previous-person-details {
  min-width:0;
}

.previous-person-details strong,.previous-person-details small {
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.previous-person-details strong {
  font-size:11px;
  font-weight:600;
}

.previous-person-details small {
  color:#8fa28a;
  font-size:9px;
}

.remove-person {
  flex:none;
  background:transparent;
  color:#a0b398;
  border:1px solid transparent;
  font:22px/1 'Space Grotesk',sans-serif;
  padding:4px 8px;
}

.remove-person:hover,.remove-person:focus-visible {
  color:#ffb995;
  border-color:#8b6a54;
}

.previous-note {
  margin:16px 0 0;
}

.export-button {
  display:block;
  width:100%;
  margin-top:16px;
  padding:11px 12px;
  background:#293b27;
  border:1px solid #6b8b58;
  color:#d9f7bc;
  font-size:11px;
  font-weight:600;
  text-align:left;
}

.export-button:hover,.export-button:focus-visible {
  border-color:#cafa68;
  background:#34502d;
}

.undo-button {
  color:#e8c9a4;
  background:none;
  border:0;
  border-bottom:1px solid #896d4b;
  padding:5px 0;
  margin-top:15px;
  text-align:left;
  font-size:11px;
}

.undo-button[hidden] {
  display:none;
}

.lineup-panel {
  background:#1b211b;
}

.lineup-header {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:15px;
}

.lineup-total {
  color:#cafa68;
  font:500 16px 'DM Mono',monospace;
  white-space:nowrap;
}

.lineup-note {
  min-height:35px;
  margin:16px 0;
  color:#c3d3b5;
  font-size:11px;
  line-height:1.7;
}

.lineup-groups {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.lineup-group {
  background:#151b15;
  border:1px solid #384638;
  min-width:0;
}

.group-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:62px;
  padding:0 15px;
  border-bottom:1px solid #40513d;
}

.group-heading>div {
  display:flex;
  align-items:center;
  gap:9px;
}

.group-heading h4 {
  margin:0;
  font-size:15px;
}

.group-heading>span {
  color:#81977c;
  font:9px 'DM Mono',monospace;
  text-align:right;
}

.group-symbol {
  color:#cafa68;
  font-size:15px;
}

.rotate-symbol {
  color:#b4abff;
}

.lineup-list {
  margin:0;
  padding:0 4px 0 0;
  list-style:none;
  max-height:610px;
  overflow:auto;
  scrollbar-color:#5e7156 #202820;
  scrollbar-width:thin;
}

.lineup-person {
  min-height:54px;
  padding:6px 14px;
  border-bottom:1px solid #303b30;
  display:flex;
  align-items:center;
  gap:10px;
}

.lineup-person:last-child {
  border-bottom:0;
}

.lineup-number {
  color:#718d6a;
  font:10px 'DM Mono',monospace;
  flex:none;
}

.lineup-identity {
  flex:1;
  min-width:0;
}

.lineup-identity strong,.lineup-identity small {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.lineup-identity strong {
  font-size:11px;
  font-weight:600;
}

.lineup-identity small {
  color:#879c82;
  font-size:9px;
}

.lineup-gear {
  color:#d7f2b6;
  font:10px 'DM Mono',monospace;
  flex:none;
}

.lineup-actions {
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:19px;
}

.lineup-actions button {
  min-height:42px;
  border:1px solid #738b64;
  padding:0 15px;
  font-size:11px;
  font-weight:600;
}

.party-secondary {
  background:#263126;
  color:#e1eed8;
}

.party-primary {
  background:#cafa68;
  color:#1b2717;
}

.party-primary span {
  margin-left:14px;
}

.lineup-actions button:disabled {
  cursor:not-allowed;
  opacity:.45;
}

.lineup-actions button:not(:disabled):hover {
  filter:brightness(1.13);
}

.party-action-message {
  margin:10px 0 0;
  min-height:18px;
  text-align:right;
  color:#cafa68;
  font-size:11px;
}

@media(max-width:1100px) {
  .party-layout {
    grid-template-columns:minmax(270px,310px) minmax(0,1fr);
  }

  .previous-panel,.lineup-panel {
    padding:17px;
  }

  .group-heading>span {
    display:none;
  }
}

@media(max-width:750px) {
  .header-party-link {
    padding:8px 10px;
    font-size:10px;
  }

  .header-party-link span {
    margin-left:3px;
  }

  .party-section {
    padding-bottom:56px;
  }

  .party-intro h2 {
    font-size:32px;
  }

  .party-intro p {
    font-size:12px;
  }

  .party-cap strong {
    font-size:48px;
  }

  .party-cap span {
    display:none;
  }

  .party-rules {
    display:grid;
    gap:8px;
    padding:13px 16px;
  }

  .party-layout {
    grid-template-columns:1fr;
  }

  .previous-list {
    max-height:320px;
  }

  .lineup-list {
    max-height:350px;
  }
}

@media(max-width:480px) {
  .lineup-groups {
    grid-template-columns:1fr;
  }

  .lineup-actions {
    flex-direction:column;
  }

  .lineup-actions button {
    width:100%;
  }
}