@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700;800;900&display=swap");
:root {
  color-scheme: dark;
  --bg: #020910;
  --panel: #071321;
  --line: #293d57;
  --purple: #882dff;
  --cyan: #77eafa;
  --green: #1dffad;
  --gold: #ffcb42;
  --muted: #9aa9bf;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: #060d1e;
  color: #f8f8ff;
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
}
button,
input,
select {
  font: inherit;
}
button {
  color: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
button {
  border: 0;
}
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #bca1ff;
  outline-offset: 4px;
}
svg {
  vertical-align: middle;
  flex-shrink: 0;
}
img {
  max-width: 100%;
}
button svg {
  width: 22px;
  height: 22px;
}
.coin-icon {
  width: 27px;
  height: 27px;
  object-fit: contain;
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
}
p {
  line-height: 1.4;
}
h1,
h2,
h3 {
  font-weight: 800;
}
.ba-stage {
  min-height: 100svh;
  display: flex;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 25%, #132247 0, transparent 65%), #060d1e;
}
.ba-phone {
  width: 100%;
  max-width: 430px;
  position: relative;
  min-height: 100svh;
  background:
    radial-gradient(ellipse at 100% 0, #0b1026 0, transparent 40%),
    linear-gradient(#02070e, #020d15);
  box-shadow: 0 0 80px #0009;
  display: flex;
  flex-direction: column;
}
.ba-top {
  height: 90px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 23px 24px 17px;
}
.ba-logo {
  padding: 0;
  background: none;
  text-align: left;
}
.ba-logo b {
  font:
    900 italic 27px Arial,
    sans-serif;
  letter-spacing: -1px;
  white-space: nowrap;
}
.ba-logo i {
  font-style: italic;
}
.ba-logo i:after {
  content: "//";
  color: #9945ff;
}
.ba-logo small {
  display: block;
  font:
    500 8px Arial,
    sans-serif;
  letter-spacing: 4px;
  margin-top: 5px;
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: none;
  color: #e9eaff;
}
.ba-screen {
  padding: 10px 23px 28px;
  flex: 1;
  min-width: 0;
  animation: arrive 0.25s ease-out;
}
.ba-nav {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 76px;
  padding: 9px 4px max(10px, env(safe-area-inset-bottom));
  background: #030a12f2;
  border-top: 1px solid #384065;
  border-radius: 18px 18px 0 0;
  backdrop-filter: blur(18px);
  box-shadow: 0 -8px 25px #0005;
  flex-shrink: 0;
}
.ba-nav button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  color: #a9b3c9;
  background: none;
  font-size: 12px;
  min-width: 0;
}
.ba-nav i {
  display: flex;
  font-style: normal;
}
.ba-nav svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
}
.ba-nav .active {
  color: #b569ff;
}
.ba-nav .active svg {
  filter: drop-shadow(0 0 7px #9b32ff);
}
.ba-nav .active:before {
  content: "";
  position: absolute;
  top: -1px;
  width: 27px;
  height: 2px;
  background: #a854ff;
  box-shadow: 0 0 12px #a02dff;
}
.city {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  z-index: 2;
  margin: 0 0 10px;
}
.home-hero {
  height: 465px;
  margin: -37px -23px 0;
  position: relative;
  overflow: hidden;
}
.scene-art {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}
.scene-home {
  background-image: url("/assets/hero.png");
  background-position: 50% 65%;
}
.scene-invite {
  background-image: url("/assets/invite.png");
}
.scene-robot {
  background-image: url("/assets/success.png");
}
.scene-victory {
  background-image: url("/assets/victory.png");
}
.scene-parent {
  background-image: url("/assets/parent.png");
}
.scene-cup {
  background-image: url("/assets/trophy.png");
}
.home-hero > .scene-art {
  position: absolute;
  inset: 0;
}
.home-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#02081022, transparent 68%, #020b13);
}
.home-copy {
  position: absolute;
  z-index: 2;
  left: 23px;
  top: 36px;
  right: 20px;
}
.home-copy h1 {
  font-size: 45px;
  letter-spacing: 0.1px;
  line-height: 0.98;
  margin: 0;
  text-shadow: 0 2px 20px #000;
}
.home-copy p {
  font-size: 17px;
  color: #c7cadd;
  margin: 14px 0;
}
.human {
  display: none;
}
.feature-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: -14px 0 23px;
  text-align: center;
}
.feature-row span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
}
.feature-row i {
  color: #a44dff;
  display: block;
}
.feature-row svg {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 7px #7029b766);
}
.school-select {
  min-height: 71px;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 10px 12px;
  background: linear-gradient(115deg, #081521, #030a12);
  border: 1px solid #34465e;
  border-radius: 11px;
  text-align: left;
}
.school-select > i {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border: 1px solid #ccd2de;
  border-radius: 50%;
  font-style: normal;
  color: #e9edf7;
  flex-shrink: 0;
}
.school-select > i svg {
  width: 30px;
  height: 30px;
}
.school-select span {
  font-size: 12px;
  color: #9eabc0;
  flex: 1;
  min-width: 0;
}
.school-select b {
  display: block;
  font-size: 18px;
  color: #f7f7ff;
  margin-top: 2px;
}
.school-select select {
  display: block;
  max-width: 100%;
  width: 100%;
  font-size: 17px;
  font-weight: 700;
  color: #f6f8ff;
  background: #06101b;
  border: 0;
  padding: 4px 0;
  min-height: 30px;
}
.school-select em {
  font-style: normal;
  font-size: 24px;
}
.purple-btn,
.blue-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  padding: 13px 12px;
  margin-top: 14px;
  border: 1px solid #b368ff;
  border-radius: 9px;
  background: linear-gradient(120deg, #7430fb, #9124f4);
  box-shadow:
    inset 0 1px 7px #e0b3ff40,
    0 5px 22px #7622ff35;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0.15px;
  transition:
    filter 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}
.purple-btn:hover,
.blue-btn:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 25px #8b30ff66;
}
.purple-btn:active,
.blue-btn:active {
  transform: translateY(1px);
}
.purple-btn:disabled {
  opacity: 0.4;
}
.blue-btn {
  background: linear-gradient(115deg, #42aaff, #78c6ff);
  border-color: #9ddcfe;
  color: #041124;
  box-shadow:
    inset 0 1px 8px #fff7,
    0 5px 20px #277efd44;
}
.text-btn {
  display: block;
  margin: 10px auto 0;
  background: none;
  color: #b876f3;
  text-decoration: underline;
  font-size: 14px;
  min-height: 30px;
}
.page-h {
  font-size: 27px;
  line-height: 1.1;
  margin: 6px 0 10px;
}
.sub {
  font-size: 16px;
  color: #bcc5d8;
  margin: 6px 0 20px;
}
.micro {
  font-size: 12px;
  color: #95a3b9;
  line-height: 1.4;
  margin: 10px 0;
}
.nickname {
  width: 100%;
  height: 49px;
  border: 1px solid #476180;
  border-radius: 8px;
  background: #030d19;
  padding: 0 14px;
  color: white;
  font-size: 17px;
}
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin: 19px 0 24px;
}
.avatar-grid > button {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #3c5574;
  border-radius: 12px;
  background: #030815;
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
}
.avatar-portrait {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: inherit;
  background: #030815;
}
.avatar-grid > button.active {
  border: 2px solid #bc59ff;
  box-shadow:
    0 0 0 2px #6938ff55,
    0 0 19px #9140ff77;
}
.avatar-grid > button:hover {
  border-color: #c084fc;
  transform: translateY(-2px);
}
.screen-setup .purple-btn {
  margin-top: 25px;
}
.battle-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin: 25px 0 28px;
}
.battle-meta > b {
  font-size: 16px;
  letter-spacing: 0.8px;
}
.battle-meta > span {
  grid-column: 2;
  grid-row: 1/3;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #25334d;
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 16px;
}
.progress {
  display: flex;
  gap: 11px;
  position: relative;
  grid-column: 1;
}
.progress:before {
  content: "";
  position: absolute;
  left: 5px;
  right: 10px;
  top: 6px;
  height: 1px;
  background: #263952;
}
.progress i {
  position: relative;
  width: 13px;
  height: 13px;
  background: #344060;
  border-radius: 50%;
}
.progress .on {
  background: linear-gradient(#adf6ff, #4cd5e4);
  box-shadow: 0 0 10px #3bcadc30;
  border: 1px solid #b1f5ff;
}
.battle-pill {
  display: table;
  margin: 16px auto 18px;
  background: #b657ed;
  color: #13051f;
  font-size: 12px;
  font-weight: 800;
  border-radius: 6px;
  padding: 3px 7px;
}
.question-title {
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 9px;
}
.question {
  font-size: 17px;
  line-height: 1.45;
  margin: 0 0 20px;
  color: #cdd2e1;
}
.scenario {
  border-left: 2px solid #9b45f4;
  background: #081423;
  padding: 11px 13px;
  font-size: 15px;
  line-height: 1.4;
  color: #bfcadd;
}
.answer-list {
  display: grid;
  gap: 12px;
  margin: 16px 0 26px;
}
.answer-list button {
  display: grid;
  grid-template-columns: 45px 1fr;
  text-align: left;
  padding: 0;
  min-height: 68px;
  border: 1px solid #354d6c;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(120deg, #0b1728, #071220);
  transition:
    background 0.2s,
    border-color 0.2s;
}
.answer-list b {
  display: grid;
  place-items: center;
  border-right: 1px solid #293e5b;
  font-size: 24px;
  color: #94a0bb;
  font-weight: 500;
}
.answer-list span {
  padding: 14px 13px;
  font-size: 16px;
  line-height: 1.35;
  align-self: center;
}
.answer-list .active {
  border-color: #b365ff;
  background: linear-gradient(115deg, #221947, #382266);
  box-shadow:
    inset 0 0 16px #7533ff44,
    0 0 10px #802fff44;
}
.answer-list .active b {
  color: #ddbdff;
  text-shadow: 0 0 8px #c253ff;
}
.hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 19px auto;
  background: none;
  color: #a5b7cb;
  min-height: 35px;
  font-size: 14px;
}
.hint svg {
  color: #ffd147;
  filter: drop-shadow(0 0 5px #ffd147);
}
.feedback-card {
  border: 1px solid #16f5a6;
  border-radius: 17px;
  padding: 12px 12px 22px;
  background: linear-gradient(150deg, #02332a, #021115 75%);
  box-shadow:
    0 0 0 3px #09f5a216,
    inset 0 0 25px #0dff8822,
    0 0 19px #00d89225;
  text-align: center;
  overflow: hidden;
}
.robot {
  height: auto;
  aspect-ratio: 1;
  border-radius: 11px;
}
.feedback-card h2 {
  font-size: 29px;
  color: #2dff9b;
  margin: 18px 0 14px;
  line-height: 1.1;
  text-shadow: 0 0 15px #00f79c55;
}
.feedback-card strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 17px;
}
.feedback-card strong svg {
  color: #38ffd3;
}
.feedback-card p {
  text-align: left;
  font-size: 16px;
  padding: 15px 8px 0;
  color: #d1dfe9;
}
.screen-feedback .purple-btn {
  margin-top: 32px;
}
.result-art {
  position: relative;
  height: 255px;
  margin: -10px -23px 0;
}
.result-art:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 20%, #020a13 99%);
}
.result-art h2 {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 14px;
  z-index: 1;
  text-align: center;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.5px;
  margin: 0;
}
.result-card {
  position: relative;
  border: 1px solid #a550ee;
  border-radius: 12px;
  padding: 22px 16px;
  display: grid;
  gap: 15px;
  text-align: center;
  background: linear-gradient(145deg, #060d16, #050914);
  box-shadow: inset 0 0 25px #742fcd10;
}
.result-card > strong {
  font-size: 49px;
  font-weight: 800;
  line-height: 1.05;
}
.result-card > small {
  font-size: 14px;
  color: #a7b1c9;
}
.result-card > b {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #9a3df0;
  border-radius: 9px;
  min-height: 58px;
  font-size: 21px;
}
.result-card > b svg {
  width: 37px;
  height: 37px;
  color: #b654ff;
  filter: drop-shadow(0 0 7px #973bff);
}
.result-card p {
  font-size: 13px;
  color: #b2b9d1;
  margin: 0;
}
.earned {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin: 20px 0;
  font-size: 15px;
}
.earned b {
  font-size: 18px;
}
.screen-ranking .ba-top,
.screen-profile .ba-top,
.screen-path .ba-top,
.screen-coins .ba-top {
  display: none;
}
.screen-ranking .ba-screen,
.screen-profile .ba-screen,
.screen-path .ba-screen,
.screen-coins .ba-screen {
  padding-top: 35px;
}
.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 19px 0 16px;
}
.tabs.two {
  grid-template-columns: 1fr 1fr;
}
.tabs button {
  min-height: 40px;
  background: #04101b;
  border: 1px solid #2b455e;
  border-radius: 7px;
  font-size: 14px;
  padding: 7px 4px;
}
.tabs .active {
  background: linear-gradient(120deg, #7931ff, #9632fa);
  border-color: #9f58f4;
  box-shadow: 0 0 14px #7d2dfa33;
}
.rank-row {
  display: grid;
  grid-template-columns: 30px 43px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 57px;
  border-bottom: 1px solid #203145;
  gap: 4px;
  padding: 4px 5px;
}
.rank-row em {
  font-style: normal;
  font-size: 24px;
  font-weight: 800;
}
.rank-row:nth-child(1) em {
  color: #ffd846;
  text-shadow: 0 0 10px #e3b70055;
}
.rank-row:nth-child(2) em {
  color: #cad0e6;
}
.rank-row:nth-child(3) em {
  color: #ffa346;
}
.rank-row > i {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid #a260d2;
  border-radius: 50%;
  overflow: hidden;
}
.rank-row b {
  font-weight: 500;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.rank-row strong {
  font-size: 16px;
  white-space: nowrap;
}
.rank-row.me {
  background: linear-gradient(90deg, #55219d, #073147);
  border-radius: 8px;
  box-shadow: 0 0 18px #5126ff35;
}
.schools .rank-row {
  min-height: 67px;
  padding: 10px;
  margin-bottom: 9px;
  border: 1px solid #354666;
  border-radius: 11px;
  background: linear-gradient(110deg, #152344, #071325);
}
.schools .rank-row:first-child {
  border-color: #6a589d;
}
.schools .rank-row > i {
  color: #d7dcec;
  border-color: #a1abc6;
}
.season {
  border: 1px solid #385574;
  border-radius: 10px;
  padding: 13px;
  margin: 16px 0;
  background: linear-gradient(100deg, #09213c, #061323);
}
.season span {
  display: block;
  color: #b5c7de;
  font-size: 15px;
  margin-bottom: 5px;
}
.season b {
  font-size: 26px;
}
.season small {
  font-size: 14px;
  font-weight: 400;
}
.cup-box {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #2c4965;
  border-radius: 11px;
  padding: 12px;
  margin-top: 18px;
  background: linear-gradient(110deg, #101c2b, #020b13);
}
.cup-box > .scene-cup {
  width: 100px;
  height: 130px;
  flex-shrink: 0;
  background-size: contain;
}
.cup-box p {
  font-size: 15px;
}
.cup-box b {
  display: block;
  margin-top: 12px;
  font-weight: 400;
  color: #b4c1d8;
}
.level-list {
  display: grid;
  gap: 13px;
  margin-top: 23px;
}
.level-list article {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  min-height: 108px;
  border: 1px solid #253750;
  border-radius: 12px;
  padding: 14px 12px;
  background: linear-gradient(120deg, #0a1724, #030c16);
  color: #939db2;
}
.level-list article > i {
  width: 58px;
  height: 62px;
  display: grid;
  place-items: center;
  color: #8796ad;
  font-style: normal;
  background: linear-gradient(135deg, #243045, #07101c);
  border: 1px solid #41506a;
  border-radius: 12px;
  box-shadow:
    inset 0 2px 4px #fff2,
    0 4px 15px #0006;
  overflow: hidden;
}
.level-list article > i svg {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 0 6px #8d8fac55);
}
.level-list article.open {
  border-color: #164939;
  background:
    radial-gradient(ellipse at 20% 40%, #053d2d, transparent 80%), #021218;
  color: white;
}
.level-list article.open > i {
  border-color: #32f9b2;
  box-shadow: 0 0 17px #00faae66;
}
.level-list small {
  font-size: 12px;
  display: block;
  margin-bottom: 4px;
}
.level-list b {
  font-size: 19px;
  line-height: 1.1;
  display: block;
}
.level-list p {
  font-size: 14px;
  margin: 7px 0 0;
  line-height: 1.35;
}
.level-list .open p,
.level-list .open small,
.level-list em {
  color: #27eda1;
}
.level-list article:nth-child(2) {
  border-color: #344f74;
  color: #e5e9f7;
  min-height: 152px;
}
.level-list article:nth-child(2) > i {
  color: #b943ff;
  box-shadow: 0 0 17px #842aff55;
  border-color: #663da1;
}
.level-list button {
  padding: 11px 13px;
  border-radius: 7px;
  background: linear-gradient(100deg, #7f2eff, #a031ff);
  font-size: 14px;
  font-weight: 800;
  margin-top: 12px;
  box-shadow: 0 0 14px #8b2fff44;
}
.coin-hero {
  position: relative;
  display: grid;
  place-items: center;
  margin: 14px 0 28px;
}
.coin-hero > img {
  width: 145px;
  height: 145px;
  object-fit: contain;
  mix-blend-mode: screen;
}
.coin-hero strong {
  font-size: 47px;
  line-height: 1.1;
  font-weight: 800;
}
.coin-hero span {
  font-size: 14px;
  color: #a9b5ca;
  margin-top: 4px;
}
.ledger > div {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 85px;
  border-bottom: 1px solid #21394b;
}
.ledger i {
  color: #16e7f2;
}
.ledger > div:nth-child(3n) i {
  color: #a54aff;
}
.ledger span b {
  font-size: 16px;
  font-weight: 500;
  display: block;
}
.ledger small {
  display: block;
  font-size: 14px;
  color: #8eb3cf;
  margin-top: 5px;
}
.ledger strong {
  font-size: 17px;
  color: #38ffb8;
}
.title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title-row button {
  background: none;
}
.profile-head {
  display: flex;
  gap: 17px;
  align-items: center;
  margin: 27px 0 20px;
}
.profile-head > div {
  width: 105px;
  height: 105px;
  flex-shrink: 0;
  border: 2px solid #b99bf7;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 24px #8542ff55;
}
.profile-head h3 {
  font-size: 25px;
  margin: 0 0 10px;
}
.profile-head section b {
  display: table;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 7px;
  background: linear-gradient(110deg, #7734fc, #b440f8);
  box-shadow: 0 0 16px #aa38ff44;
}
.profile-head section span {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 17px;
}
.profile-head section span svg {
  color: #d350ff;
}
.profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.profile-stats button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 63px;
  border: 1px solid #28415d;
  border-radius: 10px;
  background: linear-gradient(120deg, #0a182c, #061021);
  font-size: 17px;
}
.profile-stats svg {
  color: #83b6ff;
  filter: drop-shadow(0 0 6px #167eff);
}
.profile-stats b {
  font-size: 16px;
}
.profile-menu {
  display: grid;
  gap: 9px;
  margin-top: 13px;
}
.profile-menu button {
  min-height: 64px;
  border: 1px solid #2c4161;
  border-radius: 10px;
  background: linear-gradient(115deg, #0c1729, #071322);
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  text-align: left;
}
.profile-menu button span {
  font-size: 16px;
}
.profile-menu button b {
  font-size: 13px;
  max-width: 100px;
}
.profile-menu em {
  font-size: 22px;
  font-style: normal;
}
.parent-logo {
  font-size: 14px;
  letter-spacing: 2px;
  margin: auto;
}
.parent-photo {
  height: 280px;
  margin: 0 -23px;
  position: relative;
  overflow: hidden;
}
.parent-photo:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 35%, #020a13 98%);
}
.parent-photo h2 {
  position: absolute;
  z-index: 1;
  left: 23px;
  bottom: 0;
  font-size: 33px;
  line-height: 1.05;
  text-transform: none;
}
.parent-copy {
  font-size: 17px;
  margin: 9px 0 18px;
  color: #ccd0df;
}
.parent-copy b {
  color: #be7eff;
}
.benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  text-align: center;
  margin: 17px 0 23px;
}
.benefits span {
  color: #b84eff;
}
.benefits svg {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 7px #a347ff44);
}
.benefits b {
  display: block;
  color: #e0e5f0;
  font-size: 14px;
  line-height: 1.2;
  margin-top: 10px;
  font-weight: 500;
}
.ba-screen form {
  display: grid;
  gap: 10px;
}
.ba-screen form > input,
.ba-screen form > select {
  height: 44px;
  width: 100%;
  padding: 0 13px;
  border: 1px solid #355170;
  border-radius: 8px;
  background: linear-gradient(110deg, #081628, #06101f);
  color: #dde3f4;
  font-size: 16px;
}
.ba-screen form label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: #c5cfe1;
  margin-top: 9px;
}
.ba-screen form label input {
  accent-color: #9845ff;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.parent-success {
  text-align: center;
  padding: 80px 0;
}
.parent-success > i {
  color: #ad58ff;
}
.parent-success h2 {
  font-size: 35px;
  line-height: 1.1;
}
.parent-success p {
  font-size: 17px;
  color: #b6c4d5;
}
.challenge-card {
  border: 1px solid #a45bdf;
  border-radius: 13px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #1d0e3c, #030d18 75%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 23px 18px;
  min-height: 640px;
  box-shadow: inset 0 0 25px #782bff16;
}
.challenge-card h2 {
  font-size: 29px;
  line-height: 1.1;
  margin: 8px 0 17px;
}
.challenge-visual {
  width: calc(100% + 36px);
  height: 260px;
  position: relative;
  overflow: hidden;
}
.challenge-visual > .scene-art {
  position: absolute;
  inset: 0;
  background-position: center 37%;
  opacity: 0.7;
}
.challenge-visual:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#090b2400 50%, #0d0d22);
}
.challenge-visual > div:not(.scene-art) {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  width: 118px;
  height: 118px;
  border: 2px solid #aa84f4;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 25px #8b32ff77;
}
.challenge-card > b {
  font-size: 23px;
  position: relative;
}
.challenge-card > span {
  font-size: 16px;
  color: #b7bada;
  margin-top: 8px;
}
.challenge-card > strong {
  font-size: 44px;
  letter-spacing: -1px;
  margin: 8px 0;
}
.challenge-card > p {
  font-size: 24px;
  color: #d36cff;
  line-height: 1.25;
  margin: 7px 0 20px;
}
.challenge-card .purple-btn {
  margin-top: auto;
}
.shop-welcome {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 6px 0 20px;
}
.shop-welcome > div:first-child {
  flex: 1;
}
.shop-welcome span {
  font-size: 19px;
  font-weight: 700;
}
.shop-welcome p {
  font-size: 13px;
  color: #a6b4c9;
  margin: 6px 0;
}
.balance {
  display: grid;
  grid-template-columns: 30px 1fr 20px;
  gap: 3px;
  align-items: center;
  border: 1px solid #3b3557;
  border-radius: 10px;
  padding: 8px;
}
.balance i {
  grid-row: 1/3;
}
.balance small {
  font-size: 9px;
}
.balance b {
  font-size: 23px;
}
.balance button {
  grid-row: 1/3;
  grid-column: 3;
  background: #6e30e5;
  border-radius: 50%;
  width: 23px;
  height: 23px;
}
.shop-hero {
  height: 240px;
  position: relative;
  border: 1px solid #7040a4;
  border-radius: 13px;
  overflow: hidden;
}
.shop-hero > .scene-art {
  position: absolute;
  inset: 0;
  background-position: 50% 57%;
  filter: brightness(0.7);
}
.shop-hero > div:not(.scene-art) {
  position: absolute;
  left: 18px;
  bottom: 20px;
}
.shop-hero h2 {
  font-size: 44px;
  line-height: 0.95;
  margin: 0;
  text-shadow: 0 3px 25px #000;
}
.shop-hero em {
  color: #b65cff;
}
.shop-hero p {
  color: #c992ff;
  font-size: 17px;
}
.shop-rule {
  font-size: 14px;
  color: #a7b3ca;
  line-height: 1.4;
}
.shop-tabs {
  display: flex;
  gap: 7px;
  margin: 20px 0;
  overflow: auto;
}
.shop-tabs button {
  flex: 1;
  padding: 10px 8px;
  background: #101c2b;
  border: 1px solid #273d57;
  border-radius: 7px;
  font-size: 12px;
}
.shop-tabs .active {
  background: #8234ee;
}
.zone h3 {
  font-size: 17px;
  color: #8cef7d;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.zone h3 small {
  font-size: 12px;
  color: #a7b2c5;
  font-weight: 400;
}
.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.products article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid #26384e;
  border-radius: 11px;
  padding: 8px;
  background: linear-gradient(135deg, #142233, #081421);
}
.product-art {
  aspect-ratio: 1;
  background-image: url("/merch-sheet.png");
  background-size: 300% 200%;
  border-radius: 7px;
}
.merch-0 {
  background-position: 0 0;
}
.merch-1 {
  background-position: 50% 0;
}
.merch-2 {
  background-position: 100% 0;
}
.merch-3 {
  background-position: 0 100%;
}
.merch-4 {
  background-position: 50% 100%;
}
.merch-5 {
  background-position: 100% 100%;
}
.products article b {
  font-size: 14px;
  margin-top: 10px;
  line-height: 1.2;
}
.products article small {
  font-size: 12px;
  color: #a3b0c2;
  line-height: 1.25;
  margin: 5px 0;
  flex: 1;
}
.products article strong {
  display: flex;
  align-items: center;
  font-size: 15px;
  gap: 3px;
}
.products .coin-icon {
  width: 20px;
  height: 20px;
}
.products article button {
  padding: 9px 4px;
  font-size: 12px;
  line-height: 1.2;
  background: #7135d0;
  border-radius: 7px;
  margin-top: 9px;
  min-height: 36px;
}
.products article button svg {
  width: 14px;
  height: 14px;
}
.products article.locked button {
  background: #152b43;
  color: #a3b4cc;
}
.trial-rewards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px;
  background: #091a2d;
  border: 1px solid #415376;
  border-radius: 10px;
  font-size: 17px;
}
.parent-callout {
  padding: 20px 0;
  font-size: 17px;
  line-height: 1.5;
}
.empty-state {
  padding: 35px 16px;
  text-align: center;
  color: #9fadc5;
  font-size: 16px;
  line-height: 1.5;
}
.screen-trial .page-h {
  font-size: 32px;
}
#battle-toast {
  position: fixed;
  z-index: 99;
  left: 50%;
  bottom: 96px;
  max-width: min(90vw, 400px);
  width: max-content;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  padding: 13px 18px;
  background: #111b2d;
  border: 1px solid #8f5bbb;
  border-radius: 10px;
  box-shadow: 0 5px 30px #0008;
  font:
    16px/1.4 "Roboto Condensed",
    Arial;
  transition: 0.2s;
}
#battle-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
#battle-app.loading {
  opacity: 0.65;
  pointer-events: none;
}
@keyframes arrive {
  from {
    opacity: 0.5;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (min-width: 700px) {
  .ba-stage {
    padding: 24px;
  }
  .ba-phone {
    min-height: 850px;
    border: 1px solid #9272ce;
    border-radius: 28px;
    overflow: hidden;
  }
  .ba-nav {
    margin-top: auto;
  }
  .ba-screen {
    min-height: 650px;
  }
}
@media (max-width: 370px) {
  .ba-top {
    padding-inline: 18px;
  }
  .ba-screen {
    padding-inline: 17px;
  }
  .home-hero,
  .result-art,
  .parent-photo {
    margin-inline: -17px;
  }
  .home-copy {
    left: 17px;
  }
  .home-copy h1 {
    font-size: 40px;
  }
  .home-hero {
    height: 430px;
  }
  .avatar-grid {
    gap: 8px;
  }
  .ba-nav button {
    font-size: 11px;
  }
  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-head > div {
    width: 85px;
    height: 85px;
  }
  .profile-head {
    gap: 12px;
  }
  .profile-head h3 {
    font-size: 23px;
  }
  .result-card > strong {
    font-size: 43px;
  }
  .level-list article {
    grid-template-columns: 54px 1fr 15px;
    padding: 12px 9px;
  }
  .level-list article > i {
    width: 49px;
    height: 55px;
  }
  .level-list b {
    font-size: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Server-backed game controls, matching the existing neon panels. */
.builder-field {
  display: grid;
  gap: 7px;
  color: #b8c8df;
  font-size: 15px;
  margin: 12px 0;
}
.builder-field select,
.activation-form input,
.ref-link input {
  width: 100%;
  min-height: 48px;
  background: #071421;
  border: 1px solid #415575;
  border-radius: 8px;
  color: #fff;
  padding: 10px;
  font: inherit;
}
.prompt-builder {
  display: grid;
  gap: 2px;
}
.creator-picks,
.activation-form,
.content-notice,
.orders article {
  border: 1px solid #344264;
  background: linear-gradient(135deg, #0b1729, #030c15);
  border-radius: 12px;
  padding: 16px;
  margin: 18px 0;
}
.creator-picks label:first-child {
  margin-top: 0;
}
.balance-details {
  display: grid;
  gap: 12px;
  border: 1px solid #354367;
  border-radius: 12px;
  padding: 16px;
}
.balance-details span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #aebcd1;
}
.balance-details b {
  color: #e8d4ff;
}
.orders article {
  display: grid;
  gap: 10px;
}
.orders article strong {
  color: #cc91ff;
  font-size: 25px;
  letter-spacing: 3px;
}
.orders article small,
.orders article span {
  color: #9fadc4;
}
.founder-badge,
.achievements span {
  border: 1px solid #914fff;
  border-radius: 7px;
  padding: 9px 12px;
  background: #632ec027;
  color: #d6b4ff;
  font-size: 13px;
}
.achievements {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}
.ref-link {
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.ref-link input {
  font-size: 12px;
}
.content-notice p {
  white-space: pre-line;
}
.content-notice a {
  color: #c392ff;
}
.loading {
  pointer-events: none;
  opacity: 0.75;
}
.feedback-card.wrong {
  border-color: #bd8dff;
  box-shadow: 0 0 18px #783af033;
}
.feedback-card.wrong h2 {
  color: #dab9ff;
}
.shop-tabs {
  overflow-x: auto;
}
.shop-tabs button {
  min-width: 68px;
}
.ba-screen {
  overflow-wrap: break-word;
}
@media (min-width: 900px) {
  .ba-stage {
    padding: 28px;
  }
  .ba-phone {
    max-width: 1120px;
    min-height: calc(100svh - 56px);
    border: 1px solid #384064;
    border-radius: 22px;
    padding-left: 190px;
    overflow: hidden;
  }
  .ba-top {
    height: 90px;
    padding: 25px 38px;
  }
  .ba-screen {
    padding: 10px 38px 38px;
    max-width: 930px;
    width: 100%;
    margin: 0 auto;
  }
  .ba-nav {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 190px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    border: 0;
    border-right: 1px solid #28384e;
    border-radius: 0;
    padding: 105px 18px 30px;
    background: #030b14;
  }
  .ba-nav button {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 16px 12px;
    font-size: 16px;
    border-radius: 10px;
    position: relative;
  }
  .ba-nav .active {
    background: #6929bd29;
  }
  .ba-nav .active:before {
    left: -18px;
    top: 10px;
    width: 2px;
    height: 36px;
  }
  .home-hero {
    height: 510px;
    margin: -38px -38px 0;
  }
  .home-copy {
    left: 38px;
    top: 55px;
    max-width: 340px;
  }
  .home-copy h1 {
    font-size: 62px;
  }
  .home-copy p {
    font-size: 21px;
  }
  .home-hero > .scene-art {
    background-position: 50% 58%;
  }
  .feature-row {
    margin-top: -35px;
  }
  .school-select,
  .screen-home .purple-btn,
  .screen-home .text-btn {
    max-width: 490px;
    margin-left: auto;
    margin-right: auto;
  }
  .screen-setup .ba-screen {
    max-width: 650px;
  }
  .avatar-grid {
    gap: 16px;
  }
  .screen-battle .ba-screen,
  .screen-feedback .ba-screen,
  .screen-parent .ba-screen,
  .screen-trial .ba-screen,
  .screen-result .ba-screen {
    max-width: 690px;
  }
  .answer-list button {
    min-height: 74px;
  }
  .creator-picks,
  .prompt-builder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .creator-picks label {
    margin: 0;
  }
  .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .profile-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .profile-menu button {
    border: 1px solid #30425a;
    border-radius: 10px;
  }
  .shop-hero {
    height: 290px;
  }
  .shop-hero .scene-art {
    background-position: center 57%;
  }
  .shop-hero h2 {
    font-size: 56px;
  }
  .parent-photo {
    height: 290px;
  }
  .challenge-card {
    max-width: 440px;
    margin: auto;
  }
  .feedback-card .robot {
    height: 290px;
  }
  .screen-path .level-list {
    max-width: 640px;
    margin: auto;
  }
}
.daily-done {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 12px;
  margin: 35px auto;
  padding: 28px;
  border: 1px solid #6d48a7;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0, #6424a944, transparent 55%), #08121d;
}
.daily-countdown {
  display: grid;
  gap: 5px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #6e39a8;
  border-radius: 13px;
  background: #17102a;
}
.daily-countdown small {
  color: #aa91c4;
  font-size: 12px;
}
.daily-countdown strong {
  color: #d9a2ff;
  font: 800 30px/1 var(--mono);
}
.daily-done > i {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border: 2px solid #9e4cff;
  border-radius: 50%;
  font-size: 42px;
  color: #c47aff;
  font-style: normal;
  box-shadow: 0 0 30px #7d2cff66;
}
.daily-done h3 {
  font-size: 28px;
  margin: 0;
}
.daily-done p {
  color: #bfc8d8;
}
.screen-daily .question-title {
  margin-top: 26px;
}
.auth-hero {
  text-align: center;
  padding: 8px 0 18px;
}
.auth-mark {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border: 1px solid #a55cff;
  border-radius: 20px;
  background:
    radial-gradient(circle at 35% 20%, #984cff55, transparent 65%), #10162a;
  box-shadow: 0 0 30px #7e32ff55;
}
.auth-mark svg {
  width: 38px;
  height: 38px;
  color: #c990ff;
}
.auth-hero > span {
  font-size: 12px;
  letter-spacing: 4px;
  color: #af9ecb;
}
.auth-hero h1 {
  font-size: 32px;
  line-height: 1;
  margin: 12px 0 8px;
}
.auth-hero p {
  margin: 0;
  color: #aeb9cc;
  font-size: 16px;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 4px;
  border: 1px solid #2d3f5b;
  border-radius: 11px;
  background: #06101d;
  margin-bottom: 18px;
}
.auth-tabs button {
  min-height: 42px;
  border-radius: 8px;
  background: transparent;
  color: #91a0b8;
  font-size: 14px;
  font-weight: 800;
}
.auth-tabs button.active {
  color: #fff;
  background: linear-gradient(115deg, #712ce9, #9b34fb);
  box-shadow: 0 0 17px #8730f944;
}
.ba-screen .auth-form {
  display: grid;
  gap: 12px;
}
.ba-screen .auth-form > label:not(.auth-consent) {
  display: grid;
  gap: 7px;
  margin: 0;
  color: #dbe1ef;
  font-size: 14px;
}
.auth-form input {
  width: 100%;
  height: 49px;
  padding: 0 14px;
  border: 1px solid #3b5270;
  border-radius: 9px;
  background: linear-gradient(115deg, #091629, #050e1b);
  color: #fff;
  font-size: 16px;
}
.auth-form > small {
  color: #8696ad;
  font-size: 12px;
  margin-top: -5px;
}
.ba-screen .auth-consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 9px;
  margin: 2px 0;
  color: #adb9cc;
  font-size: 13px;
}
.ba-screen .auth-consent input {
  width: 18px;
  height: 18px;
  accent-color: #943cff;
}
.privacy-note {
  text-align: center;
  color: #7f90a8;
  font-size: 12px;
  margin: 16px 10px;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.logout-top {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid #654595;
  border-radius: 8px;
  background: #351568;
  color: #e7d7ff;
  font-size: 13px;
}
.screen-profile .ba-top {
  display: flex;
}
.screen-profile .ba-screen {
  padding-top: 10px;
}
.ba-screen .auth-form > label:not(.auth-consent) > input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 0 16px;
  border: 1px solid #3b5270;
  border-radius: 9px;
  background: linear-gradient(115deg, #091629, #050e1b);
  color: #fff;
  font-size: 16px;
  flex: 1 1 auto;
}
@media (min-width: 900px) {
  .ba-phone.auth-shell {
    max-width: 780px;
    min-height: calc(100svh - 56px);
    padding-left: 0;
  }
  .auth-shell .ba-top {
    padding-inline: 32px;
  }
  .auth-shell .ba-screen {
    width: 100%;
    max-width: 620px;
    min-height: 0;
    padding: 6px 32px 42px;
  }
  .auth-shell .auth-tabs,
  .auth-shell .auth-form,
  .auth-shell .privacy-note {
    width: 100%;
  }
  .auth-shell .auth-hero {
    padding-top: 2px;
  }
  .auth-shell .auth-form {
    gap: 14px;
  }
  .auth-shell .auth-form .purple-btn {
    max-width: 440px;
    margin: 18px auto 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.product-open {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: left !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
.product-art {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #07111d !important;
}
.product-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-detail {
  border: 1px solid #653d96;
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(145deg, #10182b, #030a12);
  box-shadow: 0 0 40px #6d28d933;
}
.product-detail-art {
  height: min(52vh, 430px);
  display: grid;
  place-items: center;
  border-radius: 13px;
  overflow: hidden;
  background: #050b14;
}
.product-detail-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-detail > span,
.mission-head > span,
.special-mission > span {
  display: inline-block;
  margin-top: 16px;
  color: #b75dff;
  font-size: 12px;
  letter-spacing: 2px;
}
.product-detail h2 {
  font-size: 31px;
  margin: 8px 0;
}
.product-detail p {
  color: #b9c4d5;
  line-height: 1.5;
}
.detail-specs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-block: 1px solid #26374f;
}
.detail-specs b {
  display: flex;
  align-items: center;
  font-size: 25px;
}
.detail-specs small {
  text-align: right;
  color: #9eabc0;
}
.mission-head {
  padding: 25px 22px;
  margin: -5px 0 17px;
  border: 1px solid #6537a0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 0, #882ee059, transparent 42%),
    linear-gradient(145deg, #13122d, #06121e);
  box-shadow: 0 0 30px #6426c933;
}
.mission-head h2 {
  font-size: 38px;
  line-height: 0.95;
  margin: 10px 0;
}
.mission-head p {
  color: #9eabc1;
}
.mission-head b {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  background: #7d2be7;
}
.daily-mission,
.special-mission {
  padding: 20px;
  border: 1px solid #314764;
  border-radius: 16px;
  background: linear-gradient(145deg, #0d192a, #030b13);
}
.daily-mission > small {
  color: #56d8ff;
  letter-spacing: 2px;
}
.daily-mission > h3 {
  font-size: 25px;
}
.special-mission {
  margin-top: 18px;
  border-color: #76509e;
}
.special-mission h3 {
  font-size: 22px;
}
.special-mission p {
  color: #aeb9cb;
  line-height: 1.5;
}
.special-mission > b {
  color: #4dffb1;
  font-size: 22px;
}
.special-mission form {
  margin-top: 16px;
}
.special-mission input {
  width: 100%;
  height: 49px;
  padding: 0 13px;
  border: 1px solid #405472;
  border-radius: 9px;
  background: #071421;
  color: white;
}
.cosmetic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.app-boot {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: #fff;
  background: radial-gradient(circle at 50% 40%, #4d168866, transparent 38%);
}
.app-boot span {
  color: #8fa0b7;
  font-size: 14px;
}
.boot-orb {
  width: 54px;
  height: 54px;
  border: 3px solid #263951;
  border-top-color: #af43ff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.cosmetic-grid article {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid #30435d;
  border-radius: 13px;
  background: linear-gradient(145deg, #111d2d, #050d16);
}
.cosmetic-preview {
  height: 115px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #080f1d;
  color: #bb6bff;
  overflow: hidden;
}
.cosmetic-preview svg {
  width: 42px;
  height: 42px;
}
.cosmetic-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cosmetic-grid h3 {
  margin: 11px 0 4px;
}
.cosmetic-grid p {
  font-size: 13px;
  color: #9faec2;
  flex: 1;
}
.cosmetic-grid strong {
  display: flex;
  align-items: center;
}
.cosmetic-grid button {
  margin-top: 9px;
  padding: 10px;
  border-radius: 8px;
  background: #742ee1;
}
.cosmetic-grid article.equipped {
  border-color: #38e6b0;
  box-shadow: 0 0 22px #16d99f22;
}
.cosmetic-grid article.equipped button {
  background: #174d43;
  color: #78ffd2;
}
.cosmetic-kind {
  margin-top: 10px;
  color: #b568ff;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.08em;
}
@media (max-width: 560px) {
  .screen-customize .ba-screen {
    padding-inline: 12px;
  }
  .cosmetic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .cosmetic-grid article {
    padding: 9px;
    border-radius: 14px;
  }
  .cosmetic-preview {
    height: auto;
    aspect-ratio: 1/1;
  }
  .cosmetic-grid h3 {
    font-size: 15px;
    line-height: 1.15;
  }
  .cosmetic-grid p {
    display: none;
  }
  .cosmetic-grid button {
    min-height: 42px;
    font-size: 12px;
  }
  .cosmetic-grid strong {
    margin-top: 8px;
    font-size: 14px;
  }
  .name-frame {
    min-width: 88px;
    padding-inline: 12px;
  }
}
.account-settings {
  display: grid;
  gap: 15px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #314762;
  border-radius: 16px;
  background: linear-gradient(145deg, #0d1a2a, #060d18);
}
.account-settings label {
  display: grid;
  gap: 7px;
  color: #cbd7e7;
  font-size: 14px;
}
.account-settings input {
  min-height: 50px;
  padding: 10px 13px;
  border: 1px solid #38516e;
  border-radius: 10px;
  background: #06111e;
  color: white;
}
.account-avatar {
  width: 116px;
  height: 116px;
  margin: auto;
  overflow: hidden;
  border: 2px solid #9c4cff;
  border-radius: 50%;
  box-shadow: 0 0 30px #843eff66;
}
.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.file-picker small,
.account-delete-note {
  color: #8797ab;
  font-size: 12px;
}
.customize-link {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #713eb0;
  border-radius: 11px;
  background: #17102a;
  color: #d7a5ff;
}
.account-delete-note {
  text-align: center;
  margin-top: 16px;
}
.profile-cover {
  height: 120px;
  margin: -10px -23px -62px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(135deg, #151b30, #35145f);
}
.bg-violet {
  background:
    radial-gradient(circle at 20% 20%, #b44cff55, transparent 35%),
    linear-gradient(135deg, #19134a, #070b19) !important;
}
.bg-space {
  background:
    radial-gradient(circle at 75% 15%, #36c9ff55, transparent 20%),
    radial-gradient(circle at 20% 40%, #a84cff55, transparent 30%), #030812 !important;
}
.frame-neon {
  border-color: #b751ff !important;
  box-shadow:
    0 0 14px #a33cff,
    0 0 30px #5727ff !important;
}
.frame-cyber {
  border: 3px double #47dcff !important;
  box-shadow:
    0 0 0 4px #712cff,
    0 0 25px #27bfff !important;
}
.frame-aurora {
  --avatar-frame: url("/cosmetics/frames/aurora.webp");
}
.frame-glitch {
  --avatar-frame: url("/cosmetics/frames/glitch.webp");
}
.frame-inferno {
  --avatar-frame: url("/cosmetics/frames/inferno.webp");
}
.frame-sakura {
  --avatar-frame: url("/cosmetics/frames/sakura.webp");
}
.frame-prism {
  --avatar-frame: url("/cosmetics/frames/prism.webp");
}
:is(.profile-head > div, .public-avatar):is(
  .frame-aurora,
  .frame-glitch,
  .frame-inferno,
  .frame-sakura,
  .frame-prism
) {
  position: relative;
  overflow: visible;
  padding: 11px;
  border: 0 !important;
  background: #070d19;
  box-shadow: none !important;
}
:is(.profile-head > div, .public-avatar):is(
    .frame-aurora,
    .frame-glitch,
    .frame-inferno,
    .frame-sakura,
    .frame-prism
  )::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -13px;
  pointer-events: none;
  background: var(--avatar-frame) center / contain no-repeat;
}
:is(.profile-head > div, .public-avatar):is(
    .frame-aurora,
    .frame-glitch,
    .frame-inferno,
    .frame-sakura,
    .frame-prism
  )
  .avatar-portrait {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.bg-image-1 {
  --profile-bg: url("/cosmetics/backgrounds/background-1.webp");
}
.bg-image-2 {
  --profile-bg: url("/cosmetics/backgrounds/background-2.webp");
}
.bg-image-3 {
  --profile-bg: url("/cosmetics/backgrounds/background-3.webp");
}
.bg-image-4 {
  --profile-bg: url("/cosmetics/backgrounds/background-4.webp");
}
.bg-image-5 {
  --profile-bg: url("/cosmetics/backgrounds/background-5.webp");
}
.bg-image-6 {
  --profile-bg: url("/cosmetics/backgrounds/background-6.webp");
}
.bg-image-7 {
  --profile-bg: url("/cosmetics/backgrounds/background-7.webp");
}
.bg-image-8 {
  --profile-bg: url("/cosmetics/backgrounds/background-8.webp");
}
.bg-image-9 {
  --profile-bg: url("/cosmetics/backgrounds/background-9.webp");
}
.bg-image-10 {
  --profile-bg: url("/cosmetics/backgrounds/background-10.webp");
}
.bg-image-11 {
  --profile-bg: url("/cosmetics/backgrounds/background-11.webp");
}
.bg-image-12 {
  --profile-bg: url("/cosmetics/backgrounds/background-12.webp");
}
.bg-image-13 {
  --profile-bg: url("/cosmetics/backgrounds/background-13.webp");
}
.bg-image-14 {
  --profile-bg: url("/cosmetics/backgrounds/background-14.webp");
}
:is(.profile-cover, .public-card)[class*="bg-image-"] {
  background-image:
    linear-gradient(180deg, #02071133, #020711b8), var(--profile-bg) !important;
  background-position: center !important;
  background-size: cover !important;
}
.profile-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 4px 0;
}
.player-label {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 9px;
  line-height: 1.2;
  background: #6530c6;
  color: white;
}
.player-label.developer {
  background: #007c9d;
}
.player-label.founder {
  background: #7a2ee2;
}
.player-label.custom {
  background: #47265e;
}
.name-frame {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 118px;
  min-height: 34px;
  padding: 7px 20px;
  color: #fff;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  background: var(--name-frame) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 8px #8d42ff66);
}
.name-frame-rookie {
  --name-frame: url("/cosmetics/nameframes/ai-rookie.webp");
}
.name-frame-explorer {
  --name-frame: url("/cosmetics/nameframes/ai-explorer.webp");
}
.name-frame-hacker {
  --name-frame: url("/cosmetics/nameframes/prompt-haker.webp");
}
.name-frame-master {
  --name-frame: url("/cosmetics/nameframes/ai-master.webp");
}
.name-frame-legend {
  --name-frame: url("/cosmetics/nameframes/ai-legend.webp");
}
.name-frame-prism {
  --name-frame: url("/cosmetics/nameframes/prism.webp");
}
.name-frame-sakura {
  --name-frame: url("/cosmetics/nameframes/sakura.webp");
}
.name-frame-inferno {
  --name-frame: url("/cosmetics/nameframes/inferno.webp");
}
.name-frame-glitch {
  --name-frame: url("/cosmetics/nameframes/glitch.webp");
}
.name-frame-aurora {
  --name-frame: url("/cosmetics/nameframes/aurora.webp");
}
.name-frame-default {
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: none;
  filter: none;
}
.rank-row .name-frame {
  min-width: 104px;
  min-height: 30px;
  padding: 6px 15px;
  font-size: 12px;
}
.rank-avatar-frame {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.rank-avatar-frame .avatar-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.rank-avatar-frame:is(
    .frame-aurora,
    .frame-glitch,
    .frame-inferno,
    .frame-sakura,
    .frame-prism
  )::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -8px;
  background: var(--avatar-frame) center/contain no-repeat;
  pointer-events: none;
}
.rank-player {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  text-align: initial;
}
.rank-player .rank-row > b {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.developer-zone {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid #244158;
  border-radius: 14px;
  background: #071421;
}
.developer-zone > p {
  color: #93a4b9;
}
.developer-zone > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.developer-zone button {
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 8px;
  text-align: left;
  padding: 9px;
  border: 1px solid #31516c;
  border-radius: 10px;
  background: #0c1b2c;
}
.developer-zone button img {
  grid-row: 1/3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.developer-zone small {
  color: #8dd9ff;
}
.public-card {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 570px;
  padding: 35px 22px;
  border: 1px solid #61368d;
  border-radius: 18px;
  background: #07101c;
}
.public-avatar {
  width: 145px;
  height: 145px;
  border: 2px solid #8c54ca;
  border-radius: 50%;
  overflow: hidden;
}
.public-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.public-card h2 {
  font-size: 34px;
  margin-bottom: 4px;
}
.public-card > p {
  color: #aab6c8;
}
.public-card > strong {
  margin: 12px 0 25px;
}
.invite-quota {
  display: grid;
  gap: 5px;
  margin: 12px 0;
  padding: 13px;
  border: 1px solid #3d4b6b;
  border-radius: 10px;
  background: #091528;
}
.invite-quota span {
  font-size: 12px;
  color: #97a7bb;
}
.ref-link small {
  color: #b688e0;
}
@media (max-width: 430px) {
  .cosmetic-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mission-head h2 {
    font-size: 32px;
  }
  .product-detail-art {
    height: auto;
  }
}

/* Магазин: квадратные превью и крупная страница товара. */
.products .product-art {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1 !important;
  border-radius: 9px;
  overflow: hidden;
}
.products .product-art img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.product-detail {
  padding: 16px;
  border-radius: 20px;
}
.product-detail-art {
  width: 100%;
  height: auto !important;
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  border-radius: 15px;
  overflow: hidden;
}
.product-detail-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-detail-body {
  padding: 5px 5px 3px;
}
.product-detail-body > span {
  display: inline-block;
  margin-top: 17px;
  color: #b75dff;
  font-size: 12px;
  letter-spacing: 2px;
}
.detail-back {
  margin-bottom: 12px;
}
@media (min-width: 900px) {
  .screen-product-detail .ba-screen {
    max-width: 1000px;
  }
  .product-detail {
    padding: 22px;
  }
  .product-detail h2 {
    font-size: 38px;
  }
  .product-detail-body {
    padding: 8px 12px 4px;
  }
}
@media (max-width: 430px) {
  .product-detail {
    padding: 10px;
  }
  .product-detail h2 {
    font-size: 27px;
  }
  .product-detail-body {
    padding-inline: 4px;
  }
}
.test-progress {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  margin-bottom: 12px;
  border: 1px solid #2b4260;
  border-radius: 11px;
  background: #071522;
  font: 10px var(--mono);
}
.test-progress b {
  color: #efcf6b;
}
.level-test-card {
  box-shadow: 0 0 28px #7d31e41d;
}
.test-finish {
  text-align: center;
  padding: 30px 18px;
  border: 1px solid #594080;
  border-radius: 15px;
  background: radial-gradient(circle at 50% 0, #55258a55, #07121f 65%);
}
.test-finish > svg {
  width: 58px;
  height: 58px;
  color: #a84dff;
  filter: drop-shadow(0 0 16px #8938ff);
}

/* Stable account controls and compact leaderboard cosmetics. */
.ba-screen form.account-settings label {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.ba-screen form.account-settings label > input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 0 15px;
  flex: none;
}
.ba-screen form.account-settings .file-picker > input {
  height: auto;
  min-height: 54px;
  padding: 10px;
  cursor: pointer;
}
.profile-rank-button,
.rank-status-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid #a647ff;
  border-radius: 8px;
  background: linear-gradient(110deg, #7130e9, #a83df3);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 0 18px #933aff44;
  cursor: pointer;
}
.profile-rank-button em,
.rank-status-button em {
  font-style: normal;
  font-size: 18px;
  line-height: 1;
}
.profile-rank-button:hover,
.rank-status-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}
.result-card .rank-status-button {
  width: min(100%, 270px);
  min-height: 58px;
  margin: 0 auto;
  font-size: 16px;
}
.result-card .rank-status-button svg {
  width: 26px;
  height: 26px;
}
.profile-head section .profile-rank-button {
  font-size: 13px;
}
.rank-player .rank-row {
  min-height: 64px;
  max-height: 78px;
  padding: 7px 9px;
  grid-template-columns: 30px 46px minmax(0, 1fr) auto;
  overflow: hidden;
}
.rank-player .rank-row > i {
  width: 40px;
  height: 40px;
  overflow: visible;
}
.rank-player .rank-avatar-frame {
  width: 40px;
  height: 40px;
}
.rank-player .rank-row > b {
  min-width: 0;
  max-height: 56px;
  overflow: hidden;
  flex-wrap: nowrap;
}
.rank-player .name-frame {
  width: min(190px, 100%);
  min-width: 0;
  max-width: 190px;
  height: 36px;
  min-height: 36px;
  padding: 5px 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-size: 100% 100%;
}
.rank-player .player-label {
  flex: 0 0 auto;
  padding: 5px 8px;
  font-size: 10px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .account-settings {
    padding: 14px;
  }
  .account-settings .account-avatar {
    width: 96px;
    height: 96px;
  }
  .rank-player .rank-row {
    grid-template-columns: 24px 42px minmax(0, 1fr) auto;
    gap: 5px;
  }
  .rank-player .name-frame {
    max-width: 128px;
    padding-inline: 10px;
    font-size: 11px;
  }
  .rank-player .player-label {
    display: none;
  }
  .profile-rank-button {
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }
}
.test-finish h3 {
  margin: 14px 0 6px;
  font-size: 21px;
}
.test-finish > b {
  font: 28px var(--mono);
  color: #efd377;
}
.test-finish > p {
  color: #8da0b7;
  margin: 8px 0 16px;
}

/* Mobile-first repair: every game screen stays visible and touchable. */
@media (max-width: 699px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  body {
    padding: 0 0 82px;
    background: #020812;
  }
  #battle-app,
  .ba-stage,
  .ba-phone {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .ba-stage {
    min-height: 100svh;
    padding: 0;
    background: #020812;
  }
  .ba-phone {
    min-height: 100svh;
    border: 0;
    border-radius: 0;
    overflow: visible;
    padding: 0 0 84px;
    background: linear-gradient(155deg, #071322, #020812 70%);
  }
  .ba-top {
    position: relative;
    width: 100%;
    height: 70px;
    padding: 16px 18px;
    gap: 10px;
  }
  .ba-top .logo {
    min-width: 0;
  }
  .ba-top .logo strong {
    font-size: 19px;
  }
  .ba-top .logo small {
    font-size: 8px;
  }
  .ba-screen {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 8px 16px 26px;
    overflow: visible;
  }
  .page-h {
    font-size: 26px;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }
  .sub {
    font-size: 14px;
    line-height: 1.5;
  }
  .ba-nav {
    position: fixed;
    z-index: 60;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid #293d58;
    border-radius: 15px;
    background: #030a14f2;
    box-shadow: 0 12px 35px #000;
    backdrop-filter: blur(16px);
  }
  .ba-nav button {
    min-width: 0;
    min-height: 52px;
    padding: 6px 1px;
    font-size: 9px;
    gap: 3px;
  }
  .ba-nav svg {
    width: 19px;
    height: 19px;
  }
  .profile-cover {
    height: 125px;
    margin: 0 -16px 14px;
    border-radius: 0 0 14px 14px;
  }
  .profile-head {
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0;
  }
  .profile-head > div {
    width: 82px;
    height: 82px;
  }
  .profile-head section {
    min-width: 0;
    flex: 1;
  }
  .profile-head h3 {
    font-size: 21px;
    overflow-wrap: anywhere;
  }
  .profile-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .player-label {
    font-size: 9px;
    padding: 4px 7px;
  }
  .profile-stats {
    grid-template-columns: 1fr 1fr;
  }
  .profile-stats button {
    min-width: 0;
    padding: 12px 6px;
  }
  .profile-menu {
    display: block;
  }
  .profile-menu button {
    width: 100%;
    min-width: 0;
  }
  .level-list article {
    grid-template-columns: 48px minmax(0, 1fr) 18px;
    gap: 10px;
    padding: 13px 9px;
  }
  .level-list article > i {
    width: 46px;
    height: 50px;
  }
  .level-list article b {
    font-size: 14px;
  }
  .level-list article p,
  .level-list article span {
    font-size: 11px;
    line-height: 1.4;
  }
  .level-list article.current {
    border-color: #b150ff;
    background: linear-gradient(100deg, #29114b, #081827);
    box-shadow: 0 0 20px #8e35ff35;
  }
  .level-list article.current small {
    color: #d798ff;
  }
  .rank-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .rank-tabs button {
    min-width: 0;
    padding-inline: 3px;
    font-size: 10px;
  }
  .rank-player .rank-row {
    min-height: 68px;
    max-height: none;
    grid-template-columns: 24px 42px minmax(0, 1fr) 36px;
    padding: 8px 5px;
    gap: 5px;
  }
  .rank-player .rank-row > b {
    display: flex;
    min-width: 0;
    max-height: none;
    flex-wrap: wrap;
    gap: 3px;
  }
  .rank-player .name-frame {
    max-width: 118px;
    width: 100%;
    height: 32px;
    min-height: 32px;
    padding: 5px 9px;
    font-size: 10px;
  }
  .rank-player .player-label {
    display: inline-flex;
    font-size: 7px;
    padding: 3px 5px;
  }
  .rank-row strong {
    font-size: 13px;
  }
  .rank-row em {
    font-size: 18px;
  }
  .developer-zone {
    padding: 13px;
  }
  .developer-zone > div {
    grid-template-columns: 1fr;
  }
  .developer-zone button {
    min-width: 0;
  }
  .shop-welcome {
    align-items: flex-start;
    gap: 8px;
  }
  .shop-welcome .balance {
    min-width: 125px;
  }
  .shop-hero {
    height: 220px;
  }
  .shop-hero h2 {
    font-size: 39px;
  }
  .shop-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .shop-tabs button {
    flex: 0 0 auto;
    min-width: 82px;
  }
  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .products article {
    min-width: 0;
  }
  .products article > b,
  .products article small {
    overflow-wrap: anywhere;
  }
  .product-open {
    min-width: 0;
  }
  .product-detail {
    padding: 10px;
  }
  .product-detail-art {
    aspect-ratio: 1/1;
    height: auto;
  }
  .product-detail h2 {
    font-size: 26px;
  }
  .detail-specs {
    align-items: flex-start;
    flex-direction: column;
  }
  .detail-specs small {
    text-align: left;
  }
  .cosmetic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .cosmetic-grid article {
    min-width: 0;
    padding: 10px;
  }
  .cosmetic-preview {
    height: auto;
    aspect-ratio: 1/1;
  }
  .cosmetic-grid h3 {
    font-size: 13px;
    overflow-wrap: anywhere;
  }
  .cosmetic-grid p {
    font-size: 10px;
  }
  .cosmetic-grid button {
    width: 100%;
    padding-inline: 4px;
  }
  .account-settings {
    width: 100%;
    padding: 14px;
  }
  .ba-screen form.account-settings label > input {
    width: 100%;
    max-width: 100%;
  }
  .customize-link {
    font-size: 12px;
    text-align: center;
  }
  .mission-head {
    padding: 19px 16px;
  }
  .mission-head h2 {
    font-size: 30px;
  }
  .daily-done {
    width: 100%;
    margin: 18px 0;
    padding: 22px 14px;
  }
  .daily-done > i {
    width: 64px;
    height: 64px;
    font-size: 32px;
  }
  .daily-done h3 {
    font-size: 20px;
    line-height: 1.15;
  }
  .daily-countdown {
    width: 100%;
    max-width: 260px;
  }
  .daily-countdown strong {
    font-size: 25px;
  }
  .answer-list button {
    width: 100%;
    min-width: 0;
    min-height: 62px;
    padding: 10px;
  }
  .answer-list button span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .test-progress {
    flex-direction: column;
    font-size: 11px;
  }
  .auth-hero h1 {
    font-size: 30px;
  }
  .auth-tabs {
    width: 100%;
  }
  .auth-form {
    width: 100%;
  }
  .parent-photo,
  .result-art {
    margin-inline: -16px;
  }
  .public-card {
    min-height: 470px;
    padding: 25px 15px;
  }
  .public-avatar {
    width: 110px;
    height: 110px;
  }
}
@media (max-width: 350px) {
  .ba-screen {
    padding-inline: 12px;
  }
  .products,
  .cosmetic-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .rank-player .name-frame {
    max-width: 92px;
  }
  .profile-head > div {
    width: 72px;
    height: 72px;
  }
  .profile-rank-button {
    font-size: 11px;
    padding: 6px 8px;
  }
}