@font-face {
  font-family: Anton;
  src: url('../assets/fonts/Anton-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: Oswald;
  src: url('../assets/fonts/Oswald-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Oswald;
  src: url('../assets/fonts/Oswald-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
:root {
  --ink: #171c1b;
  --muted: #635b48;
  --paper: #f4e4bf;
  --cream: #f7edda;
  --red: #b72b23;
  --red-dark: #861e19;
  --teal: #126375;
  --gold: #e4b650;
  --good: #156c56;
  --bad: #a5261f;
  --line: #292b22;
  --header: 62px;
  --nav: 72px;
  --gap: 10px;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
html,body {
  margin: 0;
  height: 100%;
}
body {
  font: 500 16px/1.35 Oswald,'Arial Narrow',sans-serif;
  color: var(--ink);
  background: #10191c url('../assets/ui/arena.webp') center/cover fixed no-repeat;
}
body:before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(7,15,18,.36);
  pointer-events: none;
}
button,input,select {
  font: inherit;
  color: inherit;
}
button,a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: .5;
}
button:hover:not(:disabled) {
  filter: brightness(1.07);
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
::selection {
  background: var(--teal);
  color: var(--cream);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--teal) #e1d2b3;
}
h1,h2,h3,p,figure {
  margin: 0;
}
h1,h2,h3 {
  font-family: Anton,sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.15;
}
h1 {
  font-size: clamp(28px,3.1vw,49px);
  letter-spacing: .015em;
  text-wrap: balance;
}
h2 {
  font-size: 24px;
}
h3 {
  font-size: 20px;
}
p {
  max-width: 70ch;
}
small {
  font-size: 12px;
}
hr {
  width: 100%;
  border: 0;
  border-top: 1px solid #8f8871;
  margin: 14px 0;
}
#app {
  position: relative;
  height: 100dvh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
}
.ico {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  vertical-align: middle;
}
.icon-button {
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 6px;
}
.text-button {
  border: 0;
  background: transparent;
  color: var(--teal);
  padding: 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.topbar {
  height: var(--header);
  min-height: var(--header);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 clamp(20px,5.2vw,88px);
  background: #10191bee;
  border-bottom: 2px solid #ad9870;
  color: var(--paper);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--cream);
  font: italic 34px/1 Anton,sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: -.025em;
}
.brand>.ico {
  width: 42px;
  height: 42px;
  stroke: var(--gold);
  fill: #e4b65022;
}
.king {
  color: #d14536;
  margin-left: 3px;
}
.hud {
  margin-left: auto;
  display: flex;
  align-items: center;
  font-family: Anton,sans-serif;
  text-transform: uppercase;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hud>span {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0 19px;
  border-left: 1px solid #8f8978;
}
.hud .level {
  color: #67bac1;
}
.hud .ico {
  color: var(--gold);
  width: 29px;
  height: 29px;
}
.settings-toggle {
  color: var(--paper);
  width: 30px;
}
.stage {
  flex: 1;
  min-height: 0;
  display: flex;
  padding: 12px clamp(18px,5vw,86px) 8px;
}
.board {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  background: linear-gradient(115deg,#f9eccf,#eee0bd);
  border: 2px solid var(--line);
  outline: 1px solid #d9cba9;
  outline-offset: 3px;
  box-shadow: 0 12px 35px #0008;
}
.board:after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid #a5956e;
  pointer-events: none;
  z-index: 1;
}
.goalbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-height: 24px;
  padding: 2px clamp(18px,5vw,86px) 5px;
  color: var(--paper);
  font-size: 12px;
}
.goalbar .text-button {
  color: var(--paper);
  padding: 0;
}
.nav {
  height: var(--nav);
  min-height: var(--nav);
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 4px;
  padding: 4px clamp(12px,3vw,48px);
  background: #10191bf5;
  border-top: 1px solid #ac9e7f;
}
.nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid #83785c;
  background: transparent;
  color: var(--paper);
  font: 400 clamp(16px,1.5vw,24px) Anton,sans-serif;
  text-transform: uppercase;
  padding: 8px;
  border-radius: 3px;
}
.nav .ico {
  width: 37px;
  height: 37px;
}
.nav button.is-on {
  background: linear-gradient(#c6392d,#a5211d);
  color: #fff4df;
  border-color: #e8c89c;
  box-shadow: inset 0 0 0 2px #e3b48b44;
}
.nav button:focus-visible {
  outline-color: var(--gold);
  outline-offset: -5px;
}
.announce {
  position: fixed;
  z-index: 20;
  bottom: calc(var(--nav) + 34px);
  left: 50%;
  transform: translateX(-50%);
  max-width: min(760px,90vw);
  background: #14282ef5;
  color: #fff4dc;
  padding: 10px 20px;
  border: 1px solid #bcaa80;
  box-shadow: 0 6px 18px #0006;
  pointer-events: none;
  opacity: 0;
  font-size: 15px;
  text-align: center;
}
.announce.is-visible {
  opacity: 1;
}
.shead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}
.shead h1 {
  color: var(--red-dark);
}
.shead p {
  color: var(--red-dark);
  font-size: clamp(15px,1.45vw,22px);
}
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--red);
  color: var(--cream);
  border: 2px solid var(--line);
}
.banner span {
  font-size: 17px;
  white-space: nowrap;
}
.panel-title {
  padding: 9px 12px;
  color: var(--cream);
  font-size: clamp(19px,1.8vw,28px);
}
.panel-title small {
  float: right;
  padding-top: 6px;
  font-family: Oswald,sans-serif;
  text-transform: none;
}
.red {
  background: var(--red);
}
.teal {
  background: var(--teal);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid var(--line);
  border-radius: 3px;
  background: #efe5cf;
  padding: 11px 16px;
  min-height: 44px;
  font: 400 20px/1.2 Anton,sans-serif;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 2px #fff3;
  white-space: normal;
  text-align: center;
}
.btn.go {
  background: linear-gradient(150deg,#c3352a,#ad251f);
  color: #fff4de;
}
.btn.ghost {
  background: #eee5d4;
}
.btn.teal-btn {
  background: var(--teal);
  color: var(--cream);
}
.btn .ico {
  width: 30px;
  height: 30px;
}
.good {
  color: var(--good);
}
.bad {
  color: var(--bad);
}
.book,.roster,.grade,.cards,.stories,.live,.season,.rip {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 12px 14px 14px;
  gap: var(--gap);
}
/* Card anatomy. Large cards give the portrait and the stats their own columns. */
.wcard {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0,1fr) auto auto;
  background: var(--cream);
  border: 2px solid #75634b;
  border-radius: 3px;
  padding: 4px;
  text-align: left;
  isolation: isolate;
}
.wcard .wname {
  grid-row: 2;
  font: 400 18px/1.15 Anton,sans-serif;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 1px 2px;
  z-index: 2;
}
.portrait-window {
  position: relative;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(135deg,#146977,#193d49);
  border: 1px solid #42483c;
  display: block;
}
.rarity-common .portrait-window {
  background: linear-gradient(135deg,#9c4934,#6b2922);
}
.rarity-rare .portrait-window {
  background: linear-gradient(135deg,#b38c34,#5e421a);
}
.rarity-epic .portrait-window {
  background: linear-gradient(135deg,#784b74,#352237);
}
.cutout {
  display: block;
  width: 100%;
  height: 145%;
  object-fit: cover;
  object-position: center top;
  filter: drop-shadow(2px 3px 1px #17232333);
}
.local-art {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  gap: 10px;
  text-align: center;
}
.local-art .ico {
  width: 64px;
  height: 64px;
}
.wcost {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--red);
  color: var(--cream);
  border: 1px solid #861e19;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font: 400 21px/1 Anton,sans-serif;
}
.wcost small {
  font: 500 10px Oswald,sans-serif;
  text-transform: uppercase;
}
.winfo {
  display: flex;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  text-transform: uppercase;
  grid-row: 3;
  white-space: nowrap;
  overflow: hidden;
}
.alignment {
  color: var(--teal);
}
.alignment.heel {
  color: var(--red-dark);
}
.wstyle {
  overflow: hidden;
  text-overflow: ellipsis;
}
.fatigue {
  display: none;
}
.wgrade {
  position: absolute;
  top: 9px;
  left: 7px;
  background: var(--gold);
  padding: 2px 5px;
  font-size: 10px;
  text-transform: uppercase;
  z-index: 3;
}
.wcard.is-on {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}
.wcard.is-used {
  opacity: .45;
}
.wcard.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 2px dashed #aa9c7b;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  background: #e9dbba88;
}
.empty-plus {
  font: 400 46px Anton,sans-serif;
  color: #9b8e70;
}
.size-slot {
  width: 100%;
  height: 100%;
}
.size-slot .winfo {
  display: none;
}
.size-mini {
  width: 128px;
  height: 164px;
  flex: 0 0 auto;
}
.size-mini .wname {
  font-size: 13px;
}
.size-mini .wcost {
  width: 25px;
  height: 25px;
  top: 6px;
  right: 6px;
  font-size: 16px;
}
.size-mini .winfo {
  font-size: 9px;
}
.size-roster,.size-lg {
  grid-template-columns: minmax(0,1.45fr) minmax(85px,1fr);
  grid-template-rows: 33px minmax(0,1fr) 38px;
  gap: 5px;
  width: 100%;
  height: 280px;
  padding: 9px;
}
.size-lg {
  height: 330px;
}
.size-roster .wname,.size-lg .wname {
  grid-column: 1/-1;
  grid-row: 1;
  text-align: left;
  padding: 1px 58px 1px 0;
  font-size: clamp(17px,1.65vw,25px);
}
.size-roster .portrait-window,.size-lg .portrait-window {
  grid-column: 1;
  grid-row: 2/4;
}
.size-roster .cutout,.size-lg .cutout {
  height: 130%;
}
.size-roster .wcost,.size-lg .wcost {
  width: 51px;
  height: 51px;
  top: 9px;
  right: 9px;
  font-size: 30px;
}
.size-roster .winfo,.size-lg .winfo {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  align-items: stretch;
  font-size: 14px;
  padding-top: 14px;
}
.size-roster .alignment,.size-lg .alignment {
  padding: 2px 4px;
  background: var(--teal);
  color: var(--cream);
  text-align: center;
  line-height: 1.2;
}
.size-roster .alignment.heel,.size-lg .alignment.heel {
  background: #262a25;
}
.size-roster .wstyle,.size-lg .wstyle {
  text-align: center;
  font-size: 13px;
}
.wstats {
  list-style: none;
  padding: 0;
  margin: 3px 0 0;
}
.wstats li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  border-top: 1px solid #a69b7a;
  padding: 4px 0;
  font-size: 15px;
}
.wstats li b {
  font: 400 20px Anton,sans-serif;
}
.size-roster .fatigue,.size-lg .fatigue {
  grid-column: 2;
  grid-row: 3;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: end;
  gap: 2px 4px;
  text-transform: uppercase;
  font-size: 11px;
}
.fatigue>span {
  grid-column: 1/-1;
}
.fatigue i {
  height: 12px;
  background: #d2cabc;
  border: 1px solid #7e7d65;
  align-self: center;
}
.fatigue i b {
  display: block;
  height: 100%;
  background: #6c9d42;
}
.fatigue.mid i b {
  background: #bf8e29;
}
.fatigue.bad i b {
  background: #b42b25;
}
.fatigue small {
  font-size: 11px;
}
.fatigue small span {
  display: none;
}
.size-roster .wgrade,.size-lg .wgrade {
  top: auto;
  bottom: 12px;
  left: 13px;
  font-size: 12px;
}
/* Booking board */
.book {
  display: grid;
  grid-template-columns: minmax(0,1fr) 235px;
  grid-template-rows: 48px minmax(0,1fr) 147px;
}
.book>.shead {
  grid-column: 1/-1;
  justify-content: flex-start;
}
.book>.shead h1 {
  color: #101713;
}
.brows {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.mrow {
  flex: 1;
  min-height: 130px;
  display: grid;
  grid-template-columns: 116px minmax(70px,1fr) 30px minmax(70px,1fr) 93px 85px 76px 105px;
  gap: 6px;
  padding: 5px;
  border: 2px solid var(--line);
  border-radius: 3px;
  background: #f9f0d644;
}
.mslot {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 10px;
  border: 0;
  background: linear-gradient(145deg,#b83228,#9b221c);
  color: var(--cream);
  padding: 13px 10px;
  text-align: left;
  text-transform: uppercase;
}
.mslot b {
  font: 400 23px/1.1 Anton,sans-serif;
}
.mslot span {
  font-size: 12px;
  max-width: 13ch;
}
.mrow.is-focused .mslot {
  background: #9c211b;
}
.mpick {
  min-height: 0;
  min-width: 0;
}
.mvs {
  align-self: center;
  justify-self: center;
  font: 400 28px Anton,sans-serif;
}
.mvs:before,.mvs:after {
  content: '★';
  display: block;
  color: var(--red);
  font-size: 13px;
  text-align: center;
  margin: 8px 0;
}
.play-card {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border: 2px solid #574f36;
  border-radius: 3px;
  padding: 3px;
  background: #f9efd5;
  text-align: center;
  text-transform: uppercase;
}
.play-kind {
  display: block;
  align-self: stretch;
  background: var(--red);
  color: var(--cream);
  font-size: 12px;
  line-height: 1.2;
  padding: 4px 2px;
  font-weight: 700;
}
.kind-move .play-kind {
  background: var(--teal);
}
.kind-extra .play-kind {
  background: #736d56;
}
.play-art {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 4px 0;
  overflow: hidden;
}
.play-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.play-art .ico {
  width: 42px;
  height: 42px;
}
.play-card>b {
  font: 400 13px/1.15 Anton,sans-serif;
}
.play-card>small {
  display: block;
  font-size: 10px;
  padding: 2px 0;
  line-height: 1.2;
}
.play-card.is-on {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.mrate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 7px;
}
.mrate>span {
  font-family: Anton,sans-serif;
  font-size: 13px;
  text-transform: uppercase;
}
.mrate>b {
  font: 400 34px/1 Anton,sans-serif;
  white-space: nowrap;
}
.mrate small {
  font-size: 17px;
}
.mrate .stars {
  font-size: 23px;
}
.forecast {
  grid-column: 2;
  grid-row: 2;
  border: 2px solid var(--line);
  padding: 5px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.forecast-inner {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.forecast-inner>span:first-child {
  font-family: Anton,sans-serif;
  font-size: 20px;
}
.fbig {
  font: 400 68px/1.2 Anton,sans-serif;
  font-variant-numeric: tabular-nums;
}
.fbig small {
  font-size: 34px;
}
.ftarget {
  font-size: 17px;
  margin-top: 8px;
}
.forecast .stars {
  font-size: 33px;
}
.forecast h3 {
  align-self: flex-start;
  font-size: 20px;
}
.pbars {
  display: flex;
  gap: 10px;
  width: 100%;
  height: 143px;
  margin: 15px 0 12px;
}
.pbar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}
.pbar>div {
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.pbar i {
  display: block;
  width: 100%;
  background: var(--teal);
  border: 1px solid var(--line);
  min-height: 8px;
  font-style: normal;
  position: relative;
}
.pbar:first-child i {
  background: var(--red);
}
.pbar b {
  color: var(--cream);
  font: 400 20px Anton,sans-serif;
}
.pbar>span {
  font-family: Anton,sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  margin-top: 6px;
}
.fnotes {
  list-style: none;
  padding: 12px 0 0;
  margin: auto 0 0;
  border-top: 1px solid #a59a7a;
  width: 100%;
  font-size: 15px;
}
.fnotes li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 7px 0;
}
.fnotes .ico {
  width: 25px;
  height: 25px;
}
.hand-tray {
  grid-column: 1;
  grid-row: 3;
  border: 2px solid var(--line);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hand-tray>h2 {
  background: var(--teal);
  color: var(--cream);
  font: 400 17px Anton,sans-serif;
  padding: 4px 9px;
}
.hand-tray h2 small {
  font: 500 11px Oswald,sans-serif;
  float: right;
  padding-top: 3px;
  text-transform: none;
}
.hand-row {
  display: flex;
  gap: 7px;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  padding: 5px 8px;
}
.hand-row .play-card {
  flex: 1 0 90px;
  max-width: 160px;
}
.hand-row .play-art {
  min-height: 26px;
}
.hand-row .play-card>b {
  font-size: 12px;
}
.hand-row .play-card>small {
  font-size: 9px;
}
.hand-row .play-kind {
  font-size: 10px;
  padding: 2px;
}
.deck-note {
  font-size: 10px;
  color: var(--muted);
  padding: 0 9px 3px;
}
.runbar {
  grid-column: 2;
  grid-row: 3;
  display: grid;
  grid-template-columns: 80px minmax(0,1fr);
  gap: 8px;
  align-items: stretch;
}
.runbar .btn {
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  font-size: 20px;
}
.runbar .btn.go {
  font-size: 26px;
}
.runbar .btn .ico {
  width: 35px;
  height: 35px;
}
.picker {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 13px;
  z-index: 5;
  padding: 12px;
  border: 2px solid var(--line);
  background: var(--cream);
  box-shadow: 0 -10px 35px #101b1a55;
}
.picker>header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #a3987c;
  margin-bottom: 10px;
}
.picker-row {
  display: flex;
  gap: 12px;
  overflow: auto;
  padding: 4px;
  max-height: 305px;
}
.picker-row .wcard {
  flex: 0 0 250px;
  height: 245px;
}
.picker-row .play-card {
  flex: 0 0 135px;
  height: 185px;
}
.picker>.text-button {
  margin-bottom: 8px;
}
/* Roster */
.roster {
  display: grid;
  grid-template-columns: minmax(0,1fr) 340px;
  grid-template-rows: 88px minmax(0,1fr);
}
.roster .shead {
  grid-column: 1;
}
.roster h1 {
  max-width: 440px;
  font-size: clamp(29px,3vw,45px);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 10px;
}
.capmeter {
  flex: 1;
  min-width: 245px;
  max-width: 380px;
}
.capmeter>div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: Anton,sans-serif;
  font-size: 17px;
  text-transform: uppercase;
}
.capmeter i,.fansbox i,.pity i,.set-meter {
  display: block;
  height: 17px;
  border: 1px solid var(--line);
  background: #dad4c2;
  margin: 6px 0;
}
.capmeter i b,.fansbox i b,.pity i b,.set-meter b {
  display: block;
  height: 100%;
  background: var(--red);
}
.capmeter small {
  font-size: 11px;
}
.capmeter small strong {
  float: right;
  color: var(--teal);
}
.roster-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.roster-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0 3px 8px;
  font-size: 13px;
}
.rgrid {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  padding: 3px;
  align-content: start;
}
.roster-card-wrap {
  min-width: 0;
  position: relative;
  padding-bottom: 18px;
}
.squad-status {
  position: absolute;
  right: 5px;
  bottom: 0;
  font-size: 11px;
  color: var(--muted);
}
.squad-status.in-squad {
  color: var(--teal);
}
.rside {
  grid-column: 2;
  grid-row: 1/3;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-left: 1px solid #82795d;
  padding-left: 12px;
}
.detail {
  border: 1px solid var(--line);
  padding: 7px;
  border-radius: 3px;
}
.detail>.wcard {
  border: 0;
  background: transparent;
}
.detail .size-lg {
  height: 315px;
}
.detail .flavor {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 5px;
}
.detail>.btn {
  width: 100%;
  font-size: 16px;
  padding: 8px;
}
.rest-panel,.capcard {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  padding: 10px;
  border-radius: 3px;
}
.rest-panel>.ico,.capcard>.ico {
  width: 39px;
  height: 39px;
}
.rest-panel p,.capcard p {
  font-size: 13px;
  margin-top: 5px;
}
.capcard {
  flex-wrap: wrap;
}
.capcard>div {
  flex: 1;
}
.capcard>.btn {
  font-size: 15px;
  padding: 8px;
}
.capnote {
  font-size: 12px;
  color: var(--red-dark);
}
.roster-footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #8f876f;
  display: flex;
  align-items: center;
  gap: 8px;
}
.roster-footer>b {
  font-size: 12px;
  flex: 1;
  text-transform: uppercase;
}
.roster-footer>.btn {
  font-size: 17px;
  padding: 10px;
}
/* Live show */
.live {
  display: grid;
  grid-template-columns: minmax(0,1fr) 290px;
  grid-template-rows: 62px minmax(0,1fr);
}
.live-title {
  grid-column: 1/-1;
  text-align: center;
  border-bottom: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.live-title h1 {
  color: var(--red);
  font-size: clamp(32px,4vw,60px);
}
.live-title h1:before,.live-title h1:after {
  content: '★';
  color: var(--teal);
  font-size: .7em;
  padding: 0 20px;
}
.live-main {
  display: grid;
  grid-template-rows: 56px minmax(0,1fr) 62px;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}
.ltabs {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 5px;
}
.ltab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border: 2px solid var(--line);
  font-family: Anton,sans-serif;
  text-transform: uppercase;
}
.ltab b {
  font-size: 19px;
  font-weight: 400;
}
.ltab>span {
  font-size: 13px;
}
.ltab .stars {
  font-size: 19px;
}
.ltab .ico {
  width: 22px;
}
.ltab.now {
  background: var(--red);
  color: var(--cream);
}
.ltab .live-badge {
  border: 2px solid var(--cream);
  border-radius: 3px;
  padding: 1px 7px;
  font-size: 19px;
}
.lstage {
  display: grid;
  grid-template-columns: minmax(125px,1fr) minmax(0,2.9fr) minmax(125px,1fr);
  gap: 7px;
  min-height: 0;
}
.lstage>.wcard {
  padding: 6px;
}
.lstage .size-slot .wname {
  font-size: 22px;
  white-space: normal;
}
.lstage .size-slot .wcost {
  display: none;
}
.lstage .portrait-window {
  background: #8d2f24;
}
.lstage .cutout {
  height: 115%;
}
.lart {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--line);
  background: #131e20;
}
.lart>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 36%;
}
.lart figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #101b1cdd;
  color: var(--cream);
  padding: 10px 14px;
  font: 400 22px Anton,sans-serif;
  text-transform: uppercase;
}
.lart figcaption span {
  float: right;
  font-size: 15px;
  padding-top: 4px;
}
.lmeter {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 2px solid var(--line);
  padding: 10px 14px;
}
.lmeter>b {
  font: 400 22px Anton,sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
}
.lmeter strong {
  font-weight: 400;
  margin-left: 7px;
}
.lmeter>i {
  flex: 1;
  height: 24px;
  background: #172e36;
  border: 1px solid var(--line);
}
.lmeter i b {
  display: block;
  height: 100%;
  background: var(--teal);
}
.lmeter>span {
  font-size: 13px;
  max-width: 130px;
  text-transform: uppercase;
}
.call-rail {
  border: 2px solid var(--line);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
  overflow: auto;
}
.calls-left {
  text-align: center;
  text-transform: uppercase;
  font-size: 18px;
  margin: 2px 0 5px;
}
.call-btn {
  justify-content: flex-start;
  padding: 14px 12px;
  gap: 13px;
  min-height: 95px;
}
.call-btn>.ico {
  width: 37px;
  height: 37px;
}
.call-btn>span {
  text-align: left;
  font-size: 27px;
}
.call-btn small {
  display: block;
  font: 500 15px Oswald,sans-serif;
  text-transform: none;
  margin-top: 5px;
}
.commentary {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #82795d;
  padding: 14px 7px;
  margin-top: auto;
  font-size: 17px;
}
.commentary .ico {
  width: 34px;
  height: 34px;
  color: var(--teal);
}
.call-rail>.continue {
  font-size: 22px;
  min-height: 65px;
}
.call-rail>.text-button {
  font-size: 13px;
}
/* Results */
.grade {
  display: grid;
  grid-template-columns: minmax(0,1.8fr) minmax(300px,1fr);
  grid-template-rows: 74px minmax(0,1fr) 165px;
}
.grade>.banner {
  grid-column: 1;
  justify-content: center;
  text-align: center;
}
.grade .banner h1 {
  font-size: clamp(27px,3.5vw,52px);
}
.grade .banner>span {
  display: none;
}
.grows {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
}
.grow {
  flex: 1;
  min-height: 110px;
  display: grid;
  grid-template-columns: 84px minmax(0,1fr) 146px;
  border: 2px solid var(--line);
  overflow: hidden;
}
.gtag {
  background: var(--teal);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 400 21px/1.2 Anton,sans-serif;
  text-transform: uppercase;
  padding: 8px;
}
.result-pair {
  display: grid;
  grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr);
  min-height: 0;
  overflow: hidden;
}
.result-person {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}
.result-person>b {
  font: 400 16px/1.2 Anton,sans-serif;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  flex: 1;
}
.result-art {
  position: relative;
  align-self: stretch;
  display: block;
  min-width: 60px;
  width: 42%;
  overflow: hidden;
}
.result-art .cutout {
  position: absolute;
  height: 180%;
  width: 140%;
  max-width: none;
  left: -20%;
  object-fit: cover;
}
.result-person.reverse {
  justify-content: flex-end;
}
.result-person.reverse>b {
  text-align: right;
}
.result-person.reverse .result-art .cutout {
  left: -20%;
}
.result-pair>.mvs {
  font-size: 18px;
}
.result-pair>.mvs:before,.result-pair>.mvs:after {
  display: none;
}
.grate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #8f876e;
  padding: 8px 3px;
  text-align: center;
}
.grate .stars {
  font-size: 27px;
}
.grate>strong {
  font: 400 33px/1.3 Anton,sans-serif;
}
.grate strong small {
  font-size: 22px;
}
.grate>span:last-child:not(.stars) {
  font-size: 10px;
  color: var(--muted);
}
.results-rail {
  grid-column: 2;
  grid-row: 1/3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}
.gscore,.financial,.fansbox {
  border: 1px solid var(--line);
  padding: 10px;
}
.results-rail h2,.why h2,.nextbox h2 {
  font-size: 23px;
  border-bottom: 1px solid #867f67;
  padding-bottom: 5px;
}
.score-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
}
.gletter {
  font: 400 120px/.95 Anton,sans-serif;
  color: var(--teal);
  background: #17201d;
  padding: 10px 17px 5px;
  transform: rotate(-2deg);
}
.gnum {
  font: 400 70px/1.1 Anton,sans-serif;
  white-space: nowrap;
}
.gnum small {
  font-size: 37px;
}
.gscore .stars {
  font-size: 35px;
}
.gscore>p {
  text-align: center;
  font-size: 14px;
  margin-top: 7px;
}
.money {
  list-style: none;
  margin: 0;
  padding: 0;
}
.money li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #b5a989;
  padding: 5px 0;
  font-size: 20px;
}
.money li b {
  font-size: 24px;
}
.net {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: var(--teal);
  color: var(--cream);
  padding: 7px 9px;
  font: 400 24px Anton,sans-serif;
  text-transform: uppercase;
  margin-top: 4px;
}
.fansbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.fansbox h2 {
  grid-column: 1/-1;
}
.fansbox>b {
  font: 400 28px Anton,sans-serif;
  grid-row: 2/4;
  align-self: center;
}
.fansbox>span {
  font-size: 12px;
  text-align: right;
  align-self: end;
}
.fansbox i {
  margin: 0;
  height: 14px;
}
.fansbox i b {
  background: var(--teal);
}
.fansbox>small {
  grid-column: 1/-1;
  text-align: right;
}
.why {
  grid-column: 1;
  border: 1px solid var(--line);
  padding: 10px;
  overflow: auto;
}
.reasons {
  display: flex;
  gap: 10px;
  padding-top: 13px;
}
.reasons>div {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
}
.reasons>div+div {
  border-left: 1px solid #aa9e80;
  padding-left: 10px;
}
.reasons .ico {
  width: 36px;
  height: 36px;
  color: var(--red);
}
.why details {
  font-size: 12px;
  margin-top: 10px;
}
.why summary {
  cursor: pointer;
  color: var(--teal);
  text-underline-offset: 3px;
}
.why details p {
  padding: 5px 0;
}
.nextbox {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.nextbox p {
  font-size: 14px;
  flex: 1;
}
.nextbox>.btn {
  font-size: 23px;
  min-height: 49px;
}
/* Stories */
.stories {
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
  grid-template-rows: 88px minmax(0,1fr);
}
.stories>.shead {
  grid-column: 1;
}
.stories .shead h1 {
  font-size: clamp(32px,4.7vw,70px);
  color: var(--red);
  white-space: nowrap;
}
.stories .shead p {
  text-align: right;
  max-width: 130px;
  font-family: Anton,sans-serif;
  color: var(--ink);
  text-transform: uppercase;
}
.story-content {
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(0,1fr);
  grid-template-rows: minmax(0,1fr) 120px;
  gap: 14px;
  min-height: 0;
}
.story-pair {
  display: grid;
  grid-template-columns: minmax(0,1fr) 32px minmax(0,1fr);
  gap: 5px;
  min-height: 0;
}
.story-pair .wcard {
  padding: 5px;
}
.story-pair .portrait-window {
  grid-row: 1;
}
.story-pair .wname {
  font-size: 21px;
  white-space: normal;
}
.story-pair .wcost {
  display: none;
}
.story-pair .cutout {
  height: 115%;
}
.story-center {
  min-height: 0;
  overflow: auto;
}
.heat-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  gap: 10px;
}
.heat-label>b {
  font: 400 24px Anton,sans-serif;
  white-space: nowrap;
}
.heat-label strong {
  font-size: 45px;
  color: var(--red);
  font-weight: 400;
}
.heat-label>span {
  font-size: 16px;
  text-align: right;
}
.story-heat {
  height: 24px;
  border: 2px solid var(--line);
  border-radius: 3px;
  background: #b1b6aa;
  overflow: hidden;
  margin: 5px 0 15px;
}
.story-heat>b {
  display: block;
  height: 100%;
  background: var(--red);
}
.story-timeline {
  list-style: none;
  display: flex;
  gap: 0;
  position: relative;
  margin: 0 0 17px;
  padding: 0;
}
.story-timeline:before {
  position: absolute;
  content: '';
  height: 3px;
  background: #a69d80;
  top: 16px;
  left: 10%;
  right: 10%;
}
.story-timeline>li {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
}
.story-timeline li>b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #aea991;
  color: var(--cream);
  font-family: Anton,sans-serif;
  font-size: 20px;
  font-weight: 400;
}
.story-timeline li.done>b {
  background: var(--teal);
}
.story-timeline li.now>b {
  background: var(--red);
}
.story-timeline .ico {
  width: 21px;
  height: 21px;
}
.story-card {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 5px;
  margin-bottom: 9px;
}
.story-card h2 {
  font-size: 34px;
  background: var(--red);
  padding: 7px 8px;
  color: var(--cream);
}
.story-card p {
  padding: 9px 6px;
  font-size: 18px;
}
.story-actions {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
}
.story-actions>button {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  padding: 12px 5px;
  border: 1px solid var(--line);
  background: #f5ebd2;
}
.story-actions .ico {
  height: 34px;
  width: 34px;
  color: var(--teal);
}
.story-actions b {
  font-family: Anton,sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 15px;
}
.story-actions small {
  font-size: 12px;
}
.other-stories {
  grid-column: 1/-1;
  border: 1px solid var(--line);
  min-height: 0;
  overflow: auto;
}
.other-stories h2 {
  background: #18211e;
  color: var(--cream);
  font-size: 19px;
  padding: 5px 10px;
}
.other-stories>div {
  display: flex;
  gap: 12px;
  padding: 10px;
}
.other-stories p {
  font-size: 14px;
}
.other-story {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  border: 0;
  background: transparent;
  text-align: left;
}
.other-story b {
  font: 400 20px Anton,sans-serif;
  text-transform: uppercase;
}
.other-story span {
  font-size: 13px;
}
.payoff {
  grid-column: 2;
  grid-row: 1/3;
  border-left: 1px solid #7d765e;
  padding-left: 12px;
  min-height: 0;
  overflow: auto;
}
.payoff>img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--line);
  margin-top: 7px;
}
.payoff>h3 {
  text-align: center;
  margin: 9px 0;
}
.hot-crowd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--red);
  color: var(--cream);
  padding: 10px;
  font: 400 23px Anton,sans-serif;
  text-transform: uppercase;
}
.payoff>p {
  margin: 12px 0;
  font-size: 16px;
}
.payoff>.btn {
  width: 100%;
  font-size: 17px;
}
.story-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #8f866b;
  margin-top: 13px;
  padding-top: 10px;
}
.story-form label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.story-form select {
  width: 65%;
  border: 1px solid #827758;
  background: var(--cream);
  padding: 5px;
  font-size: 13px;
  min-height: 34px;
}
.story-form>.btn {
  font-size: 19px;
  margin-top: 5px;
}
/* Collection */
.cards {
  display: grid;
  grid-template-rows: 49px minmax(0,1fr) 204px;
}
.cards>.shead h1 {
  font-size: clamp(27px,3vw,43px);
  color: var(--red-dark);
}
.cards-tabs {
  display: flex;
  gap: 5px;
}
.cards-tabs button {
  padding: 8px 11px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 13px;
  text-transform: uppercase;
}
.cards-tabs button.is-on {
  background: var(--teal);
  color: var(--cream);
}
.cards-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
  min-height: 0;
}
.packbox,.combinebox {
  border: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}
.pack-content {
  display: grid;
  grid-template-columns: minmax(110px,.85fr) minmax(175px,1.1fr) 115px;
  gap: 12px;
  padding: 12px;
  flex: 1;
  min-height: 0;
}
.pack-art {
  width: 100%;
  height: 100%;
  max-height: 340px;
  object-fit: contain;
  filter: drop-shadow(2px 6px 3px #261e1733);
}
.pack-info {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.pack-info>h3 {
  font-size: 30px;
}
.pack-info>p {
  font-size: 13px;
}
.pack-price {
  color: var(--red);
  font: 400 26px Anton,sans-serif;
  text-transform: uppercase;
}
.pack-price .ico {
  width: 30px;
  height: 30px;
  color: var(--ink);
}
.pack-info>.btn {
  font-size: 23px;
}
.odds-box,.pity {
  border: 1px solid #776f57;
  padding: 8px;
  border-radius: 3px;
}
.odds-box h3 {
  font-size: 18px;
}
.odds-box>small {
  font-size: 9px;
  color: var(--muted);
}
.odds {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  justify-content: space-between;
}
.odds li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  text-transform: capitalize;
}
.odds li b {
  font-size: 16px;
}
.pip {
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid #504e3e;
  border-radius: 50%;
  background: #978a6b;
}
.pip.rarity-uncommon {
  background: #7695a1;
}
.pip.rarity-rare {
  background: #d7b04e;
}
.pip.rarity-epic {
  background: #ae3d37;
}
.pip.rarity-legendary {
  background: #e8be43;
}
.pity {
  margin-top: auto;
  font-size: 12px;
}
.pity>span {
  float: right;
}
.pity i {
  height: 13px;
  margin: 5px 0;
}
.pity i b {
  background: var(--teal);
}
.pity>small {
  font-size: 11px;
}
.daily {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 8px;
  gap: 6px;
  text-align: center;
  min-height: 0;
}
.daily h3 {
  font-size: 20px;
}
.daily>img {
  min-height: 30px;
  flex: 1;
  width: 100%;
  height: 120px;
  object-fit: contain;
}
.daily p {
  font-size: 15px;
}
.daily .btn {
  padding: 7px 5px;
  font-size: 14px;
  min-height: 36px;
}
.combine-content {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
}
.combine-visual {
  flex: 1;
  min-height: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.spare-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-bottom: 28px;
  flex: 1;
}
.spare-stack .size-mini {
  width: 80px;
  height: 115px;
  flex-shrink: 1;
  margin-left: -20px;
}
.spare-stack .size-mini:first-child {
  margin-left: 0;
}
.spare-stack .winfo,.spare-stack .wcost {
  display: none;
}
.spare-stack .wname {
  font-size: 10px;
}
.spare-stack>span {
  position: absolute;
  bottom: 0;
  font-size: 12px;
  white-space: nowrap;
}
.combine-visual>.ico {
  color: var(--red);
  width: 32px;
  height: 32px;
}
.combine-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.combine-preview>.size-lg {
  width: 180px;
  height: 220px;
  grid-template-columns: 1fr;
  grid-template-rows: 28px minmax(0,1fr) 24px;
  padding: 5px;
}
.combine-preview .size-lg .wname {
  grid-row: 1;
  font-size: 17px;
  padding: 0;
  text-align: center;
}
.combine-preview .size-lg .portrait-window {
  grid-row: 2;
  grid-column: 1;
}
.combine-preview .size-lg .winfo,.combine-preview .size-lg .wcost {
  display: none;
}
.combine-preview .size-lg .fatigue {
  display: none;
}
.combine-preview>span {
  font-size: 10px;
  color: var(--muted);
}
.combine-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border: 1px solid #736d54;
  padding: 7px;
}
.combine-stats>div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  padding: 0 8px;
}
.combine-stats>div+div {
  border-left: 1px solid #b0a483;
}
.combine-stats b {
  font-size: 16px;
}
.combine-stats strong {
  color: var(--red);
}
.combine-content>.btn {
  font-size: 23px;
}
.combine-note {
  text-align: center;
  font-size: 11px;
}
.binder {
  border: 2px solid var(--line);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.binder>header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 4px 10px;
}
.binder h2 {
  font-size: 21px;
}
.binder h2 small {
  font: 500 13px Oswald,sans-serif;
  margin-left: 20px;
}
.binder header>span {
  font-size: 12px;
  text-transform: uppercase;
}
.tray-row {
  display: flex;
  min-width: 0;
  gap: 9px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 10px 6px;
  min-height: 0;
  flex: 1;
}
.binder .size-mini {
  width: 120px;
  height: 100%;
  min-height: 100px;
}
.binder .size-mini .winfo {
  display: none;
}
.binder-do {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 1px 10px 5px;
  font-size: 12px;
}
.binder-do .text-button {
  margin-left: auto;
  font-size: 12px;
}
.shopbox {
  grid-column: 1/-1;
  min-height: 0;
  border: 2px solid var(--line);
  display: flex;
  flex-direction: column;
}
.shop-row {
  display: flex;
  gap: 12px;
  padding: 12px;
  min-height: 0;
  overflow: auto;
  flex: 1;
}
.shop-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-width: 185px;
}
.shop-item>.size-roster {
  height: 245px;
  flex: 1;
}
.shop-item .size-roster .wname {
  font-size: 19px;
}
.shop-item>.btn {
  font-size: 16px;
}
.shop-cap {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid #8f866d;
  padding: 10px 14px;
}
.shop-cap>div {
  flex: 1;
}
.shop-cap p {
  font-size: 13px;
}
.shop-cap .btn {
  font-size: 17px;
}
.sets-panel,.career-panel {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
}
.set-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
  padding: 14px;
}
.set-grid article {
  border-bottom: 1px solid #a39573;
  padding-bottom: 12px;
}
.set-grid h3 {
  font-size: 20px;
  margin-bottom: 6px;
}
.set-grid span {
  font-size: 13px;
}
.set-grid strong {
  font-size: 13px;
  color: var(--teal);
}
.set-meter {
  height: 10px;
  margin: 6px 0;
}
.set-meter b {
  background: var(--teal);
}
.career-panel>div {
  padding: 14px;
}
.career-panel p {
  font-size: 14px;
  margin: 8px 0;
}
.career-panel .btn {
  font-size: 16px;
}
.upgrade {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid #9c9072;
}
/* Pack reveal and season */
.rip,.season {
  display: flex;
  flex-direction: column;
}
.rip-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 90px;
  padding: 20px;
}
.rip-pack {
  width: 260px;
  text-align: center;
}
.rip-pack img {
  width: 230px;
  height: 300px;
  object-fit: contain;
  filter: drop-shadow(3px 9px 5px #2225);
}
.rip-pack h2 {
  font-size: 25px;
}
.rip-pack p {
  margin-top: 8px;
  color: var(--muted);
}
.reveal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: card-reveal .45s cubic-bezier(.16,1,.3,1) both;
}
.reveal-card>.wcard {
  width: 330px;
  height: 430px;
}
.reveal-card>span {
  font-family: Anton,sans-serif;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--teal);
}
.rip-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 14px 8px;
}
.season-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  flex: 1;
  min-height: 0;
  padding: 28px;
}
.season-score {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  align-items: flex-start;
}
.season-score>.ico {
  width: 75px;
  height: 75px;
  color: var(--teal);
}
.season-score h2 {
  font-size: 42px;
}
.slog {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}
.slog li {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  padding: 9px 10px;
  border-bottom: 1px solid #a89d7c;
}
.slog b {
  font-family: Anton,sans-serif;
  font-size: 26px;
  color: var(--teal);
}
.empty-state,.loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
  padding: 40px;
}
.loading {
  margin: 40px;
  background: var(--paper);
  border: 2px solid var(--line);
}
.empty-state h1 {
  color: var(--red);
}
.settings-panel {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 10;
  max-width: 430px;
  background: var(--cream);
  border: 2px solid var(--line);
  box-shadow: 0 10px 35px #0006;
  padding: 18px;
}
.settings-panel>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.settings-panel p {
  font-size: 15px;
  margin: 10px 0 18px;
}
.settings-panel>.btn {
  font-size: 17px;
}
.settings-panel>small {
  display: block;
  margin-top: 15px;
  color: var(--muted);
}
.import-label {
  cursor: pointer;
}
.import-label input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.import-label:focus-within {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
.stars {
  display: inline-block;
  position: relative;
  line-height: 1;
  font-size: 24px;
  letter-spacing: 1px;
  white-space: nowrap;
}
.stars-bg {
  color: #9d9988;
}
.stars-fg {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--p);
  overflow: hidden;
  white-space: nowrap;
  color: var(--gold);
  -webkit-text-stroke: .6px #2d281c;
}
.grade .stars-fg {
  color: var(--red);
  -webkit-text-stroke: 0;
}
@keyframes card-reveal {
  from {
    transform: translateY(16px) rotate(-2deg);
    filter: brightness(1.3);
  }
  to {
    transform: translateY(0);
    filter: brightness(1);
  }
}
/* Tablet keeps the same board structure; narrow screens stack deliberately. */
@media(min-width:1600px) {
  .stage {
    max-width: 1690px;
    width: 100%;
    align-self: center;
  }
  .topbar {
    padding-inline: max(5vw,calc((100vw - 1510px)/2));
  }
  .mrow {
    grid-template-columns: 145px minmax(90px,1fr) 40px minmax(90px,1fr) 110px 100px 85px 125px;
  }
  .mslot b {
    font-size: 29px;
  }
  .mslot span {
    font-size: 15px;
  }
  .book {
    grid-template-columns: minmax(0,1fr) 270px;
    grid-template-rows: 58px minmax(0,1fr) 160px;
  }
  .play-card>b {
    font-size: 16px;
  }
  .play-kind {
    font-size: 15px;
  }
  .mrate>b {
    font-size: 45px;
  }
  .mrate>span {
    font-size: 16px;
  }
  .hand-tray>h2 {
    font-size: 21px;
  }
  .roster {
    grid-template-columns: minmax(0,1fr) 390px;
  }
  .size-roster {
    height: 305px;
  }
  .detail .size-lg {
    height: 355px;
  }
  .cards {
    grid-template-rows: 58px minmax(0,1fr) 220px;
  }
}
@media(max-width:1250px) {
  :root {
    --header: 56px;
    --nav: 64px;
  }
  .topbar {
    padding-inline: 25px;
    gap: 10px;
  }
  .brand {
    font-size: 27px;
  }
  .brand>.ico {
    width: 32px;
    height: 32px;
  }
  .hud {
    font-size: 16px;
  }
  .hud>span {
    padding-inline: 12px;
  }
  .stage {
    padding-inline: 22px;
  }
  .nav button {
    gap: 12px;
    font-size: 19px;
  }
  .nav .ico {
    width: 30px;
    height: 30px;
  }
  .book {
    grid-template-columns: minmax(0,1fr) 200px;
    grid-template-rows: 43px minmax(0,1fr) 142px;
  }
  .mrow {
    grid-template-columns: 90px minmax(60px,1fr) 22px minmax(60px,1fr) 78px 70px 62px 82px;
    gap: 4px;
    padding: 4px;
  }
  .mslot {
    padding: 10px 6px;
    gap: 8px;
  }
  .mslot b {
    font-size: 20px;
  }
  .mslot span {
    font-size: 10px;
  }
  .mvs {
    font-size: 23px;
  }
  .play-card>b {
    font-size: 11px;
  }
  .play-kind {
    font-size: 10px;
  }
  .play-card>small {
    font-size: 9px;
  }
  .mrate>b {
    font-size: 29px;
  }
  .mrate>span {
    font-size: 11px;
  }
  .mrate .stars {
    font-size: 17px;
  }
  .size-slot .wname {
    font-size: 14px;
  }
  .forecast .fbig {
    font-size: 56px;
  }
  .forecast .stars {
    font-size: 27px;
  }
  .pbars {
    height: 105px;
  }
  .forecast-inner {
    padding: 9px 6px;
  }
  .fnotes {
    font-size: 13px;
  }
  .runbar {
    grid-template-columns: 65px minmax(0,1fr);
  }
  .runbar .btn {
    font-size: 16px;
  }
  .runbar .btn.go {
    font-size: 23px;
  }
  .roster {
    grid-template-columns: minmax(0,1fr) 280px;
    grid-template-rows: 78px minmax(0,1fr);
  }
  .roster .shead {
    gap: 12px;
  }
  .roster h1 {
    font-size: 32px;
  }
  .capmeter {
    min-width: 215px;
  }
  .capmeter>div {
    font-size: 15px;
  }
  .rgrid {
    gap: 9px;
  }
  .size-roster {
    height: 255px;
    padding: 6px;
    grid-template-columns: minmax(0,1.2fr) minmax(73px,1fr);
  }
  .size-roster .wname {
    font-size: 19px;
  }
  .size-roster .wcost {
    width: 42px;
    height: 42px;
    font-size: 25px;
  }
  .size-roster .wstyle {
    font-size: 11px;
  }
  .size-roster .winfo {
    font-size: 12px;
  }
  .size-roster .wstats li {
    font-size: 12px;
  }
  .size-roster .wstats b {
    font-size: 16px;
  }
  .detail .size-lg {
    height: 280px;
    padding: 5px;
  }
  .size-lg .wname {
    font-size: 24px;
  }
  .rest-panel,.capcard {
    padding: 8px;
  }
  .rest-panel h3,.capcard h3 {
    font-size: 18px;
  }
  .roster-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .live {
    grid-template-columns: minmax(0,1fr) 245px;
  }
  .call-btn {
    min-height: 82px;
  }
  .call-btn>span {
    font-size: 24px;
  }
  .call-btn small {
    font-size: 13px;
  }
  .ltab {
    gap: 4px;
    padding: 6px;
  }
  .ltab b {
    font-size: 16px;
  }
  .ltab .stars {
    display: none;
  }
  .lstage {
    grid-template-columns: minmax(110px,1fr) minmax(0,2.5fr) minmax(110px,1fr);
  }
  .lstage .size-slot .wname {
    font-size: 19px;
  }
  .lmeter {
    padding: 8px;
    gap: 8px;
  }
  .lmeter>b {
    font-size: 18px;
  }
  .lmeter>span {
    font-size: 11px;
  }
  .grade {
    grid-template-columns: minmax(0,1.8fr) minmax(280px,1fr);
    grid-template-rows: 64px minmax(0,1fr) 155px;
  }
  .grow {
    grid-template-columns: 70px minmax(0,1fr) 110px;
  }
  .gtag {
    font-size: 18px;
  }
  .result-person {
    gap: 3px;
  }
  .result-person>b {
    font-size: 14px;
  }
  .result-art {
    min-width: 45px;
  }
  .grate .stars {
    font-size: 21px;
  }
  .gletter {
    font-size: 96px;
  }
  .gnum {
    font-size: 55px;
  }
  .gnum small {
    font-size: 28px;
  }
  .gscore .stars {
    font-size: 27px;
  }
  .money li {
    font-size: 18px;
  }
  .net {
    font-size: 21px;
  }
  .reasons>div {
    font-size: 13px;
  }
  .reasons .ico {
    width: 27px;
    height: 27px;
  }
  .stories {
    grid-template-columns: minmax(0,1fr) 260px;
    grid-template-rows: 75px minmax(0,1fr);
  }
  .story-content {
    gap: 10px;
  }
  .stories .shead h1 {
    font-size: 47px;
  }
  .stories .shead p {
    font-size: 15px;
  }
  .story-card h2 {
    font-size: 29px;
  }
  .story-card p {
    font-size: 16px;
  }
  .story-actions b {
    font-size: 12px;
  }
  .story-actions small {
    font-size: 11px;
  }
  .payoff>p {
    font-size: 14px;
  }
  .payoff>img {
    height: 100px;
  }
  .cards-top {
    grid-template-columns: 1.15fr 1fr;
    gap: 9px;
  }
  .pack-content {
    grid-template-columns: 105px minmax(140px,1fr) 95px;
    padding: 9px;
    gap: 8px;
  }
  .panel-title small {
    display: none;
  }
  .pack-info>h3 {
    font-size: 24px;
  }
  .pack-info>p {
    font-size: 12px;
  }
  .pack-price {
    font-size: 23px;
  }
  .pack-info>.btn {
    font-size: 19px;
  }
  .odds {
    gap: 4px;
  }
  .odds li {
    font-size: 9px;
  }
  .odds li b {
    font-size: 14px;
  }
  .combine-visual {
    gap: 7px;
  }
  .combine-preview>.size-lg {
    width: 145px;
    height: 195px;
  }
  .combine-content {
    padding: 9px;
  }
  .combine-stats>div {
    padding-inline: 5px;
    font-size: 11px;
  }
  .combine-stats b {
    font-size: 14px;
  }
  .spare-stack .size-mini {
    width: 64px;
    height: 105px;
  }
  .cards {
    grid-template-rows: 46px minmax(0,1fr) 190px;
  }
  .cards-tabs button {
    font-size: 11px;
    padding: 7px;
  }
  .binder h2 {
    font-size: 18px;
  }
  .binder header>span {
    font-size: 10px;
  }
  .binder .size-mini {
    width: 110px;
  }
  .binder-do {
    font-size: 11px;
  }
  .cards>.shead h1 {
    font-size: 31px;
  }
}
@media(max-height:800px) and (min-width:901px) {
  :root {
    --header: 50px;
    --nav: 57px;
  }
  .stage {
    padding-top: 8px;
    padding-bottom: 6px;
  }
  .book {
    grid-template-rows: 38px minmax(0,1fr) 127px;
  }
  .mrow {
    min-height: 113px;
  }
  .mslot {
    gap: 7px;
    padding: 9px 7px;
  }
  .mslot span {
    font-size: 10px;
  }
  .forecast .pbars {
    height: 75px;
    margin: 10px 0;
  }
  .forecast .fbig {
    font-size: 48px;
  }
  .forecast .stars {
    font-size: 26px;
  }
  .forecast-inner>span:first-child {
    font-size: 17px;
  }
  .forecast hr {
    margin: 9px 0;
  }
  .forecast .panel-title {
    font-size: 21px;
  }
  .ftarget {
    font-size: 14px;
    margin-top: 4px;
  }
  .hand-tray h2 small {
    font-size: 10px;
  }
  .deck-note {
    font-size: 9px;
  }
  .roster {
    grid-template-rows: 65px minmax(0,1fr);
  }
  .size-roster {
    height: 230px;
  }
  .detail .size-lg {
    height: 230px;
  }
  .detail .size-lg .wstats li {
    padding: 2px 0;
    font-size: 13px;
  }
  .detail .size-lg .wstats b {
    font-size: 16px;
  }
  .detail .size-lg .wname {
    font-size: 22px;
  }
  .rest-panel p,.capcard p {
    font-size: 11px;
  }
  .rest-panel,.capcard {
    padding: 7px;
  }
  .roster-footer>.btn {
    font-size: 16px;
    min-height: 39px;
  }
  .cards {
    grid-template-rows: 38px minmax(0,1fr) 165px;
  }
  .pack-content {
    gap: 8px;
    padding: 8px;
  }
  .pack-info {
    gap: 6px;
  }
  .pack-info>p {
    font-size: 11px;
  }
  .pack-info .btn {
    min-height: 40px;
    padding: 7px;
    font-size: 19px;
  }
  .odds-box,.pity {
    padding: 5px;
  }
  .pity small {
    font-size: 10px;
  }
  .daily h3 {
    font-size: 17px;
  }
  .daily .btn {
    font-size: 12px;
    min-height: 30px;
  }
  .combine-preview>.size-lg {
    height: 175px;
  }
  .combine-visual {
    min-height: 120px;
  }
  .combine-content {
    gap: 6px;
  }
  .combine-content>.btn {
    font-size: 19px;
    padding: 8px;
    min-height: 39px;
  }
  .combine-note {
    font-size: 10px;
  }
  .binder>header {
    padding-block: 3px;
  }
  .binder .size-mini {
    min-height: 85px;
  }
  .binder-do {
    padding-bottom: 2px;
  }
  .live {
    grid-template-rows: 48px minmax(0,1fr);
  }
  .live-main {
    grid-template-rows: 47px minmax(0,1fr) 52px;
  }
  .call-rail {
    gap: 7px;
  }
  .call-btn {
    min-height: 73px;
    padding: 10px;
  }
  .call-btn>span {
    font-size: 24px;
  }
  .commentary {
    font-size: 15px;
    padding: 10px 5px;
  }
  .call-rail>.continue {
    min-height: 54px;
    font-size: 20px;
  }
  .grade {
    grid-template-rows: 57px minmax(0,1fr) 136px;
  }
  .gscore,.financial,.fansbox {
    padding: 8px;
  }
  .gletter {
    font-size: 85px;
  }
  .gnum {
    font-size: 52px;
  }
  .gscore .stars {
    font-size: 26px;
  }
  .score-lockup {
    margin-top: 6px;
  }
  .gscore>p {
    font-size: 12px;
  }
  .money li {
    padding: 2px 0;
    font-size: 17px;
  }
  .money li b {
    font-size: 20px;
  }
  .net {
    font-size: 20px;
    padding: 5px;
  }
  .fansbox>b {
    font-size: 22px;
  }
  .results-rail h2,.why h2,.nextbox h2 {
    font-size: 21px;
  }
  .reasons {
    padding-top: 9px;
  }
  .why details {
    margin-top: 6px;
  }
  .nextbox {
    gap: 5px;
  }
  .nextbox p {
    font-size: 12px;
  }
  .nextbox>.btn {
    font-size: 20px;
    min-height: 43px;
  }
  .stories {
    grid-template-rows: 64px minmax(0,1fr);
  }
  .story-content {
    grid-template-rows: minmax(0,1fr) 95px;
  }
  .heat-label strong {
    font-size: 36px;
  }
  .story-heat {
    height: 19px;
    margin-bottom: 10px;
  }
  .story-timeline {
    margin-bottom: 11px;
  }
  .story-card h2 {
    font-size: 28px;
    padding: 6px;
  }
  .story-card p {
    font-size: 14px;
    padding: 7px;
  }
  .story-actions>button {
    gap: 3px;
    padding: 8px 3px;
  }
  .story-actions .ico {
    width: 26px;
    height: 26px;
  }
  .payoff>img {
    height: 85px;
  }
  .payoff>h3 {
    font-size: 18px;
    margin: 7px 0;
  }
  .hot-crowd {
    font-size: 19px;
    padding: 7px;
  }
  .payoff>p {
    font-size: 13px;
    margin: 9px 0;
  }
  .story-form {
    gap: 5px;
    margin-top: 8px;
    padding-top: 8px;
  }
  .story-form select {
    padding: 3px;
    min-height: 29px;
    font-size: 12px;
  }
  .story-form>.btn {
    font-size: 17px;
    padding: 7px;
    min-height: 37px;
  }
  .rip-stage {
    padding: 10px;
  }
  .reveal-card>.wcard {
    height: 360px;
    width: 300px;
  }
  .rip-pack img {
    height: 250px;
  }
}
@media(max-width:1050px) and (min-width:901px) {
  .hud>span {
    padding-inline: 9px;
    font-size: 14px;
  }
  .hud .ico {
    width: 23px;
    height: 23px;
  }
  .topbar {
    gap: 8px;
    padding-inline: 18px;
  }
  .brand {
    font-size: 25px;
  }
  .book {
    grid-template-columns: minmax(0,1fr) 175px;
  }
  .mrow {
    grid-template-columns: 79px minmax(53px,1fr) 19px minmax(53px,1fr) 68px 61px 53px 68px;
    gap: 3px;
  }
  .mslot b {
    font-size: 17px;
  }
  .mslot span {
    font-size: 9px;
  }
  .play-card>b {
    font-size: 10px;
  }
  .mrate>span {
    font-size: 9px;
  }
  .mrate>b {
    font-size: 25px;
  }
  .mrate small {
    font-size: 14px;
  }
  .mrate .stars {
    font-size: 15px;
  }
  .play-card>small {
    font-size: 8px;
  }
  .size-slot .wname {
    font-size: 12px;
  }
  .hand-tray h2 small {
    display: none;
  }
  .runbar {
    grid-template-columns: 56px 1fr;
  }
  .runbar .btn {
    font-size: 14px;
  }
  .runbar .btn.go {
    font-size: 20px;
  }
  .roster {
    grid-template-columns: minmax(0,1fr) 255px;
  }
  .roster h1 {
    font-size: 27px;
  }
  .capmeter {
    min-width: 190px;
  }
  .capmeter>div {
    font-size: 13px;
  }
  .size-roster {
    grid-template-columns: minmax(0,1fr) minmax(65px,.9fr);
  }
  .size-roster .wname {
    font-size: 17px;
  }
  .size-roster .wstyle {
    font-size: 10px;
  }
  .size-roster .wcost {
    width: 37px;
    height: 37px;
    font-size: 23px;
  }
  .size-roster .wcost small {
    font-size: 8px;
  }
  .stories .shead h1 {
    font-size: 41px;
  }
  .stories .shead p {
    display: none;
  }
  .story-content {
    grid-template-columns: minmax(0,.9fr) minmax(0,1fr);
  }
  .story-pair .wname {
    font-size: 17px;
  }
  .story-pair .mvs {
    font-size: 19px;
  }
  .story-actions small {
    font-size: 10px;
  }
  .pack-content {
    grid-template-columns: 85px minmax(135px,1fr) 85px;
  }
  .pack-info>h3 {
    font-size: 22px;
  }
  .daily {
    padding: 5px;
  }
  .pack-price {
    font-size: 21px;
  }
  .combine-preview>.size-lg {
    width: 125px;
  }
  .combine-visual>.ico {
    width: 24px;
  }
  .combine-stats {
    padding: 5px;
  }
  .combine-stats>div {
    font-size: 10px;
  }
  .combine-stats b {
    font-size: 12px;
  }
  .cards>.shead h1 {
    font-size: 27px;
  }
  .cards-tabs button {
    font-size: 10px;
  }
  .cards-top .panel-title {
    font-size: 21px;
  }
  .live {
    grid-template-columns: minmax(0,1fr) 225px;
  }
  .lstage {
    grid-template-columns: 100px minmax(0,1fr) 100px;
  }
  .lstage .size-slot .wname {
    font-size: 17px;
  }
  .lmeter>span {
    display: none;
  }
  .result-person>b {
    font-size: 12px;
  }
  .result-art {
    min-width: 35px;
  }
  .grow {
    grid-template-columns: 62px minmax(0,1fr) 95px;
  }
  .grate .stars {
    font-size: 18px;
  }
  .grate>strong {
    font-size: 28px;
  }
}
@media(max-width:900px) {
  html,body {
    height: auto;
    min-height: 100%;
  }
  #app {
    height: auto;
    min-height: 100dvh;
  }
  .topbar {
    height: auto;
    min-height: 60px;
    flex-wrap: wrap;
    padding: 10px 15px;
    gap: 8px;
  }
  .brand {
    font-size: 28px;
  }
  .hud {
    font-size: 12px;
    gap: 0;
  }
  .hud>span {
    padding: 0 7px;
    font-size: 12px;
  }
  .hud .ico {
    display: none;
  }
  .settings-toggle {
    width: 28px;
  }
  .stage {
    min-height: 600px;
    padding: 12px 16px;
    flex: 1;
  }
  .board {
    min-height: 600px;
  }
  .goalbar {
    padding: 0 16px 8px;
    font-size: 11px;
  }
  .nav {
    position: sticky;
    bottom: 0;
    z-index: 12;
    height: 65px;
    min-height: 65px;
    padding: 4px;
    gap: 3px;
  }
  .nav button {
    flex-direction: column;
    gap: 3px;
    padding: 5px 2px;
    font-size: 12px;
  }
  .nav .ico {
    width: 24px;
    height: 24px;
  }
  .book,.roster,.grade,.cards,.stories,.live {
    padding: 12px;
    gap: 12px;
  }
  .book {
    display: flex;
    flex-direction: column;
  }
  .book>.shead {
    flex-wrap: wrap;
    gap: 5px;
  }
  .shead h1 {
    font-size: 31px;
  }
  .shead p {
    font-size: 15px;
  }
  .brows {
    gap: 8px;
  }
  .mrow {
    flex: none;
    min-height: 145px;
    grid-template-columns: 80px minmax(60px,1fr) 20px minmax(60px,1fr) 78px 70px 62px 79px;
  }
  .mrate>b {
    font-size: 28px;
  }
  .forecast {
    display: flex;
    overflow: visible;
    min-height: 0;
  }
  .hand-tray {
    min-height: 155px;
  }
  .runbar {
    display: flex;
    min-height: 65px;
    justify-content: flex-end;
  }
  .runbar .btn {
    flex-direction: row;
    min-width: 150px;
    font-size: 22px;
  }
  .picker {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 90px;
    max-height: 55dvh;
    overflow: auto;
  }
  .roster {
    grid-template-columns: minmax(0,1fr) 260px;
    grid-template-rows: auto minmax(0,1fr);
  }
  .roster .shead {
    grid-column: 1/-1;
  }
  .roster h1 {
    font-size: 31px;
    max-width: none;
  }
  .rside {
    grid-column: 2;
    grid-row: 2;
    border-left: 1px solid #82795d;
  }
  .rgrid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    max-height: 650px;
  }
  .roster .size-roster {
    height: 260px;
    grid-template-columns: minmax(0,1fr) 75px;
  }
  .roster .size-roster .wname {
    font-size: 18px;
  }
  .capmeter {
    max-width: 330px;
  }
  .detail .size-lg {
    height: 290px;
  }
  .roster-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .live {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto auto auto;
  }
  .live-title {
    padding-bottom: 10px;
  }
  .live-title h1 {
    font-size: 38px;
  }
  .live-title h1:before,.live-title h1:after {
    padding: 0 8px;
  }
  .live-main {
    grid-template-rows: 50px 340px 57px;
  }
  .lstage {
    grid-template-columns: 130px 1fr 130px;
  }
  .call-rail {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
  }
  .call-rail h2 {
    grid-column: 1/3;
  }
  .calls-left {
    align-self: center;
    font-size: 15px;
    margin: 0;
  }
  .call-btn {
    min-height: 80px;
    padding: 10px;
    gap: 8px;
  }
  .call-btn>.ico {
    width: 25px;
    height: 25px;
  }
  .call-btn>span {
    font-size: 22px;
  }
  .call-btn small {
    font-size: 12px;
  }
  .commentary {
    grid-column: 1/3;
    margin: 0;
    border: 0;
    font-size: 14px;
  }
  .call-rail>.continue {
    font-size: 18px;
  }
  .call-rail>.text-button {
    grid-column: 1/-1;
  }
  .grade {
    grid-template-columns: minmax(0,1.6fr) minmax(240px,1fr);
    grid-template-rows: 58px auto auto;
  }
  .grows {
    min-height: 380px;
  }
  .grade>.banner h1 {
    font-size: 32px;
  }
  .grow {
    grid-template-columns: 58px minmax(0,1fr) 87px;
    min-height: 120px;
  }
  .gtag {
    font-size: 16px;
  }
  .result-person>b {
    font-size: 12px;
  }
  .result-art {
    display: none;
  }
  .result-person {
    padding: 5px;
  }
  .grate .stars {
    font-size: 18px;
  }
  .grate>strong {
    font-size: 27px;
  }
  .grate strong small {
    font-size: 18px;
  }
  .gletter {
    font-size: 76px;
  }
  .gnum {
    font-size: 43px;
  }
  .gscore .stars {
    font-size: 23px;
  }
  .score-lockup {
    gap: 10px;
  }
  .gnum small {
    font-size: 25px;
  }
  .money li {
    font-size: 16px;
  }
  .money li b {
    font-size: 19px;
  }
  .net {
    font-size: 18px;
  }
  .fansbox>b {
    font-size: 23px;
  }
  .reasons {
    flex-direction: column;
    gap: 8px;
  }
  .reasons>div+div {
    border-left: 0;
    padding-left: 0;
  }
  .reasons>div {
    font-size: 13px;
  }
  .reasons .ico {
    width: 22px;
    height: 22px;
  }
  .why {
    max-height: none;
  }
  .nextbox {
    min-height: 175px;
  }
  .nextbox>.btn {
    font-size: 21px;
  }
  .stories {
    grid-template-columns: minmax(0,1fr) 245px;
    grid-template-rows: 70px auto;
  }
  .stories .shead h1 {
    font-size: 43px;
  }
  .stories .shead p {
    display: none;
  }
  .story-content {
    grid-template-columns: 1fr;
    grid-template-rows: 330px auto 100px;
  }
  .story-center {
    overflow: visible;
  }
  .story-pair {
    grid-template-columns: 1fr 30px 1fr;
  }
  .other-stories {
    grid-row: 3;
  }
  .payoff {
    grid-column: 2;
    grid-row: 1/3;
  }
  .story-content {
    grid-template-rows: 280px auto 100px;
  }
  .payoff>img {
    height: 120px;
  }
  .story-actions small {
    font-size: 11px;
  }
  .story-pair .wname {
    font-size: 19px;
  }
  .cards {
    display: flex;
    flex-direction: column;
  }
  .cards>.shead {
    flex-wrap: wrap;
    gap: 10px;
  }
  .cards>.shead h1 {
    font-size: 34px;
  }
  .cards-tabs button {
    font-size: 13px;
  }
  .cards-top {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }
  .pack-content {
    grid-template-columns: 150px minmax(0,1fr) 130px;
    min-height: 360px;
  }
  .pack-info>h3 {
    font-size: 30px;
  }
  .combine-content {
    min-height: 350px;
  }
  .combine-visual {
    min-height: 210px;
  }
  .combine-preview>.size-lg {
    height: 230px;
    width: 180px;
  }
  .spare-stack {
    flex: 0 1 240px;
  }
  .spare-stack .size-mini {
    width: 105px;
    height: 150px;
  }
  .combinebox,.packbox {
    overflow: visible;
  }
  .binder {
    height: 220px;
    flex-shrink: 0;
  }
  .shopbox {
    min-height: 420px;
  }
  .shop-item {
    min-width: 220px;
  }
  .set-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .career-panel>div {
    padding: 16px;
  }
  .rip-stage {
    gap: 40px;
    padding: 20px 10px;
  }
  .rip-pack {
    width: 200px;
  }
  .rip-pack img {
    width: 180px;
    height: 270px;
  }
  .reveal-card>.wcard {
    width: 280px;
    height: 370px;
  }
  .rip-footer {
    flex-wrap: wrap;
  }
  .season-summary {
    gap: 20px;
    padding: 16px;
  }
  .season-score h2 {
    font-size: 32px;
  }
  .goalbar>span:last-child {
    display: none;
  }
  .announce {
    bottom: 85px;
    font-size: 13px;
  }
  .settings-panel {
    position: fixed;
    top: 80px;
    right: 20px;
    left: 20px;
    max-width: 430px;
    margin-left: auto;
  }
}
@media(max-width:750px) {
  .topbar {
    padding: 9px 12px;
  }
  .brand {
    font-size: 26px;
  }
  .brand>.ico {
    width: 30px;
    height: 30px;
  }
  .hud {
    order: 3;
    margin: 4px 0 0;
    width: 100%;
    justify-content: space-between;
  }
  .hud>span {
    font-size: 12px;
    padding: 0 7px;
  }
  .hud>span:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .settings-toggle {
    margin-left: auto;
  }
  .stage {
    padding: 10px 10px;
    min-height: 600px;
  }
  .board {
    min-height: 600px;
  }
  .board:after {
    inset: 3px;
  }
  .book,.roster,.grade,.stories,.live,.cards {
    padding: 10px;
  }
  .book .shead h1 {
    font-size: 32px;
  }
  .mrow {
    grid-template-columns: 62px minmax(60px,1fr) 20px minmax(60px,1fr) 71px;
    grid-template-rows: 130px 75px;
    gap: 5px;
  }
  .mslot {
    grid-column: 1;
    grid-row: 1/3;
    padding: 11px 6px;
  }
  .mslot b {
    font-size: 18px;
    overflow-wrap: break-word;
  }
  .mslot span {
    font-size: 11px;
  }
  .mrow>.mpick {
    grid-row: 1;
  }
  .mrow>.mpick:nth-child(2) {
    grid-column: 2;
  }
  .mrow>.mpick:nth-child(4) {
    grid-column: 4;
  }
  .mrow>.mvs {
    grid-column: 3;
    grid-row: 1;
    font-size: 21px;
  }
  .mrow>.kind-match {
    grid-column: 2;
    grid-row: 2;
  }
  .mrow>.kind-move {
    grid-column: 3/5;
    grid-row: 2;
  }
  .mrow>.kind-extra {
    grid-column: 5;
    grid-row: 2;
  }
  .mrow>.mrate {
    grid-column: 5;
    grid-row: 1;
  }
  .mrate>span {
    font-size: 10px;
  }
  .mrate>b {
    font-size: 28px;
  }
  .mrate .stars {
    font-size: 14px;
  }
  .mrate small {
    font-size: 12px;
  }
  .play-card>b {
    font-size: 10px;
  }
  .mrow .play-art {
    margin: 2px 0;
  }
  .mrow .play-art .ico {
    width: 22px;
    height: 22px;
  }
  .mrow .play-art img {
    object-position: center 30%;
  }
  .mrow .play-card>small {
    display: none;
  }
  .mrow .play-kind {
    font-size: 9px;
    padding: 2px;
  }
  .hand-tray h2 {
    font-size: 16px;
  }
  .hand-tray h2 small {
    display: none;
  }
  .hand-tray {
    min-height: 155px;
  }
  .hand-row .play-card {
    min-width: 95px;
  }
  .deck-note {
    font-size: 9px;
  }
  .runbar {
    min-height: 58px;
  }
  .runbar>.btn {
    flex: 1;
    min-width: 0;
    font-size: 19px;
  }
  .runbar .btn.go {
    font-size: 22px;
  }
  .picker {
    left: 14px;
    right: 14px;
    bottom: 80px;
    padding: 10px;
  }
  .picker h2 {
    font-size: 18px;
  }
  .picker-row .wcard {
    width: 220px;
    flex-basis: 220px;
  }
  .roster {
    display: flex;
    flex-direction: column;
  }
  .roster .shead {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 6px;
  }
  .roster h1 {
    font-size: 34px;
  }
  .capmeter {
    width: 100%;
    max-width: none;
  }
  .capmeter>div {
    font-size: 17px;
  }
  .capmeter small {
    font-size: 12px;
  }
  .roster-list {
    overflow: visible;
  }
  .rgrid {
    max-height: 590px;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }
  .roster .size-roster {
    height: 240px;
    padding: 5px;
    grid-template-columns: 1fr;
    grid-template-rows: 27px minmax(0,1fr) 29px;
  }
  .roster .size-roster .wname {
    font-size: 17px;
    padding-right: 28px;
  }
  .roster .size-roster .wcost {
    width: 29px;
    height: 29px;
    font-size: 20px;
    right: 5px;
    top: 5px;
  }
  .roster .size-roster .wcost small {
    display: none;
  }
  .roster .size-roster .portrait-window {
    grid-row: 2;
    grid-column: 1;
  }
  .roster .size-roster .winfo {
    display: none;
  }
  .roster .size-roster .fatigue {
    grid-column: 1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr 38px;
  }
  .roster .size-roster .fatigue>span {
    display: none;
  }
  .roster .size-roster .fatigue small span {
    display: inline;
  }
  .roster .size-roster .cutout {
    height: 145%;
  }
  .rside {
    border-left: 0;
    padding-left: 0;
    overflow: visible;
  }
  .detail>.size-lg {
    height: 330px;
    grid-template-columns: minmax(0,1.3fr) 1fr;
  }
  .detail .size-lg .wname {
    font-size: 29px;
  }
  .roster-footer {
    flex-direction: row;
  }
  .live-title h1 {
    font-size: 30px;
  }
  .live-title h1:before,.live-title h1:after {
    display: none;
  }
  .live-main {
    grid-template-rows: 50px 260px 55px;
  }
  .lstage {
    grid-template-columns: 80px minmax(0,1fr) 80px;
    gap: 4px;
  }
  .lstage>.wcard {
    padding: 3px;
  }
  .lstage .size-slot .wname {
    font-size: 14px;
  }
  .lstage .cutout {
    height: 115%;
  }
  .lart figcaption {
    padding: 7px;
    font-size: 15px;
  }
  .lart figcaption span {
    display: none;
  }
  .ltab {
    padding: 5px;
    gap: 3px;
    flex-direction: column;
    justify-content: center;
  }
  .ltab b {
    font-size: 13px;
  }
  .ltab>span {
    font-size: 10px;
  }
  .ltab .ico {
    display: none;
  }
  .ltab .live-badge {
    font-size: 11px;
    padding: 0 4px;
    border-width: 1px;
  }
  .lmeter>b {
    font-size: 16px;
  }
  .lmeter strong {
    font-size: 16px;
    margin-left: 4px;
  }
  .lmeter>span {
    display: none;
  }
  .lmeter>i {
    height: 17px;
  }
  .call-rail {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .call-rail h2,.commentary,.call-rail>.text-button {
    grid-column: 1;
  }
  .calls-left {
    grid-row: 2;
    font-size: 15px;
  }
  .call-btn {
    min-height: 65px;
    padding: 9px 14px;
    justify-content: flex-start;
    gap: 20px;
  }
  .call-btn>span {
    font-size: 24px;
  }
  .call-btn>.ico {
    width: 35px;
    height: 35px;
  }
  .commentary {
    font-size: 15px;
  }
  .call-rail>.continue {
    font-size: 23px;
    min-height: 56px;
  }
  .grade {
    display: flex;
    flex-direction: column;
  }
  .grade>.banner h1 {
    font-size: 34px;
  }
  .grows {
    min-height: 350px;
  }
  .grow {
    grid-template-columns: 62px minmax(0,1fr) 90px;
    min-height: 110px;
  }
  .result-person>b {
    font-size: 13px;
  }
  .results-rail {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .gletter {
    font-size: 105px;
  }
  .gnum {
    font-size: 72px;
  }
  .gscore .stars {
    font-size: 36px;
  }
  .gscore h2,.financial h2,.fansbox h2 {
    font-size: 25px;
  }
  .money li {
    font-size: 21px;
    padding-block: 6px;
  }
  .money li b {
    font-size: 25px;
  }
  .net {
    font-size: 25px;
    padding: 9px;
  }
  .fansbox>b {
    font-size: 30px;
  }
  .why {
    overflow: visible;
  }
  .reasons>div {
    font-size: 16px;
  }
  .reasons .ico {
    width: 30px;
    height: 30px;
  }
  .nextbox {
    min-height: 160px;
  }
  .nextbox p {
    font-size: 15px;
  }
  .stories {
    display: flex;
    flex-direction: column;
  }
  .stories .shead h1 {
    font-size: 43px;
    white-space: normal;
  }
  .story-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .story-pair {
    height: 300px;
    min-height: 300px;
  }
  .story-center {
    overflow: visible;
  }
  .other-stories {
    min-height: 90px;
  }
  .payoff {
    border-left: 0;
    padding-left: 0;
    overflow: visible;
  }
  .payoff>img {
    height: 150px;
  }
  .payoff>p {
    font-size: 16px;
  }
  .story-form label {
    font-size: 15px;
  }
  .story-form select {
    min-height: 42px;
    font-size: 15px;
  }
  .story-form>.btn {
    min-height: 50px;
    font-size: 21px;
  }
  .story-form {
    gap: 10px;
  }
  .cards>.shead h1 {
    font-size: 31px;
  }
  .cards-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 4px;
  }
  .cards-tabs button {
    font-size: 11px;
    padding: 8px 5px;
  }
  .cards-top {
    gap: 12px;
  }
  .pack-content {
    grid-template-columns: 100px minmax(0,1fr);
    min-height: 0;
    padding: 9px;
    gap: 10px;
  }
  .pack-art {
    height: 100%;
    max-height: 300px;
  }
  .pack-info>h3 {
    font-size: 27px;
  }
  .pack-info>p {
    font-size: 13px;
  }
  .pack-info {
    gap: 9px;
  }
  .pack-price {
    font-size: 25px;
  }
  .daily {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 75px 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
  }
  .daily>img {
    grid-column: 1;
    grid-row: 1/3;
    width: 75px;
    height: 100px;
  }
  .daily h3 {
    grid-column: 2;
    font-size: 20px;
  }
  .daily p {
    grid-column: 3;
    grid-row: 1;
    text-align: center;
  }
  .daily>.btn {
    font-size: 14px;
    padding: 9px;
  }
  .combine-content {
    min-height: 330px;
  }
  .combine-preview>.size-lg {
    width: 145px;
    height: 210px;
  }
  .combine-visual {
    gap: 8px;
  }
  .spare-stack {
    min-width: 70px;
  }
  .spare-stack .size-mini {
    width: 75px;
    height: 125px;
    margin-left: -35px;
  }
  .combine-stats {
    padding: 8px 4px;
  }
  .combine-stats>div {
    font-size: 11px;
    padding-inline: 6px;
  }
  .combine-stats b {
    font-size: 13px;
  }
  .combine-content>.btn {
    font-size: 22px;
  }
  .binder {
    height: 230px;
  }
  .binder>header {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .binder h2 {
    font-size: 21px;
  }
  .binder h2 small {
    margin-left: 10px;
    font-size: 12px;
  }
  .binder-do {
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: 11px;
  }
  .binder-do .text-button {
    margin: 0;
    font-size: 11px;
  }
  .binder .size-mini {
    width: 115px;
  }
  .shop-row {
    padding: 10px;
    gap: 10px;
  }
  .shop-cap {
    flex-wrap: wrap;
  }
  .shop-cap .btn {
    width: 100%;
  }
  .shop-cap p {
    font-size: 12px;
  }
  .set-grid {
    gap: 12px;
    padding: 12px;
  }
  .set-grid h3 {
    font-size: 19px;
  }
  .set-grid strong {
    font-size: 12px;
  }
  .rip-stage {
    flex-direction: column;
    gap: 20px;
  }
  .rip-pack {
    width: auto;
  }
  .rip-pack img {
    width: 120px;
    height: 130px;
  }
  .rip-pack h2 {
    font-size: 20px;
  }
  .rip-pack p {
    font-size: 12px;
  }
  .reveal-card>.wcard {
    width: 270px;
    height: 360px;
  }
  .rip .shead {
    flex-direction: column;
    gap: 7px;
    align-items: flex-start;
  }
  .rip .shead h1 {
    font-size: 32px;
  }
  .rip-footer {
    padding: 5px;
    gap: 7px;
  }
  .rip-footer .btn {
    flex: 1;
    font-size: 16px;
    padding: 10px 8px;
  }
  .season-summary {
    grid-template-columns: 1fr;
    padding: 15px;
  }
  .season-score h2 {
    font-size: 32px;
  }
  .season .banner h1 {
    font-size: 32px;
  }
  .settings-panel {
    top: 65px;
    right: 16px;
    left: 16px;
    padding: 15px;
  }
  .settings-panel h2 {
    font-size: 24px;
  }
  .settings-panel>.btn {
    font-size: 16px;
    padding: 10px;
  }
  .settings-panel .icon-button {
    width: 30px;
    height: 30px;
  }
  .announce {
    max-width: 92vw;
    width: max-content;
    padding: 9px 13px;
    font-size: 13px;
  }
  .empty-state {
    padding: 25px;
  }
  .empty-state h1 {
    font-size: 32px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation: none!important;
    transition: none!important;
    scroll-behavior: auto!important;
  }
}
@media(max-width:900px) {
  .forecast-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 8px 18px;
  }
  .forecast-inner>span:first-child {
    grid-column: 1;
    grid-row: 1;
    text-align: center;
  }
  .forecast .fbig {
    grid-column: 1;
    grid-row: 2;
    text-align: center;
  }
  .forecast-inner>.stars {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
  }
  .forecast-inner .ftarget {
    grid-column: 1;
    grid-row: 4;
    text-align: center;
  }
  .forecast-inner>hr {
    display: none;
  }
  .forecast-inner>h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .forecast .pbars {
    grid-column: 2;
    grid-row: 2/5;
    height: 130px;
    margin: 0;
  }
  .forecast .fnotes {
    grid-column: 1/-1;
    grid-row: 5;
  }
}

/* The source's printed move label occupies the bottom band; keep one UI name. */
.kind-move .play-art img {
  height: 118%;
  min-height: 118%;
  align-self: flex-start;
  object-position: center top;
}

/* Keep the printed details intact when a board has a fixed viewport height. */
.size-roster .alignment,
.size-lg .alignment,
.size-roster .wstyle,
.size-lg .wstyle {
  flex-shrink: 0;
}
.size-roster .winfo,
.size-lg .winfo {
  gap: 3px;
}
.wstats li {
  padding: 3px 0;
}
.wstats li b {
  line-height: 1.15;
}
.panel-title {
  flex-shrink: 0;
}

@media (min-width: 901px) {
  .roster .size-roster {
    height: clamp(218px, calc((100dvh - 375px) / 2), 300px);
  }
  .results-rail {
    gap: 7px;
  }
  .gscore, .financial, .fansbox {
    padding: 8px;
  }
  .gletter {
    font-size: clamp(76px, 11vh, 100px);
  }
  .gnum {
    font-size: clamp(46px, 7vh, 60px);
  }
  .money li {
    line-height: 1.2;
    padding-block: 3px;
  }
  .money li b {
    font-size: clamp(18px, 2.4vh, 23px);
  }
  .net {
    line-height: 1.15;
    font-size: 22px;
  }
  .fansbox {
    position: relative;
    gap: 3px;
  }
  .fansbox > small {
    position: absolute;
    top: 12px;
    right: 8px;
  }
  .pack-content {
    grid-template-rows: minmax(0, 1fr);
  }
  .pack-info {
    min-height: 0;
    gap: 6px;
  }
  .odds-box {
    padding: 6px;
  }
  .odds li {
    display: grid;
    grid-template-columns: 9px auto;
    grid-template-rows: auto auto;
    gap: 2px;
    align-items: center;
  }
  .odds .pip {
    width: 9px;
    height: 9px;
  }
  .odds li b {
    grid-column: 1 / -1;
    text-align: center;
    line-height: 1.2;
  }
  .pity {
    padding: 6px;
    font-size: 11px;
  }
  .pity i {
    height: 10px;
    margin-block: 4px;
  }
  .pity > small {
    display: block;
    font-size: 10px;
    line-height: 1.2;
  }
  .combine-visual {
    min-height: 0;
    overflow: hidden;
  }
  .combine-preview {
    height: 100%;
    max-height: 237px;
    min-height: 0;
  }
  .combine-preview > .size-lg {
    flex: 1;
    height: auto;
    min-height: 0;
  }
  .combine-stats, .combine-content > .btn, .combine-note {
    flex-shrink: 0;
  }
  .spare-stack .size-mini {
    max-height: 115px;
  }
}

@media (min-width: 901px) and (max-height: 800px) {
  .detail .size-lg {
    height: 255px;
  }
  .size-roster .winfo,
  .detail .size-lg .winfo {
    padding-top: 9px;
    gap: 2px;
  }
  .detail .size-lg .wstyle {
    font-size: 11px;
  }
  .detail .size-lg .wstats {
    margin-top: 1px;
  }
  .detail .size-lg .wstats li {
    padding-block: 1px;
  }
  .roster-footer {
    flex-direction: row;
    align-items: center;
  }
  .roster-footer > b {
    font-size: 10px;
  }
  .capcard > .ico {
    width: 28px;
    height: 28px;
  }
  .capcard h3 {
    font-size: 16px;
  }
  .capcard > .btn {
    font-size: 12px;
    min-height: 34px;
    padding: 6px;
  }
  .money li {
    padding-block: 2px;
  }
  .net {
    font-size: 20px;
  }
}
@media (min-width: 901px) and (max-height: 800px) {
  .roster .size-roster .wstats li {
    padding-block: 2px;
  }
}