/* Local fonts keep the design consistent when index.html is opened offline. */
@font-face {
  font-family: 'Chill Round';
  src: url('assets/fonts/ChillRoundGothic-Heavy.woff') format('woff');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Local';
  src: url('assets/fonts/Nunito-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

body[data-design="d"] {
  --type-u: 1px;
  --font-display: 'Chill Round', 'Microsoft YaHei', sans-serif;
  --font-number: 'Nunito Local', var(--font-display);
  --type-shadow: #c9b6de;
}
body[data-design="d"] .company-logo {
  width: 290px;
  max-width: 62vw;
  object-fit: contain;
}
body[data-design="d"] h1 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow: calc(3 * var(--type-u)) calc(4 * var(--type-u)) 0 #fff8e7;
}
body[data-design="d"] .rank-card { text-align: center; }
body[data-design="d"] .rank-num {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .18em;
  width: max-content;
  min-width: 2.35em;
  padding: .12em .38em .15em;
  border: calc(2 * var(--type-u)) solid #9c7bb5;
  border-radius: 2em;
  background: #efe4f7;
  box-shadow: 0 calc(4 * var(--type-u)) 0 #d6c4e3;
  font-family: var(--font-number);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -.045em;
  color: #70508f;
}
body[data-design="d"] .rank-prefix {
  font-size: .35em;
  font-weight: 900;
  letter-spacing: .04em;
}
body[data-design="d"] .member-name {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .035em;
  text-align: center;
  color: #284f43;
  -webkit-text-stroke: calc(5 * var(--type-u)) #fffcf0;
  paint-order: stroke fill;
  text-shadow: calc(3 * var(--type-u)) calc(5 * var(--type-u)) 0 #c5d9bf;
}
body[data-design="d"] .member-amount {
  font-family: var(--font-number);
  font-weight: 1000;
  line-height: 1.15;
  letter-spacing: -.035em;
  text-align: center;
  color: #78539b;
  -webkit-text-stroke: calc(5 * var(--type-u)) #fffcf0;
  paint-order: stroke fill;
  text-shadow: 0 calc(4 * var(--type-u)) 0 var(--type-shadow);
}
body[data-design="d"] .member-amount small {
  display: inline-block;
  font-size: .43em;
  font-weight: 900;
  vertical-align: .12em;
  margin-right: .08em;
  letter-spacing: 0;
  -webkit-text-stroke-width: calc(3 * var(--type-u));
  text-shadow: 0 calc(2 * var(--type-u)) 0 var(--type-shadow);
}
body[data-design="d"] .br-name {
  font-family: var(--font-display);
  font-weight: 900;
  text-align: left;
}
body[data-design="d"] .br-rank,
body[data-design="d"] .br-amount {
  font-family: var(--font-number);
  font-weight: 900;
}
body[data-design="d"] .br-amount small { font-weight: 800; }
body[data-design="d"] .control {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .03em;
}

@media (min-width:1101px) {
  body[data-design="d"] { --type-u: var(--tv-u); }
  body[data-design="d"] .brandbar {
    top: 0;
    height: calc(160 * var(--tv-u));
  }
  body[data-design="d"] .company-logo {
    width: calc(570 * var(--tv-u));
    max-width: none;
    align-self: flex-start;
  }
  body[data-design="d"] .rank-card {
    row-gap: calc(28 * var(--tv-u));
  }
  body[data-design="d"] .rank-num { font-size: calc(64 * var(--tv-u)); }
  body[data-design="d"] .member-name { font-size: calc(96 * var(--tv-u)); }
  body[data-design="d"] .member-amount { font-size: calc(150 * var(--tv-u)); }
  /* Keep the full list together: avatar + name, followed by one aligned amount column. */
  body[data-design="d"] .board-row {
    width: min(100%, calc(1040 * var(--tv-u)));
    margin-inline: auto;
    grid-template-columns: calc(44 * var(--tv-u)) calc(54 * var(--tv-u)) minmax(0, 1fr) auto;
    column-gap: calc(20 * var(--tv-u));
    padding-inline: calc(22 * var(--tv-u));
  }
  body[data-design="d"] .br-avatar {
    width: calc(54 * var(--tv-u));
    height: calc(54 * var(--tv-u));
  }
  body[data-design="d"] .br-name { font-size: calc(29 * var(--tv-u)); }
  body[data-design="d"] .br-amount { font-size: calc(32 * var(--tv-u)); }
}
@media (min-width:701px) and (max-width:1100px) {
  body[data-design="d"] .brandbar { top: 5px; }
  body[data-design="d"] .rank-num { font-size: 38px; }
}
@media (max-width:700px) {
  body[data-design="d"] { --type-u: .65px; }
  body[data-design="d"] .company-logo { width: 220px; max-width: calc(100vw - 100px); }
  body[data-design="d"] .brandbar { top: 6px; }
  body[data-design="d"] .rank-num { font-size: 30px; }
  body[data-design="d"] .member-name { font-size: 34px; }
  body[data-design="d"] .member-amount { font-size: 54px; }
}