/* Rooster Club: shared tokens, components, responsive layouts, motion preferences. */
:root {
  --app-height: 100dvh;
  --accent: #ffad59;
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-content-safe-top: 0px;
  --app-inset-top: calc(var(--app-safe-top) + var(--app-content-safe-top));
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-content-safe-right: 0px;
  --app-inset-right: calc(var(--app-safe-right) + var(--app-content-safe-right));
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-content-safe-bottom: 0px;
  --app-inset-bottom: calc(var(--app-safe-bottom) + var(--app-content-safe-bottom));
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-content-safe-left: 0px;
  --app-inset-left: calc(var(--app-safe-left) + var(--app-content-safe-left));

  color-scheme: dark;
  --bg: #10171f;
  --panel: #19232d;
  --panel-light: #202c37;
  --line: #2b3741;
  --text: #f5f3eb;
  --muted: #91a1ac;
  --amber: #ffad59;
  --lime: #d0eb89;
  --red: #fb816f;
  --radius: 20px;
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
}

button,a {
  touch-action: manipulation;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
}

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

button:focus-visible,a:focus-visible,summary:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 4px;
}

a {
  color: inherit;
}

button,input {
  -webkit-appearance: none;
}

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

[hidden] {
  display: none!important;
}

.app-shell {
  max-width: 1040px;
  padding: calc(30px + var(--app-inset-top)) calc(36px + var(--app-inset-right)) calc(var(--ui-nav-reserve, 112px) + var(--app-inset-bottom)) calc(36px + var(--app-inset-left));
  margin: 0 auto;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 2px;
}

.brand-symbol {
  font-size: 32px;
  line-height: 42px;
  width: 44px;
  height: 44px;
  background: var(--amber);
  color: #292016;
  border-radius: 13px;
  text-align: center;
  letter-spacing: -4px;
  transform: rotate(-5deg);
}

.brand-symbol span {
  font-size: 13px;
  vertical-align: top;
  letter-spacing: 0;
}

.brand-sub {
  display: block;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--muted);
  margin-top: 3px;
}

.connection-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 8px 11px;
  border-radius: 20px;
  white-space: nowrap;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px #d0eb8930;
}

.connection-pill.offline .status-dot {
  background: var(--red);
}

.dev-banner {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: 11px;
  color: var(--accent);
  padding: 10px 14px;
  border: 1px solid #ffad592e;
  background: #ffad5907;
  border-radius: 12px;
  margin-bottom: 20px;
}

.dev-banner span {
  color: var(--muted);
}

.player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}

.player-identity {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.avatar {
  width: 44px;
  height: 44px;
  border: 1px solid #94bfc339;
  background: #243337;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #b7d6cf;
  flex-shrink: 0;
}

.player-identity>div {
  min-width: 0;
}

.player-identity strong {
  font-size: 14px;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 250px;
  white-space: nowrap;
}

.eyebrow {
  font-size: 9px;
  letter-spacing: 1.7px;
  font-weight: 700;
  color: var(--muted);
  display: block;
  margin-bottom: 5px;
}

.wallet {
  display: flex;
  gap: 24px;
}

.wallet-item {
  display: flex;
  align-items: center;
  gap: 9px;
}

.wallet-item strong {
  display: block;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.wallet-item span:not(.currency-icon) {
  font-size: 10px;
  color: var(--muted);
}

.currency-icon {
  height: 34px;
  width: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-size: 22px;
}

.grain {
  color: var(--accent);
  background: #ffad5915;
}

.medal {
  color: var(--lime);
  background: #d0eb8912;
  font-size: 17px;
}

h1,h2,h3,p {
  margin: 0;
}

h1 {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.2px;
  font-weight: 850;
}

h2 {
  font-size: 21px;
  letter-spacing: -.45px;
}

h3 {
  font-size: 16px;
  letter-spacing: -.2px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 28px 0 16px;
}

.section-title small {
  color: var(--muted);
  font-size: 11px;
}

.section-intro {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 8px;
  margin-bottom: 22px;
}

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 328px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(120deg,#293a3f,#273737 55%,#34413a);
  border: 1px solid #667c6c40;
}

.hero:before {
  content: "";
  position: absolute;
  right: -80px;
  top: -140px;
  width: 550px;
  height: 550px;
  border: 1px solid #ffffff06;
  border-radius: 50%;
}

.hero-copy {
  z-index: 1;
  padding: 34px 0 30px 32px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.hero-kicker {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.9px;
  color: var(--lime);
  margin-bottom: 18px;
}

.hero h1 {
  max-width: 340px;
}

.hero p {
  color: #b1c0bc;
  font-size: 12px;
  line-height: 1.6;
  max-width: 255px;
  margin-top: 14px;
}

.hero-footer {
  margin-top: auto;
  padding-top: 23px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  border: 1px solid #ffffff18;
  border-radius: 8px;
  padding: 7px 10px;
  color: #cbd4cc;
  background: #15202035;
}

.tag.accent {
  color: var(--lime);
  background: #d0eb8910;
  border-color: #d0eb8920;
}

.rooster-stage {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  min-width: 0;
}

.rooster-stage:before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: #d1cf6716;
  z-index: -1;
}

.rooster-svg {
  width: 100%;
  max-width: 350px;
  filter: drop-shadow(0 16px 15px #0003);
  overflow: visible;
  transition: transform .12s ease;
  pointer-events: none;
}

.rooster-stage.tapped .rooster-svg {
  transform: rotate(-4deg) translateY(-5px);
}

.power-badge {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #172422de;
  border: 1px solid #d0eb893d;
  border-radius: 13px;
  transform: rotate(-4deg);
  backdrop-filter: blur(8px);
}

.power-badge b {
  color: var(--lime);
  font-size: 23px;
}

.power-badge span {
  font-size: 9px;
  letter-spacing: 1px;
  color: #bdcbbf;
  display: block;
}

.power-badge strong {
  font-size: 19px;
}

.hero-star {
  position: absolute;
  color: #d0eb8970;
  font-size: 28px;
  right: 29px;
  top: 23px;
}

.level-strip {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 2px 0;
}

.level-strip>span {
  font-size: 11px;
  white-space: nowrap;
}

.level-strip>small {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

.progress-track {
  height: 5px;
  flex: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #2b3741;
}

.progress-fill {
  height: 100%;
  background: var(--lime);
  border-radius: 10px;
  transition: width .25s ease;
}

.presence {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
}

.presence strong {
  color: var(--lime);
}

.arena-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.mode-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.mode-card.online {
  background: linear-gradient(125deg,#283130,#233132);
  border-color: #d0eb8929;
}

.mode-icon {
  height: 40px;
  width: 40px;
  display: grid;
  place-items: center;
  font-size: 23px;
  background: #ffad5912;
  color: var(--accent);
  border-radius: 12px;
  margin-bottom: 18px;
}

.online .mode-icon {
  background: #d0eb8910;
  color: var(--lime);
}

.mode-index {
  position: absolute;
  top: 22px;
  right: 20px;
  color: #6a7c804d;
  font-size: 43px;
  line-height: 1;
  font-weight: 900;
  font-style: italic;
}

.mode-card p {
  font-size: 11px;
  line-height: 1.65;
  color: var(--muted);
  margin: 9px 0 18px;
  max-width: 275px;
  min-height: 36px;
}

.mode-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 17px;
  font-size: 10px;
  color: #afbabd;
}

.mode-meta strong {
  color: var(--text);
}

.btn {
  min-height: 44px;
  padding: 12px 17px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 750;
  background: var(--panel-light);
  color: var(--text);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: background .15s,transform .12s;
}

.btn.primary {
  background: var(--amber);
  color: #332214;
  border-color: var(--amber);
}

.btn.lime {
  background: var(--lime);
  color: #283318;
  border-color: var(--lime);
}

.btn.ghost {
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}

.btn.full {
  width: 100%;
  margin-top: auto;
}

.btn.small {
  min-height: 44px;
  font-size: 14px;
  padding: 8px 12px;
}

.btn-arrow {
  margin-left: auto;
  font-size: 17px;
}












.help-card {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}

.help-card summary {
  font-size: 12px;
  cursor: pointer;
  color: #a9b9be;
}

.help-card p {
  font-size: 11px;
  line-height: 1.75;
  color: var(--muted);
  margin-top: 12px;
}

.help-card p+p {
  margin-top: 8px;
}

.app-footer {
  font-size: 9px;
  color: #657681;
  text-align: center;
  margin-top: 29px;
  line-height: 1.6;
}

.bottom-nav {
  position: fixed;
  bottom: auto;
  top: calc(var(--app-height) - 16px - var(--app-inset-bottom));
  left: 50%;
  transform: translate(-50%, -100%);
  max-width: 470px;
  width: calc(100% - 32px - var(--app-inset-left) - var(--app-inset-right));
  z-index: 15;
}

.notice-stack {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: auto;
  top: calc(var(--app-height) - var(--ui-nav-reserve, 112px) - var(--app-inset-bottom));
  transform: translate(-50%, -100%);
  z-index: 30;
  width: min(450px,calc(100% - 36px));
  pointer-events: none;
}

.notice { pointer-events: auto; }

.page-heading {
  margin: 6px 0 24px;
}

.page-heading .eyebrow {
  margin-bottom: 9px;
  color: var(--accent);
}

.page-heading h1 {
  font-size: 30px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 11px;
  margin: 20px 0;
}

.stat-card {
  padding: 16px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 15px;
  text-align: center;
}

.stat-card b {
  display: block;
  font-size: 25px;
  font-variant-numeric: tabular-nums;
}

.stat-card span {
  font-size: 10px;
  color: var(--muted);
  display: block;
  margin-top: 5px;
}

.lock-note {
  padding: 12px 15px;
  font-size: 11px;
  color: var(--accent);
  background: #ffad590c;
  border: 1px solid #ffad5929;
  border-radius: 12px;
  margin-bottom: 17px;
}












.claim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

.claim-card {
  padding: 21px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
}

.claim-card .claim-icon {
  font-size: 26px;
  color: var(--lime);
  margin-bottom: 14px;
}

.claim-card p {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  margin: 8px 0 16px;
  min-height: 35px;
}

.claim-card .btn {
  margin-top: auto;
}

.referral-card {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid #55636c;
  border-radius: 18px;
  background: linear-gradient(135deg,#233037,#1c262f);
}

.referral-card h3 {
  margin-bottom: 10px;
}

.referral-card p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 17px;
}

.referral-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.muted-note {
  font-size: 10px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 13px;
}

.queue-card {
  padding: 37px 23px;
  text-align: center;
  border: 1px solid #d0eb8935;
  border-radius: var(--radius);
  background: radial-gradient(ellipse at 50% 10%,#d0eb890b,transparent 80%),var(--panel);
}

.radar {
  width: 90px;
  height: 90px;
  margin: 0 auto 24px;
  border-radius: 50%;
  border: 1px solid #d0eb8950;
  position: relative;
  display: grid;
  place-items: center;
  color: var(--lime);
  font-size: 30px;
}

.radar:before,.radar:after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid #d0eb8925;
  border-radius: 50%;
}

.radar:after {
  inset: -10px;
  animation: radar-pulse 2s ease infinite;
}

.queue-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  max-width: 365px;
  margin: 12px auto 24px;
}

.queue-card .presence {
  justify-content: center;
  margin-bottom: 20px;
}

.queue-time {
  color: var(--lime);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  margin-bottom: 18px;
}

.history-list {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.history-row {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}

.history-row:last-child {
  border-bottom: 0;
}

.history-mark {
  width: 31px;
  height: 31px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #d0eb8910;
  color: var(--lime);
  flex-shrink: 0;
}

.history-mark.loss {
  color: var(--accent);
  background: #ffad5910;
}

.history-detail {
  flex: 1;
  min-width: 0;
}

.history-detail strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-detail span {
  font-size: 9px;
  color: var(--muted);
  display: block;
  margin-top: 4px;
}

.history-reward {
  color: var(--lime);
  white-space: nowrap;
}

.empty-state {
  padding: 24px 16px;
  border: 0;
  border-radius: 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.empty-state>span {
  font-size: 30px;
  color: #758f8c;
  display: block;
  margin-bottom: 10px;
}

.leaderboard-table {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 29px minmax(0,1fr) 62px 55px;
  align-items: center;
  gap: 9px;
  padding: 17px 19px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  font-size: 12px;
}

.leaderboard-row:last-child {
  border-bottom: 0;
}

.leaderboard-row.header {
  font-size: 9px;
  letter-spacing: .5px;
  color: var(--muted);
  background: transparent;
  padding-top: 13px;
  padding-bottom: 13px;
}

.leaderboard-row>span:nth-last-child(-n+2) {
  text-align: right;
}

.leaderboard-rank {
  color: var(--accent);
  font-weight: 800;
}

.leaderboard-name {
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-name small {
  display: block;
  font-size: 9px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 4px;
}

.leaderboard-power {
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

.noscript {
  position: fixed;
  inset: 0;
  background: var(--bg);
  padding: 60px 24px;
  z-index: 99;
  color: var(--text);
}

.page-in {
  animation: page-in .2s ease-out;
}

.split-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.subtle {
  color: var(--muted);
}

@keyframes radar-pulse {
  0%,100% {
    opacity: .5;
    transform: scale(.97);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}

@keyframes loading {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(350%);
  }
}

@keyframes page-in {
  from {
    opacity: .4;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media(min-width:850px) {
  .app-shell {
    padding-top: calc(37px + var(--app-inset-top));
  }
  .hero {
    min-height: 365px;
  }
  .hero-copy {
    padding: 38px;
  }
  .hero h1 {
    font-size: 45px;
    max-width: 420px;
  }
  .hero p {
    font-size: 13px;
    max-width: 315px;
  }
  .rooster-svg {
    max-width: 375px;
  }
  .mode-card {
    padding: 26px;
  }
  .mode-card p {
    font-size: 12px;
    max-width: 340px;
  }
  .hero-footer {
    padding-top: 28px;
  }
  .mode-card h3 {
    font-size: 20px;
  }
  .arena-grid {
    gap: 18px;
  }
  .hero-star {
    right: 43px;
    top: 30px;
  }
  .power-badge {
    right: 40px;
    bottom: 29px;
  }
  .rooster-stage:before {
    width: 265px;
    height: 265px;
  }
}

@media(max-width:600px) {
  .app-shell {
    padding: calc(22px + var(--app-inset-top)) calc(19px + var(--app-inset-right)) calc(108px + var(--app-inset-bottom)) calc(19px + var(--app-inset-left));
  }
  .app-header {
    margin-bottom: 23px;
  }
  .brand {
    font-size: 15px;
    gap: 9px;
    letter-spacing: 1.5px;
  }
  .brand-symbol {
    width: 37px;
    height: 38px;
    font-size: 28px;
    line-height: 36px;
    border-radius: 11px;
  }
  .brand-sub {
    font-size: 6px;
    letter-spacing: 1.65px;
  }
  .connection-pill {
    font-size: 9px;
    padding: 7px 9px;
    gap: 6px;
  }
  .player-bar {
    margin-bottom: 22px;
    gap: 9px;
  }
  .wallet {
    gap: 13px;
  }
  .wallet-item {
    gap: 6px;
  }
  .currency-icon {
    height: 28px;
    width: 28px;
    border-radius: 9px;
    font-size: 19px;
  }
  .currency-icon.medal {
    font-size: 14px;
  }
  .wallet-item strong {
    font-size: 14px;
  }
  .wallet-item span:not(.currency-icon) {
    font-size: 8px;
  }
  .avatar {
    width: 35px;
    height: 35px;
    font-size: 13px;
    border-radius: 11px;
  }
  .player-identity {
    gap: 8px;
  }
  .player-identity strong {
    font-size: 11px;
    max-width: 115px;
  }
  .eyebrow {
    font-size: 7px;
    letter-spacing: 1.3px;
    margin-bottom: 4px;
  }
  .hero {
    min-height: 279px;
    grid-template-columns: 52% 48%;
  }
  .hero-copy {
    padding: 24px 0 21px 20px;
  }
  .hero-kicker {
    font-size: 7px;
    letter-spacing: 1px;
    margin-bottom: 15px;
  }
  .hero h1 {
    font-size: 28px;
    letter-spacing: -.9px;
    max-width: 200px;
  }
  .hero p {
    font-size: 10px;
    line-height: 1.6;
    max-width: 182px;
    margin-top: 12px;
  }
  .hero-footer {
    gap: 5px;
    padding-top: 17px;
    position: relative;
    z-index: 3;
    white-space: nowrap;
  }
  .tag {
    font-size: 8px;
    padding: 6px 8px;
    border-radius: 7px;
  }
  .rooster-stage {
    align-self: stretch;
    margin-left: -26px;
    padding-top: 6px;
  }
  .rooster-svg {
    max-width: none;
    width: calc(100% + 30px);
  }
  .rooster-stage:before {
    width: 160px;
    height: 160px;
  }
  .power-badge {
    right: 12px;
    bottom: 30px;
    padding: 8px 10px;
    gap: 7px;
    border-radius: 11px;
  }
  .power-badge b {
    font-size: 19px;
  }
  .power-badge strong {
    font-size: 15px;
  }
  .power-badge span {
    font-size: 7px;
  }
  .hero-star {
    font-size: 22px;
    top: 20px;
    right: 19px;
  }
  .level-strip {
    gap: 11px;
    padding-top: 13px;
  }
  .level-strip>span {
    font-size: 10px;
  }
  .level-strip>small {
    font-size: 8px;
  }
  .section-title {
    margin: 25px 0 14px;
  }
  .section-title h2 {
    font-size: 20px;
  }
  .presence {
    font-size: 9px;
    gap: 5px;
  }
  .mode-card {
    padding: 18px 15px;
    border-radius: 17px;
  }
  .mode-icon {
    height: 33px;
    width: 33px;
    font-size: 20px;
    border-radius: 10px;
    margin-bottom: 16px;
  }
  .mode-index {
    font-size: 33px;
    right: 15px;
    top: 19px;
  }
  .mode-card h3 {
    font-size: 15px;
  }
  .mode-card p {
    font-size: 10px;
    min-height: 49px;
    line-height: 1.6;
    margin: 8px 0 16px;
  }
  .mode-meta {
    font-size: 8px;
    gap: 5px;
    margin-bottom: 13px;
  }
  .mode-card .btn {
    font-size: 10px;
    min-height: 40px;
    padding: 10px;
  }
  .btn-arrow {
    font-size: 15px;
  }
  .arena-grid {
    gap: 10px;
  }



  .dev-banner {
    font-size: 9px;
    padding: 9px 11px;
    margin-bottom: 18px;
  }
  .dev-banner span {
    font-size: 8px;
  }
  .page-heading h1 {
    font-size: 28px;
  }
  .claim-card {
    padding: 17px 15px;
  }
  .claim-card h3 {
    font-size: 14px;
  }
  .claim-card p {
    font-size: 10px;
    min-height: 46px;
  }
  .claim-card .btn {
    font-size: 10px;
    padding: 10px;
  }
  .stat-card {
    padding: 14px 8px;
  }
  .stat-card b {
    font-size: 22px;
  }
  .stat-card span {
    font-size: 9px;
  }
  .leaderboard-row {
    padding: 15px 12px;
    grid-template-columns: 22px minmax(0,1fr) 48px 45px;
    gap: 7px;
    font-size: 11px;
  }
  .leaderboard-row.header {
    font-size: 8px;
  }
  .help-card {
    padding: 15px;
  }
  .help-card summary {
    font-size: 11px;
  }
  .help-card p {
    font-size: 10px;
  }
  .referral-card {
    padding: 19px;
  }
  .referral-card p {
    font-size: 11px;
  }
  .referral-actions .btn {
    font-size: 11px;
  }
  .app-footer {
    font-size: 8px;
  }
}

@media(max-width:365px) {
  .app-shell {
    padding-left: calc(13px + var(--app-inset-left));
    padding-right: calc(13px + var(--app-inset-right));
  }
  .player-identity strong {
    max-width: 85px;
  }
  .wallet {
    gap: 10px;
  }
  .wallet-item {
    gap: 4px;
  }
  .currency-icon {
    width: 24px;
    height: 27px;
  }
  .hero-copy {
    padding-left: 17px;
  }
  .hero h1 {
    font-size: 25px;
  }
  .hero p {
    font-size: 9px;
    max-width: 155px;
  }
  .hero {
    min-height: 267px;
  }
  .hero-kicker {
    font-size: 6px;
  }
  .hero-footer {
    gap: 4px;
  }
  .tag {
    font-size: 7px;
    padding: 6px;
  }
  .mode-card {
    padding: 16px 12px;
  }
  .mode-card h3 {
    font-size: 14px;
  }





  .connection-pill {
    font-size: 8px;
    padding: 6px;
  }
  .brand {
    font-size: 13px;
  }
  .brand-sub {
    font-size: 5px;
  }
  .power-badge {
    right: 10px;
  }
  .dev-banner {
    gap: 6px;
    font-size: 8px;
  }
  .dev-banner span {
    font-size: 7px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation: none!important;
    transition: none!important;
    scroll-behavior: auto!important;
  }
}

/* Language selection is local UI state and stays available during loading. */
.header-controls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dev-banner>b { font: inherit; }
@media(max-width:600px) {
  .header-controls { gap: 8px; }
  .header-controls .connection-pill { padding: 8px; }
  .header-controls #connection-label { display: none; }
}

/* Wagers are chosen before a battle; the reveal only animates a saved result. */
.first-fight {
  padding: 24px;
  border: 1px solid #ffad5960;
  border-radius: var(--radius);
  background: linear-gradient(130deg, #3c3429, #243332);
  margin-bottom: 22px;
}
.first-fight .eyebrow { color: var(--accent); }
.first-fight h2 { margin: 12px 0; font-size: 26px; }
.first-fight p { color: #c3c9bb; line-height: 1.7; font-size: 13px; margin-bottom: 20px; }
.first-fight .btn { min-height: 54px; font-size: 15px; }
.first-fight small { display: block; text-align: center; color: var(--muted); font-size: 10px; margin-top: 12px; }
.stake-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin: 18px 0 10px; }
.stake-heading h3 { font-size: 12px; }
.stake-heading span { font-size: 10px; color: var(--muted); }
.stake-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 18px; }
.stake-option { border: 1px solid var(--line); background: var(--panel); border-radius: 11px; min-height: 46px; font-weight: 750; font-size: 14px; }
.stake-option span { color: var(--accent); }
.stake-option[aria-pressed=true] { border-color: var(--amber); background: #ffad5912; }
.wager-disclosure { margin-bottom: 18px; }
.wager-disclosure>span { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; margin-bottom: 10px; color: var(--muted); }
.wager-disclosure strong { color: var(--text); white-space: nowrap; }
.wager-disclosure small { display: block; color: var(--muted); line-height: 1.7; font-size: 10px; }
.arena-grid.single-mode { grid-template-columns: 1fr; }
.history-reward.negative { color: var(--red); }
.ranking-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ranking-options [aria-pressed=true] { border-color: var(--lime); color: var(--lime); background: #d0eb8908; }
@media(max-width:600px) {
  .first-fight { padding: 21px 18px; }
  .first-fight h2 { font-size: 23px; }
  .first-fight p { font-size: 12px; }
  .stake-heading span { font-size: 9px; }
  .wager-disclosure>span { font-size: 9px; }
  .wager-disclosure small { font-size: 9px; }

}
/* Arena home only: compact routine play; onboarding keeps its illustration. */
.app-shell.arena-home {
  padding-top: calc(12px + var(--app-inset-top));
  padding-left: calc(16px + var(--app-inset-left));
  padding-right: calc(16px + var(--app-inset-right));
  padding-bottom: calc(var(--ui-nav-reserve, 112px) + var(--app-inset-bottom));
  background: var(--bg);
  min-height: var(--app-height);
}
.arena-home button:focus-visible, .arena-home summary:focus-visible { outline-color: var(--accent); }
.arena-returning .app-header { margin-bottom: 12px; }
.arena-returning .dev-banner { display: none; }
.arena-returning .player-bar { margin-bottom: 8px; }
.arena-returning .player-identity .avatar, .arena-returning .player-identity .eyebrow { display: none; }
.arena-returning .player-identity strong { max-width: 180px; font-size: 14px; }
.arena-returning .currency-icon { background: none; width: auto; height: auto; font-size: 20px; }
.arena-returning .wallet-item { gap: 8px; }
.arena-returning .wallet-item>div { display: flex; align-items: baseline; gap: 4px; }
.arena-returning .wallet-item span:not(.currency-icon) { font-size: 14px; }
.arena-play { max-width: 600px; margin: auto; }
.arena-fighter { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.arena-portrait { width: 72px; height: 80px; flex-shrink: 0; overflow: hidden; }
.arena-portrait svg { width: 84px; height: 84px; margin-left: -6px; }
.arena-fighter-identity { min-width: 0; flex: 1; }
.arena-fighter h1 { font-size: 22px; line-height: 1.2; letter-spacing: -.4px; }
.arena-fighter p { font-size: 15px; line-height: 1.4; margin-top: 4px; }
.arena-xp { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.arena-xp .progress-track { max-width: 100px; flex: 1; height: 4px; background: var(--line); }
.arena-xp .progress-fill { background: var(--amber); }
.arena-xp span { font-size: 12px; color: var(--muted); }
.arena-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.arena-home .stake-options { gap: 8px; margin: 0; }
.arena-home .stake-heading { margin: 16px 0 8px; flex-wrap: wrap; gap: 4px 8px; }
.arena-home .stake-heading span { font-size: 14px; }
.arena-home .stake-option { min-height: 44px; font-size: 15px; border-radius: 12px; background: var(--panel); border: 1px solid transparent; padding: 8px 4px; }
.arena-home .stake-option[aria-pressed=true] { border-color: var(--amber); background: var(--panel-light); box-shadow: inset 0 -3px var(--amber); }
.arena-home .stake-option[aria-pressed=true]::before { content: '✓'; margin-right: 4px; font-size: 14px; }
.arena-risk { margin: 16px 0 12px; font-size: 15px; line-height: 1.4; }
.arena-risk>div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.arena-risk strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.arena-risk p { color: var(--muted); font-size: 14px; line-height: 1.4; margin-top: 8px; }
.arena-home .btn.primary { background: var(--amber); color: #292016; border-color: var(--amber); box-shadow: none; }
.arena-home .btn:disabled, .arena-home .stake-option:disabled { opacity: 1; color: var(--muted); background: var(--panel-light); border-color: var(--line); }
.arena-unavailable { font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.arena-support { margin-top: 24px; }
.arena-support p { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 8px; }
.arena-home .presence { font-size: 14px; }
.arena-home .help-card summary { min-height: 44px; padding-block: 12px; font-size: 15px; }
.arena-home .help-card p { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.arena-play .section-title small, .arena-play .history-detail span { font-size: 13px; }
.arena-play .history-detail strong, .arena-play .history-reward { font-size: 14px; }
.arena-home .first-fight p, .arena-home .mode-card p { font-size: 15px; line-height: 1.5; }
.arena-home .first-fight small, .arena-home .wager-disclosure small, .arena-home .wager-disclosure>span, .arena-home .muted-note { font-size: 14px; line-height: 1.5; }
.arena-home .mode-card .btn { min-height: 48px; font-size: 15px; }


@media(min-width:601px) {
  .arena-returning .app-header, .arena-returning .player-bar { max-width: 600px; margin-left: auto; margin-right: auto; }
}
.arena-home .help-card summary { color: var(--text); }
.arena-home .mode-card .btn:not(.primary) { background: var(--panel-light); color: var(--text); }
:root[data-compact-arena="true"] .app-shell.arena-returning { padding-top: calc(8px + var(--app-inset-top)); }
:root[data-compact-arena="true"] .arena-returning .app-header { margin-bottom: 4px; }
:root[data-compact-arena="true"] .arena-returning .player-bar { margin-bottom: 0; }
:root[data-compact-arena="true"] .arena-returning .arena-fight { min-height: 48px; }
:root[data-compact-arena="true"] .arena-fighter { margin-bottom: 8px; }
:root[data-compact-arena="true"] .arena-portrait { height: 64px; }
:root[data-compact-arena="true"] .arena-portrait svg { width: 68px; height: 68px; margin-left: 2px; }
:root[data-compact-arena="true"] .arena-returning .stake-heading { margin-top: 8px; }
:root[data-compact-arena="true"] .arena-risk { margin: 8px 0; }
:root[data-compact-arena="true"] .arena-risk p { margin-top: 4px; }
:root[data-compact-arena="true"] .arena-returning .arena-xp { margin-top: 4px; }
:root[data-compact-arena="true"] .arena-returning .arena-risk>div { margin-bottom: 0; }

/* Shared theme surfaces. Artwork and the amber action fill retain their colors. */
:root[data-theme="light"] .referral-card { background: var(--panel); }
:root[data-theme="light"] :is(.power-badge span, .app-footer, .mode-meta, .tag) { color: var(--muted); }
:root[data-theme="light"] .tag { background: var(--panel-light); color: var(--text); }
:root[data-theme="light"] .btn.lime { background: #d0eb89; color: #283318; }
.bottom-nav, .notice-stack, .result-toast {
  left: calc(50% + (var(--app-inset-left) - var(--app-inset-right)) / 2);
}
.notice-stack { width: min(450px, calc(100% - 36px - var(--app-inset-left) - var(--app-inset-right))); }
/* Keep scrolling content out of transparent native control/cutout regions.
   This paints the already-reserved insets; it adds no second padding. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--app-height);
  border: solid var(--bg);
  border-width: var(--app-inset-top) var(--app-inset-right) var(--app-inset-bottom) var(--app-inset-left);
  pointer-events: none;
  z-index: 40;
}

/* Cross-screen shell and fallback states share the same mobile controls.
   Battle and compact Arena retain their intentional vertical space budgets. */
.app-shell:not(.battle-mode):not(.arena-home) {
  padding: calc(12px + var(--app-inset-top)) calc(16px + var(--app-inset-right))
    calc(var(--ui-nav-reserve, 112px) + var(--app-inset-bottom)) calc(16px + var(--app-inset-left));
}
.app-shell:not(.battle-mode):not(.arena-home) .app-header { margin-bottom: 12px; }
.wallet { flex-shrink: 0; max-width: 60%; min-width: 0; }
.wallet-item { gap: 8px; }
.wallet-item > div { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.wallet-item strong, .wallet-item span:not(.currency-icon) { font-size: 14px; }
.currency-icon { background: none; width: auto; height: auto; font-size: 20px; }
.player-identity strong { font-size: 14px; }
.player-identity .eyebrow { font-size: 12px; letter-spacing: .5px; }
.btn { border-radius: 12px; font-size: 15px; }
.btn.primary { min-height: 48px; }
.first-fight .btn { min-height: 52px; }
.queue-card { background: var(--panel); }
.queue-card p, .queue-card .presence, .queue-time { font-size: 14px; line-height: 1.5; }
.queue-card .btn { min-height: 48px; font-size: 15px; }
.page-heading .eyebrow { font-size: 12px; }

/* Club icon and tactile language. Existing shell geometry remains authoritative. */
:root { --motion-fast: 120ms; --motion-ui: 180ms; }
.brand-symbol { display: grid; place-items: center; border-radius: 12px; }
.brand-symbol .ui-icon { width: 28px; height: 28px; }
button { transition: transform var(--motion-fast) ease-out, background-color var(--motion-ui), color var(--motion-ui); }
button:active:not(:disabled), .roost-screen .btn:not(:disabled):active { transform: scale(.985); transition-duration: 0s; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline-color: var(--accent); }
.arena-home .stake-option[aria-pressed=true]::before { content: none; }
.selection-check { display: none; }
[aria-pressed=true] > .selection-check { display: inline; margin-right: 4px; }
.selection-check .ui-icon { width: 12px; height: 12px; }
.stake-option > .ui-icon { color: var(--accent); }
.notice .dismiss { display: grid; place-items: center; }
.notice .dismiss .ui-icon { width: 20px; height: 20px; }
.history-mark { background: none; border-radius: 0; }
.history-mark.loss { background: none; color: var(--red); }
.history-mark .ui-icon { width: 20px; height: 20px; }
#balance { display: inline-block; }
#balance.money-increase { color: var(--lime); }
#balance.money-decrease { color: var(--red); }
.gear-benefit, .gear-next, .gear-multiplier, .roost-amount { font-variant-numeric: tabular-nums; }
.loading-rooster, .radar:after { animation: none; }
.loading-rooster .ui-icon { width: 48px; height: 48px; }
.radar { border: 0; background: none; }
.radar::before, .radar::after { content: none; }
.radar .ui-icon { width: 40px; height: 40px; }
/* The illustrated first visit keeps its order and emphasis, without glass/stars. */
.hero::before { content: none; }
.rooster-svg { filter: none; }
.power-badge { background: var(--bg); backdrop-filter: none; border: 0; border-radius: 8px; }
.power-badge > .ui-icon { width: 20px; height: 20px; }
.power-badge span, .hero-kicker, .first-fight .eyebrow { font-size: 12px; letter-spacing: .5px; }
.hero p { font-size: 14px; line-height: 1.5; }
.hero .tag { background: none; border: 0; padding: 0; border-radius: 0; font-size: 12px; }
.hero .tag.accent { color: var(--text); }
.hero-footer { gap: 8px; flex-wrap: wrap; }
.mode-icon { width: auto; height: auto; background: none; border-radius: 0; }
.online .mode-icon { background: none; color: var(--muted); }
.mode-index { display: none; }
.dev-banner { background: none; border: 0; padding: 0; font-size: 12px; line-height: 1.4; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.brand-sub { font-size: 8px; letter-spacing: .6px; }
.app-footer { font-size: 12px; line-height: 1.5; }
@media(prefers-reduced-motion:reduce) {
  button:active:not(:disabled), .roost-screen .btn:not(:disabled):active { transform: none; }
}