@font-face {
  font-family: Anton;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/anton-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../assets/fonts/space-grotesk-latin-500-700.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-latin-700.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-latin-800.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-latin-900.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-latin-italic-800.woff2")
    format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-latin-italic-900.woff2")
    format("woff2");
}

:root {
  --bp-dark-bg: #070a0d;
  --bp-glass: rgba(10, 16, 12, 0.9);
  --bp-text-muted: #cbd5e1;
}

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  user-select: none;
}

body,
html {
  width: 100%;
  height: 100%;
  background-color: var(--bp-dark-bg);
  font-family:
    "Space Grotesk",
    -apple-system,
    sans-serif;
  color: rgb(255, 255, 255);
}

:is(#cod-lobby, #farm-overview-ui) {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: auto;
  transition:
    opacity 0.45s,
    visibility 0.45s,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.bp-header-strip {
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 60;
}

.bp-brand-dock {
  display: flex;
  user-select: none;
  cursor: pointer;
  padding: 0px;
  transition:
    transform 0.2s,
    opacity 0.2s;
}

.bp-brand-dock:hover {
  transform: scale(1.02);
}

.bp-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bp-quick-dock {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
}

.bp-header-icon-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s;
  user-select: none;
}

.bp-header-icon-btn:hover {
  background: rgba(162, 255, 0, 0.15);
  border-color: var(--bp-orange);
  color: var(--bp-orange);
  transform: translateY(-1px);
}

.bp-header-icon-btn.active {
  background: rgba(162, 255, 0, 0.12);
  border-color: rgba(162, 255, 0, 0.4);
  color: var(--bp-orange);
}

:is(#lobby-hero-view, .farm-map-view) {
  z-index: 55;
  transition:
    opacity 0.3s,
    transform 0.3s;
}

:root {
  --bp-orange: #fff;
  --bp-panel-border: rgba(255, 255, 255, 0.25);
}

button {
  font: inherit;
}

button:focus-visible {
  outline: rgb(255, 255, 255) solid 3px;
  outline-offset: 5px;
}

em {
  font-style: italic;
}

h1,
h2,
strong {
  letter-spacing: 0.01em;
}

.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}

h1,
h2,
.arena-tile strong {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}

kbd {
  font:
    600 10px "Space Grotesk",
    sans-serif;
  border: 1px solid rgb(119, 119, 119);
  padding: 3px 5px;
  margin: 0px 6px 0px 14px;
}

:is(#cod-lobby, #farm-overview-ui) {
  padding: 26px 5vw 22px;
  gap: 18px;
  overflow: auto;
}

.bp-header-strip {
  align-items: center;
  flex-shrink: 0;
}

.bp-brand-dock {
  border: 0px;
  background: none;
  color: white;
  align-items: center;
  gap: 12px;
  border-radius: 0px;
}

.brand-ball {
  width: 40px;
  height: 40px;
  border: 2px solid;
  border-radius: 50%;
  font:
    700 26px "Space Grotesk",
    sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-word {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  text-align: left;
  line-height: 1.05;
}

.brand-word b {
  display: block;
  font-size: 25px;
}

.bp-header-right {
  margin: 0px;
}

.bp-quick-dock {
  border: 0px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 0px;
  backdrop-filter: none;
}

.bp-header-icon-btn {
  border: 0px;
  border-radius: 0px;
  font-size: 9px;
  background: none;
  color: rgb(187, 187, 187);
  letter-spacing: 1px;
  padding: 8px 10px;
}

.bp-header-icon-btn:hover,
.bp-header-icon-btn.active {
  background: rgb(255, 255, 255);
  color: rgb(17, 17, 17);
  transform: none;
}

.arena-tabs {
  display: flex;
  justify-content: center;
  gap: 1px;
  flex-shrink: 0;
  position: relative;
  z-index: 55;
}

.arena-tabs button {
  border: 0px;
  background: rgb(232, 231, 227);
  color: rgb(34, 34, 34);
  padding: 9px 30px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
}

.arena-tabs button.selected,
.arena-tabs button:hover {
  background: rgb(20, 21, 23);
  color: rgb(255, 255, 255);
  box-shadow: rgb(255, 255, 255) 0px -3px inset;
}

:is(#lobby-hero-view, .farm-map-view) {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 0px;
  gap: 17px;
  max-width: 1160px;
  width: 100%;
  margin: auto;
  min-height: 0px;
}

.lobby-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.lobby-heading .eyebrow {
  color: rgb(197, 197, 197);
}

.lobby-heading h1 {
  font-size: clamp(26px, 3vw, 44px);
  line-height: 0.95;
  text-align: right;
}

.lobby-heading h1 br {
  display: none;
}

.lobby-heading h1 em {
  margin-left: 8px;
  color: rgb(198, 198, 198);
}

.arena-grid {
  display: grid;
  grid-template-columns: 1fr 2.15fr 1fr;
  grid-template-rows: 180px 90px 90px;
  gap: 7px;
}

.arena-tile {
  position: relative;
  border: 0px;
  border-radius: 0px;
  cursor: pointer;
  display: flex;
  text-align: left;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  transition:
    transform 0.18s,
    box-shadow 0.18s;
  overflow: hidden;
  min-width: 0px;
}

.arena-tile:hover {
  transform: scale(1.018);
  z-index: 2;
  box-shadow:
    rgb(255, 255, 255) 0px 0px 0px 3px,
    rgba(0, 0, 0, 0.533) 0px 10px 40px;
}

.arena-tile small {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.4px;
  margin-bottom: 5px;
}

.arena-tile strong {
  font-size: clamp(22px, 2.8vw, 39px);
  line-height: 0.95;
  display: block;
}

.tile-light {
  background: linear-gradient(135deg, rgb(255, 255, 255), rgb(227, 227, 223));
  color: rgb(24, 24, 26);
}

.tile-dark {
  background: rgba(23, 24, 27, 0.91);
  color: rgb(255, 255, 255);
}

.tile-symbol {
  font-size: 34px;
  font-family: "Space Grotesk", sans-serif;
}

.tile-arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  font-size: 22px;
}

.tile-controls {
  grid-area: 1 / 1;
}

.tile-stats {
  grid-area: 2 / 1 / 4;
}

.tile-ai {
  grid-area: 1 / 3;
}

.tile-pass {
  grid-area: 2 / 3;
  padding: 16px 20px;
}

.tile-rules {
  grid-area: 3 / 3;
  padding: 16px 20px;
}

.tile-pass strong,
.tile-rules strong {
  font-size: 27px;
}

.tile-hero {
  grid-area: 1 / 2 / 4;
  background:
    linear-gradient(rgba(0, 0, 0, 0.067) 25%, rgba(0, 0, 0, 0.8)),
    url("../assets/ui/stable-courtyard.webp") 30% center / cover;
  color: rgb(255, 255, 255);
  border: 3px solid rgb(255, 255, 255);
  outline: rgba(255, 255, 255, 0.314) solid 1px;
  outline-offset: 3px;
}

.tile-overline {
  font-size: 9px;
  letter-spacing: 2px;
  background: rgb(17, 17, 17);
  color: white;
  align-self: start;
  padding: 7px 10px;
}

.hero-tile-copy {
  align-self: end;
  text-align: right;
}

.hero-tile-copy strong {
  font-size: clamp(60px, 6vw, 91px);
  line-height: 0.82;
  margin: 12px 0px 18px;
}

.hero-tile-copy em {
  color: rgb(211, 211, 211);
}

.hero-tile-copy > span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: end;
}

.hero-tile-copy b {
  font-size: 22px;
}

#lobby-record {
  letter-spacing: 1px;
  color: rgb(170, 170, 170);
  margin-top: 15px;
}

.arena-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 1px;
  color: rgb(221, 221, 221);
}

.arena-footer kbd:first-child {
  margin-left: 0px;
}

.arena-footer b {
  margin: 0px 10px;
  color: rgb(119, 119, 119);
}

#title-screen {
  position: fixed;
  inset: 0px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.title-copy {
  margin-left: 57%;
  width: 39%;
  padding: 15px 0px;
}

.title-copy h1 {
  font-size: clamp(45px, 7.2vw, 110px);
  line-height: 0.86;
  letter-spacing: -1px;
  margin: 14px 0px 22px;
  font-weight: 900;
}

.title-copy h1 em {
  font-size: 0.85em;
}

.title-tagline {
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 37px;
}

.loading-caption {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  letter-spacing: 1px;
  gap: 10px;
  white-space: nowrap;
}

.loading-track {
  background: rgba(17, 17, 17, 0.133);
}

.loading-track > div {
  height: 100%;
  width: 0px;
  background: rgb(17, 17, 17);
  transition: width 0.2s;
}

.title-copy button {
  border-width: 1px 0px;
  border-style: solid none;
  border-color: rgba(17, 17, 17, 0.333) currentcolor;
  border-image: none;
  padding: 17px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font:
    800 19px "Barlow Condensed",
    sans-serif;
  letter-spacing: 1px;
  background: none;
  color: rgb(17, 17, 17);
  cursor: pointer;
  width: 100%;
}

.title-copy button:hover {
  background: rgb(17, 17, 17);
  color: white;
  padding-left: 10px;
  padding-right: 10px;
}

.title-copy button:focus-visible {
  outline-color: rgb(17, 17, 17);
}

.title-copy button span {
  font-size: 25px;
}

#loading-error {
  font-size: 11px;
  line-height: 1.5;
  margin-top: 12px;
}

.report-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.047);
  font-size: 11px;
  color: rgb(184, 186, 194);
  gap: 12px;
}

.report-stat-row strong {
  font:
    600 15px "Barlow Condensed",
    sans-serif;
  color: rgb(255, 255, 255);
  text-align: right;
}

.match-event {
  display: flex;
  gap: 16px;
  align-items: start;
  border-top: 1px solid rgba(255, 255, 255, 0.082);
  padding: 13px 0px;
}

.match-event time {
  color: rgb(175, 179, 188);
  font-size: 10px;
  min-width: 42px;
  padding-top: 2px;
}

.match-event strong {
  font-size: 11px;
}

.match-event span {
  display: block;
  font-size: 9px;
  line-height: 1.5;
  color: rgb(184, 186, 194);
  margin-top: 4px;
}

input {
  accent-color: rgb(255, 255, 255) !important;
}

@media (min-width: 1500px) {
  .arena-grid {
    grid-template-rows: 220px 105px 105px;
  }
  .arena-tile {
    padding: 27px;
  }
  .tile-pass,
  .tile-rules {
    padding: 24px;
  }
  .report-stat-row {
    padding: 18px 0px;
  }
}

@media (max-width: 900px) {
  :is(#cod-lobby, #farm-overview-ui) {
    padding: 18px 4vw;
    gap: 15px;
  }
  .bp-header-icon-btn {
    padding: 7px;
  }
  .brand-word {
    font-size: 15px;
  }
  .brand-word b {
    font-size: 19px;
  }
  .brand-ball {
    width: 33px;
    height: 33px;
    font-size: 21px;
  }
  .arena-grid {
    grid-template-columns: 1fr 1.65fr 1fr;
    grid-template-rows: 150px 80px 80px;
  }
  .arena-tile {
    padding: 17px;
  }
  .arena-tile strong {
    font-size: 27px;
  }
  .tile-pass strong,
  .tile-rules strong {
    font-size: 21px;
  }
  .arena-tile small {
    font-size: 7px;
  }
  .hero-tile-copy strong {
    font-size: 65px;
  }
  .tile-arrow {
    right: 10px;
    bottom: 11px;
  }
  .arena-tabs button {
    padding: 8px 24px;
  }
  .report-stat-row {
    font-size: 10px;
    padding: 12px 0px;
  }
  .title-copy {
    margin-left: 54%;
    width: 43%;
  }
  .title-copy h1 {
    font-size: 8vw;
  }
}

@media (max-width: 600px) {
  :is(#cod-lobby, #farm-overview-ui) {
    padding: 16px 18px;
    gap: 16px;
  }
  .bp-header-right {
    gap: 0px;
  }
  .bp-header-icon-btn {
    padding: 7px 6px;
    font-size: 8px;
  }
  .bp-header-icon-btn svg {
    display: none;
  }
  .bp-quick-dock {
    padding: 3px;
  }
  .brand-word {
    font-size: 12px;
  }
  .brand-word b {
    font-size: 16px;
  }
  .bp-brand-dock {
    gap: 7px;
  }
  .lobby-heading {
    align-items: start;
    gap: 15px;
  }
  .lobby-heading .eyebrow {
    font-size: 8px;
    max-width: 105px;
    line-height: 1.5;
  }
  .lobby-heading h1 {
    font-size: 27px;
  }
  .lobby-heading h1 br {
    display: block;
  }
  .lobby-heading h1 em {
    margin: 0px;
  }
  .arena-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 260px 110px 100px 75px;
    gap: 7px;
  }
  .tile-hero {
    grid-area: 1 / 1 / auto / 3;
  }
  .tile-controls {
    grid-area: 3 / 1;
  }
  .tile-stats {
    grid-area: 3 / 2;
  }
  .tile-ai {
    grid-area: 2 / 1;
  }
  .tile-pass {
    grid-area: 2 / 2;
  }
  .tile-rules {
    grid-area: 4 / 1 / auto / 3;
  }
  .arena-tile {
    padding: 15px;
  }
  .tile-symbol {
    font-size: 23px;
  }
  .arena-tile strong {
    font-size: 29px;
  }
  .tile-controls .tile-symbol,
  .tile-stats .tile-symbol {
    display: none;
  }
  .tile-pass strong {
    font-size: 29px;
  }
  .hero-tile-copy strong {
    font-size: 70px;
  }
  .tile-rules strong {
    font-size: 23px;
  }
  .tile-hero {
    background-position: 30% 60%;
  }
  .tile-hero .hero-tile-copy {
    display: block;
  }
  .hero-tile-copy small {
    font-size: 7px;
  }
  .hero-tile-copy > span {
    font-size: 8px;
    gap: 15px;
  }
  .arena-footer {
    font-size: 7px;
  }
  .arena-footer > span:last-child {
    display: none;
  }
  .title-copy {
    margin: 0px;
    width: 100%;
    align-self: end;
    padding: 26px;
    background: rgba(240, 239, 234, 0.863);
    backdrop-filter: blur(8px);
  }
  #title-screen {
    padding-right: 20px;
    padding-bottom: 20px;
    gap: 20px;
  }
  .title-copy h1 {
    font-size: clamp(36px, 12vw, 64px);
    margin: 15px 0px 20px;
  }
  .title-tagline {
    font-size: 8px;
    margin-bottom: 27px;
  }
  .title-copy button {
    font-size: 20px;
  }
  .title-copy .eyebrow {
    font-size: 8px;
  }
  .loading-caption {
    font-size: 7px;
  }
  #match-report {
    padding: 18px;
    gap: 18px;
  }
  .report-stat-row {
    padding: 11px 0px;
  }
  .report-stat-row strong {
    font-size: 15px;
  }
}

@media (max-height: 600px) and (min-width: 601px) {
  :is(#cod-lobby, #farm-overview-ui) {
    padding: 14px 4vw;
    gap: 10px;
  }
  .arena-grid {
    grid-template-rows: 115px 65px 65px;
  }
  .lobby-heading h1 {
    font-size: 26px;
  }
  .lobby-heading {
    display: none;
  }
  .arena-tile {
    padding: 14px;
  }
  .tile-symbol {
    font-size: 24px;
  }
  .arena-tile strong {
    font-size: 27px;
  }
  .hero-tile-copy strong {
    font-size: 65px;
  }
  .tile-pass strong,
  .tile-rules strong {
    font-size: 23px;
  }
  .title-copy h1 {
    font-size: clamp(28px, 8vh, 50px);
  }
  .title-tagline {
    margin-bottom: 25px;
  }
  #match-report {
    gap: 13px;
    padding: 14px 4vw;
  }
  .report-stat-row {
    padding: 8px 0px;
  }
}

@media (max-width: 600px) {
  #match-report > * {
    flex-shrink: 0;
  }
  .report-stat-row {
    font-size: 11px;
  }
}

@media (min-width: 901px) {
  .title-copy {
    margin-left: auto;
    margin-right: 2vw;
    width: clamp(250px, 23vw, 440px);
    padding-right: 0px;
  }
  .title-copy h1 {
    font-size: clamp(64px, 6.1vw, 110px);
  }
}

.title-copy .eyebrow {
  font-size: clamp(11px, 0.72vw, 14px);
}

.title-tagline {
  font-size: clamp(11px, 0.75vw, 14px);
}

.loading-caption {
  font-size: clamp(11px, 0.75vw, 14px);
  line-height: 1.5;
}

.loading-track {
  height: 5px;
  margin-top: 14px;
}

@media (max-width: 900px) and (min-width: 601px) {
  .title-copy {
    margin-left: auto;
    margin-right: 1.5vw;
    width: 30vw;
  }
  .title-copy h1 {
    font-size: 6.8vw;
  }
}

@media (max-width: 600px) {
  .title-copy .eyebrow,
  .title-tagline,
  .loading-caption {
    font-size: 11px;
    letter-spacing: 1px;
  }
}

@keyframes match-spin {
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 600px) {
  .arena-tabs button {
    padding: 8px 12px;
    font-size: 14px;
  }
}

:is(:is(#cod-lobby, #farm-overview-ui), #match-report) {
  --menu-scroll-thumb: #92938f;
  --menu-scroll-track: #141519;
  --menu-scroll-hover: #eeefea;
}

:is(:is(#cod-lobby, #farm-overview-ui), #match-report),
:is(:is(#cod-lobby, #farm-overview-ui), #match-report) * {
  scrollbar-width: thin;
  scrollbar-color: var(--menu-scroll-thumb) var(--menu-scroll-track);
}

:is(:is(#cod-lobby, #farm-overview-ui), #match-report)::-webkit-scrollbar,
:is(:is(#cod-lobby, #farm-overview-ui), #match-report) ::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

:is(:is(#cod-lobby, #farm-overview-ui), #match-report)::-webkit-scrollbar-track,
:is(:is(#cod-lobby, #farm-overview-ui), #match-report)
  ::-webkit-scrollbar-track {
  background: var(--menu-scroll-track);
  border-radius: 2px;
}

:is(:is(#cod-lobby, #farm-overview-ui), #match-report)::-webkit-scrollbar-thumb,
:is(:is(#cod-lobby, #farm-overview-ui), #match-report)
  ::-webkit-scrollbar-thumb {
  background: var(--menu-scroll-thumb);
  border: 1px solid var(--menu-scroll-track);
  border-radius: 2px;
}

:is(
    :is(#cod-lobby, #farm-overview-ui),
    #match-report
  )::-webkit-scrollbar-thumb:hover,
:is(:is(#cod-lobby, #farm-overview-ui), #match-report)
  ::-webkit-scrollbar-thumb:hover {
  background: var(--menu-scroll-hover);
}

:is(
  :is(#cod-lobby, #farm-overview-ui),
  #match-report
)::-webkit-scrollbar-corner,
:is(:is(#cod-lobby, #farm-overview-ui), #match-report)
  ::-webkit-scrollbar-corner {
  background: var(--menu-scroll-track);
}

:is(#cod-lobby, #farm-overview-ui),
:is(#cod-lobby, #farm-overview-ui) * {
  scrollbar-width: none;
}

:is(#cod-lobby, #farm-overview-ui)::-webkit-scrollbar,
:is(#cod-lobby, #farm-overview-ui) ::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  display: none;
}

@keyframes lobby-scroll-arrow {
  100% {
    transform: translateY(4px);
  }
}

#match-report,
#match-report :not(button):not([role="button"]):not(a):not(input):not(select) {
  cursor: default !important;
}

#match-report button,
#match-report [role="button"],
#match-report a {
  cursor: pointer !important;
}

:root {
  --snooker-ivory: #fff5e3;
  --snooker-gold: #f0cc83;
  --snooker-ink: #173e35;
  --snooker-crimson: #a51e42;
}

:is(#cod-lobby, #farm-overview-ui) {
  color: var(--snooker-ivory);
}

:is(#cod-lobby, #farm-overview-ui) .bp-brand-dock {
  color: var(--snooker-ivory);
}

:is(#cod-lobby, #farm-overview-ui) .brand-ball,
.report-brand .brand-ball {
  color: var(--snooker-gold);
  border-color: var(--snooker-gold);
  background: rgba(17, 104, 83, 0.75);
}

:is(#cod-lobby, #farm-overview-ui) .brand-word b {
  color: var(--snooker-gold);
}

:is(#cod-lobby, #farm-overview-ui) .arena-tabs button {
  background: rgba(255, 245, 227, 0.94);
  color: var(--snooker-ink);
  transition:
    background 0.18s,
    color 0.18s;
}

:is(#cod-lobby, #farm-overview-ui) .arena-tabs button.selected,
:is(#cod-lobby, #farm-overview-ui) .arena-tabs button:hover {
  color: var(--snooker-ivory);
  background: var(--snooker-crimson);
  box-shadow: inset 0 -3px var(--snooker-gold);
}

:is(#cod-lobby, #farm-overview-ui) .lobby-heading .eyebrow,
:is(#cod-lobby, #farm-overview-ui) .setup-heading .eyebrow {
  color: rgb(242, 218, 176);
}

:is(#cod-lobby, #farm-overview-ui) .lobby-heading h1 em,
:is(#cod-lobby, #farm-overview-ui) .setup-heading h1 em {
  color: var(--snooker-gold);
}

:is(#cod-lobby, #farm-overview-ui) .tile-controls {
  background: linear-gradient(135deg, rgb(255, 246, 228), rgb(237, 206, 153));
  color: rgb(76, 56, 36);
}

:is(#cod-lobby, #farm-overview-ui) .tile-stats {
  color: rgb(255, 245, 227);
  border-width: 1px;
  border-style: solid;
  border-image: none;
}

:is(#cod-lobby, #farm-overview-ui) .tile-ai {
  color: rgb(23, 79, 66);
}

:is(#cod-lobby, #farm-overview-ui) .tile-pass {
  color: rgb(255, 245, 227);
}

:is(#cod-lobby, #farm-overview-ui) .tile-rules {
  color: rgb(33, 75, 83);
}

:is(#cod-lobby, #farm-overview-ui) .tile-overline {
  color: var(--snooker-ivory);
  background: rgba(17, 104, 83, 0.933);
  border: 1px solid rgba(240, 204, 131, 0.376);
}

:is(#cod-lobby, #farm-overview-ui) .hero-tile-copy em {
  color: var(--snooker-gold);
}

#title-screen .title-copy h1 em,
#title-screen .title-copy .eyebrow,
#title-screen .loading-caption,
#title-screen .title-top > span:last-child {
  color: var(--snooker-gold);
}

#title-screen .title-tagline,
#title-screen .title-footer > span:last-child {
  color: rgb(241, 225, 198);
}

#title-screen .title-copy button {
  color: var(--snooker-gold);
  border-color: rgba(240, 204, 131, 0.44);
}

#title-screen .title-copy button:hover {
  color: var(--snooker-ink);
  background: var(--snooker-gold);
}

#title-screen .title-copy button:focus-visible {
  outline-color: var(--snooker-gold);
}

@media (max-width: 600px) {
  #title-screen {
    background-image:
      linear-gradient(
        rgba(13, 63, 52, 0.15),
        rgba(13, 63, 52, 0.44) 40%,
        rgba(13, 63, 52, 0.92) 78%
      ),
      url("../assets/ui/loader-stable.webp");
  }
  #title-screen .title-copy {
    background: rgba(13, 63, 52, 0.91);
    border-top: 1px solid rgba(240, 204, 131, 0.376);
  }
  :is(#cod-lobby, #farm-overview-ui) .arena-grid {
    gap: 8px;
  }
}

:is(#cod-lobby, #farm-overview-ui)[data-layout="compact"] {
  position: fixed;
  height: 100dvh;
  overflow: hidden;
  padding: clamp(12px, 2.4vh, 26px) 5vw;
  gap: clamp(8px, 1.8vh, 18px);
}

:is(#cod-lobby, #farm-overview-ui)[data-layout="compact"] button:focus-visible {
  outline: 2px solid var(--snooker-crimson);
  outline-offset: 3px;
}

:is(#cod-lobby, #farm-overview-ui)[data-layout="compact"] .arena-footer {
  flex-shrink: 0;
}

:is(#cod-lobby, #farm-overview-ui)[data-layout="compact"]
  :is(#lobby-hero-view, .farm-map-view) {
  flex: 1 1 0px;
  margin: 0px auto;
  justify-content: center;
}

:is(#cod-lobby, #farm-overview-ui)[data-layout="compact"] .arena-grid {
  min-height: 0px;
  grid-template-rows: minmax(100px, 2fr) minmax(55px, 1fr) minmax(55px, 1fr);
  flex: 1 1 0%;
  max-height: 520px;
}

@media (max-width: 600px) {
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"] {
    padding: max(12px, env(safe-area-inset-top)) 18px
      max(10px, env(safe-area-inset-bottom));
    gap: 10px;
  }
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"] .arena-grid {
    grid-template-rows: minmax(130px, 2fr) repeat(3, minmax(60px, 1fr));
  }
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"] .arena-tile {
    padding: 12px;
  }
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"]
    .hero-tile-copy
    strong {
    font-size: 48px;
  }
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"]
    .hero-tile-copy
    > span {
    padding: 8px 0px;
  }
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"] .arena-tile strong {
    font-size: 25px;
  }
}

@media (max-height: 520px) and (min-width: 601px) {
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"] {
    gap: 6px;
    padding: 10px 4vw;
  }
}

@media (max-height: 520px) and (min-width: 601px) {
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"] .bp-header-strip {
    position: absolute;
    top: 10px;
    left: 4vw;
    width: 92vw;
    pointer-events: none;
  }
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"]
    .bp-header-strip
    button {
    pointer-events: auto;
  }
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"] .arena-tabs {
    align-self: center;
  }
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"] .brand-word {
    font-size: 12px;
  }
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"] .brand-word b {
    font-size: 16px;
  }
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"] .bp-brand-dock {
    gap: 6px;
  }
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"] .brand-ball {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"]
    .bp-header-icon-btn {
    padding: 5px;
    font-size: 7px;
  }
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"]
    .bp-header-icon-btn
    svg {
    width: 12px;
    height: 12px;
  }
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"] .arena-tabs button {
    padding: 7px 12px;
    font-size: 14px;
  }
  :is(#cod-lobby, #farm-overview-ui)[data-layout="compact"]
    :is(.bp-quick-dock, .bp-brand-dock) {
    max-width: 180px;
  }
}

:is(#cod-lobby, #farm-overview-ui) button:focus-visible {
  outline: 2px solid var(--snooker-crimson);
  outline-offset: 3px;
}

:is(#cod-lobby, #farm-overview-ui) {
  z-index: 30;
}

#title-screen {
  overflow-x: hidden;
}

.farm-page-body {
  flex: 1 1 0%;
  min-height: 0px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 600px) {
  .farm-page-body {
    gap: 8px;
  }
}

[hidden] {
  display: none !important;
}

body,
html {
  margin: 0px;
  overflow: hidden;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

.sunny-button {
  padding: 8px 15px;
  font:
    500 15px Fredoka,
    sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.sunny-button:hover:not(:disabled) {
  filter: brightness(1.14);
}

#sunny-dialog {
  align-items: center;
  justify-content: center;
  font-family: Fredoka, sans-serif;
  color: rgb(58, 77, 42);
  box-sizing: border-box;
}

#lobby-record {
  font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}

html,
body {
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
}

#title-screen {
  --title-edge: max(
    clamp(32px, 4vw, 80px),
    env(safe-area-inset-right),
    env(safe-area-inset-bottom)
  );
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0px;
  padding: 32px var(--title-edge) var(--title-edge) 28px;
  overflow-y: auto;
}

#title-screen::before {
  content: "";
  position: absolute;
  inset: 0px;
  background: radial-gradient(
    46% 86% at right bottom,
    rgb(0, 0, 0) 0%,
    rgba(0, 0, 0, 0.933) 50%,
    rgba(0, 0, 0, 0.8) 72%,
    rgba(0, 0, 0, 0.6) 85%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

#title-screen .title-copy {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  box-sizing: border-box;
  margin: 0px;
  max-width: 100%;
  padding: 0px;
  background: none;
  border: 0px;
  backdrop-filter: none;
}

#title-screen #loading-progress {
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#title-screen #press-start {
  box-sizing: border-box;
  min-height: 70px;
  line-height: 1.3;
  white-space: nowrap;
}

#title-screen #loading-error:empty {
  display: none;
}

@media (max-width: 900px) and (min-width: 601px) {
  #title-screen::before {
    background-image: radial-gradient(
      80% 100% at right bottom,
      rgb(0, 0, 0) 0%,
      rgba(0, 0, 0, 0.933) 50%,
      rgba(0, 0, 0, 0.8) 72%,
      rgba(0, 0, 0, 0.6) 85%,
      rgba(0, 0, 0, 0) 100%
    );
  }
  #title-screen .title-copy {
    width: 30vw;
  }
  #title-screen #press-start {
    font-size: clamp(14px, 2.2vw, 19px);
  }
}

@media (max-width: 600px) {
  #title-screen {
    --title-edge: max(
      28px,
      env(safe-area-inset-right),
      env(safe-area-inset-bottom)
    );
    padding-top: 24px;
    padding-left: 28px;
  }
  #title-screen::before {
    background-image: radial-gradient(
      140% 80% at right bottom,
      rgb(0, 0, 0) 0%,
      rgba(0, 0, 0, 0.933) 50%,
      rgba(0, 0, 0, 0.8) 72%,
      rgba(0, 0, 0, 0.6) 85%,
      rgba(0, 0, 0, 0) 100%
    );
  }
  #title-screen .title-copy {
    align-self: flex-end;
  }
}

@media (max-height: 500px) {
  #title-screen {
    padding-top: 18px;
  }
  #title-screen .title-copy h1 {
    margin: 12px 0px 16px;
  }
  #title-screen .title-tagline {
    margin-bottom: 20px;
  }
}

#sunny-hud button:focus-visible,
.sunny-button:focus-visible,
.dialog-close:focus-visible {
  outline: rgb(255, 243, 180) solid 3px;
  outline-offset: 3px;
}

.sunny-button {
  border: 1px solid rgb(228, 185, 106);
  background: linear-gradient(rgb(113, 148, 70), rgb(58, 100, 48));
  color: rgb(255, 245, 206);
  border-radius: 11px;
  min-height: 34px;
  box-shadow:
    rgba(255, 243, 182, 0.3) 0px 1px inset,
    rgba(21, 40, 23, 0.4) 0px 2px 3px;
  transition:
    filter 0.12s,
    transform 0.12s;
}

.sunny-button:active:not(:disabled) {
  transform: translateY(1px);
}

.sunny-button:disabled {
  opacity: 0.48;
}

@keyframes panel-in {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}

@keyframes panel-out {
  0% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
}

#match-report {
  position: fixed;
  inset: 0px;
  z-index: 85;
  box-sizing: border-box;
  padding: clamp(15px, 3vh, 35px) clamp(18px, 5vw, 90px);
  display: flex;
  flex-direction: column;
  gap: 15px;
  background:
    linear-gradient(120deg, rgba(37, 76, 49, 0.97), rgba(16, 62, 48, 0.973)),
    url("../assets/ui/stable-courtyard.webp") center center / cover;
  color: rgb(255, 242, 208);
  font-family: Fredoka, sans-serif;
  animation: 0.18s ease-out 0s 1 normal both running panel-in;
}

#match-report .brand-ball {
  width: 35px;
  height: 35px;
  border: 2px solid rgb(239, 195, 114);
  background: rgb(53, 93, 51);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgb(255, 223, 160);
}

#match-report h1 {
  font-family: Lilita, Fredoka, sans-serif;
  font-size: clamp(27px, 4vw, 54px);
  margin: 4px 0px;
  color: rgb(255, 245, 218);
  line-height: 1.08;
}

#match-report .eyebrow {
  font-size: 12px;
  color: rgb(233, 207, 139);
}

#match-report .report-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(185, 166, 101, 0.2);
  font-size: 13px;
}

#match-report .report-stat-row strong {
  color: rgb(255, 228, 160);
}

@media (max-height: 540px) {
  #sunny-dialog {
    padding: 10px;
    background: rgba(40, 28, 24, 0.25);
    backdrop-filter: blur(2px);
  }
  #match-report {
    padding: 12px 22px;
    gap: 8px;
  }
  #match-report .brand-ball {
    width: 25px;
    height: 25px;
  }
  #match-report h1 {
    font-size: 29px;
  }
  #match-report .eyebrow {
    font-size: 9px;
  }
  #match-report .report-stat-row {
    padding: 6px 0px;
    font-size: 10px;
  }
  #match-report .report-stat-row strong {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sunny-modal-card,
  #match-report,
  #sunny-inspector,
  .closing .sunny-modal-card,
  #match-report.closing {
    animation: auto ease 0s 1 normal none running none !important;
  }
}

#title-screen,
.farm-ui {
  --farm-cream: #fff8e9;
  --farm-gold: #f3c75f;
  --farm-pine: #173f35;
  --farm-green: #2f6950;
  --farm-clay: #bf6848;
  --snooker-ivory: var(--farm-cream);
  --snooker-gold: var(--farm-gold);
  --snooker-ink: var(--farm-pine);
  --snooker-crimson: var(--farm-clay);
  --bp-orange: var(--farm-gold);
  --bp-panel-border: #ebcb8e59;
}

.farm-ui {
  color: var(--farm-cream);
  font-family: "Space Grotesk", sans-serif;
  color-scheme: dark;
}

:is(#cod-lobby, #farm-overview-ui) {
  background:
    linear-gradient(
      rgba(8, 8, 8, 0.6),
      rgba(8, 8, 8, 0.2) 48%,
      rgba(8, 8, 8, 0.533)
    ),
    url("../assets/ui/main-courtyard.webp") center center / cover !important;
}

:is(#cod-lobby, #farm-overview-ui) .bp-brand-dock,
#sunny-dialog .bp-brand-dock {
  border: 0px;
  background: none;
  color: var(--farm-cream);
  gap: 12px;
}

.farm-ui .brand-ball {
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  font:
    700 23px "Barlow Condensed",
    sans-serif;
  border: 1px solid var(--farm-cream) !important;
  background: var(--farm-gold) !important;
  color: var(--farm-pine) !important;
}

:is(#cod-lobby, #farm-overview-ui) .brand-word b,
#sunny-dialog .brand-word b {
  color: var(--farm-gold);
}

:is(#cod-lobby, #farm-overview-ui) .bp-quick-dock {
  background: rgba(17, 17, 17, 0.91);
  border: 1px solid rgba(235, 204, 142, 0.35);
  border-radius: 9px;
}

:is(#cod-lobby, #farm-overview-ui) .bp-header-icon-btn {
  color: rgb(213, 225, 201);
  border-radius: 9px;
}

:is(#cod-lobby, #farm-overview-ui) .bp-header-icon-btn.active,
:is(#cod-lobby, #farm-overview-ui) .bp-header-icon-btn:hover {
  background: var(--farm-gold);
  color: var(--farm-pine);
}

:is(#cod-lobby, #farm-overview-ui) .arena-tabs button,
#sunny-dialog .arena-tabs button {
  font:
    800 17px "Barlow Condensed",
    sans-serif;
  letter-spacing: 1px;
  background: rgba(255, 248, 233, 0.11);
  color: var(--farm-cream);
  border: 0px;
  border-radius: 9px;
  padding: 9px 25px;
  box-shadow: none;
}

:is(#cod-lobby, #farm-overview-ui) .arena-tabs button.selected,
#farm-overview-ui .arena-tabs button[aria-current="page"],
:is(#cod-lobby, #farm-overview-ui) .arena-tabs button:hover,
#sunny-dialog .arena-tabs button[aria-pressed="true"],
#sunny-dialog .arena-tabs button:hover {
  background: var(--farm-gold);
  color: var(--farm-pine);
  box-shadow: none;
}

:is(#cod-lobby, #farm-overview-ui) :is(.lobby-heading, .setup-heading) h1 em {
  color: var(--farm-gold);
}

:is(#cod-lobby, #farm-overview-ui) .arena-grid {
  gap: 8px;
}

:is(#cod-lobby, #farm-overview-ui) .arena-tile {
  border-radius: 9px;
}

:is(#cod-lobby, #farm-overview-ui) .arena-tile:hover {
  box-shadow:
    0 0 0 2px var(--farm-cream),
    0 10px 35px #00000080;
}

:is(#cod-lobby, #farm-overview-ui) :is(.tile-controls, .tile-ai, .tile-rules) {
  background: linear-gradient(135deg, var(--farm-cream), #e9dfbf);
  color: var(--farm-pine);
  border: 0px;
}

:is(#cod-lobby, #farm-overview-ui) :is(.tile-stats, .tile-pass) {
  background: rgba(35, 87, 69, 0.93);
  color: var(--farm-cream);
  border: 1px solid rgba(235, 204, 142, 0.35);
}

:is(#cod-lobby, #farm-overview-ui) #lobby-record {
  color: rgb(199, 199, 199);
}

:is(#cod-lobby, #farm-overview-ui) .tile-hero {
  border: 2px solid var(--farm-cream);
  outline-color: rgba(237, 205, 142, 0.45);
  color: var(--farm-cream);
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.03) 15%,
      rgba(0, 0, 0, 0.086) 48%,
      rgba(0, 0, 0, 0.7)
    ),
    url("../assets/ui/stable-courtyard.webp") 44% center / cover !important;
}

:is(#cod-lobby, #farm-overview-ui) .tile-overline,
#sunny-dialog .tile-overline {
  background: rgba(17, 17, 17, 0.867);
  border: 1px solid rgba(237, 210, 149, 0.5);
  color: var(--farm-cream);
  border-radius: 9px;
  align-self: flex-start;
  padding: 9px 12px;
  font:
    700 9px "Space Grotesk",
    sans-serif;
  letter-spacing: 1.3px;
}

:is(#cod-lobby, #farm-overview-ui) .hero-tile-copy {
  color: var(--farm-cream);
  text-shadow: rgba(0, 0, 0, 0.44) 0px 2px 15px;
}

:is(#cod-lobby, #farm-overview-ui) .hero-tile-copy em,
:is(#cod-lobby, #farm-overview-ui) .poster-copy h2 em {
  color: var(--farm-gold);
}

:is(#cod-lobby, #farm-overview-ui) .arena-footer {
  color: rgb(200, 216, 187);
}

:is(#cod-lobby, #farm-overview-ui) .arena-footer kbd {
  border-color: rgba(237, 210, 149, 0.5);
  color: rgb(236, 240, 219);
}

:is(#cod-lobby, #farm-overview-ui)[data-layout="compact"] button:focus-visible,
.farm-ui button:focus-visible,
.farm-ui input:focus-visible,
.farm-ui label:focus-within {
  outline: currentcolor solid 2px;
  outline-offset: 3px;
}

:is(#cod-lobby, #farm-overview-ui) .tile-stats {
  background: linear-gradient(145deg, rgb(39, 39, 39), rgb(19, 19, 19));
  border-color: rgba(181, 207, 144, 0.314);
}

:is(#cod-lobby, #farm-overview-ui) .tile-pass {
  background: linear-gradient(120deg, rgb(191, 104, 72), rgb(153, 83, 62));
  border-color: rgba(239, 199, 155, 0.333);
}

:is(#cod-lobby, #farm-overview-ui) .tile-rules {
  background: linear-gradient(120deg, rgb(210, 228, 181), rgb(181, 209, 152));
}

:is(#cod-lobby, #farm-overview-ui) .tile-ai {
  background: linear-gradient(135deg, rgb(246, 218, 145), rgb(241, 201, 105));
}

:is(#cod-lobby, #farm-overview-ui)
  :is(.lobby-heading, .setup-heading, .arena-footer) {
  text-shadow: rgba(0, 0, 0, 0.6) 0px 2px 7px;
}

:is(#cod-lobby, #farm-overview-ui)
  :is(.lobby-heading, .setup-heading)
  .eyebrow {
  color: var(--farm-cream);
}

:is(#cod-lobby, #farm-overview-ui) .arena-tabs {
  gap: 5px;
}

:is(#cod-lobby, #farm-overview-ui) .arena-tabs button {
  padding: 9px 20px;
}

#sunny-dialog {
  position: fixed;
  inset: 0px;
  z-index: 85;
  display: block;
  padding: 0px;
  background: rgb(23, 63, 53);
  backdrop-filter: none;
  overscroll-behavior: contain;
}

#sunny-dialog .farm-screen,
#farm-overview-ui .farm-screen,
#match-report {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(
      rgba(8, 8, 8, 0.6),
      rgba(8, 8, 8, 0.2) 48%,
      rgba(8, 8, 8, 0.533)
    ),
    url("../assets/ui/main-courtyard.webp") center center / cover fixed;
  color: var(--farm-cream);
  font-family: "Space Grotesk", sans-serif;
  animation: auto ease 0s 1 normal none running none;
}

#match-report {
  height: 100dvh;
  overflow: auto;
}

#sunny-dialog .farm-screen > *,
#farm-overview-ui .farm-screen > *,
#match-report > * {
  flex-shrink: 0;
}

:is(#sunny-dialog, #match-report) :is(h1, h2, h3) {
  font-weight: 800;
  text-transform: uppercase;
  font-style: normal;
  line-height: 1.05;
  margin: 0px;
  font-family: "Barlow Condensed", sans-serif !important;
  letter-spacing: 0.4px !important;
}

:is(#sunny-dialog, #match-report) h1 {
  font-size: clamp(32px, 3.7vw, 52px);
  color: var(--farm-cream);
  text-shadow: rgba(0, 0, 0, 0.533) 0px 2px 10px;
}

:is(#sunny-dialog, #match-report) .bp-header-strip {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0px auto;
  pointer-events: auto;
}

:is(#sunny-dialog, #match-report) .bp-brand-dock {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0px;
  background: none;
  color: var(--farm-cream);
  padding: 0px;
  cursor: pointer;
  text-shadow: rgba(0, 0, 0, 0.6) 0px 2px 8px;
}

:is(#sunny-dialog, #match-report) .brand-word {
  font:
    700 19px / 1 "Barlow Condensed",
    sans-serif;
  text-align: left;
  text-transform: uppercase;
}

:is(#sunny-dialog, #match-report) .brand-word b {
  display: block;
  font:
    800 25px / 1.1 "Barlow Condensed",
    sans-serif;
  color: var(--farm-gold);
}

:is(#sunny-dialog, #match-report) .farm-hub-wallet {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

:is(#sunny-dialog, #match-report) .farm-wallet-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-width: 1px;
  border-style: solid;
  border-image: none;
  border-radius: 9px;
}

:is(#sunny-dialog, #match-report) .farm-wallet-item > span {
  font-size: 8px;
  text-transform: uppercase;
}

:is(#sunny-dialog, #match-report) .farm-wallet-item b {
  display: block;
  color: var(--farm-cream);
  font:
    800 22px / 1.1 "Barlow Condensed",
    sans-serif;
  margin-top: 2px;
}

:is(#sunny-dialog, #match-report) .arena-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-self: center;
  gap: 5px;
  margin: 0px;
  padding: 0px;
  max-width: 100%;
  width: auto;
}

:is(#sunny-dialog, #match-report) .arena-tabs button {
  background: rgba(16, 44, 35, 0.7);
  color: var(--farm-cream);
  font:
    800 16px "Barlow Condensed",
    sans-serif;
  letter-spacing: 1px;
  border: 1px solid rgba(255, 248, 233, 0.17);
  border-radius: 9px;
  padding: 10px 22px;
  min-height: 40px;
  box-shadow: none;
}

:is(#sunny-dialog, #match-report) .arena-tabs button[aria-current="page"],
:is(#sunny-dialog, #match-report) .arena-tabs button:hover {
  background: var(--farm-gold);
  color: var(--farm-pine);
  border-color: var(--farm-gold);
}

:is(#sunny-dialog, #match-report) .farm-page-body {
  display: flex;
  flex-direction: column;
  max-width: 1320px;
  width: 100%;
}

:is(#sunny-dialog, #match-report) .lobby-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 4px 0px;
}

:is(#sunny-dialog, #match-report) .lobby-heading h1 {
  text-align: right;
}

:is(#sunny-dialog, #match-report) .eyebrow {
  font:
    700 9px "Space Grotesk",
    sans-serif;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  text-shadow: rgb(0, 0, 0) 0px 2px 7px;
  color: var(--farm-cream);
}

:is(#sunny-dialog, #match-report) .arena-tile {
  border: 1px solid rgba(255, 248, 233, 0.22);
  border-radius: 12px;
  min-width: 0px;
  padding: 22px;
  box-sizing: border-box;
  cursor: default;
  overflow: visible;
  box-shadow: rgba(22, 37, 27, 0.157) 0px 8px 24px;
  transition: none;
}

:is(#sunny-dialog, #match-report) .arena-tile:hover {
  transform: none;
  box-shadow: rgba(22, 37, 27, 0.157) 0px 8px 24px;
  z-index: auto;
}

:is(#sunny-dialog, #match-report) .tile-cream {
  background: linear-gradient(135deg, var(--farm-cream), #ece9d4);
  color: var(--farm-pine);
  color-scheme: light;
}

:is(#sunny-dialog, #match-report) .tile-charcoal {
  background: linear-gradient(145deg, rgb(41, 46, 41), rgb(21, 25, 22));
  color: var(--farm-cream);
  color-scheme: dark;
}

:is(#sunny-dialog, #match-report) .tile-gold {
  background: linear-gradient(135deg, rgb(247, 223, 160), rgb(242, 200, 106));
  color: var(--farm-pine);
  color-scheme: light;
}

:is(#sunny-dialog, #match-report) .tile-clay {
  background: linear-gradient(130deg, rgb(191, 104, 72), rgb(166, 88, 64));
  color: var(--farm-cream);
  color-scheme: dark;
}

:is(#sunny-dialog, #match-report) .tile-sage {
  background: linear-gradient(135deg, rgb(213, 231, 188), rgb(184, 212, 159));
  color: var(--farm-pine);
  color-scheme: light;
}

:is(#sunny-dialog, #match-report) .farm-panel {
  display: flex;
  flex-direction: column;
  text-align: left;
}

:is(#sunny-dialog, #match-report) .farm-panel h2 {
  line-height: 1;
}

:is(#sunny-dialog, #match-report) .farm-panel p {
  font-size: 12px;
  line-height: 1.65;
  margin: 0px;
  opacity: 0.88;
}

:is(#sunny-dialog, #match-report) .arena-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 0px auto;
  padding: 0px;
  max-width: 1320px;
  width: 100%;
  color: var(--farm-cream);
  font:
    500 8px "Space Grotesk",
    sans-serif;
  letter-spacing: 1px;
  text-shadow: rgb(0, 0, 0) 0px 2px 7px;
}

.farm-ui kbd {
  background: none;
  color: inherit;
  border: 1px solid rgba(237, 210, 149, 0.5);
  border-radius: 6px;
  font:
    500 9px "Space Grotesk",
    sans-serif;
  padding: 3px 5px;
}

.farm-ui h1:focus {
  outline: none;
}

:is(#sunny-dialog, #match-report) .sunny-button,
#sunny-inspector .sunny-button,
#sunny-placement button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.208);
  border-radius: 8px;
  background: var(--farm-green);
  color: var(--farm-cream);
  padding: 10px 13px;
  min-height: 40px;
  font:
    600 12px / 1.3 "Space Grotesk",
    sans-serif;
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
  white-space: normal;
  transition:
    background 0.15s,
    color 0.15s;
}

:is(#sunny-dialog, #match-report) .sunny-button:hover:not(:disabled),
#sunny-inspector .sunny-button:hover:not(:disabled) {
  background: var(--farm-gold);
  color: var(--farm-pine);
  filter: none;
}

:is(#sunny-dialog, #match-report)
  :is(.tile-gold, .tile-sage, .tile-cream)
  .sunny-button:hover:not(:disabled) {
  background: var(--farm-pine);
  color: var(--farm-cream);
}

:is(#sunny-dialog, #match-report) .sunny-button:disabled {
  cursor: default;
}

:is(#sunny-dialog, #match-report) .farm-detail-row,
#match-report .report-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  line-height: 1.5;
  padding: 10px 0px;
  border-bottom: 1px solid rgba(108, 135, 86, 0.26);
  border-top-color: rgba(108, 135, 86, 0.26);
  border-right-color: rgba(108, 135, 86, 0.26);
  border-left-color: rgba(108, 135, 86, 0.26);
  color: inherit;
}

:is(#sunny-dialog, #match-report) .farm-detail-row strong,
#match-report .report-stat-row strong {
  font:
    700 17px / 1.2 "Barlow Condensed",
    sans-serif;
  text-align: right;
  color: inherit;
}

:is(#sunny-dialog, #match-report)
  :is(.tile-charcoal, .tile-clay)
  :is(.farm-detail-row, .report-stat-row) {
  border-color: rgba(255, 248, 233, 0.192);
}

#sunny-dialog input[type="range"] {
  width: 47%;
  min-height: 26px;
  cursor: pointer;
}

#match-report .report-stat-row {
  padding: 8px 0px;
}

#match-report .report-stat-row strong {
  font-size: 22px;
}

@media (max-width: 1100px) {
  :is(#sunny-dialog, #match-report) .arena-tile {
    padding: 18px;
  }
  :is(#sunny-dialog, #match-report) .farm-panel h2 {
    font-size: 23px;
  }
  :is(#sunny-dialog, #match-report) .arena-tabs button {
    padding: 10px 18px;
  }
}

@media (max-width: 900px) and (min-width: 761px) {
  :is(#sunny-dialog, #match-report) .farm-screen,
  #match-report {
    padding: 22px 3vw;
  }
}

@media (max-width: 760px) {
  :is(#cod-lobby, #farm-overview-ui) .arena-tabs {
    gap: 4px;
    flex-wrap: wrap;
    width: 100%;
  }
  :is(#cod-lobby, #farm-overview-ui) .arena-tabs button {
    flex: 1 1 28%;
    min-width: 0px;
    padding: 9px 5px;
    font-size: 15px;
  }
  :is(#sunny-dialog, #match-report) .bp-header-strip {
    flex-wrap: wrap;
  }
  :is(#sunny-dialog, #match-report) .farm-hub-wallet {
    width: 100%;
    gap: 6px;
  }
  :is(#sunny-dialog, #match-report) .farm-wallet-item {
    flex: 1 1 0%;
  }
  :is(#sunny-dialog, #match-report) .arena-tabs {
    width: 100%;
  }
  :is(#sunny-dialog, #match-report) .arena-tabs button {
    flex: 1 1 28%;
  }
  :is(#sunny-dialog, #match-report) .lobby-heading {
    display: block;
  }
  :is(#sunny-dialog, #match-report) .lobby-heading h1 {
    text-align: left;
  }
  :is(#sunny-dialog, #match-report) .farm-panel h2 {
    font-size: 24px;
  }
  :is(#sunny-dialog, #match-report) .farm-panel p {
    font-size: 12px;
  }
  :is(#sunny-dialog, #match-report) .arena-footer {
    font-size: 7px;
    letter-spacing: 0.3px;
  }
}

@media (max-width: 360px) {
  :is(#sunny-dialog, #match-report) .farm-wallet-item {
    gap: 3px;
  }
}

@media (max-height: 540px) and (min-width: 761px) {
  #sunny-dialog .farm-screen,
  #farm-overview-ui .farm-screen,
  #match-report {
    padding: 16px 4vw;
    gap: 15px;
  }
  :is(#sunny-dialog, #match-report) .lobby-heading h1 {
    font-size: 34px;
  }
  :is(#sunny-dialog, #match-report) .brand-word {
    font-size: 14px;
  }
  :is(#sunny-dialog, #match-report) .brand-word b {
    font-size: 21px;
  }
  :is(#sunny-dialog, #match-report) .arena-tabs button {
    font-size: 14px;
    padding: 8px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .farm-ui * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

#sunny-dialog {
  overflow: hidden;
}

#sunny-dialog .farm-screen,
#farm-overview-ui .farm-screen,
#match-report {
  height: 100dvh;
  min-height: 0px;
  overflow: hidden;
  padding: clamp(12px, 2.5vh, 24px) 4vw;
  gap: clamp(8px, 1.5vh, 16px);
}

:is(#sunny-dialog, #match-report) .farm-page-body {
  flex: 1 1 0px;
  min-height: 0px;
  margin: 0px auto;
  gap: 12px;
}

:is(#sunny-dialog, #match-report) .farm-page-body > * {
  flex-shrink: 0;
}

:is(#sunny-dialog, #match-report) .farm-panel {
  gap: 12px;
}

:is(#sunny-dialog, #match-report) .farm-panel h2 {
  font-size: clamp(22px, 2.2vw, 28px);
}

:is(#sunny-dialog, #match-report, :is(#cod-lobby, #farm-overview-ui))
  .farm-slider-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  flex-shrink: 0;
  min-height: 40px;
  padding: 0px;
  margin: 0px;
}

:is(#sunny-dialog, #match-report, :is(#cod-lobby, #farm-overview-ui))
  .farm-slider-controls
  > .sunny-button {
  min-width: 40px;
  min-height: 40px;
  padding: 8px;
  font-size: 18px;
}

:is(#sunny-dialog, #match-report, :is(#cod-lobby, #farm-overview-ui))
  .farm-slider-controls
  > .sunny-button:disabled {
  opacity: 0.35;
  cursor: default;
}

:is(#sunny-dialog, #match-report, :is(#cod-lobby, #farm-overview-ui))
  .farm-slide-status {
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

:is(#sunny-dialog, #match-report, :is(#cod-lobby, #farm-overview-ui))
  .farm-slide-count {
  font-style: normal;
  font-variant: tabular-nums;
  font-size-adjust: none;
  font-language-override: normal;
  font-kerning: auto;
  font-optical-sizing: auto;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-weight: 700;
  font-stretch: normal;
  font-size: 12px;
  line-height: normal;
  font-family: "Space Grotesk", sans-serif;
  color: var(--farm-cream);
}

:is(#sunny-dialog, #match-report, :is(#cod-lobby, #farm-overview-ui))
  .farm-slide-dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  height: 14px;
}

:is(#sunny-dialog, #match-report, :is(#cod-lobby, #farm-overview-ui))
  .farm-slide-dots
  [data-slide-dot] {
  padding: 3px;
  border: 0px;
  border-radius: 50%;
  background: transparent;
  min-height: 14px;
  min-width: 12px;
  width: 12px;
  height: 14px;
  box-shadow: none;
}

:is(#sunny-dialog, #match-report, :is(#cod-lobby, #farm-overview-ui))
  .farm-slide-dots
  [data-slide-dot]::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 248, 233, 0.36);
}

:is(#sunny-dialog, #match-report, :is(#cod-lobby, #farm-overview-ui))
  .farm-slide-dots
  [aria-pressed="true"]::after {
  background: var(--farm-gold);
}

@media (max-width: 760px) {
  #sunny-dialog .farm-screen,
  #farm-overview-ui .farm-screen,
  #match-report {
    height: 100dvh;
    min-height: 0px;
    padding: max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom));
    gap: 10px;
    overflow: hidden;
  }
  :is(#sunny-dialog, #match-report) .bp-header-strip {
    gap: 8px;
  }
  :is(#sunny-dialog, #match-report) .brand-ball {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
  :is(#sunny-dialog, #match-report) .bp-brand-dock {
    gap: 8px;
  }
  :is(#sunny-dialog, #match-report) .brand-word {
    font-size: 12px;
  }
  :is(#sunny-dialog, #match-report) .brand-word b {
    font-size: 17px;
  }
  :is(#sunny-dialog, #match-report) .farm-wallet-item {
    padding: 5px 7px;
    gap: 7px;
  }
  :is(#sunny-dialog, #match-report) .farm-wallet-item b {
    font-size: 18px;
  }
  :is(#sunny-dialog, #match-report) .arena-tabs {
    gap: 4px;
  }
  :is(#sunny-dialog, #match-report) .farm-page-body {
    gap: 10px;
  }
  :is(#sunny-dialog, #match-report) .lobby-heading {
    padding: 0px;
  }
  :is(#sunny-dialog, #match-report) .lobby-heading .eyebrow {
    font-size: 8px;
  }
  :is(#sunny-dialog, #match-report) .lobby-heading h1 {
    font-size: 28px;
    line-height: 1;
    margin-top: 5px;
  }
  :is(#sunny-dialog, #match-report) .arena-footer {
    display: none;
  }
}

@media (max-height: 570px) and (min-width: 480px) {
  #sunny-dialog .farm-screen,
  #farm-overview-ui .farm-screen,
  #match-report {
    height: 100dvh;
    padding: 10px 3vw;
    gap: 8px;
    overflow: hidden;
  }
  :is(#sunny-dialog, #match-report) .bp-header-strip {
    display: contents;
  }
  :is(#sunny-dialog, #match-report) .bp-brand-dock {
    display: none;
  }
  #sunny-dialog .farm-screen,
  #farm-overview-ui .farm-screen {
    position: relative;
  }
  :is(#sunny-dialog, #match-report) .farm-hub-wallet {
    position: absolute;
    top: 45px;
    left: 3vw;
    gap: 4px;
    width: auto;
    max-width: 44%;
    flex-wrap: nowrap;
  }
  :is(#sunny-dialog, #match-report) .farm-wallet-item {
    padding: 3px 5px;
    gap: 4px;
    min-width: 0px;
  }
  :is(#sunny-dialog, #match-report) .farm-wallet-item > span {
    font-size: 0px;
  }
  :is(#sunny-dialog, #match-report) .farm-wallet-item b {
    font-size: 16px;
    margin: 0px;
  }
  :is(#sunny-dialog, #match-report) .arena-footer {
    display: none;
  }
  :is(#sunny-dialog, #match-report) .arena-tabs {
    gap: 4px;
    flex-wrap: nowrap;
    width: auto;
  }
  :is(#sunny-dialog, #match-report) .arena-tabs button {
    padding: 6px 16px;
    font-size: 13px;
    min-height: 30px;
  }
  :is(#sunny-dialog, #match-report) .farm-page-body {
    gap: 8px;
  }
  :is(#sunny-dialog, #match-report) .lobby-heading {
    display: flex;
    align-items: center;
    padding: 0px;
  }
  :is(#sunny-dialog, #match-report) .lobby-heading h1 {
    font-size: 27px;
    margin: 0px 0px 0px auto;
    text-align: right;
    max-width: 55%;
  }
  :is(#sunny-dialog, #match-report) .lobby-heading .eyebrow {
    visibility: hidden;
  }
  :is(#sunny-dialog, #match-report) .eyebrow {
    font-size: 8px;
  }
  :is(#sunny-dialog, #match-report, :is(#cod-lobby, #farm-overview-ui))
    .farm-slider-controls {
    min-height: 36px;
  }
  :is(#sunny-dialog, #match-report, :is(#cod-lobby, #farm-overview-ui))
    .farm-slider-controls
    > .sunny-button {
    min-height: 36px;
  }
}

@media (max-height: 400px) and (min-width: 480px) {
  #sunny-dialog .farm-screen,
  #farm-overview-ui .farm-screen,
  #match-report {
    padding: 8px 3vw;
    gap: 6px;
  }
  :is(#sunny-dialog, #match-report) .farm-page-body {
    gap: 6px;
  }
}

#title-screen {
  background: url("../assets/ui/loader-stable.webp") center center / cover
    no-repeat rgb(0, 0, 0);
  color: var(--farm-cream);
}

#title-screen .title-copy {
  width: clamp(280px, 28vw, 440px);
}

#title-screen .title-copy h1 {
  font-size: clamp(45px, 5.8vw, 94px);
  color: var(--farm-cream);
}

#title-screen .title-copy :is(h1 em, .eyebrow),
#title-screen .loading-caption {
  color: var(--farm-gold);
}

#title-screen .title-tagline {
  color: rgb(223, 235, 207);
  line-height: 1.6;
}

#title-screen .loading-track {
  height: 6px;
  border-radius: 6px;
  background: rgba(215, 227, 184, 0.24);
  overflow: hidden;
}

#title-screen #loading-fill {
  background: var(--farm-gold);
  border-radius: inherit;
}

#title-screen #loading-error {
  color: rgb(255, 226, 183);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 600px) {
  #title-screen {
    background-position: 40% center;
  }
  #title-screen .title-copy {
    width: min(100%, 380px);
  }
  #title-screen .title-copy h1 {
    font-size: clamp(38px, 12vw, 64px);
  }
}

@media (max-height: 500px) {
  #title-screen .title-copy h1 {
    font-size: clamp(28px, 9vh, 48px);
  }
}

.farm-ui {
  --farm-cream-surface: linear-gradient(135deg, var(--farm-cream), #e9dfbf);
  --farm-charcoal-surface: linear-gradient(145deg, #272727, #131313);
  --farm-gold-surface: linear-gradient(135deg, #f6da91, #f1c969);
  --farm-clay-surface: linear-gradient(120deg, #bf6848, #99533e);
  --farm-sage-surface: linear-gradient(120deg, #d2e4b5, #b5d198);
  --farm-tab-surface: #fff8e91c;
}

:is(:is(#cod-lobby, #farm-overview-ui), #sunny-dialog, #match-report)
  .tile-cream {
  background: var(--farm-cream-surface);
  color: var(--farm-pine);
}

:is(:is(#cod-lobby, #farm-overview-ui), #sunny-dialog, #match-report)
  .tile-charcoal {
  background: var(--farm-charcoal-surface);
  color: var(--farm-cream);
}

:is(:is(#cod-lobby, #farm-overview-ui), #sunny-dialog, #match-report)
  .tile-gold {
  background: var(--farm-gold-surface);
  color: var(--farm-pine);
}

:is(:is(#cod-lobby, #farm-overview-ui), #sunny-dialog, #match-report)
  .tile-clay {
  background: var(--farm-clay-surface);
  color: var(--farm-cream);
}

:is(:is(#cod-lobby, #farm-overview-ui), #sunny-dialog, #match-report)
  .tile-sage {
  background: var(--farm-sage-surface);
  color: var(--farm-pine);
}

.farm-ui button,
.farm-ui .sunny-button,
#photo-exit {
  font-family: "Barlow Condensed", sans-serif !important;
  font-weight: 800 !important;
}

.farm-ui .sunny-button,
.farm-ui .bp-deploy-btn,
.farm-ui .text-button {
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  font-family: "Barlow Condensed", sans-serif !important;
}

:is(#sunny-dialog, #match-report) .sunny-button,
:is(#cod-lobby, #farm-overview-ui) .setup-slide-bottom .sunny-button {
  background: var(--farm-gold);
  border-color: transparent;
  color: var(--farm-pine);
  font-size: 16px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

:is(#sunny-dialog, #match-report)
  :is(.tile-gold, .tile-sage, .tile-cream)
  .sunny-button {
  background: rgb(32, 32, 32);
  color: var(--farm-cream);
}

:is(#sunny-dialog, #match-report) .sunny-button:hover:not(:disabled),
:is(#cod-lobby, #farm-overview-ui)
  .setup-slide-bottom
  .sunny-button:hover:not(:disabled) {
  background: var(--farm-cream);
  color: var(--farm-pine);
}

:is(#sunny-dialog, #match-report) .sunny-button:disabled {
  background: rgba(121, 118, 107, 0.2);
  color: inherit;
  border-color: currentcolor;
  opacity: 0.5;
}

:is(#sunny-dialog, #match-report) .arena-tabs button,
#sunny-dialog :is(.market-tabs, .farm-service-tabs) .sunny-button,
#match-report .farm-pause-links button {
  background: var(--farm-tab-surface);
  color: var(--farm-cream);
  border: 0px;
  box-shadow: none;
  font:
    800 17px / 1.1 "Barlow Condensed",
    sans-serif;
  letter-spacing: 1px;
  padding: 9px 20px;
  min-height: 38px;
  border-radius: 9px;
}

:is(#sunny-dialog, #match-report) .arena-tabs button[aria-current="page"],
:is(#sunny-dialog, #match-report) .arena-tabs button:hover,
#sunny-dialog .market-tabs [aria-pressed="true"],
#sunny-dialog .farm-service-tabs [aria-current="page"],
#sunny-dialog :is(.market-tabs, .farm-service-tabs) .sunny-button:hover,
#match-report .farm-pause-links button:hover {
  background: var(--farm-gold);
  color: var(--farm-pine);
}

:is(#sunny-dialog, #match-report) .bp-header-strip {
  max-width: none;
  min-height: 42px;
}

:is(#sunny-dialog, #match-report) .farm-wallet-item {
  background: rgba(17, 17, 17, 0.875);
  border-color: rgba(235, 204, 142, 0.35);
}

:is(#sunny-dialog, #match-report) .farm-wallet-item > span {
  color: var(--farm-cream);
}

:is(#sunny-dialog, #match-report) .farm-page-body,
:is(#sunny-dialog, #match-report) .farm-page-bottom,
:is(#sunny-dialog, #match-report) .arena-footer,
:is(#cod-lobby, #farm-overview-ui) .setup-slide-bottom {
  max-width: 1160px;
}

:is(#sunny-dialog, #match-report) .lobby-heading h1 {
  font-size: clamp(26px, 3vw, 44px);
  line-height: 0.98;
}

:is(#sunny-dialog, #match-report) .farm-panel {
  justify-content: space-between;
}

:is(#sunny-dialog, #match-report) .farm-detail-row,
#match-report .report-stat-row,
#sunny-dialog .settings-fields label {
  border-color: rgba(32, 32, 32, 0.14);
}

:is(#sunny-dialog, #match-report)
  :is(.tile-charcoal, .tile-clay)
  :is(.farm-detail-row, .report-stat-row, .settings-fields label) {
  border-color: rgba(255, 248, 233, 0.19);
}

#sunny-dialog input {
  accent-color: var(--farm-gold);
}

@media (min-width: 901px) and (min-height: 720px) {
  #sunny-dialog .farm-screen,
  #farm-overview-ui .farm-screen,
  #match-report {
    padding: clamp(12px, 2.4vh, 26px) 5vw;
    gap: clamp(8px, 1.8vh, 18px);
  }
  :is(#sunny-dialog, #match-report) .farm-page-body {
    flex: 1 1 0px;
    justify-content: center;
    gap: 12px;
    max-height: 628px;
    margin: auto;
  }
  :is(#sunny-dialog, #match-report)
    .farm-page-body:not(
      :has(> .market-tabs, > .farm-service-tabs, > .farm-pause-links)
    ) {
    max-height: 576px;
  }
}

@media (max-width: 760px) {
  :is(#sunny-dialog, #match-report) .arena-tabs button {
    font-size: 14px;
    padding: 7px 5px;
    min-height: 32px;
  }
}

:is(#sunny-dialog, #match-report) .farm-menu-footer {
  display: grid;
  grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr);
  align-items: end;
  gap: 16px;
  flex: 0 0 auto;
  min-height: 40px;
  width: 100%;
  max-width: none;
  margin: 0px;
  padding: 0px;
  color: rgb(200, 216, 187);
  font:
    500 8px / 1.4 "Space Grotesk",
    sans-serif;
  letter-spacing: 1px;
  text-shadow: rgba(0, 0, 0, 0.6) 0px 2px 7px;
}

:is(#sunny-dialog, #match-report) .farm-footer-start {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0px;
  min-height: 20px;
  justify-self: start;
}

:is(#sunny-dialog, #match-report) .farm-footer-select {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font: inherit;
  letter-spacing: inherit;
}

:is(#sunny-dialog, #match-report) .farm-footer-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 0px;
  border-radius: 0px;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  padding: 0px;
  min-height: 20px;
  cursor: pointer;
  white-space: nowrap;
}

:is(#sunny-dialog, #match-report) .farm-footer-back:hover {
  color: var(--farm-gold);
}

:is(#sunny-dialog, #match-report) .farm-footer-back > span {
  font: inherit;
  letter-spacing: inherit;
}

:is(#sunny-dialog, #match-report) .farm-menu-footer kbd {
  margin: 0px;
  color: rgb(236, 240, 219);
  border-color: rgba(237, 210, 149, 0.5);
}

:is(#sunny-dialog, #match-report) .farm-footer-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-self: end;
  gap: 6px;
  min-width: 0px;
}

:is(#sunny-dialog, #match-report) .farm-footer-brand {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

:is(#sunny-dialog, #match-report) .farm-footer-brand b {
  color: rgba(237, 210, 149, 0.5);
}

:is(#sunny-dialog, #match-report) .farm-menu-footer .farm-slider-controls {
  grid-column: 2;
  justify-self: center;
}

@media (min-width: 901px) and (min-height: 720px) {
  :is(#sunny-dialog, #match-report) .farm-menu-footer {
    min-height: 72px;
  }
}

@media (max-width: 760px) {
  :is(#sunny-dialog, #match-report) .farm-menu-footer {
    grid-template-columns: auto minmax(0px, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 8px;
  }
  :is(#sunny-dialog, #match-report) .farm-menu-footer .farm-footer-select,
  :is(#sunny-dialog, #match-report) .farm-menu-footer .farm-footer-brand {
    display: none;
  }
}

@media (max-height: 570px) and (min-width: 480px) {
  :is(#sunny-dialog, #match-report) .farm-menu-footer {
    min-height: 36px;
  }
  :is(#sunny-dialog, #match-report) .farm-menu-footer .farm-footer-select {
    display: none;
  }
}

@keyframes farm-button-spin {
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 360px), (max-height: 360px) {
  :is(#sunny-dialog, #match-report) {
    max-width: 100vw;
    max-height: 100dvh;
    overflow: auto;
  }
  :is(#sunny-dialog, #match-report) .farm-screen {
    min-width: 0px;
  }
  :is(#sunny-dialog, #match-report) .farm-page-body {
    min-width: 0px;
    overflow: auto;
  }
  :is(#sunny-dialog, #match-report) .farm-menu-footer {
    flex-wrap: wrap;
    gap: 8px;
  }
}

:is(#cod-lobby, #sunny-dialog, #match-report)
  :is(button, a, [data-action], label.import-save) {
  cursor: pointer;
}

:is(#cod-lobby, #sunny-dialog, #match-report) button:disabled {
  cursor: default;
}

#title-screen .loading-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}

#title-screen .loading-bar-row .loading-track {
  flex: 1 1 0%;
  min-width: 0px;
  margin: 0px;
}

#title-screen #loading-percent {
  display: block;
  flex: 0 0 36px;
  color: var(--farm-gold);
  font-style: normal;
  font-variant: tabular-nums;
  font-size-adjust: none;
  font-language-override: normal;
  font-kerning: auto;
  font-optical-sizing: auto;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-weight: 700;
  font-stretch: normal;
  font-size: 11px;
  line-height: 1;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: 0.3px;
  text-align: right;
}

/* Lobby cards pair existing illustrations with live, useful riding details. */
#cod-lobby .tile-hero > .hero-tile-copy {
  margin-top: auto;
}

#cod-lobby .home-card-detail {
  display: none;
}

#cod-lobby .arena-tile > .home-card-meta {
  position: relative;
  z-index: 2;
  display: block;
  font:
    600 8px/1.45 "Space Grotesk",
    sans-serif;
  letter-spacing: 0.55px;
  color: var(--farm-cream);
  text-shadow: 0 1px 5px #000;
  margin-top: 7px;
  padding-right: 17px;
}

#cod-lobby .home-card-heading {
  display: block;
  position: relative;
  z-index: 2;
}

@media (min-width: 901px) and (min-height: 720px) {
  #cod-lobby .arena-grid > :not(.journey) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    gap: 12px;
    text-align: left;
    padding: 22px;
  }
  #cod-lobby .arena-grid > :not(.journey)::before {
    background: linear-gradient(
      180deg,
      #07171032,
      #07171088 30%,
      #08120ced 67%,
      #08120cf8
    ) !important;
  }
  #cod-lobby .arena-grid > :not(.journey) .home-card-art {
    object-position: 62% 30%;
  }
  #cod-lobby .arena-tile > .home-card-detail {
    position: relative;
    z-index: 2;
    display: flex;
    color: var(--farm-cream);
    text-shadow: 0 1px 4px #000;
  }
  #cod-lobby .arena-tile > .home-card-meta {
    margin: 0;
    font-size: 8px;
  }
  #cod-lobby .home-card-heading strong {
    font-size: 32px;
    margin-top: 5px;
    line-height: 1;
  }
  #cod-lobby .home-card-heading small {
    font-size: 7px;
    letter-spacing: 1.2px;
  }
  #cod-lobby .home-control-keys {
    flex-direction: column;
    gap: 7px;
    border-top: 1px solid #f6d48140;
    padding-top: 10px;
  }
  #cod-lobby .home-control-keys > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font:
      500 9px "Space Grotesk",
      sans-serif;
    letter-spacing: 0.7px;
  }
  #cod-lobby .home-control-keys kbd {
    font:
      700 9px "Space Grotesk",
      sans-serif;
    min-width: 20px;
    display: inline-block;
    text-align: center;
    background: #fff8e912;
    border: 1px solid #f0d99b80;
    padding: 3px 5px;
    border-radius: 4px;
  }
  #cod-lobby .home-metrics {
    gap: 12px;
    padding: 10px 0;
    border-block: 1px solid #f6d48140;
  }
  #cod-lobby .home-metrics > span {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
  }
  #cod-lobby .home-metrics b {
    font:
      800 34px/0.95 "Barlow Condensed",
      sans-serif;
    color: var(--farm-gold);
  }
  #cod-lobby .home-metrics small {
    font:
      600 8px "Space Grotesk",
      sans-serif;
    letter-spacing: 0.7px;
  }
  #cod-lobby .home-progress {
    flex-direction: column;
    gap: 7px;
  }
  #cod-lobby .home-progress > span {
    display: flex;
    justify-content: space-between;
    font:
      500 7px "Space Grotesk",
      sans-serif;
    letter-spacing: 0.3px;
  }
  #cod-lobby .home-progress-bar,
  #cod-lobby .home-energy {
    height: 4px;
    background: #fff8e925;
    border-radius: 4px;
    overflow: hidden;
  }
  #cod-lobby .home-progress-bar,
  #cod-lobby .home-energy > progress {
    appearance: none;
    display: block;
    width: 100%;
    border: 0;
    background: #fff8e925;
  }
  #cod-lobby .home-energy > progress {
    height: 100%;
  }
  #cod-lobby .home-progress-bar::-webkit-progress-bar,
  #cod-lobby .home-energy > progress::-webkit-progress-bar {
    border-radius: 4px;
    background: #fff8e925;
  }
  #cod-lobby .home-progress-bar::-webkit-progress-value,
  #cod-lobby .home-energy > progress::-webkit-progress-value,
  #cod-lobby .home-progress-bar::-moz-progress-bar,
  #cod-lobby .home-energy > progress::-moz-progress-bar {
    background: var(--farm-gold);
  }
  #cod-lobby .home-rider {
    flex-direction: column;
    gap: 5px;
    border-top: 1px solid #f6d48140;
    padding-top: 12px;
  }
  #cod-lobby .home-rider > b {
    font:
      800 29px/0.95 "Barlow Condensed",
      sans-serif;
    color: var(--farm-gold);
  }
  #cod-lobby .home-rider > small {
    font:
      500 10px "Space Grotesk",
      sans-serif;
    text-transform: none;
    letter-spacing: 0;
  }
  #cod-lobby .home-rider > span {
    font:
      600 8px "Space Grotesk",
      sans-serif;
    margin-top: 4px;
  }
  #cod-lobby .arena-grid > :is(.tile-pass, .tile-rules) {
    gap: 8px;
    padding: 18px 22px;
  }
  #cod-lobby :is(.tile-pass, .tile-rules) .home-card-heading strong {
    font-size: 26px;
  }
}

@media (max-width: 900px), (max-height: 719px) {
  #cod-lobby .arena-tile > .home-card-meta {
    font-size: 6px;
    letter-spacing: 0;
    line-height: 1.2;
    margin-top: 4px;
  }
  #cod-lobby .tile-ai > .home-card-meta {
    display: none;
  }
  #cod-lobby .tile-stats #lobby-record {
    font-size: 6px;
  }
  #cod-lobby
    .arena-grid
    > :is(.tile-controls, .tile-stats, .tile-pass, .tile-rules) {
    gap: 0;
  }
  #cod-lobby :is(.tile-pass, .tile-rules) .home-card-heading strong {
    font-size: clamp(16px, 2.5vw, 23px);
    line-height: 1;
    margin-top: 3px;
  }
  #cod-lobby :is(.tile-pass, .tile-rules) .home-card-heading small {
    line-height: 1.2;
  }
}

@media (max-height: 570px) and (min-width: 480px) {
  #cod-lobby[data-layout="compact"]
    :is(.tile-pass, .tile-rules)
    .home-card-heading
    strong {
    font-size: 18px;
    margin-top: 2px;
  }
  #cod-lobby[data-layout="compact"] :is(.tile-pass, .tile-rules) {
    padding-block: 4px;
  }
  #cod-lobby .arena-tile > .home-card-meta {
    margin-top: 2px;
  }
}