:root {
  --ink: #210d22;
  --ink-2: #341636;
  --panel: #49204b;
  --panel-hi: #5c2a5e;
  --panel-lo: #3c1a3e;
  --text: #fffaf0;
  --muted: #e4b4cf;
  --red: #ff4b4b;
  --red-dark: #c42638;
  --orange: #ff8a1e;
  --yellow: #ffd23f;
  --yellow-dark: #e09b00;
  --green: #3ddc72;
  --green-dark: #1f9a4b;
  --blue: #3f8cff;
  --blue-dark: #2457c7;
  --cyan: #3ee0ff;
  --purple: #a26bff;
  --me: #3ddc72;
  --rival: #ff4b6e;
  --rival2: #3d8bff;
  --gold: #ffd23f;
  --font-display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-body: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --hard: 0 6px 0 var(--ink);
  --hard-sm: 0 4px 0 var(--ink);
  font-family: var(--font-body);
}

body {
  background: #2b132c;
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

.panel {
  position: relative;
  background: linear-gradient(180deg, var(--panel-hi), var(--panel) 40%, var(--panel-lo));
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--hard), inset 0 3px 0 rgba(255, 255, 255, .12);
}

.btn-3d {
  --face: #69366b;
  --edge: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--face);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(33, 13, 34, .55);
  box-shadow: 0 5px 0 var(--edge);
  cursor: var(--cursor-pointer);
  transform: translateY(0);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}

.btn-3d:hover {
  filter: brightness(1.08);
}

.btn-3d:active:not(:disabled),
.btn-3d.pressed {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--edge);
}

.btn-3d:disabled {
  filter: grayscale(.85) brightness(.75);
  cursor: var(--cursor);
}

.btn-3d:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.btn-red {
  --face: var(--red);
}

.btn-blue {
  --face: var(--blue);
}

.btn-yellow {
  --face: var(--yellow);
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.btn-green {
  --face: var(--green);
}

.btn-dark {
  --face: #572a59;
}

.icon-3d {
  width: 46px;
  min-height: 46px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 1.15rem;
  border-radius: 13px;
}

.icon-3d.danger:hover {
  --face: var(--red);
}

.hazard-strip {
  height: 12px;
  border-bottom: 3px solid var(--ink);
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 12px, var(--ink) 12px 24px);
}

.brand-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: .95;
  letter-spacing: .01em;
  color: var(--yellow);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink), 0 6px 0 rgba(0, 0, 0, .25);
}

.brand-ribbon {
  display: inline-block;
  margin: 8px 0 0;
  padding: 3px 12px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: var(--hard-sm);
}

.bomb-icon {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #655366, #251526 60%);
  border: 3px solid var(--ink);
}

.bomb-icon::before {
  content: "";
  position: absolute;
  right: -2px;
  top: -9px;
  width: 9px;
  height: 9px;
  border: 3px solid var(--ink);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 8px 0 0;
}

.bomb-icon .spark {
  position: absolute;
  right: -9px;
  top: -14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 25%, var(--yellow) 30% 55%, var(--orange) 60%);
  box-shadow: 0 0 10px var(--orange);
  animation: sparkFlicker .22s steps(2) infinite;
}

.modal-backdrop {
  background: rgba(24, 9, 25, .78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modal-panel {
  background: linear-gradient(180deg, var(--panel-hi), var(--panel) 30%, var(--panel-lo));
  border: 4px solid var(--ink);
  border-radius: 24px;
  box-shadow: 0 10px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .12);
}

.modal-panel h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 3px 0 var(--ink);
}

.modal-icon {
  border: 3px solid var(--ink);
  box-shadow: var(--hard-sm);
}

.modal-x {
  border: 3px solid var(--ink);
  background: #572a59;
  box-shadow: 0 3px 0 var(--ink);
}

.modal-body {
  color: var(--muted);
}

.action-btn {
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #572a59;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 55%);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: .02em;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .08s ease, box-shadow .08s ease;
}

.action-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--ink);
}

.action-btn.primary {
  background-color: var(--red);
  border-color: var(--ink);
}

.action-btn.danger {
  background-color: #b5203c;
}

.toast {
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--hard-sm);
}

.toast .toast-icon {
  background: var(--yellow);
  color: var(--ink);
  border: 3px solid var(--ink);
}

.toast b {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .02em;
}

.settings-tabs button {
  font-family: var(--font-display);
  font-weight: 400;
}

.loading-screen {
  background-color: #2b132c;
  background-image:
    radial-gradient(circle at 50% 40%, transparent 0 35%, rgba(19, 7, 20, .75) 100%),
    conic-gradient(from 90deg at 50% 50%, #3b193c 0 25%, #441f46 0 50%, #3b193c 0 75%, #441f46 0);
  background-size: 100% 100%, 72px 72px;
}

.loading-screen::before {
  display: none;
}

.loader-card {
  background: linear-gradient(180deg, var(--panel-hi), var(--panel) 40%, var(--panel-lo));
  border: 4px solid var(--ink);
  border-radius: 26px;
  box-shadow: 0 10px 0 var(--ink);
}

.loader-card h1 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--yellow);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink);
  letter-spacing: .01em;
}

.progress-bar {
  height: 22px;
  border: 3px solid var(--ink);
  background: var(--ink-2);
}

.progress-bar span {
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 12px, var(--orange) 12px 24px);
  box-shadow: none;
}

.avatar {
  --size: 42px;
  width: var(--size);
  height: var(--size);
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--blue);
  border: 3px solid var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: calc(var(--size) * .4);
  text-shadow: 0 2px 0 rgba(33, 13, 34, .5);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar.skin {
  contain: paint;
  background: radial-gradient(circle at 50% 32%, hsl(var(--hue) 72% 70%), hsl(var(--hue) 62% 42%) 72%);
}

.avatar img.avatar-skin {
  position: absolute;
  height: auto;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.avatar.pfp {
  contain: paint;
  background: #161616;
}

.avatar img.avatar-pfp {
  transform: scale(1.05);
  pointer-events: none;
  user-select: none;
}

.avatar.initials {
  background: linear-gradient(180deg, hsl(var(--hue) 80% 62%), hsl(var(--hue) 70% 45%));
}

.avatar-glyph {
  display: block;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .02em;
}

.avatar.initials .avatar-glyph {
  text-box: trim-both cap alphabetic;
}

.avatar.bot .avatar-glyph {
  margin-top: .06em;
}

.avatar.bot {
  background: linear-gradient(180deg, #6a7bb8, #523254);
  font-size: calc(var(--size) * .52);
}

.avatar.tiny {
  --size: 28px;
  border-width: 2px;
}

.avatar.big {
  --size: clamp(80px, 18vw, 120px);
  border-width: 4px;
  box-shadow: 0 5px 0 var(--ink);
}

.avatar.green {
  box-shadow: 0 0 0 3px var(--me);
}

.avatar.red {
  box-shadow: 0 0 0 3px var(--rival);
}

.avatar.big.green {
  box-shadow: 0 0 0 4px var(--me), 0 6px 0 4px var(--ink);
}

.avatar.big.red {
  box-shadow: 0 0 0 4px var(--rival), 0 6px 0 4px var(--ink);
}

.auth-screen {
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 28px 16px;
  touch-action: pan-y;
  background-color: #2b132c;
  background-image:
    radial-gradient(circle at 50% 45%, transparent 0 30%, rgba(19, 7, 20, .8) 100%),
    conic-gradient(from 90deg at 50% 50%, #3b193c 0 25%, #441f46 0 50%, #3b193c 0 75%, #441f46 0);
  background-size: 100% 100%, 72px 72px;
}

.auth-card {
  width: min(440px, 100%);
  padding: 26px;
  animation: popIn .45s cubic-bezier(.2, 1.4, .4, 1);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.auth-brand .game-logo {
  width: 88px;
  height: 88px;
  margin: -8px -4px -8px -8px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  margin-bottom: 18px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--ink-2);
}

.auth-tab {
  min-height: 40px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 1rem;
  cursor: var(--cursor-pointer);
}

.auth-tab.active {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--yellow-dark);
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-form label {
  display: grid;
  gap: 6px;
  color: #fff;
  font-weight: 800;
  font-size: .86rem;
}

.auth-form label small {
  color: var(--muted);
  font-weight: 700;
}

.auth-form input {
  min-height: 48px;
  padding: 0 14px;
  border: 3px solid var(--ink);
  border-radius: 13px;
  background: #fffaf0;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  box-shadow: inset 0 3px 0 rgba(33, 13, 34, .15);
}

.auth-form input:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px var(--ink), inset 0 3px 0 rgba(33, 13, 34, .15);
}

.auth-submit {
  min-height: 52px;
  margin-top: 4px;
  font-size: 1.2rem;
}
.auth-error {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: #ffdfe3;
  color: #8a0f22;
  font-weight: 800;
  font-size: .88rem;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 14px;
  color: var(--muted);
  font-weight: 800;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: var(--ink-2);
}

.oauth-btn {
  width: 100%;
  justify-content: flex-start;
  gap: 14px;
  min-height: 54px;
  padding: 0 18px;
  font-size: 1.08rem;
}

.oauth-btn span {
  flex: 1;
  margin-right: 26px;
  text-align: center;
}

.oauth-logo {
  flex: none;
  width: 26px;
  height: 26px;
}

.oauth-btn.discord {
  --face: #5865f2;
}

.oauth-btn.apple {
  --face: #000;
  margin-top: 10px;
  color: #fff;
}

.oauth-btn[hidden] {
  display: none;
}

.menu-screen {
  background: #2b132c;
}

.lobby-shell {
  width: min(1200px, 100%);
}

.lobby-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.lobby-top .menu-brand {
  margin: 0;
  gap: 12px;
}

.lobby-top .game-logo {
  width: 84px;
  height: 84px;
  margin: -8px -2px -8px -6px;
}

.lobby-top .menu-brand h1 {
  font-size: clamp(2rem, 4.6vw, 3rem);
  letter-spacing: .01em;
}

.lobby-top .menu-brand p {
  letter-spacing: .14em;
  color: #fff;
  font-size: .78rem;
}

.lobby-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.online-pill,
.coin-pill,
.cash-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--ink-2);
  box-shadow: var(--hard-sm);
  font-weight: 800;
  font-size: .86rem;
  color: var(--muted);
}

.online-pill b {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
}

.coin-pill {
  background: var(--yellow);
  color: var(--ink);
}

.cash-pill {
  background: linear-gradient(180deg, #8ff07a, #3fc35a);
  color: var(--ink);
}

.coin-pill b,
.cash-pill b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.coin-icon,
.cash-icon {
  flex: none;
  width: 26px;
  height: 26px;
  margin-left: -4px;
  background: url("../assets/images/currency/Coin.png") center / contain no-repeat;
  filter: drop-shadow(0 2px 0 rgba(33, 13, 34, .45));
}

.cash-icon {
  width: 30px;
  background-image: url("../assets/images/currency/Cash.png");
}

.coin-i,
.cash-i {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin: 0 .12em -.22em 0;
  background: url("../assets/images/currency/Coin.png") center / contain no-repeat;
}

.cash-i {
  width: 1.35em;
  background-image: url("../assets/images/currency/Cash.png");
}

.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--ink);
  animation: livePulse 1.6s ease-in-out infinite;
}

.profile-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 5px 5px 6px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--hard-sm);
}

.profile-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-right: 4px;
}

.profile-copy b {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
}

.profile-copy small {
  color: var(--muted);
  font-weight: 800;
  font-size: .74rem;
}

.lobby-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "play play fighter"
    "stats daily board"
    "stats reward board";
  gap: 30px 18px;
}

.lobby-grid>.panel {
  padding: 26px 18px 18px;
  min-width: 0;
}

.card-tab {
  position: absolute;
  left: 16px;
  top: 0;
  margin: 0;
  padding: 4px 14px;
  transform: translateY(-58%) rotate(-2deg);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--hard-sm);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.12rem;
  letter-spacing: .02em;
  white-space: nowrap;
}

.tab-cyan {
  background: var(--cyan);
}

.tab-yellow {
  background: var(--yellow);
}

.tab-orange {
  background: var(--orange);
}

.tab-purple {
  background: var(--purple);
  color: #fff;
  text-shadow: 0 2px 0 rgba(33, 13, 34, .45);
}

.rank-badge,
.reset-timer,
.streak-pill {
  position: absolute;
  right: 14px;
  top: 12px;
  padding: 3px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink-2);
  color: var(--muted);
  font-weight: 900;
  font-size: .72rem;
  white-space: nowrap;
}

.streak-pill {
  color: #ffb36b;
}

.sub-head {
  margin: 16px 0 8px;
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.play-card {
  grid-area: play;
  padding: 0 !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 30%, rgba(255, 138, 30, .35), transparent 45%),
    linear-gradient(180deg, #6d3570, #5a265c 50%, #471d4a);
}

.play-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px 24px 8px;
}

.mode-tag {
  display: inline-block;
  padding: 3px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--green);
  color: var(--ink);
  font-weight: 900;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.play-copy h2 {
  margin: 8px 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: .95;
  color: #fff;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink);
}

.play-copy p {
  margin: 0;
  max-width: 440px;
  color: #e3dcff;
  font-weight: 700;
  line-height: 1.45;
}

.mini-arena {
  position: relative;
  width: 250px;
  height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 14px 18px;
}

.mini-tiles {
  position: absolute;
  inset: auto 0 0;
  height: 44px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--hard-sm);
  background:
    conic-gradient(from 90deg at 50% 50%, #f5e27a 0 25%, #f0d250 0 50%, #f5e27a 0 75%, #f0d250 0);
  background-size: 44px 44px;
}

.mini-bomb {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  margin-bottom: 2px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: radial-gradient(circle at 34% 30%, #795b7a, #251526 62%);
  animation: bombPulse .7s ease-in-out infinite;
}

.mini-bomb .fuse {
  position: absolute;
  right: 0;
  top: -11px;
  width: 11px;
  height: 11px;
  border: 3px solid var(--ink);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 9px 0 0;
}

.mini-bomb .spark {
  position: absolute;
  right: -8px;
  top: -17px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 25%, var(--yellow) 30% 55%, var(--orange) 60%);
  box-shadow: 0 0 12px var(--orange);
  animation: sparkFlicker .22s steps(2) infinite;
}

.play-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 10px 24px 24px;
}

.find-match-btn {
  justify-content: flex-start;
  gap: 18px;
  min-height: 84px;
  padding: 0 24px;
  border-width: 4px;
  border-radius: 20px;
  box-shadow: 0 7px 0 var(--ink);
}

.find-match-btn .bomb-icon {
  width: 42px;
  height: 42px;
}

.find-match-btn .bomb-icon::before {
  width: 12px;
  height: 12px;
  top: -12px;
}

.find-match-btn .bomb-icon .spark {
  right: -11px;
  top: -19px;
  width: 14px;
  height: 14px;
}

.fm-text {
  display: grid;
  text-align: left;
}

.fm-text b {
  font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 3px 0 var(--ink);
}

.fm-text small {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: .8rem;
  color: #ffe1dc;
  text-shadow: none;
}

.practice-btn {
  flex-direction: column;
  gap: 0;
  min-height: 84px;
  padding: 0 22px;
  border-width: 4px;
  border-radius: 20px;
  box-shadow: 0 7px 0 var(--ink);
}

.practice-btn b {
  font-weight: 400;
  font-size: 1.35rem;
}

.practice-btn small {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: .74rem;
  color: #dbe8ff;
  text-shadow: none;
}

.stats-card {
  grid-area: stats;
}

.rating-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

.tier-emblem {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--ink-2);
  box-shadow: var(--hard-sm);
  font-size: 1.9rem;
}

.tier-emblem.gold,
.tier-emblem.champion {
  background: var(--yellow);
}

.tier-emblem.platinum,
.tier-emblem.diamond {
  background: var(--cyan);
}

.rating-value {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 3px 0 var(--ink);
  font-variant-numeric: tabular-nums;
}

.rating-row small {
  color: var(--muted);
  font-weight: 800;
}

.mini-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
}

.mini-stats div {
  padding: 7px 3px;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: var(--ink-2);
  text-align: center;
}

.mini-stats b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.mini-stats small {
  display: block;
  color: var(--muted);
  font-weight: 900;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.recent-list,
.challenge-list,
.board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.recent-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 5px;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: var(--ink-2);
  font-weight: 800;
  font-size: .84rem;
}

.recent-list li b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
}

.recent-list li.win b {
  background: var(--green);
}

.recent-list li.loss b {
  background: var(--rival);
  color: #fff;
}

.recent-list li.draw b {
  background: #e4b4cf;
}

.recent-list li .recent-foe-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-list li small {
  color: var(--muted);
  white-space: nowrap;
}

.recent-vs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 6px;
  min-width: 0;
}

.recent-foe {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}

.recent-foe .avatar {
  --size: 22px;
  border-width: 2px;
}

.recent-foe-rank {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--muted);
}

.recent-and {
  font-style: normal;
  color: var(--muted);
}

.recent-meta {
  display: grid;
  justify-items: end;
  gap: 1px;
  line-height: 1.2;
}

.recent-meta time {
  font-size: .72rem;
  opacity: .85;
}

.recent-list li.empty,
.board-list li.empty {
  display: block;
  padding: 12px;
  color: var(--muted);
  text-align: center;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.link-provider {
  padding: 5px 11px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--ink-2);
  color: #fff;
  font-weight: 900;
  font-size: .78rem;
  text-decoration: none;
}

.daily-card {
  grid-area: daily;
}

.challenge-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--ink-2);
}

.challenge-list li.done {
  background: #4a3a1e;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--yellow);
}

.challenge-list li.claimed {
  opacity: .55;
}

.challenge-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 1.1rem;
}

.challenge-copy b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  color: #fff;
}

.challenge-copy small {
  display: block;
  color: var(--muted);
  font-weight: 800;
  font-size: .76rem;
}

.progress-line {
  height: 10px;
  margin: 6px 0 2px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #210d22;
  overflow: hidden;
}

.progress-line span {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(-45deg, var(--green) 0 8px, #2bc35e 8px 16px);
  transition: width .4s ease;
}

.progress-text {
  font-variant-numeric: tabular-nums;
}

.reward-tag,
.claimed-tag {
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: .95rem;
  white-space: nowrap;
}

.claimed-tag {
  color: var(--green);
}

.claim-btn {
  --face: var(--yellow);
  min-height: 36px;
  padding: 0 12px;
  border: 3px solid var(--ink);
  border-radius: 11px;
  background: var(--face);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .95rem;
  box-shadow: 0 4px 0 var(--ink);
  cursor: var(--cursor-pointer);
  white-space: nowrap;
  animation: claimWiggle 1.8s ease-in-out infinite;
}

.claim-btn:disabled {
  animation: none;
  --face: #563658;
  color: var(--muted);
  filter: none;
  cursor: var(--cursor);
}

.claim-btn.big {
  width: 100%;
  min-height: 50px;
  margin-top: 16px;
  font-size: 1.2rem;
}

.reward-card {
  grid-area: reward;
}

.reward-track {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.reward-day {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 2px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.reward-day small {
  color: var(--muted);
  font-weight: 900;
  font-size: .56rem;
  white-space: nowrap;
}

.reward-day b {
  font-size: 1.05rem;
}

.reward-day span {
  font-family: var(--font-display);
  font-size: .82rem;
  color: #fff;
}

.reward-day.claimed {
  background: var(--green-dark);
}

.reward-day.claimed small {
  color: #d6ffe3;
}

.reward-day.today {
  background: var(--yellow);
  transform: translateY(-4px);
  box-shadow: 0 4px 0 var(--ink);
}

.reward-day.today small,
.reward-day.today span {
  color: var(--ink);
}

.reward-day.future {
  opacity: .75;
}

.board-card {
  grid-area: board;
  display: flex;
  flex-direction: column;
}

.seg-tabs {
  position: absolute;
  right: 12px;
  top: 9px;
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: var(--ink-2);
}

.seg {
  border: 0;
  border-radius: 8px;
  padding: 3px 10px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: .82rem;
  cursor: var(--cursor-pointer);
}

.seg.active {
  background: var(--purple);
  color: #fff;
}

.board-list {
  flex: 1 1 0;
  min-height: 240px;
  margin-top: 8px;
  padding-right: 3px;
  overflow: auto;
  overscroll-behavior: contain;
  align-content: start;
}

@media (max-width: 1000px) {
  .board-list {
    flex: none;
    min-height: 0;
    max-height: 420px;
  }
}

.board-list li {
  display: grid;
  grid-template-columns: 34px 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 9px 5px 5px;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: var(--ink-2);
  font-weight: 800;
  font-size: .88rem;
}

.board-list li.me {
  background: #1f5a3a;
}

.board-rank {
  text-align: center;
  font-family: var(--font-display);
  color: var(--muted);
}

.board-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-value {
  font-family: var(--font-display);
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

.lobby-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.link-btn {
  min-height: 44px;
  font-size: 1rem;
}

.link-btn small {
  display: none;
}

.menu-footer {
  color: rgba(255, 255, 255, .45);
  font-weight: 800;
}

.queue-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(24, 9, 25, .82);
  animation: fadeIn .2s ease;
}

.queue-card {
  width: min(440px, 100%);
  overflow: hidden;
  text-align: center;
  padding: 0 0 24px;
  animation: popIn .4s cubic-bezier(.2, 1.4, .4, 1);
}

.radar {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 24px auto 16px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle, #1f6b3e, #123d26 72%);
  box-shadow: var(--hard);
  overflow: hidden;
}

.radar-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed rgba(160, 255, 190, .35);
}

.radar-ring.r2 {
  inset: 28px;
}

.radar-ring.r3 {
  inset: 56px;
}

.radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(120, 255, 160, .55), transparent 75deg, transparent);
  animation: spin 2s linear infinite;
}

.blip {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--rival);
  opacity: 0;
  animation: blip 2s ease-out infinite;
}

.blip.b1 {
  left: 28%;
  top: 22%;
}

.blip.b2 {
  left: 70%;
  top: 40%;
  animation-delay: .65s;
}

.blip.b3 {
  left: 40%;
  top: 72%;
  animation-delay: 1.3s;
}

.radar-me {
  --size: 64px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--me);
}

.queue-card h2 {
  margin: 0 16px 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: #fff;
  text-shadow: 0 3px 0 var(--ink);
}

.queue-time {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1.1;
  color: var(--yellow);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink);
  font-variant-numeric: tabular-nums;
}

.queue-detail {
  margin: 4px 16px 0;
  color: var(--muted);
  font-weight: 800;
  font-size: .9rem;
}

.queue-tip {
  min-height: 2.8em;
  margin: 14px 20px 0;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--ink-2);
  color: #e3dcff;
  font-weight: 700;
  font-size: .84rem;
}

.queue-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.vs-stage {
  width: min(860px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.vs-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 26px 14px 22px;
  border: 4px solid var(--ink);
  border-radius: 24px;
  box-shadow: 0 8px 0 var(--ink);
  text-align: center;
  min-width: 0;
}

.vs-card.me {
  background: linear-gradient(180deg, #4be38a, #23a457);
  animation: vsSlideLeft .55s cubic-bezier(.2, 1.3, .3, 1) both;
}

.vs-card.opp {
  background: linear-gradient(180deg, #ff7088, #d02c4c);
  animation: vsSlideRight .55s cubic-bezier(.2, 1.3, .3, 1) both;
}

.vs-card b {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  color: #fff;
  text-shadow: 0 3px 0 var(--ink);
}

.vs-card small {
  color: #fff;
  font-weight: 900;
}

.vs-slot {
  padding: 4px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.vs-center {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.vs-badge {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 5rem);
  line-height: 1;
  color: var(--yellow);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--ink);
  animation: vsBadge .7s cubic-bezier(.2, 1.6, .4, 1) .2s both;
}

.vs-count {
  min-width: 100px;
  font-family: var(--font-display);
  font-size: 2rem;
  text-align: center;
  color: #fff;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink);
}

.vs-count.pop {
  animation: countPop .5s ease both;
}

.vs-sub {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 10px 0 0;
  padding: 6px 16px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--ink-2);
  color: #fff;
  font-weight: 900;
  text-align: center;
}

.match-screen {
  display: flex;
  flex-direction: column;
  background: #2b132c;
}

.match-hud {
  position: relative;
  z-index: 5;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
  background: var(--ink-2);
  border-bottom: 4px solid var(--ink);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
}

.hud-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
}

.fighter-plate {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 360px);
  min-width: 0;
  padding: 7px 12px 7px 8px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--hard-sm);
  transition: filter .25s ease, transform .25s ease;
  filter: saturate(.35) brightness(.75);
}

.fighter-plate.me {
  justify-self: end;
  background: linear-gradient(180deg, #45d97f, #1f9a4b);
}

.fighter-plate.opp {
  justify-self: start;
  flex-direction: row-reverse;
  text-align: right;
  padding: 7px 8px 7px 12px;
  background: linear-gradient(180deg, #ff6f86, #c42c4a);
}

.fighter-plate.active {
  filter: none;
  transform: translateY(-2px);
}

.fighter-plate.active::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 3px solid var(--yellow);
  border-radius: 21px;
  pointer-events: none;
  animation: activePulse 1.1s ease-in-out infinite;
}

.fighter-plate .avatar {
  --size: 46px;
}

.fighter-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fighter-copy b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 0 var(--ink);
}

.you-tag {
  display: inline-block;
  padding: 0 6px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--yellow);
  color: var(--ink);
  font-size: .7rem;
  text-shadow: none;
  vertical-align: 2px;
}

.fighter-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, .9);
  font-weight: 900;
  font-size: .72rem;
}

.fighter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}

.fighter-plate.opp .fighter-chips {
  justify-content: flex-end;
}

.fighter-chips span,
.fighter-chips .status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 7px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-style: normal;
  font-size: .8rem;
  line-height: 1.5;
}

.fighter-chips i {
  font-style: normal;
  color: var(--yellow);
}

.fighter-chips .shield {
  color: #9cc4ff;
}

.status.ko {
  background: var(--red) !important;
}

.status.off {
  background: var(--yellow) !important;
  color: var(--ink) !important;
}

.slot-tag {
  margin-left: auto;
  padding: 2px 8px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: .9rem;
}

.fighter-plate.opp .slot-tag {
  margin-left: 0;
  margin-right: auto;
}

.turn-center {
  display: flex;
  align-items: center;
  gap: 10px;
}

.turn-clock {
  position: relative;
  flex: none;
  width: 62px;
  height: 62px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: var(--hard-sm);
}

.turn-clock svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.turn-clock circle {
  fill: none;
  stroke-width: 7;
}

.ring-bg {
  stroke: #49204b;
}

.ring-fg {
  stroke: var(--me);
  stroke-linecap: round;
  stroke-dasharray: 169.65;
  stroke-dashoffset: 0;
  transition: stroke .2s ease;
}

.turn-clock.theirs .ring-fg {
  stroke: var(--rival);
}

.turn-clock.low .ring-fg {
  stroke: var(--yellow);
  animation: timerBlink .45s ease-in-out infinite alternate;
}

.turn-clock b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  color: #fff;
}

.turn-copy {
  display: grid;
  min-width: 128px;
}

.turn-label {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 0 var(--ink);
  white-space: nowrap;
}

.turn-label.mine {
  color: var(--me);
}

.turn-label.theirs {
  color: var(--rival);
}

.turn-copy small {
  color: var(--muted);
  font-weight: 900;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.match-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 40%, rgba(19, 7, 20, .55) 100%),
    #2b132c;
}

#matchCanvas {
  display: block;
  touch-action: none;
}

#matchCanvas:focus {
  outline: none;
}

.turn-banner {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 14px 34px 16px;
  border: 4px solid var(--ink);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 8px 0 var(--ink);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
}

.turn-banner b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink);
  white-space: nowrap;
}

.turn-banner small {
  color: #fff;
  font-weight: 900;
}

.turn-banner.show {
  animation: turnBanner 1.7s cubic-bezier(.2, 1.4, .4, 1) both;
}

.turn-banner.small.show {
  animation-duration: 1.1s;
}

.turn-banner.mine {
  background: var(--green-dark);
}

.turn-banner.mine b {
  color: var(--yellow);
}

.turn-banner.theirs {
  background: var(--red-dark);
}

.turn-banner.sudden {
  background: var(--orange);
}

.match-controls {
  position: relative;
  z-index: 5;
  padding: 12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: var(--ink-2);
  border-top: 4px solid var(--ink);
}

.dock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

.moves-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 14px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--hard-sm);
}

.moves-box>small {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .04em;
}

.moves-pips {
  display: flex;
  align-items: center;
  gap: 4px;
}

.moves-pips i {
  width: 14px;
  height: 20px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #2b132c;
  transition: background .15s ease, transform .15s ease;
}

.moves-pips i.on {
  background: var(--me);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45);
}

.moves-pips.theirs i.on {
  background: var(--rival);
}

.moves-pips em {
  color: var(--muted);
  font-style: normal;
}

.moves-count {
  min-width: 38px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  color: #fff;
  text-align: right;
  text-shadow: 0 2px 0 var(--ink);
  font-variant-numeric: tabular-nums;
}

.match-actions {
  display: flex;
  gap: 12px;
}

.match-btn {
  min-height: 58px;
  padding: 0 22px;
  border-width: 4px;
  border-radius: 18px;
  font-size: 1.35rem;
  box-shadow: 0 6px 0 var(--ink);
}

.match-btn.bomb {
  min-width: 170px;
}

.match-btn kbd {
  padding: 1px 7px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: rgba(33, 13, 34, .35);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: .7rem;
  text-shadow: none;
}

.match-btn.end kbd {
  background: rgba(33, 13, 34, .15);
  color: var(--ink);
}

.match-extras {
  display: flex;
  align-items: center;
  gap: 10px;
}

.emote-wrap {
  position: relative;
}

.emote-bar {
  position: absolute;
  right: -6px;
  bottom: calc(100% + 14px);
  display: grid;
  grid-template-columns: repeat(3, 46px);
  gap: 6px;
  padding: 8px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--hard);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.9);
  transform-origin: bottom right;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.emote-bar.open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.emote-bar button {
  height: 44px;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: var(--ink-2);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.15rem;
  cursor: var(--cursor-pointer);
}

.emote-bar button:hover {
  background: var(--purple);
}

.match-dpad {
  display: none;
  grid-template: repeat(3, 44px) / repeat(3, 44px);
  gap: 4px;
}

.dpad-btn {
  min-height: 0;
  padding: 0;
  border-radius: 12px;
  font-size: 1rem;
  box-shadow: 0 4px 0 var(--ink);
  touch-action: none;
}

.dpad-btn.up {
  grid-area: 1 / 2;
}

.dpad-btn.left {
  grid-area: 2 / 1;
}

.dpad-btn.right {
  grid-area: 2 / 3;
}

.dpad-btn.down {
  grid-area: 3 / 2;
}

.result-card {
  text-align: center;
}

.result-reason {
  margin: 0 0 16px;
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.result-grid div {
  display: grid;
  gap: 2px;
  padding: 12px 6px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--ink-2);
  box-shadow: var(--hard-sm);
}

.result-grid small {
  color: var(--muted);
  font-weight: 900;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.result-grid b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.8rem;
  color: #fff;
  text-shadow: 0 2px 0 var(--ink);
  font-variant-numeric: tabular-nums;
}

.delta {
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--muted);
}

.delta.up {
  color: var(--green);
}

.delta.down {
  color: var(--rival);
}

.result-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.result-stats span {
  padding: 4px 10px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--ink-2);
  color: #fff;
  font-weight: 800;
  font-size: .84rem;
}

.result-tier {
  margin: 14px 0 0;
  color: #fff;
  font-family: var(--font-display);
}

.result-warning {
  color: var(--yellow);
}

.btn-purple {
  --face: var(--purple);
}

.tab-green {
  background: var(--green);
}

.chip-xp {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.chip-xp span {
  padding: 0 6px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: var(--cyan);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .72rem;
  line-height: 1.4;
}

.chip-xp i {
  flex: 1;
  min-width: 60px;
  height: 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  overflow: hidden;
}

.chip-xp b {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #3ee0ff, #7dfcff);
  transition: width .6s ease;
}

.fighter-card {
  grid-area: fighter;
  display: flex;
  flex-direction: column;
}

.level-badge {
  background: var(--cyan) !important;
  color: var(--ink) !important;
  font-family: var(--font-display);
}

.fighter-stage {
  position: relative;
  height: 150px;
  margin: 4px 0 8px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(255, 210, 63, .35), transparent 60%),
    conic-gradient(from 90deg at 50% 50%, #532755 0 25%, #4c224e 0 50%, #532755 0 75%, #4c224e 0);
  background-size: 100% 100%, 36px 36px;
  overflow: hidden;
}

.fighter-preview {
  display: block;
  width: 100%;
  height: 100%;
}

.xp-block {
  margin-bottom: 12px;
}

.xp-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}

.xp-meta b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  color: #fff;
}

.xp-meta small {
  color: var(--muted);
  font-weight: 900;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

.xp-bar {
  height: 16px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  overflow: hidden;
  box-shadow: 0 3px 0 rgba(33, 13, 34, .6);
}

.xp-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .25) 0 8px, transparent 8px 16px),
    linear-gradient(90deg, #22b8e6, #7dfcff);
  transition: width .6s ease;
}

.xp-bar.big {
  height: 22px;
}

.fighter-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
}

.fighter-chat {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-bottom: 14px;
}

.fighter-chat + .fighter-actions {
  margin-top: 0;
}

.fighter-chat-btn {
  position: relative;
  width: calc(50% - 5px);
}

.btn-cyan {
  --face: var(--cyan);
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.fighter-chat-btn.on {
  --face: var(--yellow);
}

.fighter-chat-btn.ping {
  animation: chatPing .5s ease;
}

.fighter-chat-btn .chat-badge {
  position: absolute;
  top: -9px;
  right: -9px;
}

.lvl-chip {
  background: var(--cyan) !important;
  color: var(--ink) !important;
}

.vs-level {
  margin-top: -18px;
  padding: 1px 10px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .95rem;
  position: relative;
  z-index: 1;
}

.board-lvl {
  color: var(--cyan);
  font-weight: 900;
  font-size: .7rem;
}

.xp-panel {
  margin-top: 16px;
  padding: 14px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--ink-2);
  text-align: left;
}

.xp-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.xp-row .xp-bar {
  flex: 1;
}

.xp-row .xp-bar span {
  transition: none;
}

.lvl-badge {
  display: grid;
  place-items: center;
  min-width: 58px;
  height: 40px;
  padding: 0 8px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--cyan);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.05rem;
  box-shadow: var(--hard-sm);
}

.lvl-badge.pop {
  animation: lvlPop .6s cubic-bezier(.2, 1.6, .4, 1);
  background: var(--yellow);
}

.xp-gain {
  min-width: 90px;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  color: #7dfcff;
  text-shadow: 0 2px 0 var(--ink);
  font-variant-numeric: tabular-nums;
}

.levelup-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 14px, #ffc21a 14px 28px);
  box-shadow: var(--hard-sm);
  animation: lvlPop .6s cubic-bezier(.2, 1.6, .4, 1);
}

.levelup-banner b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: #fff;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}

.levelup-banner small {
  color: var(--ink);
  font-weight: 900;
}

.xp-lines {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.xp-lines li {
  display: flex;
  justify-content: space-between;
  color: #e3dcff;
  font-weight: 800;
  font-size: .86rem;
}

.xp-lines b {
  color: #7dfcff;
  font-family: var(--font-display);
  font-weight: 400;
}

.locker-overlay {
  position: fixed;
  inset: 0;
  z-index: 28;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(24, 9, 25, .82);
  animation: fadeIn .2s ease;
}

.locker {
  width: min(1060px, 100%);
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: popIn .35s cubic-bezier(.2, 1.3, .4, 1);
}

.locker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 3px solid var(--ink);
  background: rgba(33, 13, 34, .35);
}

.locker-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--ink-2);
}

.locker-tab {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 1.1rem;
  cursor: var(--cursor-pointer);
}

.locker-tab.active {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--yellow-dark);
}

.locker-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.locker-body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: 0;
  flex: 1;
  overflow: auto;
}

.locker-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-right: 3px solid var(--ink);
  background: rgba(33, 13, 34, .25);
}

.stage-spot {
  position: relative;
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 210, 63, .45), transparent 55%),
    radial-gradient(circle at 50% 40%, rgba(162, 107, 255, .35), transparent 60%),
    conic-gradient(from 90deg at 50% 50%, #532755 0 25%, #4c224e 0 50%, #532755 0 75%, #4c224e 0);
  background-size: 100% 100%, 100% 100%, 40px 40px;
  box-shadow: var(--hard-sm);
  overflow: hidden;
}

.stage-spot canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.stage-spot.celebrate::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 8%, transparent 9%) 20% 30% / 12px 12px,
    radial-gradient(circle, #ffd23f 0 30%, transparent 32%) 0 0 / 26px 26px,
    radial-gradient(circle, #3ee0ff 0 25%, transparent 27%) 13px 13px / 26px 26px;
  animation: celebrate 1s ease-out forwards;
  pointer-events: none;
}

.stage-info h3 {
  margin: 6px 0 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: #fff;
  text-shadow: 0 3px 0 var(--ink);
}

.stage-info p {
  margin: 0 0 12px;
  color: var(--muted);
  font-weight: 700;
}

.stage-btn {
  width: 100%;
  min-height: 52px;
  font-size: 1.2rem;
}

.stage-btn s {
  opacity: .7;
  font-size: .9rem;
}

.stage-note {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.rarity-tag {
  display: inline-block;
  padding: 2px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rarity-tag.rarity-common { background: #b9c7de; }
.rarity-tag.rarity-rare { background: #3ee0ff; }
.rarity-tag.rarity-epic { background: #b77bff; color: #fff; }
.rarity-tag.rarity-legendary { background: linear-gradient(90deg, #ffd23f, #ff8a1e); }

.locker-catalog {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
}

.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-self: flex-start;
  padding: 3px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--ink-2);
}

.cat-tabs .seg {
  padding: 6px 14px;
  font-size: .95rem;
}

.featured-deal {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: repeating-linear-gradient(-45deg, #ff6a2b 0 16px, #ff5320 16px 32px);
  color: #fff;
  font-weight: 900;
  text-align: left;
  cursor: var(--cursor-pointer);
  box-shadow: var(--hard-sm);
}

.featured-deal b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  text-shadow: 0 2px 0 var(--ink);
}

.deal-tag {
  padding: 2px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .85rem;
}

.deal-price {
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.deal-price s {
  opacity: .7;
  font-size: .9rem;
}

.featured-deal small {
  margin-left: auto;
  font-weight: 900;
}

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 12px;
  align-content: start;
}

.item-card {
  --rarity: #9fb3d1;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 6px 10px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rarity) 30%, #49204b), #3c1a3e 70%);
  box-shadow: 0 4px 0 var(--ink), inset 0 -4px 0 var(--rarity);
  color: #fff;
  cursor: var(--cursor-pointer);
  transition: transform .12s ease;
}

.item-card:hover {
  transform: translateY(-3px);
}

.item-card.selected {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
  transform: translateY(-3px);
}

.item-card.locked .item-thumb {
  filter: grayscale(.8) brightness(.6);
}

.item-card.rarity-rare { --rarity: #3ee0ff; }
.item-card.rarity-epic { --rarity: #b77bff; }
.item-card.rarity-legendary { --rarity: #ffd23f; }

.item-card.rarity-legendary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .25) 45%, transparent 60%);
  background-size: 250% 100%;
  animation: shimmer 2.8s linear infinite;
  pointer-events: none;
}

.item-thumb {
  width: 88px;
  height: 88px;
}

.item-card b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .95rem;
  line-height: 1.1;
  text-align: center;
}

.item-card .foot {
  padding: 1px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .8rem;
}

.foot.price { background: var(--yellow); color: var(--ink); }
.foot.equipped { background: var(--green); color: var(--ink); }
.foot.owned { background: #563658; color: #fff; }
.foot.locked { background: var(--ink); color: var(--muted); }

.sale-ribbon {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 1;
  padding: 1px 7px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-style: normal;
  font-size: .8rem;
  transform: rotate(8deg);
}

.sale-ribbon.new-ribbon {
  background: var(--green);
  color: var(--ink);
}

.foot.soon { background: #3d1d3e; color: #e3dcff; }

.soon-ribbon {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 1;
  padding: 1px 7px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: linear-gradient(135deg, #b77bff, #7a2f7e);
  color: #fff;
  font-family: var(--font-display);
  font-style: normal;
  font-size: .8rem;
  transform: rotate(8deg);
  animation: soonPulse 1.8s ease-in-out infinite;
}

.item-card.coming-soon {
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rarity) 35%, transparent), transparent 60%),
    repeating-linear-gradient(-45deg, #3c1a3e 0 10px, #351737 10px 20px);
  cursor: help;
}

.item-card.coming-soon b {
  color: var(--muted);
  letter-spacing: .04em;
}

.skins-banner {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 14px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: linear-gradient(110deg, #7a2f7e, #b77bff 55%, #ff5ea8);
  box-shadow: 0 4px 0 var(--ink);
  color: #fff;
}

.skins-banner b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  text-shadow: 0 2px 0 rgba(33, 13, 34, .55);
}

.skins-banner span {
  font-weight: 800;
  font-size: .85rem;
}

@keyframes soonPulse {
  0%, 100% { transform: rotate(8deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.1); }
}

.locker-empty {
  grid-column: 1 / -1;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
  padding: 30px 0;
}

@keyframes lvlPop {
  0% {
    transform: scale(.4);
  }

  60% {
    transform: scale(1.2);
  }
}

@keyframes celebrate {
  from {
    opacity: 1;
    transform: scale(.6);
  }

  to {
    opacity: 0;
    transform: scale(1.4) translateY(-20px);
  }
}

@keyframes shimmer {
  from {
    background-position: 150% 0;
  }

  to {
    background-position: -100% 0;
  }
}

.howto {
  color: #fff;
  overflow-x: clip;
  padding-bottom: 8px;
}

.ht-slide {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  min-height: 250px;
}

.ht-slide.from-right {
  animation: htInRight .35s cubic-bezier(.2, 1.2, .4, 1);
}

.ht-slide.from-left {
  animation: htInLeft .35s cubic-bezier(.2, 1.2, .4, 1);
}

.ht-visual {
  display: grid;
  place-items: center;
}

.ht-step {
  display: inline-block;
  padding: 3px 12px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 3px 0 var(--ink);
}

.ht-copy h3 {
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink);
}

.ht-copy p {
  margin: 0;
  color: #e3dcff;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.5;
}

.ht-copy kbd {
  padding: 1px 7px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: #fffaf0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .85rem;
  box-shadow: 0 2px 0 var(--ink);
}

.hl-green {
  color: var(--me);
}

.hl-red {
  color: var(--rival);
}

.ht-keys {
  display: grid;
  gap: 10px;
  min-width: 280px;
}

.ht-keyrow {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ht-keyrow small {
  margin-left: 6px;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.ht-key {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 8px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: #fffaf0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
  box-shadow: 0 4px 0 var(--ink);
}

.ht-key.wide {
  min-width: 140px;
}

.ht-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.ht-rules span {
  padding: 5px 10px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--ink-2);
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
}

.ht-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
}

.ht-nav .btn-3d {
  white-space: nowrap;
}

.ht-dots {
  display: flex;
  gap: 8px;
}

.ht-dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #563658;
  cursor: var(--cursor-pointer);
  transition: transform .15s ease, background .15s ease;
}

.ht-dot.active {
  background: var(--yellow);
  transform: scale(1.3);
}

.modal-panel:has(.howto) .modal-actions {
  display: none;
}

@keyframes htInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
}

@keyframes htInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
}

@keyframes sparkFlicker {
  50% {
    transform: scale(.7) rotate(45deg);
    opacity: .75;
  }
}

@keyframes bombPulse {
  50% {
    transform: scale(1.08);
  }
}

@keyframes livePulse {
  50% {
    transform: scale(.7);
    opacity: .6;
  }
}

@keyframes charBob {
  50% {
    transform: translateY(-7px);
  }
}

@keyframes claimWiggle {

  0%,
  70%,
  100% {
    transform: rotate(0);
  }

  80% {
    transform: rotate(-3deg) scale(1.04);
  }

  90% {
    transform: rotate(3deg) scale(1.04);
  }
}

@keyframes activePulse {
  50% {
    opacity: .35;
    transform: scale(1.02);
  }
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(.85) translateY(20px);
  }
}

@keyframes blip {
  0% {
    opacity: 0;
    transform: scale(.4);
  }

  15% {
    opacity: 1;
    transform: scale(1.25);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes vsSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-90px) rotate(-6deg);
  }
}

@keyframes vsSlideRight {
  from {
    opacity: 0;
    transform: translateX(90px) rotate(6deg);
  }
}

@keyframes vsBadge {
  from {
    opacity: 0;
    transform: scale(3) rotate(-14deg);
  }
}

@keyframes countPop {
  from {
    opacity: 0;
    transform: scale(1.9);
  }
}

@keyframes turnBanner {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.5) rotate(-4deg);
  }

  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08) rotate(1deg);
  }

  24% {
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }

  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.9);
  }
}

@keyframes timerBlink {
  to {
    opacity: .5;
  }
}

.reduced-motion .mini-fighter,
.reduced-motion .mini-bomb,
.reduced-motion .bomb-icon .spark,
.reduced-motion .claim-btn,
.reduced-motion .live-dot,
.reduced-motion .fighter-plate.active::after {
  animation: none;
}

@media (max-width: 1000px) {
  .lobby-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "play play"
      "fighter daily"
      "stats reward"
      "stats board";
  }

  .locker-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .locker-stage {
    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: center;
  }
}

@media (max-width: 680px) {
  .ht-slide {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    text-align: center;
  }

  .ht-rules {
    justify-content: center;
  }

  .ht-nav .btn-3d {
    padding: 0 12px;
    font-size: .95rem;
  }

  .ht-dots {
    gap: 5px;
  }

  .ht-dot {
    width: 11px;
    height: 11px;
    border-width: 2px;
  }

  .lobby-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "play"
      "fighter"
      "daily"
      "reward"
      "stats"
      "board";
  }

  .locker-stage {
    grid-template-columns: 120px minmax(0, 1fr) !important;
  }

  .item-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
  }

  .lobby-top .game-logo {
    width: 52px;
    height: 52px;
  }

  .lobby-top-right {
    width: 100%;
  }

  .profile-chip {
    flex: 1 1 100%;
    order: -1;
    min-width: 0;
  }

  .profile-copy {
    flex: 1;
  }

  .profile-copy b {
    max-width: none;
  }

  .play-body {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    padding: 18px 16px 4px;
  }

  .play-copy p {
    margin: 0 auto;
  }

  .mini-arena {
    margin: 0 auto;
  }

  .play-actions {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 16px 20px;
  }

  .practice-btn {
    min-height: 58px;
    flex-direction: row;
    gap: 10px;
  }

  .vs-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .vs-center {
    grid-auto-flow: column;
    align-items: center;
  }

  .vs-card {
    padding: 14px;
  }
}

@media (max-width: 860px) {
  .hud-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "center center"
      "me opp";
    gap: 8px;
  }

  .turn-center {
    grid-area: center;
    justify-content: center;
  }

  .fighter-plate.me {
    grid-area: me;
    width: 100%;
  }

  .fighter-plate.opp {
    grid-area: opp;
    width: 100%;
  }

  .fighter-plate .avatar {
    --size: 34px;
  }

  .fighter-copy small,
  .slot-tag {
    display: none;
  }

  .turn-clock {
    width: 50px;
    height: 50px;
  }

  .turn-clock b {
    font-size: 1.1rem;
  }

  .dock {
    flex-wrap: wrap;
    gap: 10px;
  }

  .match-btn kbd {
    display: none;
  }
}

@media (pointer: coarse) {
  .match-dpad {
    display: grid;
  }

  .match-btn kbd {
    display: none;
  }
}

@media (pointer: coarse) and (max-width: 860px) {
  .dock {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "moves moves"
      "dpad actions";
    gap: 10px 14px;
  }

  .moves-box {
    grid-area: moves;
    justify-content: center;
    min-height: 46px;
  }

  .match-dpad {
    grid-area: dpad;
    grid-template: repeat(3, 48px) / repeat(3, 48px);
  }

  .match-actions {
    grid-area: actions;
    flex-direction: column;
    justify-content: center;
  }

  .match-btn {
    width: 100%;
    min-width: 0;
  }

  .match-extras {
    position: absolute;
    right: max(12px, env(safe-area-inset-right));
    top: -62px;
  }

  .match-extras .icon-3d {
    width: 42px;
    min-height: 42px;
  }
}

.mode-switch {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--ink-2);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .25);
}

.mode-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 12px;
  border: 3px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: var(--cursor-pointer);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.mode-opt:hover {
  color: #fff;
  background: rgba(255, 255, 255, .06);
}

.mode-opt:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

.mode-opt.active {
  border-color: var(--ink);
  background: linear-gradient(180deg, #ffe066, var(--yellow) 55%, #f2b90f);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  transform: translateY(-2px);
}

.mode-copy {
  display: grid;
  text-align: left;
  line-height: 1.05;
}

.mode-copy b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: .02em;
}

.mode-copy small {
  font-weight: 900;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .85;
}

.mode-dots {
  display: flex;
}

.mode-dots i {
  width: 22px;
  height: 22px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 2px 0 var(--ink);
}

.mode-dots i + i {
  margin-left: -7px;
}

.mode-dots .g {
  background: radial-gradient(circle at 35% 30%, #c9ffd8, #73de8d 55%, #2f9a52);
}

.mode-dots .r {
  background: radial-gradient(circle at 35% 30%, #ffc8d2, #ff607c 55%, #b52f4b);
}

.mode-dots .b {
  background: radial-gradient(circle at 35% 30%, #d6e9ff, #5aa9ff 55%, #2b5fa8);
}

.mode-opt:not(.active) .mode-dots {
  filter: saturate(.55) brightness(.85);
}

.play-card.ffa .mini-arena {
  width: 300px;
}

.play-card.ffa .mode-tag {
  background: var(--yellow);
}

.vs-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 12px;
}

.vs-mode {
  margin: 0;
  padding: 4px 16px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: var(--hard-sm);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  animation: countPop .5s ease both;
}

.vs-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.vs-stage.three {
  width: min(1040px, 100%);
}

.vs-stage.three .vs-row {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
}

.vs-stage.three .vs-badge {
  font-size: clamp(2rem, 6vw, 3.2rem);
}

.vs-stage.three .avatar.big {
  --size: clamp(64px, 12vw, 104px);
}

.vs-card.opp2 {
  background: linear-gradient(180deg, #6fb6ff, #2b6fd6);
  animation: vsSlideRight .55s cubic-bezier(.2, 1.3, .3, 1) .12s both;
}

.vs-stage .vs-sub {
  margin: 0;
}

.avatar.blue {
  box-shadow: 0 0 0 3px var(--rival2, #3d8bff);
}

.avatar.big.blue {
  box-shadow: 0 0 0 4px var(--rival2, #3d8bff), 0 6px 0 4px var(--ink);
}

.opp-plates {
  display: flex;
  gap: 10px;
  min-width: 0;
  justify-self: start;
  width: min(100%, 360px);
}

.opp-plates .fighter-plate {
  width: 100%;
}

.opp-plates.multi {
  width: 100%;
  max-width: 520px;
}

.opp-plates.multi .fighter-plate {
  flex: 1 1 0;
  padding: 6px 7px 6px 10px;
  gap: 7px;
}

.opp-plates.multi .fighter-plate .avatar {
  --size: 36px;
}

.opp-plates.multi .fighter-copy b {
  font-size: .98rem;
}

.opp-plates.multi .fighter-copy small,
.opp-plates.multi .slot-tag {
  display: none;
}

.fighter-plate.opp.rival2 {
  background: linear-gradient(180deg, #6fb6ff, #2b6fd6);
}

.fighter-plate.out {
  filter: grayscale(.85) brightness(.6);
  transform: none;
}

.fighter-plate.out .avatar {
  opacity: .6;
}

.turn-banner.theirs.rival2 {
  background: var(--blue-dark);
}

.turn-banner.out {
  background: #572a59;
}

.turn-banner.out b {
  color: #ff8fa0;
}

.icon-3d.leave {
  --face: var(--yellow);
  color: var(--ink);
}

.chat-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--panel-hi), var(--panel) 30%, var(--panel-lo));
  box-shadow: var(--hard), inset 0 3px 0 rgba(255, 255, 255, .12);
}

.chat-panel[hidden] {
  display: none;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 14px;
  border-bottom: 3px solid var(--ink);
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .04) 0 10px, transparent 10px 20px), var(--ink-2);
}

.drag-handle {
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.chat-panel.dragging .drag-handle {
  cursor: grabbing;
}

.chat-panel.dragged {
  position: fixed;
  right: auto;
  bottom: auto;
  margin: 0;
  z-index: 40;
  animation: none;
}

.chat-panel.dragging {
  box-shadow: 0 14px 0 var(--ink), 0 22px 40px rgba(0, 0, 0, .45);
  transform: rotate(-.6deg) scale(1.01);
  transition: transform .1s ease;
}

.chat-grip {
  flex: none;
  width: 10px;
  height: 18px;
  margin-right: -2px;
  background: radial-gradient(circle, rgba(228, 180, 207, .75) 1.6px, transparent 2px) 0 0 / 5px 6px;
}

.chat-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: #fff;
  text-shadow: 0 2px 0 var(--ink);
  white-space: nowrap;
}

.chat-online,
.chat-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--muted);
  font-weight: 800;
  font-size: .76rem;
  white-space: nowrap;
}

.chat-online b {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
}

.chat-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: #572a59;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 3px 0 var(--ink);
  cursor: var(--cursor-pointer);
}

.chat-close:hover {
  background: var(--purple);
}

.chatbox {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.chat-log {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 10px 10px 6px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #69366b transparent;
}

.chat-empty {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 80px;
  padding: 10px;
  color: var(--muted);
  font-weight: 800;
  font-size: .86rem;
  text-align: center;
}

.chat-msg {
  margin-top: 8px;
  padding: 6px 10px 7px;
  border: 2px solid var(--ink);
  border-left: 5px solid var(--name);
  border-radius: 12px;
  background: rgba(33, 13, 34, .45);
  animation: chatIn .22s ease-out both;
}

.chat-msg.cont {
  margin-top: 3px;
}

.chat-msg.mine {
  background: rgba(61, 220, 114, .14);
}

.chat-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.chat-lvl {
  flex: none;
  padding: 0 5px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--cyan);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .7rem;
  line-height: 1.3;
}

.chat-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--name);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .95rem;
  text-shadow: 0 2px 0 var(--ink);
}

.chat-text {
  margin: 1px 0 0;
  color: var(--text);
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.chat-system {
  margin: 8px 4px 0;
  padding: 4px 10px;
  border: 2px dashed rgba(228, 180, 207, .4);
  border-radius: 10px;
  color: var(--muted);
  font-weight: 800;
  font-size: .78rem;
  text-align: center;
  animation: chatIn .22s ease-out both;
}

.chat-jump {
  position: absolute;
  left: 50%;
  bottom: 62px;
  transform: translateX(-50%);
  padding: 3px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font: 900 .76rem var(--font-body);
  box-shadow: 0 3px 0 var(--ink);
  cursor: var(--cursor-pointer);
}

.chat-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 10px;
  border-top: 3px solid var(--ink);
  background: var(--ink-2);
}

.chat-form.shake {
  animation: chatShake .35s ease;
}

.chat-input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 44px 0 14px;
  border: 3px solid var(--ink);
  border-radius: 13px;
  background: #fffdf5;
  color: #2a142b;
  font: 700 .95rem var(--font-body);
  box-shadow: inset 0 3px 0 rgba(33, 13, 34, .12);
}

.chat-input::placeholder {
  color: #b48ba2;
}

.chat-input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(62, 224, 255, .3);
}

.chat-count {
  position: absolute;
  right: 66px;
  color: #b48ba2;
  font-weight: 900;
  font-size: .72rem;
  pointer-events: none;
}

.chat-count.low {
  color: var(--red-dark);
}

.chat-send {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 42px;
  border: 3px solid var(--ink);
  border-radius: 13px;
  background: linear-gradient(180deg, #5af08f, var(--green) 55%, var(--green-dark));
  color: var(--ink);
  font-size: 1.05rem;
  box-shadow: 0 4px 0 var(--ink);
  cursor: var(--cursor-pointer);
  transition: transform .08s ease, box-shadow .08s ease;
}

.chat-send:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink);
}

.chat-form.sending .chat-send {
  opacity: .6;
}

.chat-error {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% + 6px);
  margin: 0;
  padding: 4px 10px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-weight: 900;
  font-size: .78rem;
  text-align: center;
  box-shadow: 0 3px 0 var(--ink);
}

.chat-badge {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font: 400 .78rem var(--font-display);
  line-height: 1;
  animation: countPop .4s ease both;
}

.chat-badge[hidden] {
  display: none;
}

@keyframes chatIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes chatShake {
  25% {
    transform: translateX(-6px);
  }

  50% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-3px);
  }
}

.brand-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.lobby-top .brand-sub .brand-ribbon {
  margin: 0;
}

.chat-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px 3px 8px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .82rem;
  line-height: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: var(--hard-sm);
  cursor: var(--cursor-pointer);
  transition: transform .1s ease, box-shadow .1s ease, background .15s ease;
}

.chat-pill:hover {
  background: #7aeaff;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--ink);
}

.chat-pill:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink);
}

.chat-pill:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.chat-pill.on {
  background: var(--yellow);
}

.chat-pill-icon {
  font-size: .95rem;
  letter-spacing: 0;
  line-height: 1;
}

.chat-pill .chat-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  min-width: 20px;
  height: 20px;
  font-size: .7rem;
  letter-spacing: 0;
}

.chat-pill.ping {
  animation: chatPing .5s ease;
}

.chat-dock .chat-panel {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  top: 112px;
  z-index: 40;
}

.chat-dock .chat-panel.dragged {
  right: auto;
}

@keyframes chatPing {
  30% {
    transform: translateY(-5px) rotate(-1.5deg);
  }

  60% {
    transform: translateY(0) rotate(1deg);
  }
}

.chat-dock .chat-panel {
  width: min(380px, calc(100vw - 32px));
  height: min(480px, calc(100dvh - 120px));
  animation: chatOpen .22s cubic-bezier(.2, 1.3, .4, 1) both;
  transform-origin: top left;
}

@keyframes chatOpen {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.94);
  }
}

.match-chat {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 6;
  width: min(340px, calc(100% - 24px), max(280px, calc(var(--side-room, 0px) - 30px)));
  height: min(360px, calc(100% - 24px));
  animation: chatOpen .2s cubic-bezier(.2, 1.3, .4, 1) both;
  transform-origin: bottom left;
}

.chat-toggle {
  position: relative;
}

.chat-toggle.on {
  --face: var(--cyan);
}

.chat-toggle .chat-badge {
  position: absolute;
  top: -9px;
  right: -9px;
  min-width: 20px;
  height: 20px;
  font-size: .7rem;
}

.standings {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.standings li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--ink-2);
  text-align: left;
  animation: chatIn .3s ease-out both;
}

.standings li:nth-child(2) {
  animation-delay: .08s;
}

.standings li:nth-child(3) {
  animation-delay: .16s;
}

.standings li.place-1 {
  background: linear-gradient(90deg, rgba(255, 210, 63, .28), var(--ink-2) 70%);
}

.standings li.me {
  border-color: var(--green);
}

.st-place {
  width: 30px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-align: center;
}

.st-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.st-ko {
  color: var(--muted);
  font-weight: 900;
  font-size: .82rem;
}

.standings .delta {
  min-width: 38px;
  text-align: right;
  font-family: var(--font-display);
}

.recent-list li.second b {
  background: #c9d3e8;
}

.recent-list li.ffa b {
  width: auto;
  min-width: 26px;
  padding: 0 5px;
  font-size: .78rem;
}

@media (max-width: 860px) {
  .opp-plates,
  .opp-plates.multi {
    grid-area: opp;
    width: 100%;
    max-width: none;
  }

  .hud-inner:has(.opp-plates.multi) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "center center center"
      "me opp opp";
  }

  .hud-inner:has(.opp-plates.multi) .fighter-plate {
    gap: 5px;
    padding: 5px 6px 5px 8px;
  }

  .hud-inner:has(.opp-plates.multi) .fighter-plate .avatar {
    --size: 28px;
  }

  .hud-inner:has(.opp-plates.multi) .fighter-copy b {
    font-size: .9rem;
  }

  .hud-inner:has(.opp-plates.multi) .you-tag {
    display: none;
  }

  .hud-inner:has(.opp-plates.multi) .fighter-chips span:not(.lvl-chip):not(.shield) {
    display: none;
  }
}

@media (max-width: 680px) {
  .vs-row,
  .vs-stage.three .vs-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .vs-stage .vs-badge {
    justify-self: center;
    font-size: 2rem;
  }

  .vs-stage.three .vs-card {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    text-align: left;
    padding: 10px 14px;
  }

  .vs-stage.three .vs-card .avatar.big {
    --size: 56px;
    grid-row: span 4;
  }

  .vs-stage.three .vs-level {
    margin-top: 0;
  }

  .mode-copy b {
    font-size: 1.15rem;
  }

  .mode-dots i {
    width: 18px;
    height: 18px;
  }

  .play-card.ffa .mini-arena {
    width: 280px;
  }

  .chat-dock .chat-panel {
    right: 12px;
    width: calc(100vw - 24px);
    height: min(70dvh, 520px);
  }

  .chat-hint {
    display: none;
  }
}

.turn-clock.long b {
  font-size: 1rem;
}

.turn-clock.low {
  animation: clockPulse .8s ease-in-out infinite;
}

@keyframes clockPulse {
  50% {
    transform: scale(1.08);
  }
}

#turnInfo.hurry {
  color: var(--orange);
  animation: clockPulse .8s ease-in-out infinite;
}

.round-pips {
  display: flex;
  gap: 3px;
  margin-left: auto;
  padding: 4px 6px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--ink);
}

.fighter-plate.opp .round-pips {
  margin-left: 0;
  margin-right: auto;
}

.round-pips i,
.rb-pips i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #572a59;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35);
}

.round-pips i.on,
.rb-pips i.on {
  background: radial-gradient(circle at 35% 35%, #fff6c4, var(--yellow) 60%, #e09b00);
  box-shadow: 0 0 6px rgba(255, 210, 63, .7);
}

.opp-plates.multi .fighter-chips span:not(.lvl-chip):not(.shield) {
  display: none;
}

.opp-plates.multi .round-pips {
  padding: 3px 5px;
  gap: 2px;
}

.opp-plates.multi .round-pips i {
  width: 9px;
  height: 9px;
}

.fighter-plate.active {
  filter: none;
}

.fighter-plate.active::after {
  display: none;
}

.stats-box {
  gap: 16px;
}

.stats-box .stat {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.stats-box .stat small {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.stats-box .stat b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 0 var(--ink);
}

.bomb-pips {
  display: flex;
  gap: 3px;
  min-height: 20px;
  align-items: center;
}

.bomb-pips i {
  width: 16px;
  height: 16px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #3f1e41;
  transition: background .15s ease, transform .15s ease;
}

.bomb-pips i.on {
  background: radial-gradient(circle at 35% 30%, #bc91a9, #251526 65%);
  box-shadow: 0 0 0 2px rgba(255, 210, 63, .55);
}

.turn-banner.round {
  background: var(--purple);
}

.turn-banner.round b {
  color: var(--yellow);
}

.round-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(19, 7, 20, .45);
  pointer-events: none;
}

.round-overlay[hidden] {
  display: none;
}

.round-card {
  width: min(440px, 100%);
  overflow: hidden;
  border: 4px solid var(--ink);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--panel-hi), var(--panel) 40%, var(--panel-lo));
  box-shadow: 0 8px 0 var(--ink), 0 30px 60px rgba(0, 0, 0, .4);
  text-align: center;
  pointer-events: auto;
}

.round-overlay.show .round-card {
  animation: roundCardIn .5s cubic-bezier(.2, 1.4, .4, 1) both;
}

@keyframes roundCardIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.85);
  }
}

.round-kicker {
  display: inline-block;
  margin-top: 14px;
  padding: 3px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.round-title {
  margin: 8px 16px 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink);
}

.round-overlay.won .round-title {
  color: var(--yellow);
}

.round-overlay.draw .round-title {
  color: #c9c1ff;
}

.round-board {
  display: grid;
  gap: 6px;
  margin: 0 16px;
  padding: 0;
  list-style: none;
}

.round-board li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--ink-2);
  text-align: left;
}

.round-board li.winner {
  border-color: var(--yellow);
  background: linear-gradient(90deg, rgba(255, 210, 63, .25), var(--ink-2) 75%);
}

.round-board li.gone {
  opacity: .5;
}

.rb-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.02rem;
}

.rb-pips {
  display: flex;
  gap: 4px;
}

.rb-wins {
  min-width: 18px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--yellow);
  text-align: right;
  text-shadow: 0 2px 0 var(--ink);
}

.win-tag,
.left-tag {
  display: inline-block;
  padding: 0 6px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-size: .62rem;
  vertical-align: 2px;
}

.win-tag {
  background: var(--yellow);
  color: var(--ink);
}

.left-tag {
  background: var(--red);
  color: #fff;
}

.round-next {
  margin: 14px 16px 2px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-shadow: 0 2px 0 var(--ink);
}

.round-chat-hint {
  margin: 4px 16px 16px;
  color: var(--muted);
  font-weight: 800;
  font-size: .82rem;
}

.round-overlay[data-final="1"] .round-chat-hint {
  display: none;
}

@media (max-width: 860px) {
  .round-pips {
    padding: 3px 4px;
    gap: 2px;
  }

  .round-pips i {
    width: 8px;
    height: 8px;
  }

  .stats-box {
    gap: 12px;
  }

  .fighter-plate .fighter-chips span:not(.lvl-chip):not(.shield) {
    display: none;
  }

  .fighter-plate {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .fighter-plate .fighter-copy {
    flex: 1 1 0;
  }

  .fighter-plate .round-pips,
  .fighter-plate.opp .round-pips {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    margin: 0;
  }

  .hud-inner:has(.opp-plates.multi) .fighter-chips {
    display: none;
  }

  .fighter-plate .you-tag {
    display: none;
  }
}

.brand-sub {
  flex-wrap: wrap;
}

.reward-pill {
  color: var(--ink);
}

.lobby-grid {
  grid-template-areas:
    "play play fighter"
    "rewards rewards fighter"
    "stats daily board"
    "stats reward board";
}

.lobby-rewards {
  grid-area: rewards;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: -12px 0 -4px;
}

@media (max-width: 1000px) {
  .lobby-grid {
    grid-template-areas:
      "play play"
      "rewards rewards"
      "fighter daily"
      "stats reward"
      "stats board";
  }
}

@media (max-width: 680px) {
  .lobby-grid {
    grid-template-areas:
      "play"
      "rewards"
      "fighter"
      "daily"
      "reward"
      "stats"
      "board";
  }
}

.lobby-rewards .reward-pill {
  gap: 8px;
  padding: 7px 14px 7px 12px;
  font-size: 1rem;
  box-shadow: 0 5px 0 var(--ink);
}

.lobby-rewards .chat-pill-icon {
  font-size: 1.15rem;
}

.lobby-rewards .pill-count {
  min-width: 24px;
  height: 24px;
  font-size: .8rem;
}

.scratch-pill {
  background: linear-gradient(180deg, #ffe680, #ffc21f);
}

.crate-pill {
  background: linear-gradient(180deg, #ffb070, #ff7a1e);
}

.reward-pill:hover {
  filter: brightness(1.08);
}

.pill-count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 2px;
  padding: 0 5px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: .72rem;
  letter-spacing: 0;
  line-height: 1;
}

.reward-pill.has .pill-count {
  background: var(--green);
  color: var(--ink);
  animation: pillPulse 1.8s ease-in-out infinite;
}

@keyframes pillPulse {
  50% {
    transform: scale(1.18);
    box-shadow: 0 0 0 4px rgba(61, 220, 114, .35);
  }
}

.fx-canvas {
  position: fixed;
  inset: 0;
  z-index: 95;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.reward-overlay {
  position: fixed;
  inset: 0;
  z-index: 32;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(19, 7, 20, .72);
  backdrop-filter: blur(3px);
}

.reward-overlay[hidden] {
  display: none;
}

.reward-panel {
  position: relative;
  width: min(560px, 100%);
  padding: 22px 20px 20px;
  border: 4px solid var(--ink);
  border-radius: 26px;
  background: linear-gradient(180deg, var(--panel-hi), var(--panel) 40%, var(--panel-lo));
  box-shadow: 0 8px 0 var(--ink), 0 30px 70px rgba(0, 0, 0, .5);
}

.reward-overlay.show .reward-panel {
  animation: rewardIn .45s cubic-bezier(.2, 1.35, .4, 1) both;
}

@keyframes rewardIn {
  from {
    opacity: 0;
    transform: translateY(28px) scale(.9);
  }
}

.reward-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: #572a59;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 3px 0 var(--ink);
  cursor: var(--cursor-pointer);
}

.reward-close:hover {
  background: var(--red);
}

.reward-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.reward-actions.nudge {
  animation: chatShake .4s ease;
}

.reward-btn {
  flex-direction: column;
  gap: 0;
  min-width: 170px;
  min-height: 60px;
  padding: 6px 18px;
  border-width: 4px;
  border-radius: 18px;
  box-shadow: 0 6px 0 var(--ink);
}

.reward-btn span {
  font-size: 1.15rem;
}

.reward-btn small {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: .76rem;
  opacity: .85;
  text-shadow: none;
}

.scratch-hint {
  margin: 0;
  color: #fff;
  font-weight: 900;
}

.ticket {
  position: relative;
  padding: 16px 16px 12px;
  border: 4px solid var(--ink);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 50%, transparent 0 12px, transparent 12px) left / 51% 100% no-repeat,
    linear-gradient(160deg, #fff2b8, #ffd23f 45%, #ffb21f);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .45), 0 6px 0 rgba(33, 13, 34, .4);
}

.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--panel);
}

.ticket::before {
  left: -15px;
  clip-path: inset(0 0 0 50%);
}

.ticket::after {
  right: -15px;
  clip-path: inset(0 50% 0 0);
}

.ticket-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--ink);
}

.ticket-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink);
  letter-spacing: .02em;
}

.ticket-head p {
  margin: 4px 0 0;
  font-weight: 900;
  font-size: .9rem;
}

.ticket-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--red);
  font-size: 1.7rem;
  box-shadow: 0 4px 0 var(--ink);
  transform: rotate(-6deg);
}

.prize-table {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}

.prize-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 4px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  color: var(--ink);
  font-size: .74rem;
}

.prize-chip > i {
  font-style: normal;
  font-size: .78rem;
  letter-spacing: -2px;
}

.coin-pile {
  --w: 1.1em;
  --h: 1.05em;
  --step: .28em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: calc(var(--w) + .05em);
  height: calc(var(--h) + (var(--n) - 1) * var(--step));
}

.cash-pile {
  --w: 1.42em;
  --h: 1.04em;
  --step: .3em;
}

.coin-pile > i {
  position: absolute;
  left: calc(var(--i) * .03em);
  bottom: calc(var(--i) * var(--step));
  width: var(--w);
  height: var(--h);
  background: url("../assets/images/currency/Coin.png") center / contain no-repeat;
  filter: drop-shadow(0 .06em 0 rgba(33, 13, 34, .35));
}

.coin-pile > .cash-img {
  background-image: url("../assets/images/currency/Cash.png");
}

.scratch-cell .coin-pile {
  font-size: calc(1.02em - var(--n) * .075em);
}

.prize-chip i .coin-pile {
  font-size: 1.35em;
  width: calc(var(--w) + (var(--n) - 1) * var(--w) * .45);
  height: var(--h);
  margin: -.15em 0;
  letter-spacing: 0;
}

.prize-chip i .coin-pile > i {
  left: calc(var(--i) * var(--w) * .45);
  bottom: 0;
}

.prize-chip b {
  font-weight: 900;
}

.prize-chip.jackpot {
  background: var(--ink);
  color: var(--yellow);
}

.scratch-area {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1;
  margin: 0 auto;
  border: 4px solid var(--ink);
  border-radius: 20px;
  background: #fffaf0;
  overflow: hidden;
  touch-action: none;
}

.scratch-grid {
  position: absolute;
  inset: 8px;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 8px;
}

.scratch-cell {
  display: grid;
  place-items: center;
  border: 3px dashed rgba(33, 13, 34, .18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 40%, #ffffff, #fff1c9 70%);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.scratch-cell span {
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1;
  filter: drop-shadow(0 3px 0 rgba(33, 13, 34, .25));
}

.scratch-cell.seen span {
  animation: cellPop .35s cubic-bezier(.2, 1.6, .4, 1) both;
}

@keyframes cellPop {
  from {
    transform: scale(.6);
  }
}

.scratch-area.lost .scratch-cell {
  filter: saturate(.6);
}

.scratch-cell.win {
  border: 3px solid var(--ink);
  background: radial-gradient(circle at 50% 40%, #fffbe0, #ffd23f 75%);
  animation: winCell 1s ease-in-out infinite;
  z-index: 1;
}

@keyframes winCell {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 210, 63, .9);
  }

  50% {
    transform: scale(1.07);
    box-shadow: 0 0 0 8px rgba(255, 210, 63, 0);
  }
}

.scratch-foil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: crosshair;
  transition: opacity .7s ease;
}

.scratch-area.revealed .scratch-foil {
  pointer-events: none;
}

.scratch-result {
  display: grid;
  justify-items: center;
  width: min(100%, 360px);
  margin: 10px auto 0;
  padding: 6px 18px 8px;
  border: 4px solid var(--ink);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 5px 0 var(--ink);
  text-align: center;
}

.scratch-result[hidden] {
  display: none;
}

.scratch-result.pop {
  animation: resultPop .55s cubic-bezier(.2, 1.6, .4, 1) both;
}

@keyframes resultPop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.7);
  }
}

.sr-kicker {
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .1em;
  color: var(--muted);
}

.scratch-result b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  color: #fff;
  text-shadow: 0 2px 0 var(--ink);
}

.ticket:has(.scratch-area.won) .scratch-result {
  background: var(--green-dark);
}

.ticket:has(.scratch-area.won) .sr-kicker {
  color: var(--yellow);
}

.ticket:has(.scratch-area.jackpot) .scratch-result {
  background: linear-gradient(90deg, #ff5e8f, #ffd23f, #3ee0ff, #b77bff);
  background-size: 300% 100%;
  animation: resultPop .55s cubic-bezier(.2, 1.6, .4, 1) both, rainbow 2s linear infinite;
}

@keyframes rainbow {
  to {
    background-position: 300% 0;
  }
}

.ticket-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: rgba(33, 13, 34, .7);
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ticket-serial {
  font-family: ui-monospace, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.crate-panel {
  width: min(760px, 100%);
}

.crate-hero {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding-right: 36px;
}

.crate-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 160px;
}

.crate-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 63, .28) 0 12deg, transparent 12deg 30deg);
  mask: radial-gradient(circle, #000 30%, transparent 70%);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
  animation: spinRays 12s linear infinite;
}

@keyframes spinRays {
  to {
    transform: rotate(360deg);
  }
}

.crate-box {
  position: relative;
  width: 118px;
  height: 100px;
  border: 4px solid var(--ink);
  border-radius: 14px;
  background:
    repeating-linear-gradient(0deg, #b9692c 0 22px, #a85a23 22px 25px),
    #b9692c;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .22), 0 8px 0 var(--ink);
  animation: crateBob 2.4s ease-in-out infinite;
}

@keyframes crateBob {
  50% {
    transform: translateY(-6px) rotate(-2deg);
  }
}

.crate-lid {
  position: absolute;
  left: -8px;
  right: -8px;
  top: -14px;
  height: 26px;
  border: 4px solid var(--ink);
  border-radius: 10px;
  background: linear-gradient(180deg, #e08a3c, #c46c2a);
}

.crate-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 22px;
  margin-left: -11px;
  border-left: 4px solid var(--ink);
  border-right: 4px solid var(--ink);
  background: linear-gradient(180deg, #ffe680, #ffb21f);
}

.crate-lock {
  position: absolute;
  left: 50%;
  top: 30px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: -19px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: #fff6c4;
  font-size: 1.1rem;
}

.crate-kicker {
  color: var(--orange);
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.crate-copy h2,
.crate-title {
  margin: 2px 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink);
}

.crate-title {
  font-size: 1.4rem;
  text-align: center;
  margin-bottom: 14px;
}

.crate-copy p {
  margin: 0 0 10px;
  color: #e3dcff;
  font-weight: 700;
  font-size: .9rem;
}

.odds-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.odds-chip {
  display: inline-flex;
  gap: 5px;
  padding: 2px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink-2);
  color: #fff;
  font-weight: 900;
  font-size: .74rem;
}

.odds-chip b {
  color: var(--rc);
}

.rarity-common {
  --rc: #9fb3d1;
}

.rarity-rare {
  --rc: #3ee0ff;
}

.rarity-epic {
  --rc: #b77bff;
}

.rarity-legendary {
  --rc: #ffd23f;
}

.crate-sub {
  margin: 16px 0 8px;
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.crate-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  max-height: 230px;
  overflow-y: auto;
  padding: 2px 4px 4px 2px;
}

.crate-item {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 6px 4px 6px;
  border: 3px solid var(--ink);
  border-bottom: 5px solid var(--rc);
  border-radius: 12px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 30%, transparent), var(--ink-2) 70%);
}

.crate-item canvas {
  width: 56px;
  height: 56px;
}

.crate-item b {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-weight: 800;
  font-size: .7rem;
}

.crate-item.owned {
  opacity: .65;
}

.owned-tag {
  position: absolute;
  top: 3px;
  right: 5px;
  color: var(--green);
  font-style: normal;
  font-weight: 900;
}

.crate-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 700;
  font-size: .76rem;
  text-align: center;
}

.reel-window {
  position: relative;
  height: 156px;
  overflow: hidden;
  border: 4px solid var(--ink);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 30%, transparent 70%, rgba(0, 0, 0, .25)),
    #210d22;
}

.reel-strip {
  position: absolute;
  top: 14px;
  left: 0;
  display: flex;
  gap: 8px;
  padding-left: 0;
  will-change: transform;
}

.reel-card {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  flex: none;
  width: 110px;
  height: 120px;
  border: 3px solid var(--ink);
  border-bottom: 6px solid var(--rc);
  border-radius: 14px;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc) 40%, transparent), #49204b 72%);
}

.reel-card canvas {
  width: 70px;
  height: 70px;
}

.reel-card b {
  overflow: hidden;
  max-width: 96%;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-weight: 800;
  font-size: .72rem;
}

.reel-card.winner {
  border-color: var(--rc);
  box-shadow: 0 0 0 3px var(--ink), 0 0 26px 6px var(--rc);
  animation: winnerCard 1s ease-in-out infinite;
}

@keyframes winnerCard {
  50% {
    transform: scale(1.05);
  }
}

.reel-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 2;
  width: 4px;
  margin-left: -2px;
  background: var(--yellow);
  box-shadow: 0 0 12px var(--yellow);
}

.reel-marker::before,
.reel-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.reel-marker::before {
  top: 0;
  border-top: 14px solid var(--yellow);
}

.reel-marker::after {
  bottom: 0;
  border-bottom: 14px solid var(--yellow);
}

.reel-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 18%;
  pointer-events: none;
}

.reel-fade.left {
  left: 0;
  background: linear-gradient(90deg, #210d22, transparent);
}

.reel-fade.right {
  right: 0;
  background: linear-gradient(-90deg, #210d22, transparent);
}

.crate-result {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 12px 16px;
  border: 4px solid var(--ink);
  border-radius: 18px;
  background: radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--rc) 45%, transparent), var(--ink-2) 60%);
  box-shadow: 0 0 0 2px var(--rc) inset;
}

.crate-result[hidden] {
  display: none;
}

.crate-result.pop {
  animation: rewardIn .5s cubic-bezier(.2, 1.5, .4, 1) both;
}

.crate-result canvas {
  flex: none;
  width: 92px;
  height: 92px;
}

.crate-result h3 {
  margin: 4px 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: #fff;
  text-shadow: 0 3px 0 var(--ink);
}

.crate-result p {
  margin: 0;
  color: #e3dcff;
  font-weight: 700;
  font-size: .88rem;
}

.crate-result .rarity-tag {
  color: var(--ink);
  background: var(--rc);
}

.new-tag {
  padding: 0 6px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--green);
  color: var(--ink);
}

.reward-perks {
  display: block;
  font-style: normal;
  font-weight: 900;
  font-size: .62rem;
  white-space: nowrap;
}

.reward-day.has-key {
  border-color: var(--orange);
}

/* drawn reward icons (no emoji: they fall back to empty boxes without a colour emoji font) */
.rw-i {
  display: inline-block;
  flex: none;
  width: 1.2em;
  height: 1.2em;
  margin: 0 .1em -.24em 0;
  background: center / contain no-repeat;
}

.rw-i.rw-ticket { background-image: url("../assets/images/currency/Ticket.svg"); }
.rw-i.rw-key { background-image: url("../assets/images/currency/Key.svg"); background-size: 128%; }
.rw-i.rw-gift { background-image: url("../assets/images/currency/Gift.svg"); }
.rw-i.rw-trophy { background-image: url("../assets/images/currency/Trophy.svg"); }
.rw-i.rw-flame { background-image: url("../assets/images/currency/Flame.svg"); }

.reward-day b {
  display: grid;
  place-items: center;
  height: 1.5em;
  line-height: 1;
}

.reward-day b > i {
  width: 1.45em;
  height: 1.45em;
  margin: 0;
  filter: drop-shadow(0 2px 0 rgba(33, 13, 34, .45));
}

.reward-perks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 3px;
}

.reward-day .day-coins {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.reward-day .day-coins .coin-i {
  width: 1.05em;
  height: 1.05em;
  margin: 0 .15em 0 0;
}

.reward-perks i {
  display: inline-flex;
  align-items: center;
  font-style: normal;
}

.reward-perks .rw-i {
  width: 1.35em;
  height: 1.35em;
  margin: 0 1px 0 0;
}

.streak-pill .rw-i {
  margin-right: .25em;
}

.claim-icon .rw-i {
  width: 34px;
  height: 34px;
  margin: 0;
}

.toast-icon .rw-i {
  width: 1.6em;
  height: 1.6em;
  margin: 0;
}

.claim-btn.milestone:not(:disabled) {
  background: linear-gradient(180deg, #ffe680, #ffb02e);
  box-shadow: 0 5px 0 var(--ink), 0 0 22px rgba(255, 196, 46, .7);
}

.streak-goal {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--ink-2);
}

.streak-goal[hidden] {
  display: none;
}

.streak-goal.ready {
  border-color: #ffd23f;
  box-shadow: 0 0 0 2px rgba(255, 210, 63, .35), 0 0 18px rgba(255, 166, 40, .45);
}

.goal-icon .rw-i {
  width: 38px;
  height: 38px;
  margin: 0;
  filter: drop-shadow(0 2px 0 rgba(33, 13, 34, .5));
}

.streak-goal.ready .goal-icon,
.streak-goal.reached .goal-icon {
  animation: claimGift 1.6s ease-in-out infinite;
}

.goal-main {
  display: grid;
  flex: 1;
  gap: 5px;
  min-width: 0;
}

.goal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.goal-head b {
  overflow: hidden;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goal-head small {
  flex: none;
  color: #ffb36b;
  font-weight: 900;
  font-size: .72rem;
}

.goal-bar {
  position: relative;
  height: 16px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(0, 0, 0, .35);
}

.goal-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, #ffd23f, #ff8a1e);
}

.goal-bar em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-style: normal;
  font-weight: 900;
  font-size: .64rem;
  text-shadow: 0 1px 0 var(--ink), 0 0 3px var(--ink);
}

.goal-loot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: 46%;
}

.loot-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px 2px 4px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-weight: 900;
  font-size: .74rem;
  white-space: nowrap;
}

.loot-chip .coin-i,
.loot-chip .cash-i,
.loot-chip .rw-i {
  margin: 0 3px 0 0;
}

@media (max-width: 560px) {
  .streak-goal {
    flex-wrap: wrap;
  }

  .goal-loot {
    justify-content: flex-start;
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 680px) {
  .reward-panel {
    padding: 18px 12px 14px;
  }

  .crate-hero {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    padding-right: 0;
  }

  .crate-art {
    height: 130px;
  }

  .odds-row {
    justify-content: center;
  }

  .reward-btn {
    min-width: 140px;
    flex: 1;
  }

  .reel-window {
    height: 140px;
  }

  .crate-result {
    flex-direction: column;
    text-align: center;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand-logo {
  display: block;
  height: auto;
  filter: drop-shadow(0 6px 0 rgba(19, 7, 20, .45));
  user-select: none;
  -webkit-user-drag: none;
}

.lobby-top .menu-brand {
  align-items: center;
}

.lobby-brand-logo {
  width: clamp(190px, 21vw, 260px);
  margin: -8px 0 -8px -6px;
}

.auth-brand {
  justify-content: center;
}

.auth-brand-logo {
  width: min(330px, 92%);
  margin: 0 auto 4px;
}

.loading-brand {
  width: min(400px, 82vw);
  margin: 0 auto 22px;
  animation: brandBob 2.6s ease-in-out infinite;
}

@keyframes brandBob {
  50% {
    transform: translateY(-6px) rotate(-1deg);
  }
}

.brand-logo-fallback {
  font-size: 2.6rem;
}

@media (max-width: 680px) {
  .lobby-brand-logo {
    width: 210px;
    margin: 0 auto;
  }

  .lobby-top .menu-brand {
    width: 100%;
    justify-content: center;
  }
}

.play-card {
  position: relative;
}

.play-body {
  grid-template-columns: minmax(0, 1fr) auto;
  touch-action: pan-y;
}

.play-body.swap-in {
  animation: modeSwap .38s cubic-bezier(.2, 1.3, .4, 1);
}

.play-body.swap-in-back {
  animation: modeSwapBack .38s cubic-bezier(.2, 1.3, .4, 1);
}

@keyframes modeSwap {
  0% { opacity: 0; transform: translateX(28px); }
  100% { opacity: 1; transform: none; }
}

@keyframes modeSwapBack {
  0% { opacity: 0; transform: translateX(-28px); }
  100% { opacity: 1; transform: none; }
}

.gem-art {
  display: none;
  position: relative;
  width: 250px;
  height: 130px;
}

.play-card.gems .mini-arena {
  display: none;
}

.play-card.gems .gem-art {
  display: block;
}

.play-card.gems {
  background:
    radial-gradient(circle at 82% 34%, rgba(95, 243, 255, .38), transparent 46%),
    radial-gradient(circle at 10% 110%, rgba(255, 94, 168, .25), transparent 50%),
    linear-gradient(180deg, #6f3672, #5d2660 50%, #481d4b);
}

.play-card.gems .mode-tag {
  background: linear-gradient(90deg, #5ff3ff, #b77bff);
}

.gem-glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 250, 255, .55), rgba(140, 250, 255, 0) 65%);
  transform: translate(-50%, -50%);
  animation: gemPulse 2.2s ease-in-out infinite;
}

.gem-big,
.gem-mini {
  position: absolute;
  left: 50%;
  clip-path: polygon(19% 0, 81% 0, 100% 31%, 50% 100%, 0 31%);
  background:
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .5) 45%, transparent 52%),
    linear-gradient(180deg, #e3feff, #4fd8ff 45%, #2a5fe0);
  filter: drop-shadow(0 4px 0 #210d22);
}

.gem-big {
  top: 8px;
  width: 92px;
  height: 84px;
  margin-left: -46px;
  animation: gemFloat 2.2s ease-in-out infinite;
}

.gem-big::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(19% 0, 81% 0, 100% 31%, 0 31%);
  background: rgba(255, 255, 255, .35);
}

.gem-big i {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .85) 42%, transparent 54%);
  background-size: 260% 100%;
  animation: gemShine 2.6s linear infinite;
}

.gem-mini {
  width: 30px;
  height: 27px;
  margin-left: -15px;
}

.gem-mini.g1 { top: 70px; transform: translateX(-88px) rotate(-14deg); animation: gemFloat 2s ease-in-out -.6s infinite; }
.gem-mini.g2 { top: 22px; transform: translateX(84px) rotate(12deg); animation: gemFloat 2.4s ease-in-out -1.1s infinite; }
.gem-mini.g3 { top: 84px; transform: translateX(70px) rotate(-6deg) scale(.75); animation: gemFloat 1.8s ease-in-out -.3s infinite; }

.gem-pedestal {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 132px;
  height: 26px;
  margin-left: -66px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #7c417f, #3a1e3b);
  box-shadow: 0 4px 0 rgba(33, 13, 34, .45);
}

.gem-spark {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: gemTwinkle 1.6s ease-in-out infinite;
}

.gem-spark.s1 { left: 58px; top: 10px; }
.gem-spark.s2 { right: 52px; top: 58px; animation-delay: -.5s; }
.gem-spark.s3 { left: 40px; top: 96px; animation-delay: -1s; transform: scale(.7); }

@keyframes gemFloat {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -8px; }
}

@keyframes gemPulse {
  0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(.92); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes gemShine {
  0% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

@keyframes gemTwinkle {
  0%, 100% { opacity: 0; scale: .4; }
  50% { opacity: 1; scale: 1; }
}

.gem-ico {
  display: inline-block;
  width: 13px;
  height: 12px;
  clip-path: polygon(19% 0, 81% 0, 100% 31%, 50% 100%, 0 31%);
  background: linear-gradient(180deg, #e3feff, #4fd8ff 45%, #2a5fe0);
}

.round-pips.gem-pips {
  align-items: center;
  gap: 4px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1;
}

.round-pips.gem-pips small {
  color: var(--muted);
  font-size: .72rem;
}

.round-pips.gem-pips.full {
  background: #481f4a;
  box-shadow: 0 0 10px rgba(95, 243, 255, .6);
}

.round-pips.gem-pips.holding {
  background: var(--yellow);
  color: var(--ink);
  animation: holdPulse 1s ease-in-out infinite;
}

@keyframes holdPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 210, 63, 0); }
  50% { transform: scale(1.08); box-shadow: 0 0 12px rgba(255, 210, 63, .8); }
}

.round-pips.gem-pips.holding small {
  color: var(--ink);
}

.st-gems,
.rb-gems {
  font-family: var(--font-display);
  color: #7ff3ff;
  white-space: nowrap;
}

.gem-hold {
  position: absolute;
  z-index: 4;
  top: 4px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 3px 6px 3px 12px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: linear-gradient(180deg, #ff6f86, #c42c4a);
  box-shadow: 0 5px 0 var(--ink);
  color: #fff;
  transform: translateX(-50%);
  pointer-events: none;
  animation: holdIn .35s cubic-bezier(.2, 1.4, .4, 1);
}

.gem-hold.me {
  background: linear-gradient(180deg, #ffe066, #ffb703);
  color: var(--ink);
}

.gem-hold.rival2 {
  background: linear-gradient(180deg, #6cb6ff, #2b6fd0);
}

.gem-hold-icon {
  flex: none;
  width: 30px;
  height: 27px;
  clip-path: polygon(19% 0, 81% 0, 100% 31%, 50% 100%, 0 31%);
  background: linear-gradient(180deg, #e3feff, #4fd8ff 45%, #2a5fe0);
}

.gem-hold-copy {
  display: grid;
  min-width: 0;
}

.gem-hold-copy b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gem-hold-copy small {
  font-weight: 800;
  font-size: .76rem;
  opacity: .9;
}

.gem-hold-count {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
}

.gem-hold.tick .gem-hold-count {
  animation: holdTick .4s ease-out;
}

@keyframes holdIn {
  0% { opacity: 0; transform: translate(-50%, -14px) scale(.9); }
  100% { opacity: 1; transform: translateX(-50%); }
}

@keyframes holdTick {
  0% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@media (max-width: 680px) {
  .play-body {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
  }

  .gem-art {
    width: 170px;
    height: 110px;
    margin: 0 auto;
  }

  .gem-mini.g1 { transform: translateX(-62px) rotate(-14deg); }
  .gem-mini.g2 { transform: translateX(58px) rotate(12deg); }
  .gem-mini.g3 { transform: translateX(48px) rotate(-6deg) scale(.75); }

  .gem-hold-copy small {
    display: none;
  }

  .gem-hold-copy b {
    font-size: .9rem;
  }

  .gem-hold-icon {
    width: 22px;
    height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gem-big, .gem-mini, .gem-glow, .gem-spark, .gem-big i, .play-body.swap-in, .play-body.swap-in-back {
    animation: none;
  }
}
.fighter-chips .loot-chip {
  background: linear-gradient(180deg, #fff3a0, #ffb703);
  color: var(--ink);
}

.result-loot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin: 10px 0 0;
  padding: 10px 14px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(110deg, #ffd23f, #ff9f1c 55%, #ff5ea8);
  box-shadow: 0 4px 0 var(--ink);
  color: var(--ink);
  font-weight: 900;
  animation: popIn .5s cubic-bezier(.2, 1.4, .4, 1) .3s both;
}

.result-loot b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
}

.result-loot span {
  padding: 2px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fffaf0;
}
.ht-scene {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0;
  width: min(410px, 100%);
}

.ht-canvas {
  display: block;
  width: 100%;
  height: 340px;
  filter: drop-shadow(0 6px 0 rgba(19, 7, 20, .55));
}

.ht-scene figcaption {
  padding: 4px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink-2);
  color: #e3dcff;
  font-weight: 800;
  font-size: .8rem;
}

.ht-chips span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ht-chips i {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--c);
  color: var(--ink);
  font-style: normal;
  font-weight: 900;
  font-size: .72rem;
}

@media (max-width: 680px) {
  .ht-scene {
    width: min(360px, 100%);
    margin: 0 auto;
  }
}
.install-guide {
  display: grid;
  gap: 10px;
}

.install-browser {
  justify-self: start;
  margin: 0;
  padding: 3px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .9rem;
}

.install-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.install-steps li {
  position: relative;
  padding: 9px 12px 9px 46px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--ink-2);
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
  counter-increment: step;
}

.install-steps li::before {
  content: counter(step);
  position: absolute;
  left: 9px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: .85rem;
}

.install-key {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 5px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: #fffaf0;
  color: var(--ink);
  font-weight: 900;
  font-size: .85rem;
  vertical-align: middle;
}

.install-note {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  font-size: .85rem;
}
.mini-bomb {
  flex: none;
}

.mini-fighter {
  position: relative;
  z-index: 1;
  flex: none;
  width: 84px;
  height: 104px;
  margin-bottom: -4px;
  animation: charBob 1.6s ease-in-out infinite;
}

.mini-fighter.red {
  animation-delay: -.8s;
}

.mini-fighter.blue {
  display: none;
  animation-delay: -.4s;
}

.play-card.ffa .mini-fighter.blue {
  display: block;
}

.play-card.ffa .mini-arena {
  width: 320px;
}

@media (max-width: 680px) {
  .play-card.ffa .mini-arena {
    width: min(300px, 100%);
    padding: 0 4px 18px;
  }

  .play-card.ffa .mini-fighter {
    margin-inline: -11px;
  }

  .play-card.ffa .mini-fighter.green {
    margin-left: 0;
  }

  .play-card.ffa .mini-fighter.blue {
    margin-right: 0;
  }
}

.btn-cash {
  --face: #5fdc6e;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

.btn-cash small {
  color: #12401c;
}

.btn-discord {
  --face: #5865f2;
  text-decoration: none;
}

.discord-join {
  flex: none;
  min-height: 42px;
  padding: 0 15px 0 13px;
  font-size: 1rem;
  transform: rotate(-2deg);
}

.discord-join svg {
  width: 24px;
  height: auto;
  fill: #fff;
  filter: drop-shadow(0 2px 0 rgba(33, 13, 34, .55));
}

.discord-join:hover {
  transform: rotate(-2deg) translateY(-1px);
}

.discord-join:hover svg {
  animation: discordWiggle .5s ease;
}

.discord-join:active {
  transform: rotate(-2deg) translateY(4px);
}

@keyframes discordWiggle {
  30% { transform: rotate(-12deg) scale(1.1); }
  60% { transform: rotate(10deg) scale(1.1); }
}

@media (max-width: 680px) {
  .discord-join {
    min-height: 40px;
    padding: 0 10px;
  }

  .discord-join span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .discord-join:hover svg {
    animation: none;
  }
}

.foot.discord {
  background: #5865f2;
  color: #fff;
}

.discord-ribbon {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 1;
  padding: 1px 7px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: linear-gradient(135deg, #e995c5, #5865f2);
  color: #fff;
  font-family: var(--font-display);
  font-style: normal;
  font-size: .78rem;
  transform: rotate(8deg);
}

.item-card.exclusive {
  background:
    radial-gradient(circle at 50% 38%, rgba(88, 101, 242, .45), transparent 62%),
    linear-gradient(180deg, #502753, #3c1a3e);
}

.link-provider.discord-perk {
  border-color: var(--ink);
  background: linear-gradient(180deg, #7983f5, #5865f2);
  box-shadow: 0 3px 0 var(--ink);
  animation: perkNudge 2.4s ease-in-out infinite;
}

@keyframes perkNudge {
  0%, 82%, 100% { transform: none; }
  88% { transform: rotate(-3deg) scale(1.04); }
  94% { transform: rotate(3deg) scale(1.04); }
}

.perk-unlock {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.perk-stage {
  position: relative;
  width: min(260px, 70vw);
  height: 230px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(88, 101, 242, .55), transparent 65%),
    conic-gradient(from 90deg at 50% 50%, #532755 0 25%, #4c224e 0 50%, #532755 0 75%, #4c224e 0);
  background-size: 100% 100%, 34px 34px;
  box-shadow: var(--hard-sm);
}

.perk-rays {
  position: absolute;
  inset: -40%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .09) 0 12deg, transparent 12deg 24deg);
  animation: perkSpin 14s linear infinite;
}

@keyframes perkSpin {
  to { transform: rotate(360deg); }
}

.perk-stage canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.perk-lead {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.perk-list {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.perk-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--ink-2);
  text-align: left;
}

.perk-list b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  color: #fff;
}

.perk-list small {
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .7rem;
}

.challenge-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 16px 0 12px;
  padding: 4px;
  border: 2px solid var(--ink);
  border-radius: 13px;
  background: var(--ink-2);
}

.challenge-tab {
  position: relative;
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: .98rem;
  letter-spacing: .02em;
  cursor: var(--cursor-pointer);
  transition: background .15s ease, color .15s ease;
}

.challenge-tab:hover {
  color: #fff;
}

.challenge-tab.active {
  background: linear-gradient(180deg, #ffe066, var(--yellow));
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}

.tab-badge {
  display: inline-block;
  vertical-align: 1px;
  margin-left: 7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--green);
  color: var(--ink);
  font-style: normal;
  font-size: .72rem;
  line-height: 16px;
  animation: pillPulse 1.8s ease-in-out infinite;
}

.challenge-total {
  color: var(--yellow);
}

.regular-list {
  display: grid;
  gap: 8px;
  max-height: 330px;
  margin: 0;
  padding: 0 3px 0 0;
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.regular-list li.complete {
  opacity: .6;
}

.tier-pips {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}

.tier-pips i {
  width: 12px;
  height: 5px;
  border-radius: 3px;
  background: #210d22;
}

.tier-pips i.on {
  background: var(--green);
}

.tier-pips i.cash {
  box-shadow: 0 0 0 1px #8ff07a;
}

.reward-stack {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.reward-tag.cash-tag {
  color: #8ff07a;
}

.claim-btn.has-cash {
  --face: #8ff07a;
}

.ht-welcome {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(61, 220, 114, .22), rgba(62, 224, 255, .14));
  color: #fff;
  font-weight: 800;
  text-align: center;
}
.lfm-strip {
  position: relative;
  z-index: 2;
  margin: 0 0 22px;
  padding: 12px 14px 14px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(61, 220, 114, .14), transparent 40%),
    linear-gradient(180deg, var(--panel-hi), var(--panel-lo));
  box-shadow: var(--hard), inset 0 2px 0 rgba(255, 255, 255, .1);
}

.lfm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.lfm-strip.empty .lfm-head {
  margin-bottom: 6px;
}

.lfm-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.08rem;
  text-shadow: 0 2px 0 var(--ink);
}

.lfm-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--green);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .85rem;
  text-shadow: none;
}

.lfm-strip.empty .lfm-count {
  background: var(--ink-2);
  color: var(--muted);
}

.lfm-feed-link {
  padding: 5px 11px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--ink-2);
  color: var(--muted);
  font: inherit;
  font-weight: 900;
  font-size: .78rem;
  white-space: nowrap;
  cursor: var(--cursor-pointer);
}

.lfm-feed-link:hover {
  color: #fff;
}

.lfm-list {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 2px 2px 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: #69366b transparent;
}

.lfm-strip.empty .lfm-list {
  padding-bottom: 0;
}

.lfm-card {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-width: 260px;
  max-width: 320px;
  padding: 8px 8px 8px 10px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--ink-2);
  scroll-snap-align: start;
  animation: lfmIn .35s cubic-bezier(.2, 1.3, .4, 1) both;
}

.lfm-card.classic {
  box-shadow: inset 4px 0 0 var(--yellow);
}

.lfm-card.gems {
  box-shadow: inset 4px 0 0 #5ff3ff;
}

.lfm-card.siege {
  box-shadow: inset 4px 0 0 #ff9a3c;
}

.lfm-card.mine {
  background: rgba(61, 220, 114, .16);
}

.lfm-card .avatar {
  --size: 40px;
}

.lfm-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}

.lfm-copy b {
  overflow: hidden;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lfm-copy small {
  overflow: hidden;
  color: var(--muted);
  font-weight: 800;
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lfm-mode {
  color: #fff;
}

.lfm-fill {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
}

.lfm-join {
  flex: none;
  min-height: 38px;
  padding: 0 14px;
  font-size: .98rem;
}

.lfm-join.small {
  min-height: 32px;
  padding: 0 11px;
  font-size: .86rem;
}

.lfm-searching {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-weight: 900;
  font-size: .78rem;
  white-space: nowrap;
}

.lfm-empty {
  padding: 4px 2px;
  color: var(--muted);
  font-weight: 800;
  font-size: .86rem;
}

.lfm-empty b {
  color: #fff;
}

@keyframes lfmIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.96);
  }
}

.chat-tabs {
  display: flex;
  gap: 4px;
  min-width: 0;
  padding: 3px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: rgba(33, 13, 34, .5);
}

.chat-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: .9rem;
  white-space: nowrap;
  cursor: var(--cursor-pointer);
}

.chat-tab:hover {
  color: #fff;
}

.chat-tab.active {
  background: var(--purple);
  color: #fff;
  box-shadow: 0 2px 0 var(--ink);
}

.tab-count,
.tab-new {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-style: normal;
  font-size: .68rem;
  line-height: 1;
}

.tab-new {
  position: absolute;
  top: -8px;
  right: -6px;
  background: var(--red);
  animation: pillPulse 1.8s ease-in-out infinite;
}

.chat-tab .tab-count[hidden],
.chat-tab .tab-new[hidden] {
  display: none;
}

.chat-head .chat-online {
  margin-left: auto;
}

.lfm-feed {
  display: flex;
  flex: 1;
  min-height: 0;
}

.lfm-feed[hidden] {
  display: none;
}

.lfm-feed-list {
  display: grid;
  align-content: start;
  gap: 8px;
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: #69366b transparent;
}

.lfm-feed-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 8px 8px 9px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--ink-2);
  animation: lfmIn .3s ease both;
}

.lfm-feed-item.ended {
  opacity: .5;
}

.lfm-feed-item.classic {
  box-shadow: inset 4px 0 0 var(--yellow);
}

.lfm-feed-item.gems {
  box-shadow: inset 4px 0 0 #5ff3ff;
}

.lfm-feed-item.siege {
  box-shadow: inset 4px 0 0 #ff9a3c;
}

.lfm-feed-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.lfm-feed-copy span {
  overflow: hidden;
  color: #e3dcff;
  font-weight: 800;
  font-size: .84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lfm-feed-copy b {
  color: #fff;
}

.lfm-feed-copy small {
  color: var(--muted);
  font-weight: 800;
  font-size: .72rem;
}

.lfm-feed-empty {
  padding: 26px 14px;
  color: var(--muted);
  font-weight: 800;
  font-size: .88rem;
  text-align: center;
}

.mode-opt.locked {
  opacity: .45;
  filter: grayscale(.6);
  cursor: not-allowed;
}

.siege-art {
  display: none;
  position: relative;
  width: 250px;
  height: 130px;
}

.play-card.siege .mini-arena,
.play-card.siege .gem-art {
  display: none;
}

.play-card.siege .siege-art {
  display: block;
}

.play-card.siege {
  background:
    radial-gradient(circle at 82% 38%, rgba(255, 154, 60, .38), transparent 46%),
    radial-gradient(circle at 10% 110%, rgba(63, 140, 255, .28), transparent 50%),
    linear-gradient(180deg, #672d6a, #57245a 50%, #461b48);
}

.play-card.siege .mode-tag {
  background: linear-gradient(90deg, #ff9a3c, #ffd23f);
}

.siege-art .sa-vault {
  position: absolute;
  right: 26px;
  bottom: 22px;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 50%, #3d1d3e 0 30%, transparent 31%),
    linear-gradient(180deg, #ffe27a, #d99a14);
  box-shadow: 0 5px 0 var(--ink), 0 0 26px rgba(255, 210, 63, .55);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.4rem;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  animation: vaultGlow 2.4s ease-in-out infinite;
}

.siege-art .sa-crate {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background:
    linear-gradient(45deg, transparent 44%, rgba(90, 50, 20, .55) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgba(90, 50, 20, .55) 44% 56%, transparent 56%),
    linear-gradient(180deg, #e0a35a, #b56f2c);
  box-shadow: 0 4px 0 var(--ink);
}

.siege-art .c1 {
  right: 100px;
  bottom: 22px;
}

.siege-art .c2 {
  right: 100px;
  bottom: 64px;
}

.siege-art .sa-map {
  position: absolute;
  right: 20px;
  top: 0;
  width: 70px;
  height: 46px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 7px),
    rgba(33, 13, 34, .85);
  box-shadow: 0 3px 0 var(--ink);
}

.siege-art .sa-map i {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid var(--ink);
  border-radius: 3px;
}

.siege-art .sa-map .va {
  right: 10px;
  top: 7px;
  background: var(--yellow);
}

.siege-art .sa-map .vb {
  right: 10px;
  bottom: 7px;
  background: var(--yellow);
}

.siege-art .sa-map .me {
  left: 8px;
  top: 16px;
  border-radius: 50%;
  background: var(--green);
  animation: mapCreep 3s ease-in-out infinite;
}

@keyframes mapCreep {
  50% {
    transform: translateX(26px);
  }
}

.siege-art .sa-bomb {
  position: absolute;
  left: 22px;
  bottom: 24px;
  width: 42px;
  height: 42px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #795b7a, #251526 62%);
  animation: bombPulse .7s ease-in-out infinite;
}

.siege-art .sa-bomb i {
  position: absolute;
  right: -10px;
  top: -14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 25%, var(--yellow) 30% 55%, var(--orange) 60%);
  box-shadow: 0 0 12px var(--orange);
  animation: sparkFlicker .22s steps(2) infinite;
}

.siege-art.big {
  display: block;
  width: 280px;
  height: 160px;
  margin: 0 auto;
}

.ht-siege {
  display: grid;
  place-items: center;
  min-height: 200px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background:
    radial-gradient(circle at 70% 40%, rgba(255, 154, 60, .3), transparent 50%),
    conic-gradient(from 90deg at 50% 50%, #532755 0 25%, #4c224e 0 50%, #532755 0 75%, #4c224e 0);
  background-size: 100% 100%, 40px 40px;
}

@keyframes vaultGlow {
  50% {
    box-shadow: 0 5px 0 var(--ink), 0 0 40px rgba(255, 210, 63, .85);
  }
}

.role-chip {
  padding: 1px 7px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .04em;
}

.role-chip.attacker {
  background: #ff9a3c;
  color: var(--ink);
}

.role-chip.defender {
  background: #6fd0ff;
  color: var(--ink);
}

.drill-count {
  margin-left: 5px;
  color: #dfe8f5;
  font-style: normal;
  font-weight: 900;
  font-size: .72rem;
  white-space: nowrap;
}

.drill-count {
  color: #ff9a3c;
}

.reduced-motion .siege-art *,
.reduced-motion .lfm-card,
.reduced-motion .lfm-feed-item {
  animation: none;
}

@media (max-width: 680px) {
  .lfm-strip {
    margin-bottom: 16px;
    padding: 10px 10px 12px;
  }

  .lfm-card {
    min-width: 240px;
  }

  .lfm-feed-link {
    display: none;
  }

  .chat-tab {
    padding: 5px 7px;
    font-size: .82rem;
  }
}

.chat-head:has(.chat-tabs) .chat-online {
  gap: 5px;
  font-size: 0;
}

.chat-head:has(.chat-tabs) .chat-online b {
  font-size: .9rem;
}

.chat-head:has(.chat-tabs) {
  gap: 8px;
}

:root {
  --rainbow: linear-gradient(90deg, #ff4b4b, #ff9a3c, #ffd23f, #3ddc72, #3ee0ff, #6b7bff, #c46bff, #ff5ea8, #ff4b4b);
}

@keyframes rainbowShift {
  to {
    background-position: 300% 0;
  }
}

.rarity-tag.rarity-mythical {
  background: var(--rainbow);
  background-size: 300% 100%;
  color: #fff;
  text-shadow: 0 1px 0 var(--ink), 0 0 6px rgba(33, 13, 34, .5);
  animation: rainbowShift 3.5s linear infinite;
}

.rarity-mythical {
  --rc: #ff5ea8;
}

.item-card.rarity-mythical {
  --rarity: #ff5ea8;
  border-color: transparent;
  background:
    radial-gradient(circle at 50% 38%, rgba(196, 107, 255, .4), transparent 62%) padding-box,
    linear-gradient(180deg, #532655, #3c1a3e 70%) padding-box,
    var(--rainbow) border-box;
  background-size: 100% 100%, 100% 100%, 300% 100%;
  box-shadow: 0 4px 0 var(--ink), 0 0 18px rgba(255, 94, 168, .45), 0 0 30px rgba(62, 224, 255, .2);
  animation: rainbowShift 3.5s linear infinite;
}

.item-card.rarity-mythical::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .3) 45%, transparent 60%);
  background-size: 250% 100%;
  animation: shimmer 2.2s linear infinite;
  pointer-events: none;
}

.item-card.rarity-mythical b {
  background: var(--rainbow);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
  filter: drop-shadow(0 1px 0 var(--ink));
  animation: rainbowShift 3.5s linear infinite;
}

.perk-list li.rarity-mythical {
  border-color: transparent;
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
    var(--rainbow) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: rainbowShift 3.5s linear infinite;
}

.reduced-motion .rarity-tag.rarity-mythical,
.reduced-motion .item-card.rarity-mythical,
.reduced-motion .item-card.rarity-mythical::before,
.reduced-motion .item-card.rarity-mythical b,
.reduced-motion .perk-list li.rarity-mythical {
  animation: none;
}

.chat-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.chat-field .chat-input {
  padding-right: 76px;
}

.chat-field .chat-count {
  right: 46px;
}

.chat-emoji {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  background: transparent;
  font: 1.2rem/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  cursor: var(--cursor-pointer);
  filter: grayscale(.35);
  transition: transform .1s ease, background .1s ease, filter .1s ease;
}

.chat-emoji:hover,
.chat-emoji.on {
  background: rgba(62, 224, 255, .18);
  border-color: rgba(33, 13, 34, .25);
  filter: none;
  transform: scale(1.08);
}

.chat-emoji:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 1px;
}

.emoji-panel {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 64px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  max-height: min(250px, calc(100% - 74px));
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: linear-gradient(180deg, #49224c, #381939);
  box-shadow: 0 5px 0 var(--ink), 0 14px 30px rgba(19, 7, 20, .45);
  overflow: hidden;
  animation: emojiPop .16s cubic-bezier(.2, 1.3, .4, 1) both;
  transform-origin: bottom right;
}

.emoji-panel[hidden] {
  display: none;
}

.emoji-tabs {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 5px 6px;
  border-bottom: 2px solid rgba(33, 13, 34, .8);
  background: rgba(33, 13, 34, .45);
  overflow-x: auto;
  scrollbar-width: none;
}

.emoji-tab {
  flex: none;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 9px;
  background: transparent;
  font: 1.05rem/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  cursor: var(--cursor-pointer);
  opacity: .6;
}

.emoji-tab:hover {
  opacity: 1;
}

.emoji-tab.on {
  border-color: var(--ink);
  background: var(--yellow);
  opacity: 1;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 2px;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #69366b transparent;
}

.emoji-pick {
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: 1.35rem/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  cursor: var(--cursor-pointer);
  transition: transform .08s ease, background .08s ease;
}

.emoji-pick:hover,
.emoji-pick:focus-visible {
  outline: none;
  background: rgba(255, 210, 63, .22);
  transform: scale(1.18);
}

.chat-text {
  overflow: hidden;
  font-variant-emoji: emoji;
}

@keyframes emojiPop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .emoji-panel {
    animation: none;
  }
}

.chat-msg.skin-name .chat-name {
  background: var(--name-grad, linear-gradient(90deg, var(--name-a), var(--name-b)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 var(--ink));
}

.chat-msg.skin-name {
  border-left-color: var(--name-b);
}

.foot.mission {
  background: linear-gradient(90deg, #028b2a, #1fae4a);
  color: #eaffd9;
}

.mission-ribbon {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 1;
  padding: 1px 7px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: linear-gradient(135deg, #62eb04, #00ff96 55%, #028b2a);
  color: var(--ink);
  font-family: var(--font-display);
  font-style: normal;
  font-size: .78rem;
  transform: rotate(8deg);
}

.item-card.exclusive.mission {
  background:
    radial-gradient(circle at 50% 38%, rgba(98, 235, 4, .38), transparent 62%),
    linear-gradient(180deg, #1f4a2a, #15301f);
}

.no-hat-x {
  position: absolute;
  top: 34%;
  left: 66%;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 41%, #fff 41% 59%, transparent 59%),
    linear-gradient(-45deg, transparent 41%, #fff 41% 59%, transparent 59%),
    radial-gradient(circle at 35% 30%, #ff8a9c, #ff3b5c 55%, #c3173a);
  box-shadow: 0 3px 0 var(--ink);
  transform: translate(-50%, -50%) rotate(-8deg);
  pointer-events: none;
}

.no-hat-x.tiny {
  position: relative;
  top: auto;
  left: auto;
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border-width: 2px;
  box-shadow: 0 1px 0 var(--ink);
  vertical-align: -4px;
  transform: none;
}

.item-card.hat-blocked .item-thumb {
  filter: grayscale(.6) brightness(.8);
  opacity: .85;
}

.foot.blocked {
  background: #ff3b5c;
  color: #fff;
  white-space: nowrap;
}

.hat-block-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255, 59, 92, .28), rgba(255, 59, 92, .08));
  box-shadow: var(--hard-sm);
}

.hat-block-banner .no-hat-x {
  position: relative;
  top: auto;
  left: auto;
  flex: none;
  width: 38px;
  height: 38px;
  transform: rotate(-8deg);
}

.hat-block-banner b {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.02rem;
}

.hat-block-banner span {
  color: var(--muted);
  font-weight: 800;
  font-size: .8rem;
}

.no-hat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.no-hat-note {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mode-rail {
  --mode-index: 0;
  --rail-accent: var(--yellow);
  --rail-accent-2: #ffb41f;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px 20px;
}

.play-card.gems .mode-rail {
  --rail-accent: #7ff6ff;
  --rail-accent-2: #3fd3ff;
}

.play-card.siege .mode-rail {
  --rail-accent: #ffc066;
  --rail-accent-2: #ff8a2a;
}

.mode-rail-track {
  position: relative;
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 26px;
  padding: 3px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #29102b, #3b193c);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .4);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.mode-rail.dragging .mode-rail-track {
  cursor: grabbing;
}

.mode-rail-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  display: grid;
  place-items: center;
  width: calc((100% - 6px) / 3);
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--rail-accent), var(--rail-accent-2));
  box-shadow: 0 2px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .5);
  transform: translateX(calc(var(--mode-index) * 100%));
  transition: transform .38s cubic-bezier(.2, 1.3, .4, 1), background .25s ease;
  pointer-events: none;
}

.mode-rail-thumb i {
  width: 18px;
  height: 8px;
  background:
    linear-gradient(90deg, rgba(33, 13, 34, .45) 0 2px, transparent 2px 8px, rgba(33, 13, 34, .45) 8px 10px, transparent 10px 16px, rgba(33, 13, 34, .45) 16px 18px);
}

.mode-rail.dragging .mode-rail-thumb {
  transition: none;
  filter: brightness(1.1);
}

.mode-rail-stop {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: inherit;
}

.mode-rail-stop::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(207, 198, 255, .35);
  transition: transform .2s ease, background .2s ease;
}

.mode-rail-stop.active::after {
  opacity: 0;
}

.mode-rail-stop:hover::after {
  background: rgba(255, 255, 255, .8);
  transform: scale(1.4);
}

.mode-rail-stop:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

.mode-rail-nudge {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: linear-gradient(180deg, #9c3da1, #6d3570);
  box-shadow: 0 3px 0 var(--ink);
  cursor: var(--cursor-pointer);
  transition: transform .1s ease, filter .1s ease, opacity .2s ease;
}

.mode-rail-nudge::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  border-radius: 2px;
  transform: translate(-30%, -50%) rotate(-45deg);
}

.mode-rail-nudge.next::before {
  transform: translate(-70%, -50%) rotate(135deg);
}

.mode-rail-nudge:hover:not(:disabled) {
  filter: brightness(1.15);
}

.mode-rail-nudge:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}

.mode-rail-nudge:disabled {
  opacity: .35;
  cursor: var(--cursor);
}

.mode-rail-nudge:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

@media (max-width: 680px) {
  .mode-rail {
    gap: 8px;
    padding: 0 16px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mode-rail-thumb {
    transition: none;
  }
}

.chat-line {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}

.chat-line .chat-text {
  flex: 1;
  min-width: 0;
}

.chat-ts {
  flex: none;
  margin-bottom: 1px;
  color: rgba(228, 180, 207, .6);
  font-weight: 800;
  font-size: .64rem;
  letter-spacing: .02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.chat-msg.mine .chat-ts {
  color: rgba(214, 255, 226, .6);
}

.chat-announce {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 2px 0;
  padding: 7px 10px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255, 210, 63, .2), rgba(255, 122, 184, .14) 60%, rgba(62, 224, 255, .12));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  animation: chatIn .22s ease-out both, announceGlow 1.6s ease-out 1;
}

.chat-announce-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: linear-gradient(180deg, #ffe27a, #ffb41f);
  box-shadow: 0 2px 0 var(--ink);
  font-size: .95rem;
  line-height: 1;
}

.chat-announce .chat-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: #fff4c7;
  font-weight: 800;
  font-size: .84rem;
}

@keyframes announceGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 210, 63, .6);
  }

  100% {
    box-shadow: 0 0 0 10px rgba(255, 210, 63, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-announce {
    animation: none;
  }
}

.reward-art {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto;
}

.reward-art.coins i,
.reward-art.cash i {
  position: absolute;
  background: url("../assets/images/currency/Coin.png") center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(33, 13, 34, .55));
}

.reward-art.coins i:nth-child(1) { left: 2px; top: 22px; width: 34px; height: 34px; transform: rotate(-12deg); }
.reward-art.coins i:nth-child(2) { right: 2px; top: 20px; width: 32px; height: 32px; transform: rotate(14deg); }
.reward-art.coins i:nth-child(3) { left: 14px; top: 4px; width: 38px; height: 38px; }

.reward-art.cash i {
  background-image: url("../assets/images/currency/Cash.png");
}

.reward-art.cash i:nth-child(1) { left: 4px; top: 18px; width: 50px; height: 40px; transform: rotate(-10deg); }
.reward-art.cash i:nth-child(2) { left: 12px; top: 6px; width: 50px; height: 40px; transform: rotate(8deg); }

.reward-art.xp {
  display: grid;
  place-items: center;
}

.reward-art.xp b {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 3px solid var(--ink);
  clip-path: polygon(50% 0, 61% 32%, 96% 35%, 69% 56%, 79% 92%, 50% 72%, 21% 92%, 31% 56%, 4% 35%, 39% 32%);
  background: linear-gradient(180deg, #8fffcf, #2bd38a);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .82rem;
  filter: drop-shadow(0 3px 0 var(--ink));
}

.crate-item.is-reward .reward-art,
.reel-card.is-reward .reward-art {
  width: 52px;
  height: 52px;
  transform: scale(.82);
}

.crate-result .reward-art {
  flex: none;
  width: 96px;
  height: 96px;
  transform: scale(1.4);
}

.announce-name {
  color: var(--yellow);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .02em;
  text-shadow: 0 2px 0 var(--ink);
}

.fighter-chat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fighter-chat .fighter-chat-btn {
  width: auto;
}

.friends-btn {
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

.chat-name[data-uid] {
  cursor: var(--cursor-pointer);
  border-radius: 6px;
  transition: background .12s ease;
}

.chat-name[data-uid]:hover,
.chat-name[data-uid]:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, .1);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.chat-msg.skin-name .chat-name[data-uid]:hover {
  text-decoration-color: var(--name-b);
}

.user-menu {
  position: fixed;
  z-index: 60;
  width: 236px;
  padding: 10px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: linear-gradient(180deg, #632e65, #481f4a);
  box-shadow: 0 6px 0 var(--ink), 0 18px 40px rgba(19, 7, 20, .55);
  animation: menuPop .16s cubic-bezier(.2, 1.4, .4, 1) both;
  transform-origin: top left;
}

.user-menu.above {
  transform-origin: bottom left;
}

.user-menu[hidden] {
  display: none;
}

.um-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 10px;
  border-bottom: 2px dashed rgba(228, 180, 207, .3);
}

.um-head .avatar {
  flex: none;
  width: 40px;
  height: 40px;
}

.um-who {
  flex: 1;
  min-width: 0;
}

.um-who b {
  display: block;
  overflow: hidden;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.um-who small {
  color: var(--muted);
  font-weight: 800;
  font-size: .74rem;
}

.um-actions {
  display: grid;
  gap: 6px;
  padding-top: 10px;
}

.um-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: rgba(33, 13, 34, .55);
  color: #fff;
  font: 800 .88rem var(--font-body);
  text-align: left;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .1s ease, background .12s ease;
}

.um-btn i {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  font-style: normal;
}

.um-btn span {
  display: grid;
  min-width: 0;
}

.um-btn small {
  color: var(--muted);
  font-size: .68rem;
}

.um-btn:hover:not(:disabled) {
  background: #6f3772;
  transform: translateX(2px);
}

.um-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}

.um-btn:disabled {
  opacity: .45;
}

.um-btn.go i {
  background: var(--green);
}

.um-btn.danger i,
.um-btn.confirm i {
  background: #ff5e74;
}

.um-btn.confirm {
  background: #6a1f3c;
}

.um-btn.warn i {
  background: #ffb41f;
}

@keyframes menuPop {
  from {
    opacity: 0;
    transform: scale(.9) translateY(-4px);
  }
}

.presence-dot {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #684f69;
  vertical-align: -1px;
}

.presence-dot.online {
  background: #3ddc72;
  box-shadow: 0 0 8px rgba(61, 220, 114, .7);
}

.presence-dot.in-match {
  background: #ffb41f;
  box-shadow: 0 0 8px rgba(255, 180, 31, .6);
}

.friends {
  width: min(980px, 100%);
  height: min(680px, calc(100dvh - 36px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
}

.friends-head {
  gap: 12px;
}

.ftab-count {
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(33, 13, 34, .35);
  font-style: normal;
  font-size: .78rem;
}

.ftab-count:empty {
  display: none;
}

.ftab-badge {
  margin-left: 6px;
  padding: 0 7px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #ff5e74;
  color: #fff;
  font-style: normal;
  font-size: .76rem;
}

.ftab-badge[hidden] {
  display: none;
}

.friend-add {
  display: flex;
  flex: 1;
  gap: 8px;
  max-width: 320px;
  margin-left: auto;
}

.friend-add input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 3px solid var(--ink);
  border-radius: 13px;
  background: #fffdf5;
  color: #2a142b;
  font: 700 .92rem var(--font-body);
}

.friend-add input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(61, 220, 114, .3);
}

.friend-add-btn {
  width: 46px;
  min-height: 42px;
  padding: 0;
}

.friends-body {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

.friends-list {
  overflow-y: auto;
  padding: 12px;
  border-right: 3px solid var(--ink);
  background: rgba(33, 13, 34, .35);
  scrollbar-width: thin;
  scrollbar-color: #69366b transparent;
}

.friends-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 4px 6px;
  color: var(--muted);
  font: 400 .82rem var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.friends-sub:first-child {
  margin-top: 0;
}

.friends-sub i {
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

.friend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: rgba(87, 42, 89, .55);
  box-shadow: 0 3px 0 var(--ink);
  cursor: var(--cursor-pointer);
  transition: transform .1s ease, background .12s ease;
}

.friend-row:hover {
  background: #6f3772;
  transform: translateX(2px);
}

.friend-row.selected {
  background: linear-gradient(90deg, #2fae5c, #572a59 80%);
}

.friend-row.muted-row {
  cursor: var(--cursor);
}

.friend-avatar {
  position: relative;
  flex: none;
}

.friend-avatar .avatar {
  width: 42px;
  height: 42px;
}

.friend-avatar .presence-dot {
  position: absolute;
  right: -3px;
  bottom: -2px;
}

.friend-who {
  display: grid;
  flex: 1;
  min-width: 0;
}

.friend-who b {
  overflow: hidden;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-who small {
  overflow: hidden;
  color: var(--muted);
  font-weight: 800;
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-unread {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #ff5e74;
  color: #fff;
  font: 900 .72rem var(--font-body);
  font-style: normal;
}

.fr-acts {
  display: flex;
  flex: none;
  gap: 6px;
}

.fr-act {
  min-height: 34px;
  padding: 0 10px;
  font-size: .84rem;
}

.friends-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 26px 12px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.friends-empty.small {
  padding: 8px 6px 14px;
  font-size: .8rem;
}

.friends-empty b {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
}

.friends-empty-art,
.fw-art {
  font-size: 2.6rem;
  filter: drop-shadow(0 4px 0 rgba(33, 13, 34, .6));
}

.friends-detail {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

.friends-welcome {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  height: 100%;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.friends-welcome h3 {
  margin: 0;
  color: #fff;
  font: 400 1.6rem var(--font-display);
}

.friends-welcome p {
  margin: 0;
  color: #cfc6ff;
}

.fp-back {
  display: none;
}

.fp {
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.fp-stage {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(61, 220, 114, .4), transparent 60%),
    radial-gradient(circle at 50% 40%, rgba(162, 107, 255, .35), transparent 60%),
    conic-gradient(from 90deg at 50% 50%, #532755 0 25%, #4c224e 0 50%, #532755 0 75%, #4c224e 0);
  background-size: 100% 100%, 100% 100%, 40px 40px;
  box-shadow: var(--hard-sm);
  overflow: hidden;
}

.fp-stage canvas {
  width: 100%;
  height: 100%;
}

.fp-tier {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(33, 13, 34, .7);
  color: #fff;
  font: 400 .82rem var(--font-display);
}

.fp-name {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fp-name .avatar {
  flex: none;
  width: 52px;
  height: 52px;
}

.fp-name h3 {
  margin: 0;
  overflow: hidden;
  color: #fff;
  font: 400 1.7rem var(--font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-name small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-weight: 800;
  font-size: .8rem;
}

.fp-level {
  height: 10px;
  margin: 12px 0 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #2e122f;
  overflow: hidden;
}

.fp-level span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8fffcf, #2bd38a);
}

.fp-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.fp-stat {
  display: grid;
  gap: 1px;
  padding: 9px 10px;
  border: 2px solid var(--ink);
  border-radius: 13px;
  background: rgba(33, 13, 34, .45);
  text-align: center;
}

.fp-stat b {
  color: #fff;
  font: 400 1.15rem var(--font-display);
}

.fp-stat small {
  color: var(--muted);
  font-weight: 900;
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.fp-stat.big {
  background: linear-gradient(180deg, rgba(61, 220, 114, .22), rgba(33, 13, 34, .45));
}

.fp-stat.big b {
  font-size: 1.3rem;
}

.fp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.fp-actions .btn-3d {
  flex: 1;
  min-width: 140px;
  min-height: 48px;
}

.fp-remove.confirm {
  --face: #ff5e74;
  color: #fff;
}

.fc {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--panel-hi), var(--panel) 30%, var(--panel-lo));
}

.fc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 3px solid var(--ink);
  background: rgba(33, 13, 34, .35);
}

.fc-head .avatar {
  flex: none;
  width: 38px;
  height: 38px;
}

.fc-head .fp-back {
  width: 38px;
  min-height: 38px;
  padding: 0;
}

.fc-who {
  display: grid;
  flex: 1;
  min-width: 0;
}

.fc-who b {
  overflow: hidden;
  color: #fff;
  font: 400 1.05rem var(--font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-who small {
  color: var(--muted);
  font-weight: 800;
  font-size: .72rem;
}

.fc-profile {
  width: 42px;
  min-height: 38px;
  padding: 0;
}

.fc-box {
  display: flex;
  flex: 1;
  min-height: 0;
}

@media (max-width: 760px) {
  .friends-head {
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .friends-head .locker-tabs {
    flex: 1;
    min-width: 0;
  }

  .friends-head .locker-tab {
    flex: 1;
    padding: 0 8px;
    font-size: 1rem;
    white-space: nowrap;
  }

  .friends-head #friendsClose {
    order: 2;
  }

  .friend-add {
    order: 3;
    max-width: none;
    flex-basis: 100%;
  }

  .friends-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .friends-list {
    border-right: 0;
  }

  .friends-detail {
    display: none;
  }

  .friends.show-detail .friends-list {
    display: none;
  }

  .friends.show-detail .friends-detail {
    display: flex;
    padding: 12px;
  }

  .fp-back {
    display: inline-flex;
    align-self: flex-start;
    min-height: 36px;
    margin-bottom: 10px;
    padding: 0 12px;
  }

  .fc-head .fp-back {
    margin: 0;
  }

  .fp {
    grid-template-columns: minmax(0, 1fr);
  }

  .fp-stage {
    width: min(220px, 70%);
    margin: 0 auto;
  }

  .fp-name h3 {
    font-size: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .user-menu {
    animation: none;
  }
}

.claim-btn.big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
}

.claim-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 3px 0 var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  animation: claimGift 1.6s ease-in-out infinite;
}

.claim-copy {
  display: grid;
  justify-items: start;
  line-height: 1.05;
}

.claim-copy b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.65rem;
  letter-spacing: .02em;
}

.claim-copy small {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .75;
}

.claim-btn.big.claimed {
  --face: #3ddc72;
  animation: none;
  opacity: 1;
}

.claim-btn.big.claimed .claim-icon {
  animation: none;
  color: #1f8a46;
  font-family: var(--font-display);
}

.claim-btn.big.claimed .claim-copy b {
  font-size: 1.35rem;
}

@keyframes claimGift {
  0%, 60%, 100% {
    transform: rotate(0) scale(1);
  }

  70% {
    transform: rotate(-12deg) scale(1.08);
  }

  80% {
    transform: rotate(10deg) scale(1.08);
  }

  90% {
    transform: rotate(-4deg);
  }
}

.board-card .seg-tabs,
html.ui-v5 .board-card .seg-tabs {
  position: static;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  max-width: none;
  margin: 0 0 12px;
}

.board-card .seg-tabs .seg {
  min-width: 0;
  padding-left: 4px;
  padding-right: 4px;
}

.board-value .coin-i,
.board-value .cash-i {
  margin-right: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .claim-icon {
    animation: none;
  }
}

.btn-3d.claim-btn.big.claimed:disabled {
  --face: #3ddc72;
  color: var(--ink);
  filter: none;
  opacity: 1;
}

.claim-btn.big.claimed .claim-copy small {
  opacity: .7;
}

.chat-resize {
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 3;
  width: 18px;
  height: 18px;
  border-radius: 0 0 14px 0;
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(255, 255, 255, .45) 46% 54%, transparent 54% 62%, rgba(255, 255, 255, .45) 62% 70%, transparent 70% 78%, rgba(255, 255, 255, .45) 78% 86%, transparent 86%);
  cursor: nwse-resize;
  touch-action: none;
  opacity: .65;
  transition: opacity .15s ease;
}

.chat-panel:hover .chat-resize,
.chat-panel.resizing .chat-resize {
  opacity: 1;
}

.chat-panel.resizing,
.chat-panel.resizing * {
  user-select: none;
  cursor: nwse-resize !important;
}

.chat-panel .chat-form {
  padding-right: 18px;
  padding-bottom: 14px;
}

.chat-panel.enlarged .chat-text {
  font-size: 1rem;
}

.chat-size {
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 520px) {
  .chat-size {
    display: none;
  }
}

.boom-pill {
  background: linear-gradient(180deg, #ff8fa3, #ff4b6e);
}

.pill-new {
  margin-left: auto;
  padding: 2px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font: 400 .72rem var(--font-display);
  letter-spacing: .06em;
  animation: newPulse 1.6s ease-in-out infinite;
}

@keyframes newPulse {
  50% {
    transform: scale(1.12) rotate(-4deg);
  }
}

html.ui-v5 .lobby-rewards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 760px) {
  html.ui-v5 .lobby-rewards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.ui-v5 .lobby-rewards .boom-pill {
    grid-column: 1 / -1;
  }
}

.boom-panel {
  width: min(820px, 100%);
  padding: 20px 22px 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 138, 30, .28), transparent 55%),
    linear-gradient(180deg, var(--panel-hi), var(--panel) 40%, var(--panel-lo));
}

.boom-panel.shake {
  animation: boomShake .32s ease;
}

@keyframes boomShake {
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-3px, 2px); }
  80% { transform: translate(2px, -1px); }
}

.bx-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 48px;
  margin-bottom: 14px;
}

.bx-logo {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 58px;
  height: 58px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: linear-gradient(180deg, #ff8fa3, #ff4b6e);
  box-shadow: 0 4px 0 var(--ink);
}

.bx-logo i,
.bx-mini-bomb,
.bx-tray-bomb,
.bx-ghost i,
.bx-hero-bomb i {
  position: relative;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8a8fd9, #3a3c80 55%, #1d1d45);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35);
}

.bx-logo i {
  width: 30px;
  height: 30px;
  border: 3px solid var(--ink);
}

.bx-logo i::after,
.bx-ghost i::after,
.bx-hero-bomb i::after,
.bx-tray-bomb::after {
  content: "";
  position: absolute;
  top: -7px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 25%, var(--yellow) 30% 55%, var(--orange) 60%);
  box-shadow: 0 0 10px var(--orange);
  animation: sparkFlicker .22s steps(2) infinite;
}

.bx-title {
  flex: 1;
  min-width: 0;
}

.bx-title h2 {
  margin: 0;
  color: #fff;
  font: 400 2rem var(--font-display);
  letter-spacing: .02em;
  text-shadow: 0 3px 0 var(--ink);
}

.bx-title small {
  color: var(--muted);
  font-weight: 800;
}

.bx-cash {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #8ff07a, #3ddc72);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
  box-shadow: 0 3px 0 var(--ink);
}

.bx-icon {
  display: inline-block;
  flex: none;
  width: 22px;
  height: 22px;
  font-style: normal;
  vertical-align: -5px;
}

.bx-icon.coin {
  background: url("../assets/images/currency/Coin.png") center / contain no-repeat;
}

.bx-icon.cash {
  width: 26px;
  background: url("../assets/images/currency/Cash.png") center / contain no-repeat;
}

.bx-icon.emoji {
  font-size: 1.1rem;
  line-height: 22px;
  text-align: center;
}

.bx-icon.xp {
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: linear-gradient(180deg, #8fffcf, #2bd38a);
  color: var(--ink);
  font: 400 .62rem var(--font-display);
}

.bx-loading {
  padding: 40px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.bx-hero {
  position: relative;
  height: 120px;
  margin: 0 auto 6px;
  width: 300px;
}

.bx-hero-box {
  position: absolute;
  bottom: 6px;
  width: 64px;
  height: 64px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background:
    linear-gradient(45deg, transparent 44%, rgba(90, 50, 20, .55) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgba(90, 50, 20, .55) 44% 56%, transparent 56%),
    linear-gradient(180deg, #e0a35a, #b56f2c);
  box-shadow: 0 5px 0 var(--ink);
}

.bx-hero-box.b1 { left: 30px; transform: rotate(-6deg); }
.bx-hero-box.b2 { left: 118px; bottom: 14px; animation: heroWobble 1.8s ease-in-out infinite; }
.bx-hero-box.b3 { left: 206px; transform: rotate(5deg); }

.bx-hero-bomb {
  position: absolute;
  left: 133px;
  top: 0;
  animation: heroDrop 1.8s ease-in-out infinite;
}

.bx-hero-bomb i {
  width: 34px;
  height: 34px;
  border: 3px solid var(--ink);
}

.bx-hero-boom {
  position: absolute;
  left: 110px;
  bottom: 18px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6c4 0 18%, #ffd23f 30%, #ff8a1e 55%, transparent 70%);
  opacity: 0;
  animation: heroBoom 1.8s ease-out infinite;
  pointer-events: none;
}

@keyframes heroDrop {
  0% { transform: translateY(-10px); opacity: 0; }
  20% { opacity: 1; }
  55% { transform: translateY(26px); opacity: 1; }
  62%, 100% { transform: translateY(26px); opacity: 0; }
}

@keyframes heroBoom {
  0%, 58% { opacity: 0; transform: scale(.3); }
  66% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.4); }
}

@keyframes heroWobble {
  50%, 60% { transform: rotate(-3deg) translateY(-2px); }
  55% { transform: rotate(3deg); }
}

.bx-pitch {
  max-width: 560px;
  margin: 0 auto 16px;
  color: #f6e0ea;
  font-weight: 800;
  text-align: center;
}

.bx-pitch b {
  color: var(--yellow);
}

.bx-buys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.bx-buy {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 16px 12px 14px;
  border: 4px solid var(--ink);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffe680, #ffc21f);
  color: var(--ink);
  font: inherit;
  box-shadow: 0 6px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .5);
  cursor: var(--cursor-pointer);
  transition: transform .12s ease, filter .12s ease;
}

.bx-buy.big {
  background: linear-gradient(180deg, #ff8fa3, #ff4b6e);
}

.bx-buy:hover:not(:disabled) {
  transform: translateY(-3px) rotate(-1deg);
  filter: brightness(1.06);
}

.bx-buy:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--ink);
}

.bx-buy:disabled {
  filter: grayscale(.7) brightness(.8);
  cursor: var(--cursor);
}

.bx-buy b {
  font: 400 1.6rem var(--font-display);
}

.bx-buy small {
  font-weight: 900;
  font-size: .78rem;
  opacity: .8;
}

.bx-buy-bombs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  min-height: 26px;
}

.bx-mini-bomb {
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink);
}

.bx-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 4px 14px 4px 8px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  font: 400 1.25rem var(--font-display);
  box-shadow: 0 3px 0 var(--ink);
}

.bx-tag {
  position: absolute;
  top: -12px;
  right: -8px;
  padding: 2px 10px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  font: 400 .78rem var(--font-display);
  font-style: normal;
  transform: rotate(6deg);
}

.bx-short {
  color: #6a1f3c;
  font-style: normal;
  font-weight: 900;
  font-size: .78rem;
}

.bx-sub {
  margin: 18px 0 8px;
  color: var(--muted);
  font: 400 .9rem var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bx-prizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(19, 7, 20, .45);
  color: #fff;
  font-size: .8rem;
}

.bx-chip.rarity-rare { box-shadow: inset 0 0 0 2px #3ee0ff; }
.bx-chip.rarity-epic { box-shadow: inset 0 0 0 2px #b77bff; }
.bx-chip.rarity-legendary { box-shadow: inset 0 0 0 2px #ffd23f; background: rgba(255, 210, 63, .18); }
.bx-chip.rarity-mythical { box-shadow: inset 0 0 0 2px #ff5ea8; background: linear-gradient(90deg, rgba(255, 75, 75, .25), rgba(255, 210, 63, .25), rgba(61, 220, 114, .25), rgba(62, 224, 255, .25), rgba(196, 107, 255, .25)); }

.bx-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-weight: 800;
  font-size: .78rem;
  text-align: center;
}

.bx-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.bx-status p {
  margin: 0;
  color: #f6e0ea;
  font-weight: 800;
}

.bx-status p b {
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.bx-tray {
  display: flex;
  gap: 6px;
}

.bx-tray-bomb {
  width: 30px;
  height: 30px;
  border: 3px solid var(--ink);
  transition: filter .3s ease, transform .3s ease, opacity .3s ease;
}

.bx-tray-bomb.used {
  filter: grayscale(1) brightness(.5);
  opacity: .5;
  transform: scale(.85);
}

.bx-tray-bomb.used::after {
  display: none;
}

.bx-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border: 4px solid var(--ink);
  border-radius: 22px;
  background:
    conic-gradient(from 90deg at 50% 50%, #3a183c 0 25%, #2b132c 0 50%, #3a183c 0 75%, #2b132c 0);
  background-size: 48px 48px;
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .3);
}

.bx-grid.locked .bx-box:not(.open) {
  pointer-events: none;
}

.bx-box {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: none;
  font: inherit;
  cursor: var(--cursor-pointer);
}

.bx-box.drop-in {
  animation: boxDrop .45s cubic-bezier(.2, 1.4, .4, 1) both;
  animation-delay: calc(var(--i) * 25ms);
}

@keyframes boxDrop {
  from {
    opacity: 0;
    transform: translateY(-18px) scale(.8);
  }
}

.bx-crate {
  position: absolute;
  inset: 4px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background:
    linear-gradient(45deg, transparent 44%, rgba(90, 50, 20, .55) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgba(90, 50, 20, .55) 44% 56%, transparent 56%),
    linear-gradient(180deg, transparent 0 46%, rgba(90, 50, 20, .35) 46% 54%, transparent 54%),
    linear-gradient(180deg, #e8ad62, #b56f2c);
  box-shadow: 0 5px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .3);
  transition: transform .15s ease;
}

.bx-crate::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 246, 196, .9);
  font: 400 1.5rem var(--font-display);
  text-shadow: 0 2px 0 rgba(90, 50, 20, .9);
}

.bx-box:not(.open):hover .bx-crate,
.bx-box:not(.open):focus-visible .bx-crate {
  transform: translateY(-3px) rotate(-2deg);
  animation: crateJitter .5s ease-in-out infinite;
}

.bx-box:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

@keyframes crateJitter {
  25% { transform: translateY(-3px) rotate(2deg); }
  50% { transform: translateY(-4px) rotate(-2deg); }
  75% { transform: translateY(-3px) rotate(1deg); }
}

.bx-ghost {
  position: absolute;
  left: 50%;
  top: -14px;
  z-index: 2;
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}

.bx-ghost i {
  width: 34px;
  height: 34px;
  border: 3px solid var(--ink);
}

.bx-box:not(.open):hover .bx-ghost,
.bx-box:not(.open):focus-visible .bx-ghost {
  opacity: .85;
  transform: translate(-50%, 0);
  animation: ghostBob .8s ease-in-out infinite;
}

@keyframes ghostBob {
  50% {
    transform: translate(-50%, -5px);
  }
}

.bx-box.armed .bx-ghost {
  opacity: 1;
  animation: bombLand .32s cubic-bezier(.5, 0, .7, 1.4) forwards, bombTick .14s .32s ease-in-out infinite alternate;
}

@keyframes bombLand {
  from {
    transform: translate(-50%, -40px) scale(1.2);
  }

  to {
    transform: translate(-50%, 26px) scale(1);
  }
}

@keyframes bombTick {
  from {
    transform: translate(-50%, 26px) scale(1);
  }

  to {
    transform: translate(-50%, 26px) scale(1.18);
    filter: brightness(1.4) drop-shadow(0 0 8px #ff8a1e);
  }
}

.bx-box.armed .bx-crate {
  animation: crateJitter .14s linear infinite;
}

.bx-box.boom::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 3;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 14%, #fff6c4 22%, #ffd23f 36%, #ff8a1e 56%, rgba(255, 75, 75, 0) 72%);
  animation: boxBoom .32s ease-out forwards;
  pointer-events: none;
}

.bx-box.boom .bx-crate {
  animation: crateBreak .2s ease-in forwards;
}

@keyframes boxBoom {
  from { transform: scale(.2); opacity: 1; }
  to { transform: scale(1.3); opacity: 0; }
}

@keyframes crateBreak {
  to { transform: scale(1.25) rotate(8deg); opacity: 0; }
}

.bx-box.open {
  display: grid;
  place-items: center;
  cursor: var(--cursor);
}

.bx-prize {
  position: absolute;
  inset: 4px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 4px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: linear-gradient(180deg, #5c2a5e, #3c1a3e);
  box-shadow: 0 4px 0 var(--ink);
  text-align: center;
}

.bx-prize .bx-icon {
  width: 34px;
  height: 34px;
}

.bx-prize .bx-icon.cash {
  width: 40px;
}

.bx-prize .bx-icon.emoji {
  font-size: 1.7rem;
  line-height: 34px;
}

.bx-prize .bx-icon.xp {
  font-size: .8rem;
}

.bx-prize b {
  color: #fff;
  font: 400 1.15rem var(--font-display);
  line-height: 1;
  text-shadow: 0 2px 0 var(--ink);
}

.bx-prize small {
  display: none;
}

.bx-box.rarity-rare .bx-prize { background: linear-gradient(180deg, #2fa7c9, #1d6f8c); }
.bx-box.rarity-epic .bx-prize { background: linear-gradient(180deg, #9b5cf0, #5f2fb0); }
.bx-box.rarity-legendary .bx-prize { background: linear-gradient(180deg, #ffd23f, #e09b00); box-shadow: 0 4px 0 var(--ink), 0 0 24px rgba(255, 210, 63, .7); }
.bx-box.rarity-legendary .bx-prize b { color: var(--ink); text-shadow: none; }
.bx-box.rarity-mythical .bx-prize { background: linear-gradient(135deg, #ff4b4b, #ff9a3c, #ffd23f, #3ddc72, #3ee0ff, #6b7bff, #c46bff); box-shadow: 0 4px 0 var(--ink), 0 0 28px rgba(255, 94, 168, .8); }

.bx-box.reveal .bx-prize {
  animation: prizePop .5s cubic-bezier(.2, 1.6, .4, 1) both;
}

@keyframes prizePop {
  from {
    transform: scale(.2) rotate(-14deg);
    opacity: 0;
  }
}

.bx-box.missed .bx-prize {
  filter: grayscale(.75) brightness(.6);
  opacity: .7;
  animation: missedFlip .35s ease both;
}

@keyframes missedFlip {
  from {
    transform: rotateY(90deg);
  }
}

.bx-summary {
  margin-top: 16px;
  text-align: center;
  animation: rewardIn .4s cubic-bezier(.2, 1.35, .4, 1) both;
}

.bx-summary h3 {
  margin: 0 0 8px;
  color: var(--yellow);
  font: 400 1.6rem var(--font-display);
  text-shadow: 0 3px 0 var(--ink);
}

.bx-total {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.bx-total span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 8px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: rgba(19, 7, 20, .5);
  color: #fff;
  font: 400 1.15rem var(--font-display);
}

.bx-again {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.bx-again-btn {
  display: grid;
  justify-items: center;
  min-height: 54px;
  padding: 6px 16px;
}

.bx-again-btn small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 900;
  font-size: .78rem;
}

@media (max-width: 620px) {
  .boom-panel {
    padding: 16px 12px 14px;
  }

  .bx-title h2 {
    font-size: 1.5rem;
  }

  .bx-logo {
    width: 46px;
    height: 46px;
  }

  .bx-cash {
    position: absolute;
    top: 64px;
    right: 14px;
    font-size: .95rem;
  }

  .bx-buys {
    grid-template-columns: minmax(0, 1fr);
  }

  .bx-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .bx-prize .bx-icon {
    width: 26px;
    height: 26px;
  }

  .bx-prize b {
    font-size: .95rem;
  }

  .bx-status {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pill-new,
  .bx-hero-box.b2,
  .bx-hero-bomb,
  .bx-hero-boom,
  .bx-box.drop-in,
  .bx-box:not(.open):hover .bx-crate,
  .bx-box:not(.open):hover .bx-ghost,
  .boom-panel.shake {
    animation: none;
  }
}

.bx-thumb {
  width: 52px;
  height: 52px;
  margin-bottom: -2px;
}

.bx-box.is-item .bx-prize b {
  max-width: 100%;
  overflow: hidden;
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-item-tag {
  position: absolute;
  top: -9px;
  left: 50%;
  z-index: 1;
  padding: 1px 7px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font: 400 .6rem var(--font-display);
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}

.bx-box.missed .bx-item-tag {
  display: none;
}

@media (max-width: 620px) {
  .bx-thumb {
    width: 40px;
    height: 40px;
  }

  .bx-box.is-item .bx-prize b {
    font-size: .68rem;
  }
}

.hub-canvas,
.hub-hud,
.hub-extras {
  display: none;
}

.menu-screen.hub-mode {
  overflow: hidden;
  background: #0a0f0c;
}

.menu-screen.hub-mode .hub-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  touch-action: none;
  outline: none;
}

.menu-screen.hub-mode .menu-canvas,
.menu-screen.hub-mode:not(.classic-open) .lobby-shell {
  display: none;
}

.menu-screen.hub-mode .hub-hud,
.menu-screen.hub-mode .hub-extras {
  display: block;
}

.menu-screen.hub-mode.classic-open {
  overflow-y: auto;
}

.menu-screen.hub-mode.classic-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(14, 4, 18, .72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.menu-screen.hub-mode.classic-open .lobby-shell {
  position: relative;
  z-index: 2;
}

.menu-screen.hub-mode.classic-open .hub-hud,
.menu-screen.hub-mode.classic-open .hub-prompt,
.menu-screen.hub-mode.classic-open .hub-act,
.menu-screen.hub-mode.classic-open .hub-eye,
.menu-screen.hub-mode.classic-open .hub-banner {
  display: none !important;
}

.menu-screen.hub-mode.hud-hidden .hub-hud {
  display: none;
}

.hub-back {
  display: none;
}

.menu-screen.hub-mode.classic-open .hub-back {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  z-index: 30;
  display: block;
  padding: 10px 20px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb070, #ff7a1e);
  color: var(--ink);
  font: 400 1rem var(--font-display);
  box-shadow: 0 4px 0 var(--ink), 0 10px 26px rgba(0, 0, 0, .45);
  transform: translateX(-50%);
  cursor: var(--cursor-pointer);
}

.hub-hud {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.hub-hud > *,
.hub-hud .hub-top > * {
  pointer-events: auto;
}

.hub-top {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  right: max(70px, env(safe-area-inset-right));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.hub-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 7px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: rgba(46, 18, 54, .82);
  color: #fff;
  font: inherit;
  text-align: left;
  box-shadow: 0 5px 0 var(--ink), 0 12px 28px rgba(0, 0, 0, .4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hub-profile {
  cursor: var(--cursor-pointer);
  transition: transform .12s ease;
}

.hub-profile:hover {
  transform: translateY(-2px);
}

.hub-avatar .avatar {
  width: 46px;
  height: 46px;
}

.hub-who {
  display: grid;
  gap: 2px;
  min-width: 110px;
}

.hub-who b {
  font: 400 1.1rem var(--font-display);
}

.hub-who small {
  color: #3ee0ff;
  font-weight: 900;
  font-size: .74rem;
}

.hub-xp {
  display: block;
  height: 7px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  overflow: hidden;
}

.hub-xp > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8fffcf, #2bd38a);
}

.hub-zone {
  padding: 8px 18px 8px 10px;
}

.hub-zone b {
  display: block;
  color: #ffd23f;
  font: 400 1.1rem var(--font-display);
  letter-spacing: .02em;
}

.hub-zone small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-weight: 800;
  font-size: .74rem;
}

.hub-moon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbe8, #ffe9a8 55%, #d9b860);
  box-shadow: 0 0 18px rgba(255, 233, 168, .7);
}

.hub-wallet {
  display: flex;
  gap: 8px;
}

.hub-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 9px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  font: 400 1.05rem var(--font-display);
  box-shadow: 0 4px 0 var(--ink);
}

.hub-pill.coins {
  background: linear-gradient(180deg, #ffe680, #ffc21f);
  color: var(--ink);
}

.hub-pill.cash {
  background: linear-gradient(180deg, #8ff07a, #3ddc72);
  color: var(--ink);
}

.hub-dock {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: rgba(46, 18, 54, .84);
  box-shadow: 0 6px 0 var(--ink), 0 16px 34px rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateX(-50%);
}

.hub-btn {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 64px;
  padding: 7px 6px 6px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: linear-gradient(180deg, #6a2f6c, #4a1e4e);
  color: #fff;
  font: inherit;
  box-shadow: 0 4px 0 var(--ink);
  cursor: var(--cursor-pointer);
  transition: transform .1s ease, filter .1s ease;
}

.hub-btn i {
  font-style: normal;
  font-size: 1.35rem;
  line-height: 1;
}

.hub-btn span {
  font: 400 .8rem var(--font-display);
  letter-spacing: .03em;
}

.hub-btn:hover,
.hub-btn.on {
  filter: brightness(1.18);
  transform: translateY(-3px);
}

.hub-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}

.hub-btn.hub-play {
  min-width: 96px;
  padding: 12px 10px 10px;
  background: linear-gradient(180deg, #ff8a3c, #e0461a);
  box-shadow: 0 5px 0 var(--ink), 0 0 22px rgba(255, 138, 30, .45);
}

.hub-btn.hub-play i {
  font-size: 1.7rem;
}

.hub-btn.hub-play span {
  font-size: 1.05rem;
}

.hub-badge {
  position: absolute;
  top: -9px;
  right: -7px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #ff3b5c;
  color: #fff;
  font: 900 .72rem/18px var(--font-body);
  font-style: normal;
}

.hub-badge[hidden] {
  display: none;
}

.hub-pop {
  position: absolute;
  left: 50%;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 110px);
  z-index: 2;
  padding: 14px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: linear-gradient(180deg, #5c2a5e, #3c1a3e);
  box-shadow: 0 6px 0 var(--ink), 0 20px 40px rgba(0, 0, 0, .5);
  transform: translateX(-50%);
  animation: hubPop .18s cubic-bezier(.2, 1.4, .4, 1) both;
}

.hub-pop[hidden] {
  display: none;
}

@keyframes hubPop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(.94);
  }
}

.hub-play-pop {
  display: grid;
  gap: 10px;
  width: min(330px, calc(100vw - 24px));
}

.hub-pop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.hub-pop-head > div {
  flex: 1;
}

.hub-pop-head small {
  display: block;
  color: #ffd23f;
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.hub-pop-head b {
  color: #fff;
  font: 400 1.5rem var(--font-display);
}

.hub-arrow {
  width: 38px;
  height: 38px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #6a2f6c;
  color: #fff;
  font: 400 1.4rem/1 var(--font-display);
  box-shadow: 0 3px 0 var(--ink);
  cursor: var(--cursor-pointer);
}

.hub-sizes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: rgba(19, 7, 20, .55);
}

.hub-sizes button {
  min-height: 38px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font: 400 1.05rem var(--font-display);
  cursor: var(--cursor-pointer);
}

.hub-sizes button.on {
  background: linear-gradient(180deg, #ffe066, var(--yellow));
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}

.hub-sizes button:disabled {
  opacity: .35;
}

.hub-find {
  display: grid;
  justify-items: center;
  min-height: 62px;
}

.hub-find b {
  font: 400 1.5rem var(--font-display);
}

.hub-find small {
  font-weight: 900;
  font-size: .72rem;
  opacity: .85;
}

.hub-find.small {
  min-height: 50px;
}

.hub-find.small b {
  font-size: 1.2rem;
}

.hub-loot-pop {
  display: grid;
  grid-template-columns: repeat(4, 96px);
  gap: 8px;
}

.hub-loot-pop button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 6px 10px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffe680, #ffc21f);
  color: var(--ink);
  font: inherit;
  box-shadow: 0 4px 0 var(--ink);
  cursor: var(--cursor-pointer);
}

.hub-loot-pop button:nth-child(2) {
  background: linear-gradient(180deg, #ffb070, #ff7a1e);
}

.hub-loot-pop button:nth-child(3) {
  background: linear-gradient(180deg, #ff8fa3, #ff4b6e);
}

.hub-loot-pop button:nth-child(4) {
  background: linear-gradient(180deg, #a6ffbc, #3ddc72);
}

.hub-loot-pop i {
  font-style: normal;
  font-size: 1.7rem;
}

.hub-loot-pop b {
  font: 400 .92rem var(--font-display);
}

.hub-loot-pop em {
  position: absolute;
  top: -9px;
  right: -7px;
  min-width: 24px;
  height: 24px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #3ddc72;
  font: 900 .78rem/20px var(--font-body);
  font-style: normal;
}

.hub-emotes {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
}

.hub-round {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: rgba(74, 30, 78, .9);
  color: #fff;
  font-size: 1.4rem;
  box-shadow: 0 4px 0 var(--ink), 0 10px 22px rgba(0, 0, 0, .4);
  cursor: var(--cursor-pointer);
}

.hub-emote-bar {
  position: absolute;
  right: 0;
  bottom: 66px;
  display: grid;
  grid-template-columns: repeat(3, 48px);
  gap: 6px;
  padding: 8px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: linear-gradient(180deg, #5c2a5e, #3c1a3e);
  box-shadow: 0 5px 0 var(--ink);
}

.hub-emote-bar[hidden] {
  display: none;
}

.hub-emote-bar button {
  height: 46px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: rgba(19, 7, 20, .55);
  color: #fff;
  font: 400 1.3rem var(--font-display);
  cursor: var(--cursor-pointer);
}

.hub-emote-bar button:hover {
  background: #a26bff;
}

.hub-emote-bar button.lv {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 210, 63, .28), rgba(19, 7, 20, .55));
  box-shadow: inset 0 0 0 2px rgba(255, 210, 63, .55);
}

.hub-emote-bar button[hidden] {
  display: none;
}

.hub-emote-bar button.lv small {
  position: absolute;
  right: -4px;
  bottom: -6px;
  padding: 0 4px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--yellow);
  color: var(--ink);
  font: 900 .55rem/1.2 var(--font-body);
}

.hub-emote-bar button.txt {
  color: #ffd23f;
  text-shadow: 0 2px 0 var(--ink), 0 -1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink);
}

.hub-eye {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 6;
  width: 46px;
  height: 46px;
  font-size: 1.2rem;
}

.menu-screen.hud-hidden .hub-eye {
  opacity: .7;
}

.hub-gear {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: calc(max(14px, env(safe-area-inset-right)) + 54px);
  z-index: 6;
  width: 46px;
  height: 46px;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  transition: transform .14s ease, filter .14s ease;
}

.hub-gear span {
  display: block;
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
}

.hub-gear:hover {
  filter: brightness(1.2);
  transform: translateY(-2px);
}

.hub-gear:hover span {
  transform: rotate(90deg);
}

.hub-gear:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}

.hub-gear:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.menu-screen.hub-mode.classic-open .hub-gear {
  display: none;
}

.menu-screen.hud-hidden .hub-gear {
  opacity: .7;
}

.hub-top {
  right: calc(max(14px, env(safe-area-inset-right)) + 112px);
}

@media (max-width: 760px) {
  .hub-gear {
    top: calc(max(14px, env(safe-area-inset-top)) + 54px);
    right: max(14px, env(safe-area-inset-right));
  }

  .hub-top {
    right: max(66px, env(safe-area-inset-right));
  }

  .hub-minimap,
  .hub-mm-show {
    top: calc(max(14px, env(safe-area-inset-top)) + 114px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-gear span {
    transition: none;
  }
}

.hub-banner {
  position: fixed;
  top: 24%;
  left: 50%;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #ffd23f;
  text-align: center;
  opacity: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

.hub-banner b {
  font: 400 clamp(1.8rem, 5vw, 3rem) var(--font-display);
  text-shadow: 0 4px 0 var(--ink), 0 0 28px rgba(255, 138, 30, .6);
  letter-spacing: .03em;
}

.hub-banner small {
  color: #fff;
  font-weight: 900;
  text-shadow: 0 2px 0 var(--ink);
}

.hub-banner.show {
  animation: hubBanner 3.2s ease both;
}

@keyframes hubBanner {
  0% { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.9); }
  12% { opacity: 1; transform: translateX(-50%) scale(1.04); }
  20%, 78% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-12px); }
}

.hub-prompt {
  position: fixed;
  left: 50%;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 112px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe680, #ffc21f);
  color: var(--ink);
  font: 400 1.05rem var(--font-display);
  box-shadow: 0 5px 0 var(--ink), 0 0 26px rgba(255, 210, 63, .45);
  transform: translateX(-50%);
  animation: hubPrompt 1.4s ease-in-out infinite;
  pointer-events: none;
}

.hub-prompt[hidden] {
  display: none;
}

.hub-prompt kbd {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 3px solid var(--ink);
  border-radius: 9px;
  background: #fff;
  font: 400 1rem var(--font-display);
}

@keyframes hubPrompt {
  50% { transform: translateX(-50%) translateY(-4px); }
}

.menu-screen.hud-hidden .hub-prompt {
  bottom: max(24px, env(safe-area-inset-bottom));
}

.hub-stick {
  position: fixed;
  z-index: 4;
  width: 116px;
  height: 116px;
  border: 3px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(19, 7, 20, .35);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hub-stick[hidden] {
  display: none;
}

.hub-stick i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffd23f);
}

.hub-act {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 190px);
  z-index: 6;
  width: 74px;
  height: 74px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe680, #ffb41f);
  font-size: 1.9rem;
  box-shadow: 0 5px 0 var(--ink), 0 0 26px rgba(255, 210, 63, .6);
  cursor: var(--cursor-pointer);
}

.hub-act[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .hub-top {
    flex-wrap: wrap;
    right: max(66px, env(safe-area-inset-right));
  }

  .hub-zone {
    order: 3;
    padding: 5px 12px 5px 6px;
  }

  .hub-zone b {
    font-size: .95rem;
  }

  .hub-moon {
    width: 22px;
    height: 22px;
  }

  .hub-who {
    min-width: 0;
  }

  .hub-who b {
    font-size: .95rem;
  }

  .hub-avatar .avatar {
    width: 36px;
    height: 36px;
  }

  .hub-pill {
    padding: 5px 10px 5px 7px;
    font-size: .9rem;
  }

  .hub-dock {
    left: 10px;
    right: 10px;
    justify-content: space-between;
    gap: 4px;
    padding: 6px;
    transform: none;
  }

  .hub-btn {
    min-width: 0;
    flex: 1;
    padding: 6px 2px 5px;
  }

  .hub-btn span {
    font-size: .64rem;
  }

  .hub-btn i {
    font-size: 1.1rem;
  }

  .hub-btn.hub-play {
    flex: 1.4;
    min-width: 0;
  }

  .hub-emotes {
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 92px);
  }

  .hub-round {
    width: 46px;
    height: 46px;
  }

  .hub-pop {
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 92px);
  }

  .hub-prompt {
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 96px);
    font-size: .9rem;
  }

  .hub-loot-pop {
    grid-template-columns: repeat(2, 84px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-prompt,
  .hub-banner.show {
    animation: none;
  }

  .hub-banner.show {
    opacity: 1;
  }
}

.pack-open {
  --po-rgb: 62, 224, 255;
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  transition: opacity .3s ease;
  user-select: none;
  -webkit-user-select: none;
}

.pack-open.show {
  opacity: 1;
}

.pack-open.closing {
  opacity: 0;
}

.po-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, #4a1a4f 0%, #210d22 55%, #12060f 100%);
}

.po-rays {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 220vmax;
  height: 220vmax;
  margin: -110vmax 0 0 -110vmax;
  background: repeating-conic-gradient(from 0deg, rgba(var(--po-rgb), .16) 0deg 9deg, transparent 9deg 22deg);
  opacity: .25;
  animation: poSpin 40s linear infinite;
  transition: opacity .8s ease;
  mask-image: radial-gradient(circle, #000 0%, transparent 55%);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 55%);
}

.pack-open.opened .po-rays {
  opacity: 1;
  animation-duration: 18s;
}

.po-glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 70vmin;
  height: 70vmin;
  margin: -35vmin 0 0 -35vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--po-rgb), .35), transparent 65%);
  opacity: .45;
  transition: opacity .6s ease, transform .6s ease;
}

.pack-open.opened .po-glow {
  opacity: 1;
  transform: scale(1.3);
}

.po-skip {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 16px;
  z-index: 3;
  padding: 6px 14px;
  border: 2px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(33, 13, 34, .6);
  color: #f3e6f4;
  font-family: var(--font-display);
  font-size: .9rem;
  cursor: var(--cursor-pointer);
}

.po-skip:hover {
  border-color: rgba(var(--po-rgb), .8);
}

.pack-open.finished .po-skip {
  display: none;
}

.po-stage {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(100%, 720px);
  min-height: min(100%, 640px);
  align-content: center;
  padding: 16px;
}

.po-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: #fff;
  letter-spacing: .02em;
  text-align: center;
  text-shadow: 0 3px 0 var(--ink), 0 0 24px rgba(var(--po-rgb), .55);
}

.po-hint {
  margin: 0;
  min-height: 1.4em;
  color: #f0dcf2;
  font-weight: 800;
  text-align: center;
}

.pack-open.nudge .po-hint {
  animation: poNudge .45s ease;
  color: #fff;
}

.po-pack-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 260px;
  height: 380px;
  perspective: 1100px;
  transition: transform .7s cubic-bezier(.5, -0.3, .7, 1), opacity .5s ease .25s;
}

.pack-open.dealt .po-pack-wrap {
  transform: translateY(140px) scale(.82);
  opacity: 0;
  pointer-events: none;
}

.po-pack {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --tear: 0;
  position: relative;
  width: 230px;
  height: 340px;
  border-radius: 14px 14px 18px 18px;
  outline: none;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .18s ease-out;
  animation: poFloat 3.2s ease-in-out infinite;
  cursor: var(--cursor-pointer);
  touch-action: none;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55));
}

.po-pack:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 6px;
}

.pack-open.nudge .po-pack {
  animation: poShake .45s ease;
}

.po-face {
  position: absolute;
  inset: 0;
  border: 3px solid var(--ink);
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 38%, rgba(var(--po-rgb), .35), transparent 55%),
    linear-gradient(160deg, #7a1d6b 0%, #4a1450 45%, #2a0d34 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, .12),
    inset 8px 0 14px rgba(255, 255, 255, .08),
    inset -10px 0 18px rgba(0, 0, 0, .35),
    0 0 0 1px rgba(var(--po-rgb), .4);
  overflow: hidden;
}

.po-strip {
  position: absolute;
  inset: 0 0 auto;
  height: 17%;
  z-index: 3;
  border-bottom: 2px solid rgba(0, 0, 0, .35);
  background: linear-gradient(180deg, #8f2a7d, #5c1a5a);
  transform-origin: 100% 100%;
  transform: translateY(calc(var(--tear) * -6px)) rotate(calc(var(--tear) * -5deg));
  transition: transform .08s linear;
}

.po-strip-label {
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .55);
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .25em;
  white-space: nowrap;
}

.po-crimp {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 3px, rgba(0, 0, 0, .3) 3px 6px);
}

.po-crimp.bottom {
  top: auto;
  bottom: 0;
  height: 14px;
  z-index: 3;
}

.po-perf {
  position: absolute;
  left: 8px;
  right: 8px;
  top: calc(17% - 1px);
  z-index: 4;
  border-top: 2px dashed rgba(255, 255, 255, .45);
  transition: opacity .2s;
}

.po-tear {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(17% - 6px);
  height: 12px;
  z-index: 5;
  background: conic-gradient(from 135deg at 50% 0, #fff7ff 90deg, transparent 0) 0 0 / 10px 100% repeat-x;
  filter: drop-shadow(0 0 6px rgba(var(--po-rgb), .9));
  clip-path: inset(0 calc((1 - var(--tear)) * 100%) 0 0);
}

.po-body {
  position: absolute;
  inset: 17% 0 0;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  justify-items: center;
  padding: 10px 12px 24px;
}

.po-brand {
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .3em;
  color: var(--yellow);
  text-shadow: 0 2px 0 var(--ink);
}

.po-art {
  position: relative;
  width: 100%;
  min-height: 0;
}

.po-art img {
  position: absolute;
  bottom: 0;
  height: 92%;
  max-width: 62%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .3));
  pointer-events: none;
}

.po-art .po-art-0 {
  left: 2%;
  transform: rotate(-6deg);
  z-index: 1;
}

.po-art .po-art-1 {
  right: 2%;
  transform: rotate(6deg);
}

.po-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1;
  color: #fff;
  letter-spacing: .03em;
  text-transform: uppercase;
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: 0 4px 0 var(--ink), 0 0 18px rgba(var(--po-rgb), .7);
}

.po-badge {
  margin-top: 6px;
  padding: 2px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgb(var(--po-rgb));
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .06em;
  box-shadow: 0 3px 0 var(--ink);
}

.po-holo {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: conic-gradient(from 200deg at var(--mx) 30%, rgba(255, 94, 168, .18), rgba(62, 224, 255, .2), rgba(255, 210, 63, .16), rgba(183, 123, 255, .2), rgba(255, 94, 168, .18));
  mix-blend-mode: color-dodge;
  opacity: .55;
  pointer-events: none;
}

.po-sheen {
  position: absolute;
  inset: -20%;
  z-index: 2;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .38) 48%, transparent 58%);
  transform: translateX(calc(var(--mx) - 50%));
  pointer-events: none;
  transition: transform .18s ease-out;
}

.pack-open.torn .po-strip {
  animation: poFlyOff .6s cubic-bezier(.3, .7, .4, 1) forwards;
  transition: none;
}

.pack-open.torn .po-perf,
.pack-open.torn .po-guide {
  opacity: 0;
}

.pack-open.torn .po-pack {
  animation: poPop .4s ease;
}

.po-pack-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 14%;
  width: 200px;
  height: 360px;
  margin-left: -100px;
  transform: translateY(-100%) scaleY(0);
  transform-origin: 50% 100%;
  background: linear-gradient(0deg, rgba(var(--po-rgb), .85), rgba(255, 255, 255, .5) 30%, transparent);
  filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: transform .45s ease, opacity .45s ease;
}

.pack-open.opened .po-pack-wrap::after {
  transform: translateY(-100%) scaleY(1);
  opacity: 1;
}

.po-guide {
  position: absolute;
  left: 30px;
  right: 30px;
  top: calc(20px + 340px * .085);
  height: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.po-guide-line {
  position: absolute;
  inset: -2px 0 auto;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: poGuideLine 1.6s ease-in-out infinite;
}

.po-hand {
  position: absolute;
  top: 6px;
  left: 0;
  font-style: normal;
  font-size: 2rem;
  filter: drop-shadow(0 3px 0 var(--ink));
  animation: poGuideHand 1.6s ease-in-out infinite;
}

.pack-open.tearing .po-guide {
  opacity: 0;
}

.po-cards {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: flex;
  justify-content: center;
  gap: clamp(14px, 4vw, 34px);
  transform: translateY(-50%);
  pointer-events: none;
}

.pack-open.dealt .po-cards {
  pointer-events: auto;
}

.po-card {
  --rarity-rgb: var(--po-rgb);
  position: relative;
  width: clamp(140px, 30vw, 215px);
  aspect-ratio: 5 / 7;
  padding: 0;
  border: 0;
  background: none;
  perspective: 900px;
  cursor: var(--cursor-pointer);
  opacity: 0;
  transform: translateY(150px) scale(.5) rotate(calc((var(--i) - .5) * 30deg));
  animation: poDeal .75s cubic-bezier(.2, 1.3, .4, 1) forwards;
  animation-delay: calc(var(--i) * .22s);
}

.po-card:focus-visible {
  outline: none;
}

.po-card:focus-visible .po-card-inner {
  box-shadow: 0 0 0 3px var(--yellow), 0 18px 30px rgba(0, 0, 0, .5);
}

.po-card-inner {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.3, 1.4, .5, 1);
  box-shadow: 0 18px 30px rgba(0, 0, 0, .5);
}

.po-card:not(.flipped):hover .po-card-inner {
  transform: translateY(-8px) rotateZ(-2deg);
}

.po-card.flipped .po-card-inner {
  transform: rotateY(180deg);
}

.po-card-back,
.po-card-front {
  position: absolute;
  inset: 0;
  display: grid;
  justify-items: center;
  border: 3px solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.po-card-back {
  align-content: center;
  gap: 6px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 10px, transparent 10px 20px),
    radial-gradient(circle at 50% 45%, rgba(var(--rarity-rgb), .45), transparent 60%),
    linear-gradient(160deg, #5c1a5a, #2a0d34);
  box-shadow: inset 0 0 0 4px rgba(var(--rarity-rgb), .55), inset 0 0 26px rgba(var(--rarity-rgb), .4);
}

.po-card-back::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .25) 48%, transparent 60%);
  background-size: 260% 100%;
  animation: shimmer 2.4s linear infinite;
}

.po-card-logo {
  font-style: normal;
  font-size: 3rem;
  filter: drop-shadow(0 4px 0 var(--ink));
  animation: poFloat 2.4s ease-in-out infinite;
}

.po-card-back b {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--yellow);
  letter-spacing: .15em;
  text-shadow: 0 2px 0 var(--ink);
}

.po-card-back small {
  color: #fff;
  font-weight: 800;
  animation: poBlink 1.4s ease-in-out infinite;
}

.po-card-front {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 3px;
  padding: 10px 10px 12px;
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 40%, rgba(var(--rarity-rgb), .55), transparent 62%),
    linear-gradient(180deg, #4a1a4f, #2a0d34);
  box-shadow: inset 0 0 0 4px rgb(var(--rarity-rgb)), inset 0 -6px 0 rgba(var(--rarity-rgb), .6);
}

.po-card.flipped .po-card-front {
  animation: poGlow 2s ease-in-out .7s infinite;
}

.po-card-rarity {
  padding: 1px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgb(var(--rarity-rgb));
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.po-card-art {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding-top: 6px;
}

.po-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35));
  transform: scale(.4);
  opacity: 0;
}

.po-card.flipped .po-card-art img {
  animation: poArtPop .6s cubic-bezier(.2, 1.6, .4, 1) .35s forwards;
}

.po-card-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 3px 0 var(--ink);
}

.po-card-desc {
  color: #f0dcf2;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.po-card-holo {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 45%, rgba(var(--rarity-rgb), .25) 52%, transparent 65%);
  background-size: 260% 100%;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: shimmer 3s linear infinite;
}

.po-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  animation: poRise .45s ease both;
}

.po-actions[hidden] {
  display: none;
}

.po-actions .btn-3d {
  min-width: 140px;
}

.po-title,
.po-hint {
  transition: transform .5s ease;
}

.pack-open.dealt .po-title,
.pack-open.dealt .po-hint {
  transform: translateY(-120px);
}

@keyframes poSpin {
  to { transform: rotate(360deg); }
}

@keyframes poFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes poShake {
  0%, 100% { translate: 0 0; }
  20% { translate: -6px 0; }
  40% { translate: 6px 0; }
  60% { translate: -4px 0; }
  80% { translate: 4px 0; }
}

@keyframes poNudge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes poPop {
  0% { scale: 1; }
  40% { scale: 1.07; }
  100% { scale: 1; }
}

@keyframes poFlyOff {
  to {
    transform: translate(170px, -220px) rotate(38deg);
    opacity: 0;
  }
}

@keyframes poGuideLine {
  0% { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}

@keyframes poGuideHand {
  0% { left: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: calc(100% - 24px); opacity: 0; }
}

@keyframes poDeal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(calc((var(--i) - .5) * 6deg));
  }
}

@keyframes poArtPop {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes poGlow {
  0%, 100% { box-shadow: inset 0 0 0 4px rgb(var(--rarity-rgb)), inset 0 -6px 0 rgba(var(--rarity-rgb), .6), 0 0 18px rgba(var(--rarity-rgb), .35); }
  50% { box-shadow: inset 0 0 0 4px rgb(var(--rarity-rgb)), inset 0 -6px 0 rgba(var(--rarity-rgb), .6), 0 0 34px rgba(var(--rarity-rgb), .75); }
}

@keyframes poBlink {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

@keyframes poRise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@media (max-width: 560px) {
  .po-pack-wrap {
    width: 220px;
    height: 330px;
  }

  .po-pack {
    width: 200px;
    height: 296px;
  }

  .po-guide {
    top: calc(17px + 296px * .085);
  }

  .po-name {
    font-size: 1.7rem;
  }

  .po-card-desc {
    font-size: .64rem;
  }

  .pack-open.dealt .po-title,
  .pack-open.dealt .po-hint {
    transform: translateY(-150px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .po-rays,
  .po-pack,
  .po-card-logo,
  .po-hand,
  .po-guide-line {
    animation: none;
  }

  .po-card {
    animation-duration: .01s;
  }
}

.cat-tabs .seg[hidden] {
  display: none;
}

.foot.pack {
  background: linear-gradient(90deg, #3ee0ff, #b77bff);
  color: var(--ink);
}

.pack-ribbon {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 1;
  padding: 1px 7px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: linear-gradient(135deg, #3ee0ff, #b77bff);
  color: var(--ink);
  font-family: var(--font-display);
  font-style: normal;
  font-size: .8rem;
  transform: rotate(8deg);
}

.item-grid .pack-card {
  --rarity: #3ee0ff;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-items: start;
  gap: 18px;
  padding: 16px 20px;
  text-align: left;
}

.pack-card .mini-pack {
  position: relative;
  width: 96px;
  height: 140px;
  border: 3px solid var(--ink);
  border-radius: 10px 10px 12px 12px;
  background:
    radial-gradient(circle at 50% 45%, rgba(62, 224, 255, .4), transparent 60%),
    linear-gradient(160deg, #7a1d6b, #2a0d34);
  box-shadow: 0 6px 0 var(--ink), inset 0 0 0 2px rgba(255, 255, 255, .12);
  overflow: hidden;
  transform: rotate(-5deg);
  transition: transform .2s ease;
}

.pack-card:hover .mini-pack,
.pack-card.selected .mini-pack {
  transform: rotate(-2deg) translateY(-4px) scale(1.04);
}

.mini-pack::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 15%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 2px, rgba(0, 0, 0, .3) 2px 4px);
  border-bottom: 2px dashed rgba(255, 255, 255, .45);
}

.mini-pack::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .35) 48%, transparent 58%);
  background-size: 260% 100%;
  animation: shimmer 2.6s linear infinite;
}

.mini-pack img {
  position: absolute;
  bottom: 24%;
  height: 50%;
  max-width: 62%;
  object-fit: contain;
}

.mini-pack img:first-of-type {
  left: 2%;
  transform: rotate(-6deg);
  z-index: 1;
}

.mini-pack img:last-of-type {
  right: 2%;
  transform: rotate(6deg);
}

.mini-pack b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .8rem;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 0 var(--ink);
}

.pack-card-info {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.item-card .pack-card-info b {
  font-size: 1.35rem;
  text-align: left;
}

.pack-card-info small {
  color: #f0dcf2;
  font-weight: 700;
  line-height: 1.3;
}

.pack-contents {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pack-contents span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 4px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #3c1a3e;
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
}

.pack-contents img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.pack-contents i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3ee0ff;
  box-shadow: 0 0 6px #3ee0ff;
}

.stage-info .pack-contents {
  justify-content: center;
  margin: 2px 0 6px;
}

.claw-panel {
  width: min(780px, 100%);
  padding: 20px 22px 22px;
  background:
    radial-gradient(circle at 30% 0%, rgba(125, 255, 154, .18), transparent 50%),
    radial-gradient(circle at 80% 10%, rgba(183, 123, 255, .25), transparent 55%),
    linear-gradient(180deg, var(--panel-hi), var(--panel) 40%, var(--panel-lo));
}

.claw-panel.shake {
  animation: boomShake .32s ease;
}

.cl-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 48px;
  margin-bottom: 14px;
}

.cl-logo {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: none;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(160deg, #7dff9a, #2fa35a);
  box-shadow: 0 4px 0 var(--ink), 0 0 18px rgba(125, 255, 154, .45);
  font-size: 1.6rem;
}

.cl-title {
  min-width: 0;
  flex: 1;
}

.cl-title h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 3px 0 var(--ink), 0 0 16px rgba(125, 255, 154, .5);
}

.cl-title small {
  color: #f0dcf2;
  font-weight: 700;
}

.cl-wallet {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cl-wallet span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 6px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #2a1236;
  color: #fff;
  font-family: var(--font-display);
}

.cl-body {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.cl-machine {
  position: relative;
  padding: 10px 10px 14px;
  border: 4px solid var(--ink);
  border-radius: 22px;
  background: linear-gradient(180deg, #4a2260, #2a1238);
  box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px rgba(125, 255, 154, .35), 0 0 26px rgba(183, 123, 255, .35);
}

.claw-panel.aiming .cl-machine {
  box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px rgba(125, 255, 154, .8), 0 0 34px rgba(125, 255, 154, .45);
}

.cl-marquee {
  margin: -2px 0 8px;
  padding: 4px 0 6px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: #1a0b22;
  color: #7dff9a;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: .12em;
  text-align: center;
  text-shadow: 0 0 10px rgba(125, 255, 154, .9);
  animation: clNeon 2.6s ease-in-out infinite;
}

.cl-marquee span {
  text-shadow: none;
}

.cl-glass {
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: #1b0b26;
}

.cl-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 360 / 470;
  touch-action: none;
  cursor: var(--cursor-pointer);
}

.cl-timer {
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #1a0b22;
}

.cl-timer i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ff5e8f, #ffd23f, #7dff9a);
  transform-origin: left center;
  transform: scaleX(0);
}

.cl-side {
  display: grid;
  gap: 12px;
  align-content: start;
}

.cl-target {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-height: 56px;
  padding: 10px 12px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #2a1236;
  color: #fff;
  font-weight: 800;
}

.cl-target b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
}

.cl-empty {
  color: #cdb8d2;
}

.cl-controls {
  display: grid;
  grid-template-columns: 58px 1fr 58px;
  gap: 8px;
}

.cl-move {
  height: 58px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(180deg, #6b3a7e, #4a2260);
  box-shadow: 0 4px 0 var(--ink);
  color: #fff;
  font-size: 1.3rem;
  cursor: var(--cursor-pointer);
  touch-action: none;
  user-select: none;
}

.cl-move:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink);
}

.cl-move:disabled {
  opacity: .45;
}

.cl-drop {
  height: 58px;
  font-size: 1.35rem;
  letter-spacing: .08em;
}

.claw-panel.aiming .cl-drop {
  animation: clPulse 1s ease-in-out infinite;
}

.cl-pay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cl-pay[hidden] {
  display: none;
}

.cl-pay .btn-3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cl-note {
  margin: -4px 0 0;
  min-height: 1.2em;
  color: #e7d3ea;
  font-size: .85rem;
  font-weight: 700;
  text-align: center;
}

.cl-odds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cl-chip {
  --c: #9fb3d1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 22%, #2a1236);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
}

.cl-chip b {
  color: var(--c);
  text-transform: capitalize;
}

.cl-chip.rarity-rare { --c: #3ee0ff; }
.cl-chip.rarity-epic { --c: #b77bff; }
.cl-chip.rarity-legendary { --c: #ffd23f; }

.cl-restock {
  color: #cdb8d2;
  font-weight: 700;
}

.cl-prizes {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #2a1236;
}

.cl-prizes h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .02em;
}

.cl-prizes h3 small {
  color: #cdb8d2;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 800;
}

.cl-prize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px 6px;
}

.cl-prize {
  --c: 159, 179, 209;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
  transition: transform .15s ease, opacity .2s ease;
}

.cl-prize.rarity-rare { --c: 62, 224, 255; }
.cl-prize.rarity-epic { --c: 183, 123, 255; }
.cl-prize.rarity-legendary { --c: 255, 210, 63; }

.cl-prize-bubble {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 32%),
    radial-gradient(circle at 50% 60%, rgba(var(--c), .55), rgba(var(--c), .2) 70%);
  box-shadow: inset 0 0 0 2px rgba(var(--c), .9), 0 3px 0 var(--ink);
}

.cl-prize-bubble img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  pointer-events: none;
}

.cl-prize b {
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-prize small {
  color: rgb(var(--c));
  font-size: .7rem;
  font-weight: 900;
}

.cl-prize.targeted {
  transform: translateY(-3px) scale(1.06);
}

.cl-prize.targeted .cl-prize-bubble {
  box-shadow: inset 0 0 0 2px rgba(var(--c), 1), 0 3px 0 var(--ink), 0 0 0 3px #7dff9a, 0 0 16px rgba(125, 255, 154, .6);
}

.cl-prize.gone {
  opacity: .35;
  filter: grayscale(.6);
}

.cl-win-count {
  font-family: "Aller", var(--font-body);
  font-weight: 900;
  color: #fff;
}

.stack-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  z-index: 2;
  color: #fff;
  font-family: "Aller", var(--font-body);
  font-size: .95rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 2px 0 var(--ink);
}

.item-card .stack-badge,
.gift-item .stack-badge {
  top: 4px;
  right: 6px;
  font-size: 1.05rem;
}

.crate-item .stack-badge {
  top: 2px;
  right: 4px;
  font-size: .85rem;
}

.gift-item {
  position: relative;
}

.stage-count {
  color: #fff;
  font-family: "Aller", var(--font-body);
  font-weight: 900;
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
}

.cl-result {
  --cl-rgb: 62, 224, 255;
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 22px;
  background: rgba(19, 7, 20, .78);
  backdrop-filter: blur(3px);
}

.cl-result[hidden] {
  display: none;
}

.cl-win {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(340px, 100%);
  padding: 22px 20px 20px;
  border: 4px solid var(--ink);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 30%, rgba(var(--cl-rgb), .45), transparent 60%),
    linear-gradient(180deg, #4a1a4f, #2a0d34);
  box-shadow: 0 8px 0 var(--ink), 0 0 0 3px rgba(var(--cl-rgb), .7) inset, 0 0 40px rgba(var(--cl-rgb), .5);
  text-align: center;
  animation: rewardIn .5s cubic-bezier(.2, 1.35, .4, 1) both;
}

.cl-win-burst {
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: repeating-conic-gradient(rgba(var(--cl-rgb), .18) 0deg 10deg, transparent 10deg 24deg);
  animation: poSpin 14s linear infinite;
  mask-image: radial-gradient(circle, #000 20%, transparent 60%);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 60%);
  pointer-events: none;
}

.cl-win-kicker {
  color: #7dff9a;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cl-win-thumb {
  width: 140px;
  height: 140px;
}

.cl-win h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  color: #fff;
  text-shadow: 0 3px 0 var(--ink);
}

.cl-win p {
  margin: 0 0 6px;
  color: #f0dcf2;
  font-weight: 700;
}

.cl-win-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

@keyframes clNeon {
  0%, 100% { color: #7dff9a; }
  45% { color: #7dff9a; }
  50% { color: #3c8a52; }
  55% { color: #7dff9a; }
}

@keyframes clPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@media (max-width: 680px) {
  .claw-panel {
    padding: 16px 12px 14px;
  }

  .cl-body {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cl-machine {
    width: min(100%, 340px);
    justify-self: center;
  }

  .cl-title small {
    display: none;
  }

  .cl-head {
    flex-wrap: wrap;
    gap: 10px;
  }

  .cl-wallet {
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }

  .cl-title h2 {
    font-size: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-marquee,
  .claw-panel.aiming .cl-drop,
  .cl-win-burst {
    animation: none;
  }
}

.hub-minimap {
  position: absolute;
  top: calc(max(14px, env(safe-area-inset-top)) + 64px);
  right: max(16px, env(safe-area-inset-right));
  z-index: 2;
  width: 172px;
  height: 172px;
  padding: 0;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: #08100b;
  box-shadow:
    0 0 0 3px #5c2a5e,
    0 0 0 6px var(--ink),
    0 6px 0 4px var(--ink),
    0 0 26px 6px rgba(183, 123, 255, .35);
  cursor: var(--cursor-pointer);
  transition: width .32s cubic-bezier(.2, 1.1, .4, 1), height .32s cubic-bezier(.2, 1.1, .4, 1), top .32s ease, right .32s ease, transform .32s ease;
}

.hub-minimap:hover {
  box-shadow:
    0 0 0 3px #7a3a7c,
    0 0 0 6px var(--ink),
    0 6px 0 4px var(--ink),
    0 0 32px 8px rgba(183, 123, 255, .5);
}

.hub-minimap:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 8px;
}

.hub-mm-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.hub-mm-north {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  border: 2px solid #5c2a5e;
  border-radius: 999px;
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: .78rem;
  white-space: nowrap;
  pointer-events: none;
}

.hub-mm-moon {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset -8px 3px 0 0 #f4e9c8;
  filter: drop-shadow(0 0 6px rgba(244, 233, 200, .7));
  transform: rotate(-20deg);
  pointer-events: none;
}

@media (max-width: 760px) {
  .hub-minimap {
    top: calc(max(14px, env(safe-area-inset-top)) + 58px);
    right: max(12px, env(safe-area-inset-right));
    width: 112px;
    height: 112px;
    border-width: 3px;
  }

  .hub-mm-north {
    top: -12px;
    font-size: .66rem;
  }

  .hub-mm-moon {
    width: 22px;
    height: 22px;
    box-shadow: inset -6px 2px 0 0 #f4e9c8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-minimap {
    transition: none;
  }
}

.hub-minimap {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.hub-minimap:not(.big) {
  cursor: grab;
}

.hub-minimap.dragging {
  cursor: grabbing;
  transition: none;
}

.hub-minimap.is-hidden {
  display: none;
}

.hub-mm-hide {
  position: absolute;
  top: 3%;
  left: 3%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #49204b;
  color: #fff;
  font: 900 1rem/1 var(--font-display);
  box-shadow: 0 2px 0 var(--ink), 0 0 8px rgba(183, 123, 255, .5);
  cursor: var(--cursor-pointer);
  opacity: .85;
}

.hub-mm-hide:hover,
.hub-mm-hide:focus-visible {
  opacity: 1;
  background: #7a3a7c;
}

.hub-mm-resize {
  position: absolute;
  bottom: 3%;
  left: 3%;
  z-index: 2;
  width: 26px;
  height: 26px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 42%, #f0dcf2 42% 50%, transparent 50% 58%, #f0dcf2 58% 66%, transparent 66%),
    #49204b;
  box-shadow: 0 2px 0 var(--ink), 0 0 8px rgba(183, 123, 255, .5);
  cursor: nesw-resize;
  opacity: .85;
}

.hub-minimap.anchor-left .hub-mm-resize {
  left: auto;
  right: 3%;
  background:
    linear-gradient(-45deg, transparent 42%, #f0dcf2 42% 50%, transparent 50% 58%, #f0dcf2 58% 66%, transparent 66%),
    #49204b;
  cursor: nwse-resize;
}

.hub-mm-resize:hover {
  opacity: 1;
}

.hub-mm-show {
  position: absolute;
  top: calc(max(14px, env(safe-area-inset-top)) + 64px);
  right: max(16px, env(safe-area-inset-right));
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7a3a7c, #2a1236);
  box-shadow: 0 4px 0 var(--ink), 0 0 16px rgba(183, 123, 255, .5);
  font-size: 1.35rem;
  cursor: var(--cursor-pointer);
  animation: mmShowIn .3s cubic-bezier(.2, 1.4, .4, 1);
}

.hub-mm-show[hidden] {
  display: none;
}

.hub-mm-show:hover {
  transform: scale(1.06);
}

@keyframes mmShowIn {
  from {
    transform: scale(.4);
    opacity: 0;
  }
}

@media (max-width: 760px) {
  .hub-mm-hide,
  .hub-mm-resize {
    width: 24px;
    height: 24px;
  }

  .hub-mm-show {
    top: calc(max(14px, env(safe-area-inset-top)) + 58px);
    right: max(12px, env(safe-area-inset-right));
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
  }
}

.hub-sound-pop {
  display: grid;
  gap: 12px;
  width: min(300px, calc(100vw - 24px));
}

.hub-sound-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hub-sound-head b {
  color: #fff;
  font: 400 1.4rem var(--font-display);
  text-shadow: 0 2px 0 var(--ink);
}

.hub-mute {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #4a1e4e;
  color: #fff;
  font: 400 .9rem var(--font-display);
  box-shadow: 0 3px 0 var(--ink);
  cursor: var(--cursor-pointer);
}

.hub-mute i {
  font-style: normal;
  font-size: 1rem;
}

.hub-mute:hover {
  filter: brightness(1.15);
}

.hub-mute.on {
  background: linear-gradient(180deg, #ff6b7c, #e0364b);
}

.hub-slider {
  display: grid;
  gap: 6px;
  padding: 9px 12px 11px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: rgba(26, 8, 28, .55);
  cursor: default;
}

.hub-slider-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font: 400 1rem var(--font-display);
}

.hub-slider-label i {
  font-style: normal;
  font-size: 1.05rem;
}

.hub-slider-label em {
  margin-left: auto;
  min-width: 44px;
  padding: 1px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-style: normal;
  font-size: .8rem;
  text-align: center;
}

.hub-slider.off .hub-slider-label em {
  background: #6b5470;
  color: #e9dcef;
}

.hub-slider input[type="range"] {
  --v: 50%;
  width: 100%;
  height: 26px;
  margin: 0;
  background: transparent;
  cursor: var(--cursor-pointer);
  -webkit-appearance: none;
  appearance: none;
}

.hub-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(90deg, #7dff9a, #ffd23f, #ff8a1e) 0 0 / var(--v) 100% no-repeat, #2a1236;
}

.hub-slider input[type="range"]::-moz-range-track {
  height: 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #2a1236;
}

.hub-slider input[type="range"]::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7dff9a, #ffd23f);
}

.hub-slider input[type="range"]::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -8px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd23f 55%, #f0a91a);
  box-shadow: 0 2px 0 var(--ink);
  -webkit-appearance: none;
  appearance: none;
  transition: transform .1s ease;
}

.hub-slider input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd23f 55%, #f0a91a);
}

.hub-slider input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.15);
}

.hub-slider input[type="range"]:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 999px;
}

.hub-slider.off input[type="range"] {
  filter: grayscale(.7) brightness(.85);
}

@media (max-width: 760px) {
  .hub-sound-pop {
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 104px);
  }
}

.gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 75, 75, .18), transparent 55%),
    rgba(20, 6, 22, .86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .22s ease;
}

.gate-overlay.show {
  opacity: 1;
}

.gate-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(420px, 100%);
  padding: 30px 26px 24px;
  border: 4px solid #210d22;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 210, 63, .2), transparent 55%),
    linear-gradient(180deg, #5c2a5e, #49204b 45%, #3c1a3e);
  box-shadow: 0 8px 0 #210d22, 0 30px 70px rgba(0, 0, 0, .55);
  color: #fff;
  text-align: center;
  transform: translateY(18px) scale(.94);
  transition: transform .32s cubic-bezier(.2, 1.4, .4, 1);
}

.gate-overlay.show .gate-card {
  transform: none;
}

.gate-icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin-top: -66px;
  border: 4px solid #210d22;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a6a, #ff4b4b 60%, #c42a3a);
  box-shadow: 0 6px 0 #210d22, 0 0 24px rgba(255, 75, 75, .5);
  font-size: 2.3rem;
  animation: gateBob 2.4s ease-in-out infinite;
}

.gate-card h2 {
  margin: 4px 0 0;
  font-family: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.1;
  text-shadow: 0 3px 0 #210d22;
}

.gate-text {
  margin: 0 0 8px;
  color: #f0dcf2;
  font-weight: 700;
  line-height: 1.45;
}

.gate-actions {
  display: grid;
  gap: 10px;
  width: 100%;
}

.gate-btn {
  width: 100%;
  padding: 13px 18px;
  border: 3px solid #210d22;
  border-radius: 16px;
  font-family: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1.15rem;
  cursor: var(--cursor-pointer, pointer);
  transition: transform .1s ease, filter .1s ease;
}

.gate-btn.primary {
  background: linear-gradient(180deg, #ff6b5b, #e0364b);
  color: #fff;
  box-shadow: 0 5px 0 #210d22;
  text-shadow: 0 2px 0 rgba(33, 13, 34, .5);
}

.gate-btn.ghost {
  background: #3c1a3e;
  color: #f0dcf2;
  box-shadow: 0 4px 0 #210d22;
}

.gate-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.gate-btn:active {
  transform: translateY(2px);
}

.gate-btn:focus-visible {
  outline: 3px solid #ffd23f;
  outline-offset: 3px;
}

@keyframes gateBob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-6px) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .gate-icon {
    animation: none;
  }

  .gate-card,
  .gate-overlay {
    transition: none;
  }
}

.hub-bomb-btn {
  --p: 0deg;
  position: absolute;
  right: calc(max(16px, env(safe-area-inset-right)) + 66px);
  bottom: max(18px, env(safe-area-inset-bottom));
  overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #7a3a7c, #4a1e4e);
  transition: transform .12s ease, box-shadow .2s ease;
}

.hub-bomb-btn:hover {
  transform: translateY(-3px);
}

.hub-bomb-face {
  position: relative;
  z-index: 1;
  line-height: 1;
  transition: filter .2s ease;
}

.hub-bomb-btn.cooling .hub-bomb-face {
  filter: grayscale(1) brightness(.75);
}

.hub-bomb-btn.cooling::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  background: conic-gradient(rgba(20, 6, 22, .72) var(--p), transparent 0);
  pointer-events: none;
}

.hub-bomb-time {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  color: #fff;
  font: 400 .78rem var(--font-display);
  font-style: normal;
  text-shadow: 0 2px 0 var(--ink), 0 0 6px rgba(0, 0, 0, .8);
  pointer-events: none;
}

.hub-bomb-btn.on {
  background: radial-gradient(circle at 35% 30%, #ff8a6a, #e0364b);
  box-shadow: 0 4px 0 var(--ink), 0 0 0 4px rgba(255, 210, 63, .9), 0 0 24px rgba(255, 90, 60, .8);
  animation: bombAimPulse .9s ease-in-out infinite;
}

.hub-bomb-btn.nope {
  animation: bombNope .35s ease;
}

@keyframes bombAimPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes bombNope {
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.hub-aim-tip {
  position: fixed;
  top: calc(max(14px, env(safe-area-inset-top)) + 70px);
  left: 50%;
  z-index: 6;
  padding: 8px 16px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: rgba(46, 18, 54, .92);
  box-shadow: 0 4px 0 var(--ink), 0 0 18px rgba(255, 120, 60, .4);
  color: #fff;
  font: 400 1rem var(--font-display);
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
  animation: hubPrompt .25s cubic-bezier(.2, 1.4, .4, 1) both;
}

.hub-aim-tip.warn {
  border-color: #ff4b4b;
  background: rgba(90, 16, 30, .94);
}

.hub-aim-tip[hidden] {
  display: none;
}

.menu-screen.hud-hidden .hub-aim-tip {
  display: none;
}

.hub-canvas.bomb-aim {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'><circle cx='14' cy='20' r='11' fill='%23231a2e' stroke='%23000' stroke-width='2.5'/><circle cx='10' cy='16' r='3.4' fill='%23fff' fill-opacity='.45'/><rect x='18.5' y='7' width='7' height='5.5' rx='1.6' transform='rotate(38 22 9.7)' fill='%23565067' stroke='%23000' stroke-width='1.6'/><path d='M24.5 6.2 Q27.5 2 30.5 3.6' fill='none' stroke='%23b9894f' stroke-width='2.2' stroke-linecap='round'/><circle cx='30.6' cy='3.6' r='2.8' fill='%23ffd23f'/><circle cx='30.6' cy='3.6' r='1.3' fill='%23fff'/></svg>") 14 20, crosshair;
}

@media (max-width: 760px) {
  .hub-bomb-btn {
    right: calc(max(12px, env(safe-area-inset-right)) + 56px);
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 92px);
  }

  .hub-aim-tip {
    top: auto;
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 160px);
    font-size: .88rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-bomb-btn.on,
  .hub-bomb-btn.nope {
    animation: none;
  }
}

.hub-map-tools {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  gap: 12px;
}

.hub-map-tools.on-map {
  right: auto;
  bottom: auto;
  z-index: 2;
}

.hub-map-tools .hub-bomb-btn,
.hub-map-tools .hub-emotes {
  position: relative;
  right: auto;
  bottom: auto;
}

.hub-map-tools.on-map .hub-emotes {
  position: static;
}

.hub-map-tools.on-map .hub-emote-bar {
  right: auto;
  left: 50%;
  bottom: auto;
  top: calc(100% + 10px);
  transform: translateX(-50%);
}

.hub-map-tools.on-map.above .hub-emote-bar {
  top: auto;
  bottom: calc(100% + 10px);
}

@media (max-width: 760px) {
  .hub-map-tools {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 92px);
    gap: 10px;
  }

  .hub-map-tools.on-map {
    right: auto;
    bottom: auto;
  }

  .hub-map-tools .hub-bomb-btn,
  .hub-map-tools .hub-emotes {
    right: auto;
    bottom: auto;
  }
}

.hub-canvas.hover-player:not(.bomb-aim) {
  cursor: var(--cursor-pointer);
}

.hub-pcard {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 7;
  width: 214px;
  padding: 6px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: linear-gradient(180deg, #5c2a5e, #3c1a3e);
  color: #fff;
  box-shadow: 0 5px 0 var(--ink), 0 14px 32px rgba(19, 7, 20, .55);
  will-change: transform;
}

.hub-pcard.opening {
  animation: hubDropIn .16s ease-out both;
}

@keyframes hubDropIn {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0 round 16px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 16px);
  }
}

.hub-pcard[hidden],
.menu-screen.hub-mode.classic-open .hub-pcard {
  display: none !important;
}

.hub-dd-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px 7px;
  border-bottom: 2px solid rgba(33, 13, 34, .7);
  margin-bottom: 4px;
}

.hub-dd-head em {
  flex: none;
  min-width: 22px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #3ee0ff;
  color: var(--ink);
  font: 400 .72rem/14px var(--font-display);
  font-style: normal;
  text-align: center;
}

.hub-dd-head b {
  min-width: 0;
  overflow: hidden;
  font: 400 1rem var(--font-display);
  letter-spacing: .02em;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 var(--ink);
  white-space: nowrap;
}

.hub-dd-head small {
  margin-left: auto;
  flex: none;
  color: var(--muted);
  font-weight: 800;
  font-size: .72rem;
}

.hub-dd-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #fff;
  font: 800 .86rem var(--font-body);
  text-align: left;
  cursor: var(--cursor-pointer);
  transition: background .1s ease, color .1s ease;
}

.hub-dd-row i {
  width: 20px;
  font-style: normal;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
}

.hub-dd-row:hover:not(:disabled),
.hub-dd-row:focus-visible {
  background: rgba(255, 210, 63, .16);
  color: #ffd23f;
  outline: none;
}

.hub-dd-row.go {
  color: #7dff9a;
}

.hub-dd-row.done {
  color: #8fffcf;
}

.hub-dd-row:disabled {
  cursor: default;
  opacity: .5;
}

.hub-dd-row.done:disabled {
  opacity: 1;
}

.hub-pcard hr {
  height: 2px;
  margin: 4px 6px;
  border: 0;
  background: rgba(33, 13, 34, .7);
}

.hub-dd-wait {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 5px 5px 8px;
  font: 800 .84rem var(--font-body);
}

.hub-dd-wait i {
  width: 20px;
  font-style: normal;
  text-align: center;
}

.hub-dd-wait b {
  color: #ffd23f;
}

.hub-dd-wait button {
  margin-left: auto;
  padding: 3px 9px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #572a59;
  color: #fff;
  font: 800 .72rem var(--font-body);
  box-shadow: 0 2px 0 var(--ink);
  cursor: var(--cursor-pointer);
}

.hub-dd-wait button:hover {
  background: var(--red);
}

.invite-av {
  position: relative;
  flex: none;
}

.invite-av em {
  position: absolute;
  right: -7px;
  bottom: -5px;
  min-width: 22px;
  height: 20px;
  padding: 0 4px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #3ee0ff;
  color: var(--ink);
  font: 400 .74rem/16px var(--font-display);
  font-style: normal;
  text-align: center;
}

.invite-stack {
  position: fixed;
  top: calc(max(14px, env(safe-area-inset-top)) + 70px);
  left: 50%;
  z-index: 80;
  display: grid;
  gap: 10px;
  width: min(340px, calc(100vw - 24px));
  transform: translateX(-50%);
  pointer-events: none;
}

.invite-card {
  position: relative;
  overflow: hidden;
  padding: 12px 12px 18px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: linear-gradient(180deg, #6a3070, #431c47);
  color: #fff;
  box-shadow: 0 6px 0 var(--ink), 0 18px 40px rgba(19, 7, 20, .6), 0 0 28px rgba(255, 138, 30, .35);
  pointer-events: auto;
  animation: inviteIn .38s cubic-bezier(.2, 1.4, .4, 1) both;
}

.invite-card.leaving {
  animation: inviteOut .22s ease forwards;
}

.invite-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.invite-av .avatar {
  width: 54px;
  height: 54px;
  box-shadow: 0 0 0 2px #ff8a1e;
}

.invite-text {
  min-width: 0;
}

.invite-text small {
  display: block;
  color: #ffb070;
  font: 400 .78rem var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.invite-text b {
  display: block;
  overflow: hidden;
  font: 400 1.3rem/1.1 var(--font-display);
  letter-spacing: .02em;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 var(--ink);
  white-space: nowrap;
}

.invite-mode {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 2px 9px 2px 5px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(33, 13, 34, .55);
  font-weight: 800;
  font-size: .74rem;
}

.invite-mode i {
  font-style: normal;
}

.invite-buttons {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 12px;
}

.invite-buttons .btn-3d {
  min-height: 42px;
  font: 400 1.05rem var(--font-display);
}

.invite-no {
  width: 50px;
  padding: 0;
}

.invite-timer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 7px;
  background: rgba(0, 0, 0, .45);
}

.invite-timer > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffd23f, #ff8a1e);
  transform-origin: left;
}

@keyframes inviteIn {
  from {
    opacity: 0;
    transform: translateY(-18px) scale(.9);
  }
}

@keyframes inviteOut {
  to {
    opacity: 0;
    transform: translateY(-10px) scale(.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-pcard.opening,
  .invite-card,
  .invite-card.leaving {
    animation: none;
  }
}

body.in-hub .fps-counter {
  top: auto;
  right: auto;
  bottom: max(14px, env(safe-area-inset-bottom));
  left: max(14px, env(safe-area-inset-left));
}

@media (max-width: 760px) {
  body.in-hub .fps-counter {
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 92px);
  }
}

.pack-reward-art {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1;
}

.pack-contents span.rarity-rare i {
  background: #3ee0ff;
  box-shadow: 0 0 6px #3ee0ff;
}

.pack-contents span.rarity-epic i {
  background: #b77bff;
  box-shadow: 0 0 6px #b77bff;
}

.pack-contents span.rarity-legendary i {
  background: #ffd23f;
  box-shadow: 0 0 6px #ffd23f;
}

.pack-contents.with-chance span small {
  color: var(--muted);
  font-weight: 800;
  font-size: .72rem;
}

.po-art .po-art-2 {
  left: 50%;
  z-index: 2;
  transform: translateX(-50%) scale(1.08);
}

.mini-pack img:nth-of-type(2):not(:last-of-type) {
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
}

.po-reward-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-style: normal;
  font-size: 4.6rem;
  line-height: 1;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35));
  transform: scale(.4);
  opacity: 0;
}

.po-reward-icon .coin-i,
.po-reward-icon .cash-i {
  width: 1.3em;
  height: 1.3em;
  margin: 0;
}

.po-card.flipped .po-reward-icon {
  animation: poArtPop .6s cubic-bezier(.2, 1.6, .4, 1) .35s forwards;
}

.po-dupe {
  justify-self: center;
  padding: 3px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe680, #ffc21f);
  color: var(--ink);
  font: 400 1rem var(--font-display);
  box-shadow: 0 3px 0 var(--ink);
}

.po-card.duplicate .po-card-art img {
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)) saturate(.65);
}

.lvl-panel {
  width: min(700px, 100%);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 210, 63, .22), transparent 55%),
    linear-gradient(180deg, var(--panel-hi), var(--panel) 40%, var(--panel-lo));
}

.lvl-loading {
  margin: 30px 0;
  text-align: center;
  font-weight: 800;
}

.lvl-home {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.lvl-kicker {
  padding: 3px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe680, #ffc21f);
  color: var(--ink);
  font: 400 .8rem var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 3px 0 var(--ink);
}

.lvl-title {
  margin: 2px 0 0;
  color: #fff;
  font: 400 clamp(1.7rem, 5vw, 2.4rem) var(--font-display);
  letter-spacing: .03em;
  text-shadow: 0 4px 0 var(--ink), 0 0 26px rgba(255, 210, 63, .55);
}

.lvl-chest {
  position: relative;
  display: grid;
  place-items: center;
  width: 190px;
  height: 160px;
  margin: 4px 0 2px;
}

.lvl-rays {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 220, 110, .26) 0 10deg, transparent 10deg 24deg);
  mask: radial-gradient(circle, #000 25%, transparent 68%);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%);
  opacity: .35;
}

.lvl-chest.ready .lvl-rays {
  opacity: 1;
  animation: lvlRays 9s linear infinite;
}

.lvl-box {
  position: relative;
  width: 128px;
  height: 88px;
  margin-top: 34px;
  border: 4px solid var(--ink);
  border-radius: 12px 12px 16px 16px;
  background:
    linear-gradient(90deg, transparent 44%, #ffd23f 44% 56%, transparent 56%),
    linear-gradient(180deg, #a35a2c, #7a3d1c);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .22), 0 6px 0 var(--ink), 0 0 30px rgba(255, 190, 60, .45);
}

.lvl-lid {
  position: absolute;
  left: -8px;
  right: -8px;
  top: -42px;
  height: 46px;
  border: 4px solid var(--ink);
  border-radius: 40px 40px 8px 8px;
  background:
    linear-gradient(90deg, transparent 44%, #ffd23f 44% 56%, transparent 56%),
    linear-gradient(180deg, #c8743b, #8f4a22);
  box-shadow: inset 0 6px 0 rgba(255, 255, 255, .22);
  transform-origin: 50% 100%;
}

.lvl-chest.ready .lvl-lid {
  animation: lvlLid 1.8s ease-in-out infinite;
}

.lvl-lock {
  position: absolute;
  left: 50%;
  top: 14px;
  padding: 4px 8px;
  border: 3px solid var(--ink);
  border-radius: 9px;
  background: linear-gradient(180deg, #fff6c4, #ffd23f);
  color: var(--ink);
  font: 400 .9rem var(--font-display);
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 3px 0 var(--ink);
}

.lvl-count {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 8px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8fa3, #ff3b5c);
  color: #fff;
  font: 400 1.35rem var(--font-display);
  font-style: normal;
  text-shadow: 0 2px 0 var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  animation: lvlBadge 1.2s ease-in-out infinite;
}

@keyframes lvlRays {
  to { transform: rotate(360deg); }
}

@keyframes lvlLid {
  0%, 70%, 100% { transform: rotate(0deg) translateY(0); }
  78% { transform: rotate(-5deg) translateY(-6px); }
  86% { transform: rotate(4deg) translateY(-3px); }
}

@keyframes lvlBadge {
  50% { transform: scale(1.1); }
}

.lvl-sub {
  margin: 0;
  max-width: 460px;
  color: var(--muted);
  font-weight: 800;
}

.lvl-sub b {
  color: #fff;
}

.lvl-odds {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 4px 0 2px;
}

.lvl-odd {
  --rc: #9fb3d1;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 2px;
  padding: 8px 4px 6px;
  border: 3px solid var(--ink);
  border-bottom: 5px solid var(--rc);
  border-radius: 14px;
  background: rgba(19, 7, 20, .45);
}

.lvl-odd.rarity-rare { --rc: #3ee0ff; }
.lvl-odd.rarity-epic { --rc: #b77bff; }
.lvl-odd.rarity-legendary { --rc: #ffd23f; }
.lvl-odd.rarity-mythical { --rc: #ff8ae0; }

.lvl-odd img.lc-skin {
  display: block;
  height: 40px;
  width: auto;
}

.lvl-odd .reward-art {
  width: 52px;
  height: 52px;
  transform: scale(.72);
}

.lvl-odd b {
  font: 400 .8rem/1.1 var(--font-display);
}

.lvl-odd small {
  color: var(--rc);
  font-weight: 900;
  font-size: .78rem;
}

.lc-emoji {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  font-size: 2.2rem;
  line-height: 1;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35));
}

.lvl-odd .lc-emoji {
  width: 40px;
  height: 40px;
  font-size: 1.7rem;
}

.crate-result .lc-emoji {
  flex: none;
  width: 92px;
  height: 92px;
  font-size: 3.8rem;
}

.lvl-open {
  animation: lvlBadge 1.4s ease-in-out infinite;
}

.hub-lvlcrate {
  position: absolute;
  top: calc(max(14px, env(safe-area-inset-top)) + 82px);
  left: max(14px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe680, #ffb41f);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--ink), 0 0 22px rgba(255, 200, 60, .7);
  cursor: var(--cursor-pointer);
  animation: hubLvlGlow 1.6s ease-in-out infinite;
}

.hub-lvlcrate[hidden] {
  display: none;
}

.hub-lvlcrate i {
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1;
  animation: hubLvlWiggle 1.6s ease-in-out infinite;
}

.hub-lvlcrate span {
  display: grid;
  text-align: left;
}

.hub-lvlcrate b {
  font: 400 1rem var(--font-display);
}

.hub-lvlcrate small {
  font-weight: 900;
  font-size: .66rem;
  opacity: .75;
}

.hub-lvlcrate em {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #ff3b5c;
  color: #fff;
  font: 900 .82rem var(--font-body);
  font-style: normal;
}

.hub-lvlcrate:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

@keyframes hubLvlGlow {
  50% { box-shadow: 0 4px 0 var(--ink), 0 0 34px rgba(255, 200, 60, 1); }
}

@keyframes hubLvlWiggle {
  0%, 80%, 100% { transform: rotate(0deg); }
  85% { transform: rotate(-14deg); }
  90% { transform: rotate(12deg); }
  95% { transform: rotate(-6deg); }
}

.hub-loot-pop {
  grid-template-columns: repeat(5, 96px);
}

.hub-loot-pop button:nth-child(5) {
  background: linear-gradient(180deg, #fff1a8, #ffc21f 55%, #ff9a1e);
  box-shadow: 0 4px 0 var(--ink), 0 0 16px rgba(255, 200, 60, .55);
}

.hub-loot-pop em[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .hub-lvlcrate {
    top: calc(max(14px, env(safe-area-inset-top)) + 182px);
    padding: 4px 10px 4px 6px;
  }

  .hub-loot-pop {
    grid-template-columns: repeat(3, 84px);
  }

  .lvl-odds {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lvl-chest.ready .lvl-rays,
  .lvl-chest.ready .lvl-lid,
  .lvl-count,
  .lvl-open,
  .hub-lvlcrate,
  .hub-lvlcrate i {
    animation: none;
  }
}

.gift-btn {
  margin-top: 6px;
}

.gift-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  text-align: left;
}

.gift-head p {
  margin: 6px 0 4px;
  font-weight: 800;
}

.gift-head small {
  color: var(--muted);
  font-weight: 800;
}

.gift-thumb {
  flex: none;
  width: 84px;
  height: 84px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: rgba(19, 7, 20, .5);
}

.gift-list {
  display: grid;
  gap: 8px;
  max-height: min(46vh, 380px);
  overflow-y: auto;
  padding: 2px;
}

.gift-friend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: rgba(19, 7, 20, .45);
  text-align: left;
}

.gift-friend.owns {
  opacity: .55;
}

.gift-av {
  position: relative;
  flex: none;
}

.gift-av .avatar {
  width: 40px;
  height: 40px;
}

.gift-av .presence-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
}

.gift-who {
  display: grid;
  min-width: 0;
  flex: 1;
}

.gift-who b {
  overflow: hidden;
  font: 400 1rem var(--font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gift-who small {
  color: var(--muted);
  font-weight: 800;
  font-size: .76rem;
}

.gift-pays {
  display: flex;
  flex: none;
  gap: 6px;
}

.gift-pay {
  min-height: 36px;
  padding: 4px 12px;
  font: 400 .95rem var(--font-display);
}

.gift-owned {
  color: #8fffcf;
  font-weight: 900;
  font-style: normal;
  font-size: .85rem;
}

.gift-empty,
.gift-note,
.gift-left {
  margin: 4px 0 10px;
  font-weight: 800;
}

.gift-left {
  color: #ffd23f;
  font-size: .85rem;
}

.gift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  max-height: min(46vh, 380px);
  overflow-y: auto;
  padding: 2px;
}

.gift-item {
  --rc: #9fb3d1;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 6px;
  border: 3px solid var(--ink);
  border-bottom: 5px solid var(--rc);
  border-radius: 14px;
  background: rgba(19, 7, 20, .45);
  color: #fff;
  cursor: var(--cursor-pointer);
  transition: transform .12s ease, background .12s ease;
}

.gift-item.rarity-rare { --rc: #3ee0ff; }
.gift-item.rarity-epic { --rc: #b77bff; }
.gift-item.rarity-legendary { --rc: #ffd23f; }
.gift-item.rarity-mythical { --rc: #ff5ea8; }

.gift-item canvas {
  width: 64px;
  height: 64px;
}

.gift-item b {
  max-width: 100%;
  overflow: hidden;
  font: 400 .85rem var(--font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gift-item small {
  color: var(--muted);
  font-weight: 800;
  font-size: .7rem;
}

.gift-item:hover:not(:disabled) {
  background: rgba(255, 210, 63, .14);
  transform: translateY(-2px);
}

.gift-item:disabled {
  cursor: default;
  opacity: .45;
}

.gift-confirm {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.gift-confirm h3 {
  margin: 4px 0 0;
  font: 400 1.25rem var(--font-display);
}

.gift-confirm p {
  max-width: 380px;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.gift-confirm-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.store-overlay {
  z-index: 60;
}

.store-panel {
  width: min(860px, 100%);
  padding: 20px 20px 16px;
}

.store-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding-right: 46px;
}

.store-head h2 {
  margin: 0;
  color: #fff;
  font: 400 1.7rem var(--font-display);
  text-shadow: 0 3px 0 var(--ink);
}

.store-balance {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.store-balance .hub-pill {
  padding: 4px 12px 4px 8px;
  font-size: .95rem;
  box-shadow: 0 3px 0 var(--ink);
}

.store-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 14px 0 4px;
  padding: 4px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--ink-2);
}

.store-tabs .seg {
  padding: 7px 20px;
  font-size: 1.05rem;
}

.store-tabs .seg.active {
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.store-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 10px 12px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: linear-gradient(180deg, #6a3270, #42193f);
  box-shadow: 0 5px 0 var(--ink);
  text-align: center;
  transition: transform .15s ease;
}

.store-card:hover {
  transform: translateY(-3px);
}

.store-card.coins.tier-3,
.store-card.coins.tier-4 {
  background: linear-gradient(180deg, #8a5a1c, #4d2a12);
}

.store-card.cash.tier-3,
.store-card.cash.tier-4 {
  background: linear-gradient(180deg, #2f7a45, #173f26);
}

.store-card.tier-4 {
  box-shadow: 0 5px 0 var(--ink), 0 0 22px rgba(255, 210, 63, .35);
}

.store-art {
  position: relative;
  display: block;
  width: 100%;
  height: 70px;
  margin-bottom: 4px;
}

.store-art i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: 0;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .45));
  transform: translate(calc(-50% + (var(--i) - (var(--n) - 1) / 2) * 15px), calc(-50% + (var(--i) - (var(--n) - 1) / 2) * -4px)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 9deg));
}

.store-art .cash-i {
  width: 58px;
}

.store-card:hover .store-art i {
  animation: storeBob .6s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 80ms);
}

@keyframes storeBob {
  to {
    margin-top: -6px;
  }
}

.store-amount {
  color: #fff;
  font: 400 1.6rem/1 var(--font-display);
  text-shadow: 0 3px 0 var(--ink);
}

.store-kind {
  color: var(--muted);
  font-weight: 800;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.store-bonus {
  margin: 4px 0 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(61, 220, 114, .2);
  color: #8ff0a8;
  font: 800 .78rem var(--font-body);
  font-style: normal;
}

.store-bonus.muted {
  background: rgba(255, 255, 255, .08);
  color: var(--muted);
}

.store-tag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font: 400 .78rem var(--font-display);
  font-style: normal;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--ink);
}

.store-tag.best {
  background: var(--yellow);
  color: var(--ink);
}

.store-tag.hot {
  background: #ff5ea8;
  color: #fff;
}

.store-buy {
  width: 100%;
  margin-top: auto;
  font-size: 1.05rem;
}

.store-buy:disabled {
  filter: grayscale(.6);
  opacity: .6;
  cursor: not-allowed;
}

.store-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: rgba(162, 107, 255, .2);
  color: #fff;
  font-weight: 800;
}

.store-notice.warn {
  background: rgba(255, 75, 75, .22);
}

.store-notice.wait {
  background: rgba(61, 220, 114, .16);
}

.store-spinner {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: storeSpin .8s linear infinite;
}

@keyframes storeSpin {
  to {
    transform: rotate(360deg);
  }
}

.store-fine {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.45;
  text-align: center;
  opacity: .85;
}

.store-fine a {
  color: #fff;
}

.store-loading {
  margin: 30px 0;
  color: #fff;
  font: 400 1.2rem var(--font-display);
  text-align: center;
}

.buyable {
  pointer-events: auto;
  cursor: var(--cursor-pointer);
  transition: transform .12s ease, filter .12s ease;
}

.buyable:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.pill-plus {
  display: inline-grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  margin-left: 2px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font: 400 .85em/1 var(--font-display);
  font-style: normal;
}

.get-more {
  margin-left: 6px;
  padding: 2px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font: 400 .85rem var(--font-display);
  box-shadow: 0 2px 0 var(--ink);
  cursor: var(--cursor-pointer);
}

.get-more[data-buy-currency="cash"] {
  background: #5fe38a;
}

.get-more:hover {
  filter: brightness(1.08);
}

.legal-fine {
  position: fixed;
  right: 12px;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 5;
  color: rgba(255, 255, 255, .55);
  font: 700 .68rem var(--font-body);
  text-align: right;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  pointer-events: auto;
}

.app:not([data-screen="auth"]):not([data-screen="menu"]) .legal-fine {
  display: none;
}

.legal-fine a {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
}

.legal-fine a:hover {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 640px) {
  .store-panel {
    padding: 16px 12px 12px;
  }

  .store-head h2 {
    font-size: 1.35rem;
  }

  .store-balance {
    margin-left: 0;
  }

  .store-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .legal-fine {
    font-size: .6rem;
  }
}
.chat-msg.staff {
  border-left-color: #3fb6ff;
  background: linear-gradient(90deg, rgba(63, 182, 255, .2), rgba(63, 182, 255, .06));
  box-shadow: 0 0 12px rgba(63, 182, 255, .35), inset 0 0 10px rgba(63, 182, 255, .12);
}

.chat-msg.staff .chat-name {
  color: #7fd6ff;
  text-shadow: 0 0 6px rgba(63, 182, 255, .95), 0 0 14px rgba(63, 182, 255, .6);
}

.chat-msg.staff .chat-text {
  color: #e3f5ff;
  text-shadow: 0 0 8px rgba(63, 182, 255, .45);
}

.chat-staff-badge {
  flex: 0 0 auto;
  width: 24px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5));
}
.arcade-overlay {
  z-index: 40;
}

.arc-room {
  --neon: #ff5ea8;
  position: relative;
  width: min(1120px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 18px 20px 20px;
  border-color: #12061a;
  background:
    radial-gradient(700px 260px at 50% -40px, rgba(255, 70, 190, .28), transparent 70%),
    radial-gradient(600px 300px at 10% 110%, rgba(56, 225, 255, .18), transparent 70%),
    linear-gradient(180deg, #1d0b2a 0%, #140820 60%, #0e0518 100%);
  box-shadow: 0 8px 0 #12061a, 0 0 0 2px rgba(255, 94, 168, .25), 0 30px 80px rgba(0, 0, 0, .6);
}

.arc-room::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  border-radius: 0 0 22px 22px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 94, 168, .16) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(0deg, rgba(56, 225, 255, .14) 0 2px, transparent 2px 40px);
  transform: perspective(380px) rotateX(58deg);
  transform-origin: bottom;
  mask-image: linear-gradient(transparent, #000 60%);
  -webkit-mask-image: linear-gradient(transparent, #000 60%);
  pointer-events: none;
  animation: arcFloor 3.5s linear infinite;
}

@keyframes arcFloor {
  to {
    background-position: 0 0, 0 40px;
  }
}

.arc-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding-right: 46px;
}

.arc-sign {
  color: #c8f8ff;
  font: 400 2rem/1 var(--font-display);
  letter-spacing: .04em;
  text-shadow: 0 0 6px #38e1ff, 0 0 18px rgba(56, 225, 255, .8), 0 3px 0 #12061a;
  animation: arcFlicker 4s infinite;
}

.arc-sign span {
  color: #ffd1f0;
  text-shadow: 0 0 6px #ff3fb4, 0 0 18px rgba(255, 63, 180, .85), 0 3px 0 #12061a;
}

@keyframes arcFlicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: .55; }
  94% { opacity: 1; }
  96% { opacity: .7; }
}

.arc-wallet {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.arc-wallet .hub-pill {
  padding: 4px 12px 4px 8px;
  font-size: .95rem;
  box-shadow: 0 3px 0 var(--ink);
}

.arc-view {
  position: relative;
  z-index: 1;
}

.arc-cabinets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.arc-loading {
  grid-column: 1 / -1;
  margin: 40px 0;
  color: #c8f8ff;
  font: 400 1.2rem var(--font-display);
  text-align: center;
  text-shadow: 0 0 10px #38e1ff;
}

.arc-cab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 10px 12px;
  border: 3px solid #12061a;
  border-radius: 20px 20px 12px 12px;
  background: linear-gradient(180deg, #2c1240, #1a0a26);
  box-shadow: 0 6px 0 #12061a, 0 0 0 2px color-mix(in srgb, var(--neon) 55%, transparent), 0 0 22px color-mix(in srgb, var(--neon) 35%, transparent);
  color: #fff;
  text-align: center;
  cursor: var(--cursor-pointer);
  transition: transform .15s ease, box-shadow .15s ease;
}

.arc-cab:hover:not(:disabled) {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 #12061a, 0 0 0 2px var(--neon), 0 0 34px color-mix(in srgb, var(--neon) 60%, transparent);
}

.arc-cab.taken {
  cursor: not-allowed;
  filter: saturate(.55) brightness(.8);
}

.arc-marquee {
  padding: 6px 8px;
  border: 2px solid #12061a;
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--neon) 85%, #fff), var(--neon));
  color: #12061a;
  font: 400 1rem/1.1 var(--font-display);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
  box-shadow: 0 0 16px color-mix(in srgb, var(--neon) 70%, transparent);
}

.arc-marquee.big {
  font-size: 1.35rem;
  padding: 8px 12px;
}

.arc-screen {
  position: relative;
  display: grid;
  place-items: center;
  height: 112px;
  overflow: hidden;
  border: 3px solid #12061a;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--neon) 45%, #12061a), #0a0410 75%);
}

.arc-attract {
  font-size: 3.2rem;
  filter: drop-shadow(0 0 12px var(--neon));
  animation: arcBob 1.6s ease-in-out infinite;
}

.arc-cab:nth-child(2) .arc-attract { animation-delay: -.3s; }
.arc-cab:nth-child(3) .arc-attract { animation-delay: -.6s; }
.arc-cab:nth-child(4) .arc-attract { animation-delay: -.9s; }
.arc-cab:nth-child(5) .arc-attract { animation-delay: -1.2s; }

@keyframes arcBob {
  50% { transform: translateY(-8px) rotate(-6deg) scale(1.06); }
}

.arc-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 4px);
  pointer-events: none;
}

.arc-tag {
  min-height: 2.4em;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.2;
}

.arc-deck {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px;
  border-radius: 10px;
  background: #12061a;
}

.arc-slot-mini {
  width: 6px;
  height: 22px;
  border-radius: 3px;
  background: #000;
  box-shadow: 0 0 0 3px #555, 0 0 8px var(--neon);
}

.arc-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 400 1.05rem var(--font-display);
}

.arc-status {
  font-size: .78rem;
  font-weight: 900;
}

.arc-resume {
  position: absolute;
  top: -10px;
  right: -6px;
  padding: 2px 8px;
  border: 2px solid #12061a;
  border-radius: 999px;
  background: var(--yellow);
  color: #12061a;
  font: 400 .75rem var(--font-display);
  font-style: normal;
  transform: rotate(4deg);
}

.arc-hint {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  text-align: center;
}

.arc-machine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  margin-top: 16px;
}

.arc-cabinet {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 4px solid #12061a;
  border-radius: 26px 26px 16px 16px;
  background: linear-gradient(180deg, #33144a, #1a0a26 70%);
  box-shadow: 0 8px 0 #12061a, 0 0 0 3px color-mix(in srgb, var(--neon) 60%, transparent), 0 0 46px color-mix(in srgb, var(--neon) 40%, transparent);
}

.arc-cabinet.shake {
  animation: arcShake .5s ease;
}

@keyframes arcShake {
  20% { transform: translate(-8px, 3px) rotate(-1deg); }
  40% { transform: translate(7px, -3px) rotate(1deg); }
  60% { transform: translate(-5px, 2px); }
  80% { transform: translate(3px, -1px); }
}

.arc-bezel {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 12px;
  overflow: hidden;
  border: 4px solid #12061a;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 30%, #241038, #0a0410 80%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .8);
}

.arc-glare {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .07), transparent 40%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 4px);
  pointer-events: none;
}

.arc-game {
  width: 100%;
  max-width: 420px;
}

.arc-canvas {
  display: block;
  width: 100%;
  height: auto;
}

.arc-canvas.wheel {
  max-width: 360px;
  margin: 0 auto;
}

.arc-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  background: #12061a;
}

.arc-coinslot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 3px solid #3a2a44;
  border-radius: 12px;
  background: linear-gradient(180deg, #4a3a58, #241a2e);
  color: #ffd23f;
  font: 400 .7rem var(--font-display);
  letter-spacing: .08em;
}

.arc-coinslot i {
  display: block;
  width: 8px;
  height: 30px;
  border-radius: 4px;
  background: #000;
  box-shadow: 0 0 0 3px #8a7a96, 0 0 10px var(--neon);
}

.arc-coinslot.fed i {
  animation: arcSlot .6s ease;
}

@keyframes arcSlot {
  0% { box-shadow: 0 0 0 3px #fff3a8, 0 0 26px #ffd23f; }
  100% { box-shadow: 0 0 0 3px #8a7a96, 0 0 10px var(--neon); }
}

.arc-buttons {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 10px;
}

.arc-btn {
  display: inline-flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 120px;
  min-height: 56px;
  padding: 8px 14px;
  border: 3px solid #12061a;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--neon) 70%, #fff), var(--neon) 65%);
  color: #12061a;
  font: 400 1.15rem var(--font-display);
  box-shadow: 0 5px 0 #12061a, 0 0 18px color-mix(in srgb, var(--neon) 60%, transparent);
  cursor: var(--cursor-pointer);
  transition: transform .08s ease, filter .1s ease;
}

.arc-btn small {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font: 800 .72rem var(--font-body);
}

.arc-btn .coin-i,
.arc-btn .cash-i {
  margin: 0;
}

.arc-btn:hover:not(:disabled) {
  filter: brightness(1.12);
}

.arc-btn:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #12061a;
}

.arc-btn:disabled {
  filter: grayscale(.7) brightness(.7);
  cursor: not-allowed;
}

.arc-btn.up { background: radial-gradient(circle at 50% 30%, #b8ffd0, #3ddc72 65%); }
.arc-btn.down { background: radial-gradient(circle at 50% 30%, #ffc2cc, #ff4b5c 65%); }
.arc-btn.cashout { background: radial-gradient(circle at 50% 30%, #fff1b0, #ffc21f 65%); }

.arc-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 3px solid #12061a;
  border-radius: 18px;
  background: rgba(20, 8, 32, .85);
}

.arc-back {
  align-self: flex-start;
  font-size: .9rem;
}

.arc-side h3 {
  margin: 4px 0 0;
  color: #fff;
  font: 400 1.4rem var(--font-display);
  text-shadow: 0 0 12px var(--neon);
}

.arc-side-tag {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.arc-cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 400 1rem var(--font-display);
  color: var(--yellow);
}

.arc-paytable {
  display: grid;
  gap: 4px;
}

.pt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pt-chip {
  padding: 2px 7px;
  border-radius: 999px;
  background: #3a2a44;
  font: 400 .8rem var(--font-display);
}

.pt-chip.m20 { background: #ffd23f; color: #12061a; }
.pt-chip.m3 { background: #ff5ea8; color: #12061a; }
.pt-chip.m1_1 { background: #3ddc72; color: #12061a; }

.pt-line {
  display: flex;
  justify-content: space-between;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  font-weight: 800;
}

.pt-line b {
  color: var(--yellow);
  font: 400 1rem var(--font-display);
}

.pt-note {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.4;
}

.arc-result {
  min-height: 2.6em;
  margin: auto 0 0;
  padding: 10px;
  border-radius: 12px;
  font: 400 1.05rem var(--font-display);
  text-align: center;
}

.arc-result:empty {
  visibility: hidden;
}

.arc-result.win { background: rgba(61, 220, 114, .18); color: #9ff5bd; }
.arc-result.big { background: rgba(255, 210, 63, .22); color: #ffe88a; text-shadow: 0 0 12px rgba(255, 210, 63, .8); animation: arcPop .5s cubic-bezier(.2, 1.6, .4, 1); }
.arc-result.meh { background: rgba(94, 200, 255, .14); color: #bfe8ff; }
.arc-result.lose { background: rgba(255, 75, 92, .14); color: #ffb3bb; }

@keyframes arcPop {
  from { transform: scale(.6); }
}

.arc-flycoin {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  width: 28px;
  height: 28px;
  margin: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 210, 63, .9));
}

.arc-flycoin.cash-i {
  width: 36px;
  filter: drop-shadow(0 0 8px rgba(61, 220, 114, .9));
}

.slots {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: min(360px, 100%);
  margin: 0 auto;
}

.reel {
  height: 228px;
  overflow: hidden;
  border: 3px solid #12061a;
  border-radius: 14px;
  background: linear-gradient(180deg, #d9d2e8, #fff 30%, #fff 70%, #d9d2e8);
  box-shadow: inset 0 8px 14px rgba(0, 0, 0, .35), inset 0 -8px 14px rgba(0, 0, 0, .35);
}

.strip span {
  display: grid;
  place-items: center;
  height: 76px;
  font-size: 2.8rem;
}

.payline {
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: rgba(255, 75, 92, .7);
  box-shadow: 0 0 10px rgba(255, 75, 92, .9);
  pointer-events: none;
}

.slots.won .payline {
  background: #ffd23f;
  box-shadow: 0 0 18px #ffd23f;
  animation: arcBlink .25s steps(2) 6;
}

@keyframes arcBlink {
  50% { opacity: .2; }
}

.hilo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.hilo-mult {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #c8f8ff;
  font: 400 1.5rem var(--font-display);
  text-shadow: 0 0 12px #38e1ff;
}

.hilo-card {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border: 4px solid #12061a;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #59597a, #1b1b2a 60%);
  box-shadow: 0 8px 0 #12061a, 0 0 30px rgba(255, 138, 61, .3);
}

.hilo-card b {
  color: #fff;
  font: 400 4rem var(--font-display);
  text-shadow: 0 4px 0 #12061a;
}

.hilo-fuse {
  position: absolute;
  top: -18px;
  left: 50%;
  width: 6px;
  height: 26px;
  margin-left: -3px;
  border-radius: 3px;
  background: #c08a4a;
}

.hilo-card.live .hilo-fuse::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6a8, #ffb21f 50%, rgba(255, 90, 0, 0) 70%);
  animation: arcSpark .15s infinite alternate;
}

@keyframes arcSpark {
  to { transform: scale(1.35) rotate(40deg); }
}

.hilo-card.flip {
  animation: arcFlip .4s ease;
}

@keyframes arcFlip {
  50% { transform: rotateY(90deg) scale(.9); }
}

.hilo-card.boom {
  animation: arcBoom .6s ease;
  background: radial-gradient(circle, #fff6a8, #ff8a3d 40%, #ff4b5c 70%);
}

@keyframes arcBoom {
  30% { transform: scale(1.35); }
}

.hilo-history {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
}

.hilo-history span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid #12061a;
  border-radius: 50%;
  background: #2b2b40;
  color: #fff;
  font: 400 .9rem var(--font-display);
}

.hilo-history span:last-child {
  background: #5ec8ff;
  color: #12061a;
}

.crates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: min(420px, 100%);
  margin: 10px auto 0;
}

.crate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 6px 12px;
  border: 3px solid #12061a;
  border-radius: 18px;
  background: linear-gradient(180deg, #5a3a26, #34200f);
  box-shadow: 0 6px 0 #12061a;
  color: #fff;
  cursor: var(--cursor-pointer);
  transition: transform .15s ease;
}

.crate:hover:not(:disabled) {
  transform: translateY(-5px) rotate(-2deg);
}

.crate-box {
  font-size: 3.4rem;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .4));
}

.crate-prize {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 1.4em;
  font: 400 1rem var(--font-display);
}

.crate.chosen {
  box-shadow: 0 6px 0 #12061a, 0 0 0 3px var(--yellow), 0 0 24px rgba(255, 210, 63, .7);
}

.crate.shaking .crate-box {
  animation: arcShake .3s infinite;
}

.crate.open {
  animation: arcPop .4s cubic-bezier(.2, 1.6, .4, 1);
}

.crate.open.good { background: linear-gradient(180deg, #3a7a3a, #1d4a24); }
.crate.open.ok { background: linear-gradient(180deg, #2a5a7a, #173a50); }
.crate.open.bad { background: linear-gradient(180deg, #4a3a44, #2a2030); }
.reel-card img.lc-skin { display: block; height: 70px; width: auto; margin: 0 auto; }
.crate-result img.lc-skin { display: block; height: 92px; width: auto; }
.crate-result.rarity-mythical { border-color: #ff8ae0; box-shadow: 0 0 34px rgba(255, 120, 220, .65); }
.crate.open.mythic { background: linear-gradient(135deg, #ff5ea8, #b46cff 40%, #5ec8ff 70%, #3ddc72); box-shadow: 0 6px 0 #12061a, 0 0 28px rgba(255, 140, 230, .8); }
.crate.open.mythic .crate-box { display: grid; place-items: center; border-color: #fff; background: radial-gradient(circle, #fff6fd 0 30%, #ffc6ef 60%, #e9a6ff); box-shadow: 0 0 22px rgba(255, 255, 255, .7), 0 8px 0 var(--ink); }
.crate.open.mythic .crate-box img { display: block; height: 88px; width: auto; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.pt-line.pt-molly { color: #ffb8ec; }
.crate.other { opacity: .55; transform: scale(.94); }

.crates-hint {
  margin: 14px 0 0;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

@media (max-width: 760px) {
  .arc-room {
    padding: 14px 12px;
  }

  .arc-sign {
    font-size: 1.5rem;
  }

  .arc-wallet {
    margin-left: 0;
  }

  .arc-machine {
    grid-template-columns: 1fr;
  }

  .arc-bezel {
    min-height: 240px;
  }

  .arc-cabinets {
    grid-template-columns: repeat(2, 1fr);
  }

  .reel {
    height: 180px;
  }

  .strip span {
    height: 60px;
    font-size: 2.2rem;
  }
}
.game-tip {
  --arrow-x: 50%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  max-width: min(260px, calc(100vw - 16px));
  padding: 7px 11px 8px;
  border: 3px solid var(--ink, #210d22);
  border-radius: 12px;
  background:
    radial-gradient(circle at 20% 0%, rgba(183, 123, 255, .28), transparent 60%),
    linear-gradient(180deg, var(--panel-hi, #5c2a5e), var(--panel-lo, #3c1a3e));
  box-shadow: 0 4px 0 var(--ink, #210d22), 0 10px 24px rgba(10, 2, 14, .45), inset 0 2px 0 rgba(255, 255, 255, .12);
  color: #fff;
  font-family: var(--font-body, "Nunito", system-ui, sans-serif);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 0 var(--ink, #210d22);
  white-space: pre-line;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  translate: 0 4px;
  transition: opacity .12s ease, translate .12s ease;
}

.game-tip.below {
  translate: 0 -4px;
}

.game-tip.show {
  opacity: 1;
  translate: 0 0;
}

.game-tip[hidden] {
  display: none;
}

.game-tip::after {
  content: "";
  position: absolute;
  left: var(--arrow-x);
  bottom: -9px;
  width: 12px;
  height: 12px;
  border-right: 3px solid var(--ink, #210d22);
  border-bottom: 3px solid var(--ink, #210d22);
  background: var(--panel-lo, #3c1a3e);
  transform: translateX(-50%) rotate(45deg);
}

.game-tip.below::after {
  top: -9px;
  bottom: auto;
  border: 0;
  border-left: 3px solid var(--ink, #210d22);
  border-top: 3px solid var(--ink, #210d22);
  background: var(--panel-hi, #5c2a5e);
}

@media (prefers-reduced-motion: reduce) {
  .game-tip {
    transition: none;
    translate: none;
  }
}

.duck-panel {
  width: min(640px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background:
    radial-gradient(circle at 15% 0%, rgba(94, 200, 255, .22), transparent 55%),
    radial-gradient(circle at 90% 10%, rgba(255, 210, 63, .18), transparent 50%),
    linear-gradient(180deg, var(--panel-hi), var(--panel) 40%, var(--panel-lo));
}

.dk-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 48px;
  margin-bottom: 12px;
}

.dk-logo {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: none;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(180deg, #5ec8ff, #2f7bd8);
  box-shadow: 0 4px 0 var(--ink);
  font-size: 1.7rem;
}

.dk-logo canvas {
  width: 44px;
  height: 44px;
}

.dk-title {
  min-width: 0;
  flex: 1;
}

.dk-title h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
}

.dk-title small {
  color: #f0dcf2;
  font-weight: 700;
}

.dk-wallet {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.dk-wallet span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 6px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #2a1236;
  color: #fff;
  font-weight: 900;
}

.dk-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 10px;
  padding: 10px 14px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #2a1236;
  color: #e7d3ea;
  font-weight: 800;
}

.dk-phase {
  padding: 2px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .9rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.dk-phase.betting { background: #7dff9a; }
.dk-phase.racing { background: #3ee0ff; }
.dk-phase.result { background: #ffd23f; }

.dk-clock {
  color: var(--dk, #fff);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 var(--ink);
}

.dk-clock.hurry {
  color: #ff5e8f;
  animation: dkPulse .5s ease-in-out infinite alternate;
}

.dk-status small {
  font-size: .82rem;
}

.dk-track {
  display: block;
  width: 100%;
  height: 168px;
  margin-bottom: 12px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px rgba(94, 200, 255, .3);
}

.dk-ducks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.dk-duck {
  --dk: #ffd23f;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 6px 10px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dk) 32%, #49204b), #3c1a3e 75%);
  box-shadow: 0 4px 0 var(--ink), inset 0 -4px 0 var(--dk);
  color: #fff;
  font: inherit;
  cursor: var(--cursor-pointer);
  transition: transform .12s ease, box-shadow .12s ease;
}

.dk-duck:hover:not(:disabled) {
  transform: translateY(-2px);
}

.dk-duck:disabled {
  cursor: default;
}

.dk-duck.picked,
.dk-duck.mine {
  box-shadow: 0 4px 0 var(--ink), inset 0 -4px 0 var(--dk), 0 0 0 3px #7dff9a, 0 0 18px rgba(125, 255, 154, .55);
  transform: translateY(-2px);
}

.dk-duck.winner {
  box-shadow: 0 4px 0 var(--ink), inset 0 -4px 0 var(--dk), 0 0 0 3px #ffd23f, 0 0 22px rgba(255, 210, 63, .7);
  animation: dkWin .8s ease-in-out infinite alternate;
}

.dk-duck canvas {
  width: 64px;
  height: 56px;
}

.dk-duck b {
  max-width: 100%;
  overflow: hidden;
  font-size: .85rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dk-mult {
  color: var(--dk);
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  text-shadow: 0 2px 0 var(--ink);
}

.dk-duck small {
  color: #e7d3ea;
  font-size: .72rem;
  font-weight: 800;
}

.dk-tag {
  position: absolute;
  top: -10px;
  left: 50%;
  padding: 1px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #7dff9a;
  color: var(--ink);
  font-size: .7rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
  transform: translateX(-50%);
}

.dk-tag.win {
  background: #ffd23f;
}

.dk-form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  align-items: center;
}

.dk-currency {
  display: inline-flex;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 12px;
}

.dk-currency button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border: 0;
  background: #2a1236;
  color: #cdb8d2;
  font: inherit;
  font-weight: 900;
  cursor: var(--cursor-pointer);
}

.dk-currency button.on {
  background: #ffd23f;
  color: var(--ink);
}

.dk-amount {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: #1a0b22;
}

.dk-amount input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 900;
  outline: none;
}

.dk-chips {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.dk-chips button {
  padding: 6px 0;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: linear-gradient(180deg, #6b3a7e, #4a2260);
  box-shadow: 0 3px 0 var(--ink);
  color: #fff;
  font: inherit;
  font-weight: 900;
  cursor: var(--cursor-pointer);
}

.dk-chips button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}

.dk-limits {
  grid-column: 1 / -1;
  margin: 0;
  color: #cdb8d2;
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
}

.dk-place {
  display: grid;
  grid-column: 1 / -1;
  justify-items: center;
  gap: 1px;
  padding: 10px;
}

.dk-place small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .8rem;
}

.dk-mybet {
  --dk: #ffd23f;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 12px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dk) 25%, #2a1236), #2a1236);
  box-shadow: inset 0 0 0 2px var(--dk);
  color: #fff;
  text-align: center;
}

.dk-mybet span {
  color: #cdb8d2;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dk-mybet b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
}

.dk-mybet em {
  color: var(--dk);
  font-style: normal;
}

.dk-mybet small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
}

.dk-won {
  color: #7dff9a;
}

.dk-lost {
  color: #ffb3c8;
}

.dk-note {
  margin: 0;
  padding: 10px;
  color: #e7d3ea;
  font-weight: 800;
  text-align: center;
}

@keyframes dkPulse {
  to { transform: scale(1.08); }
}

@keyframes dkWin {
  to { transform: translateY(-4px); }
}

@media (max-width: 560px) {
  .dk-ducks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dk-form {
    grid-template-columns: 1fr;
  }

  .dk-title small {
    display: none;
  }

  .dk-head {
    flex-wrap: wrap;
  }

  .dk-wallet {
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dk-clock.hurry,
  .dk-duck.winner {
    animation: none;
  }
}

.rw-hud {
  position: fixed;
  top: calc(max(14px, env(safe-area-inset-top)) + 64px);
  left: 50%;
  z-index: 6;
  display: grid;
  justify-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}

.rw-hud[hidden],
.rw-bar[hidden],
.rw-hint[hidden] {
  display: none;
}

.rw-bar {
  display: flex;
  gap: 8px;
}

.rw-chip {
  display: grid;
  justify-items: center;
  min-width: 82px;
  padding: 4px 12px 6px;
  border: 4px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(180deg, #6a4426, #4a2e1a);
  box-shadow: 0 4px 0 var(--ink);
  color: #fff;
}

.rw-chip small {
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .1em;
  opacity: .8;
}

.rw-chip b {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rw-place b {
  color: #ffd23f;
}

.rw-hint {
  padding: 6px 14px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: rgba(33, 13, 34, .88);
  color: #fff;
  font-weight: 900;
  white-space: nowrap;
}

.rw-big {
  position: fixed;
  top: 36vh;
  left: 50%;
  color: #ffd23f;
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 6.5rem);
  line-height: 1;
  white-space: nowrap;
  -webkit-text-stroke: 8px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--ink);
  opacity: 0;
  transform: translate(-50%, -50%);
}

.rw-big.show {
  opacity: 1;
  animation: rwPop .45s cubic-bezier(.2, 1.6, .4, 1) both;
}

.rw-big.go { color: #7dff9a; }
.rw-big.final { color: #ff5e8f; font-size: clamp(2.4rem, 9vw, 4.8rem); }
.rw-big.lap { color: #3ee0ff; font-size: clamp(2.2rem, 8vw, 4.2rem); }

@keyframes rwPop {
  from { transform: translate(-50%, -50%) scale(.4); }
  to { transform: translate(-50%, -50%) scale(1); }
}

.rw-wrong {
  display: grid;
  justify-items: center;
  padding: 8px 22px 10px;
  border: 5px solid var(--ink);
  border-radius: 16px;
  background: repeating-linear-gradient(-45deg, #ff3d5e 0 18px, #c81d3c 18px 36px);
  box-shadow: 0 5px 0 var(--ink), 0 0 26px rgba(255, 61, 94, .7);
  color: #fff;
  animation: rwWrong .5s ease-in-out infinite alternate;
}

.rw-wrong[hidden] {
  display: none;
}

.rw-wrong b {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  font-weight: 400;
  line-height: 1;
  -webkit-text-stroke: 6px var(--ink);
  paint-order: stroke fill;
}

.rw-wrong small {
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@keyframes rwWrong {
  to { transform: scale(1.07); filter: brightness(1.15); }
}

.rw-rest li.me {
  color: #7dff9a;
}

@media (prefers-reduced-motion: reduce) {
  .rw-wrong {
    animation: none;
  }
}

.rw-signup p {
  margin: 0 0 12px;
}

.rw-sizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.rw-size {
  display: grid;
  justify-items: center;
  padding: 10px 6px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #2a1236;
  box-shadow: 0 3px 0 var(--ink);
  color: #fff;
  font: inherit;
  cursor: var(--cursor-pointer);
}

.rw-size b {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
}

.rw-size small {
  color: #cdb8d2;
  font-weight: 800;
}

.rw-size.on {
  background: linear-gradient(180deg, #ffb04a, #e0661a);
  box-shadow: 0 3px 0 var(--ink), 0 0 0 3px #ffd23f;
}

.rw-size.on small {
  color: #fff4dc;
}

.rw-note {
  color: #e7d3ea;
  font-size: .86rem;
  font-weight: 800;
}

.rw-note.on {
  color: #7dff9a;
}

.rw-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  margin-bottom: 10px;
}

.rw-step {
  display: grid;
  justify-items: center;
  gap: 2px;
  animation: rwRise .6s cubic-bezier(.2, 1.4, .4, 1) both;
}

.rw-step.tier-1 { animation-delay: .3s; }
.rw-step.tier-3 { animation-delay: .45s; }

@keyframes rwRise {
  from { opacity: 0; transform: translateY(40px); }
}

.rw-step b {
  max-width: 100%;
  overflow: hidden;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rw-step.me b {
  color: #7dff9a;
}

.rw-step small {
  color: #cdb8d2;
  font-weight: 800;
}

.rw-block {
  display: grid;
  place-items: center;
  width: 100%;
  margin-top: 4px;
  border: 4px solid var(--ink);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .3);
}

.rw-block span {
  font-size: 1.7rem;
}

.rw-block em {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-style: normal;
}

.tier-1 .rw-block { height: 118px; background: linear-gradient(180deg, #ffe27a, #ffb000); }
.tier-2 .rw-block { height: 86px; background: linear-gradient(180deg, #f4f6fb, #aab3c6); }
.tier-3 .rw-block { height: 64px; background: linear-gradient(180deg, #ffc48a, #c9733a); }

.rw-rest {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-weight: 800;
  text-align: center;
}

.rw-earned {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.rw-earned span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #2a1236;
  color: #fff;
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .rw-big.show,
  .rw-step {
    animation: none;
  }
}

.mode-rail-track {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mode-rail-thumb {
  width: calc((100% - 6px) / 5);
}

.play-card.raceway .mode-rail {
  --rail-accent: #ffb04a;
  --rail-accent-2: #e0661a;
}

.mode-dots .y {
  background: radial-gradient(circle at 35% 30%, #fff3c4, #ffd23f 55%, #c99a12);
}

.mode-opt.race-opt,
.play-card.raceway .mode-opt[data-size],
.hub-play-pop.race .hub-sizes,
.hub-play-pop.race [data-hub-go="bot"] {
  display: none;
}

.play-card.raceway .mode-opt.race-opt {
  display: flex;
  cursor: default;
}

.play-card.raceway .mode-switch {
  grid-template-columns: minmax(0, 1fr);
}

.raceway-art {
  display: none;
  position: relative;
  width: 250px;
  height: 130px;
}

.play-card.raceway .mini-arena,
.play-card.raceway .gem-art,
.play-card.raceway .siege-art {
  display: none;
}

.play-card.raceway .raceway-art {
  display: block;
}

.play-card.raceway {
  background:
    radial-gradient(circle at 80% 35%, rgba(255, 150, 50, .35), transparent 46%),
    radial-gradient(circle at 8% 110%, rgba(125, 255, 154, .2), transparent 50%),
    linear-gradient(180deg, #5e2a63, #4f2255 50%, #3f1a45);
}

.play-card.raceway .mode-tag {
  background: linear-gradient(90deg, #ff9a3c, #ffd23f);
}

.rwa-track {
  position: absolute;
  inset: 16px 8px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: radial-gradient(ellipse 58% 40% at 50% 50%, #1d3324 97%, transparent 100%), #6a5238;
  box-shadow: 0 5px 0 var(--ink), inset 0 0 0 5px #8a5a34;
}

.rwa-track::after {
  content: "";
  position: absolute;
  inset: 26% 18%;
  border: 3px dashed #e8e4f0;
  border-radius: 999px;
  opacity: .55;
}

.rwa-kart {
  position: absolute;
  width: 40px;
  height: 30px;
  border: 3px solid var(--ink);
  border-radius: 50% 50% 46% 46%;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}

.rwa-kart::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 6px;
  height: 8px;
  border-radius: 2px;
  background: #3b6a2a;
  transform: translateX(-50%);
}

.rwa-kart.k1 {
  top: 10px;
  left: 82px;
  background: radial-gradient(circle at 40% 35%, #ffb04a, #ff7a1e 55%, #c94a12);
  animation: rwaZoom 2.6s ease-in-out infinite;
}

.rwa-kart.k2 {
  top: 88px;
  left: 132px;
  background: radial-gradient(circle at 40% 35%, #c4f27a, #6cc83a 55%, #2f7f22);
  animation: rwaZoom 2.6s ease-in-out .6s infinite reverse;
}

.rwa-flag {
  position: absolute;
  top: -4px;
  right: 10px;
  width: 36px;
  height: 24px;
  border: 3px solid var(--ink);
  background: conic-gradient(#16111c 25%, #f4f1ff 0 50%, #16111c 0 75%, #f4f1ff 0) 0 0 / 12px 12px;
  animation: rwaFlag .9s ease-in-out infinite alternate;
}

@keyframes rwaZoom {
  50% { translate: 18px 0; }
}

@keyframes rwaFlag {
  to { transform: rotate(-8deg) skewX(-6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rwa-kart,
  .rwa-flag {
    animation: none;
  }
}

.badge-slot {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 1px;
  width: 64px;
  padding: 6px 4px 4px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: linear-gradient(180deg, #3a1d4a, #2a1236);
  box-shadow: 0 4px 0 var(--ink);
  color: #fff;
  font: inherit;
  cursor: var(--cursor-pointer);
  transition: transform .15s ease, box-shadow .15s ease;
}

.badge-slot:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--ink), 0 0 16px rgba(255, 210, 63, .45);
}

.badge-slot:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

.badge-slot-art {
  display: grid;
  place-items: center;
  width: 44px;
  height: 36px;
  font-size: 1.6rem;
  line-height: 1;
}

.badge-slot-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45));
}

.badge-slot small {
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}

.badge-slot.wearing {
  background: linear-gradient(180deg, #5a2c6e, #3a1d4a);
}

.badge-slot.has-new::after {
  content: "!";
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #ff4f73;
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  animation: badgeNudge 1.2s ease-in-out infinite;
}

@keyframes badgeNudge {
  50% { transform: scale(1.18); }
}

.badge-menu-note {
  margin: 0 0 12px;
  color: #e7d3ea;
  font-size: .9rem;
  font-weight: 800;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.badge-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 12px 10px 10px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: linear-gradient(180deg, #3a1d4a, #2a1236);
  box-shadow: 0 4px 0 var(--ink);
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: var(--cursor-pointer);
  transition: transform .15s ease, box-shadow .15s ease;
}

.badge-card.owned:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 var(--ink), 0 0 18px rgba(255, 210, 63, .35);
}

.badge-card.worn {
  background: linear-gradient(180deg, #6b3a12, #4a2a10);
  box-shadow: 0 4px 0 var(--ink), 0 0 0 3px #ffd23f, 0 0 22px rgba(255, 210, 63, .5);
}

.badge-card.locked {
  cursor: default;
}

.badge-card.locked .badge-card-art img {
  filter: grayscale(1) brightness(.45);
}

.badge-card-art {
  display: grid;
  place-items: center;
  height: 64px;
}

.badge-card-art img {
  max-width: 96px;
  max-height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .45));
}

.badge-card b {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.1;
}

.badge-card small {
  color: #cdb8d2;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.25;
}

.badge-state {
  margin-top: 2px;
  padding: 2px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #ffd23f;
  color: var(--ink);
  font-size: .72rem;
  font-style: normal;
  font-weight: 900;
}

.badge-state.on {
  background: #7dff9a;
}

.badge-state.locked {
  background: #4a3a52;
  color: #cdb8d2;
}

.badge-card.shake {
  animation: badgeShake .35s ease;
}

@keyframes badgeShake {
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@media (max-width: 420px) {
  .badge-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .badge-slot.has-new::after,
  .badge-card.shake {
    animation: none;
  }
}

.chat-msg,
.chat-announce {
  position: relative;
}

.chat-react-btn {
  position: absolute;
  top: -9px;
  right: 6px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 22px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #ffd23f;
  box-shadow: 0 2px 0 var(--ink);
  color: var(--ink);
  font: 900 .9rem/1 Nunito, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  cursor: var(--cursor-pointer);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .12s ease, transform .12s ease;
}

.chat-msg:hover .chat-react-btn,
.chat-announce:hover .chat-react-btn,
.chat-react-btn:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.chat-react-btn:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 1px;
}

@media (hover: none) {
  .chat-react-btn {
    opacity: .75;
    transform: scale(1);
  }
}

.chat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.chat-reactions[hidden] {
  display: none;
}

.chat-reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 1px 8px 1px 6px;
  border: 2px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(20, 8, 22, .55);
  color: #fff;
  font: inherit;
  line-height: 1;
  cursor: var(--cursor-pointer);
  transition: transform .1s ease, background .12s ease;
  animation: reactPop .22s cubic-bezier(.2, 1.5, .4, 1) both;
}

.chat-reaction span {
  font-size: .95rem;
}

.chat-reaction b {
  font-size: .76rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.chat-reaction:hover {
  transform: translateY(-1px);
  background: rgba(60, 25, 66, .8);
}

.chat-reaction.mine {
  border-color: #ffd23f;
  background: rgba(255, 210, 63, .2);
}

.chat-reaction.mine b {
  color: #ffd23f;
}

@keyframes reactPop {
  from { transform: scale(.4); opacity: 0; }
}

.react-bar {
  position: absolute;
  z-index: 6;
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #49224c, #381939);
  box-shadow: 0 4px 0 var(--ink), 0 10px 22px rgba(19, 7, 20, .45);
  animation: emojiPop .14s cubic-bezier(.2, 1.3, .4, 1) both;
}

.react-bar[hidden] {
  display: none;
}

.react-pick {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  cursor: var(--cursor-pointer);
  transition: transform .1s ease, background .1s ease;
}

.react-pick:hover,
.react-pick:focus-visible {
  background: rgba(255, 255, 255, .12);
  transform: scale(1.2);
}

.react-more {
  font-size: .9rem;
}

.emoji-panel.reacting {
  border-color: #ffd23f;
}

@media (prefers-reduced-motion: reduce) {
  .chat-reaction,
  .react-bar {
    animation: none;
  }
}

.reward-card.spotlight {
  animation: cardSpotlight 1.8s ease-out 1;
}

@keyframes cardSpotlight {
  0%, 100% { box-shadow: var(--hard), inset 0 3px 0 rgba(255, 255, 255, .12), 0 0 0 0 rgba(255, 210, 63, 0), 0 0 0 rgba(255, 166, 40, 0); }
  25%, 55% { box-shadow: var(--hard), inset 0 3px 0 rgba(255, 255, 255, .12), 0 0 0 4px #ffd23f, 0 0 34px rgba(255, 166, 40, .75); }
}

@media (prefers-reduced-motion: reduce) {
  .reward-card.spotlight {
    animation: none;
  }
}

.race-stick {
  position: fixed;
  left: max(22px, env(safe-area-inset-left));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 104px);
  z-index: 6;
  --stick-size: 150px;
  width: var(--stick-size);
  height: var(--stick-size);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.race-stick[hidden] {
  display: none;
}

.race-stick-ring {
  position: absolute;
  inset: 0;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 210, 63, .12) 0 38%, transparent 39%),
    radial-gradient(circle at 50% 35%, rgba(106, 68, 38, .82), rgba(46, 24, 18, .88));
  box-shadow: 0 5px 0 var(--ink), inset 0 0 0 5px rgba(255, 176, 74, .35), 0 8px 22px rgba(19, 7, 20, .45);
  transition: box-shadow .12s ease;
}

.race-stick.held .race-stick-ring {
  box-shadow: 0 5px 0 var(--ink), inset 0 0 0 5px rgba(255, 210, 63, .7), 0 0 26px rgba(255, 176, 74, .55);
}

.race-stick-arrows b {
  position: absolute;
  color: rgba(255, 236, 200, .55);
  font-size: .8rem;
  line-height: 1;
}

.race-stick-arrows b:nth-child(1) { top: 9px; left: 50%; transform: translateX(-50%); }
.race-stick-arrows b:nth-child(2) { right: 10px; top: 50%; transform: translateY(-50%); }
.race-stick-arrows b:nth-child(3) { bottom: 9px; left: 50%; transform: translateX(-50%); }
.race-stick-arrows b:nth-child(4) { left: 10px; top: 50%; transform: translateY(-50%); }

.race-stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--stick-size) * .43);
  height: calc(var(--stick-size) * .43);
  border: 4px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #210d22 0 16%, transparent 17%),
    radial-gradient(circle at 35% 30%, #ffe08a, #ffb04a 45%, #e0661a);
  box-shadow: 0 4px 0 var(--ink), inset 0 -4px 0 rgba(0, 0, 0, .18);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.race-stick:not(.held) .race-stick-knob {
  transition: transform .14s cubic-bezier(.2, 1.4, .4, 1);
}

.race-stick.pushed .race-stick-arrows b {
  color: rgba(255, 236, 200, .85);
}

@media (max-height: 520px) {
  .race-stick {
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 76px);
    --stick-size: 128px;
  }
}

.race-stick-edit {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #3a1d4a;
  box-shadow: 0 3px 0 var(--ink);
  color: #fff;
  font: 900 1rem/1 Nunito, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  cursor: var(--cursor-pointer);
  opacity: .8;
}

.race-stick.editing .race-stick-edit {
  background: #ffd23f;
  color: var(--ink);
  opacity: 1;
}

.race-stick-tools {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 3;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #49224c, #381939);
  box-shadow: 0 4px 0 var(--ink), 0 10px 22px rgba(19, 7, 20, .45);
  transform: translateX(calc(-50% + var(--tools-shift, 0px)));
  white-space: nowrap;
}

.race-stick.tools-below .race-stick-tools {
  top: calc(100% + 12px);
  bottom: auto;
}

.race-stick.editing .race-stick-tools {
  display: flex;
}

.race-stick-tip {
  padding: 0 4px;
  color: #ffe9b0;
  font-size: .78rem;
  font-weight: 900;
}

.race-stick-tools button {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: #2a1236;
  box-shadow: 0 3px 0 var(--ink);
  color: #fff;
  font: 900 1.15rem/1 Nunito, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  cursor: var(--cursor-pointer);
}

.race-stick-tools .rs-done {
  background: linear-gradient(180deg, #7dff9a, #2fbf5a);
  color: var(--ink);
  font-size: .9rem;
}

.race-stick.editing .race-stick-ring {
  outline: 3px dashed #ffd23f;
  outline-offset: 6px;
  cursor: move;
  animation: stickWobble 1.4s ease-in-out infinite;
}

.race-stick.editing.dragging .race-stick-ring {
  animation: none;
  opacity: .85;
}

@keyframes stickWobble {
  50% { transform: rotate(2.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .race-stick:not(.held) .race-stick-knob {
    transition: none;
  }

  .race-stick.editing .race-stick-ring {
    animation: none;
  }
}

.hub-devlog {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: calc(max(14px, env(safe-area-inset-right)) + 108px);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 46px;
  padding: 0 14px 0 10px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #6a3b7a, #4a1e4e);
  box-shadow: 0 4px 0 var(--ink), 0 10px 22px rgba(0, 0, 0, .4);
  color: #fff;
  font: inherit;
  cursor: var(--cursor-pointer);
  transition: transform .14s ease, filter .14s ease;
}

.hub-devlog span {
  font-size: 1.15rem;
  line-height: 1;
}

.hub-devlog b {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .02em;
}

.hub-devlog:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

.hub-devlog:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}

.hub-devlog:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

.menu-screen.hub-mode.classic-open .hub-devlog,
.menu-screen:not(.hub-mode) .hub-devlog {
  display: none;
}

.devlog-dot {
  position: absolute;
  top: -9px;
  right: -8px;
  padding: 2px 6px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #ff4f73;
  color: #fff;
  font-size: .62rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.1;
  animation: devlogPing 1.6s ease-in-out infinite;
}

.devlog-dot[hidden] {
  display: none;
}

.devlog-link {
  position: relative;
}

@keyframes devlogPing {
  50% { transform: scale(1.12); }
}

@media (max-width: 640px) {
  .hub-devlog {
    width: 46px;
    padding: 0;
    justify-content: center;
  }

  .hub-devlog b {
    display: none;
  }
}

.devlog {
  display: grid;
  gap: 14px;
  max-height: min(62vh, 560px);
  padding-right: 4px;
  overflow-y: auto;
  text-align: left;
}

.devlog-entry {
  padding: 12px 14px 14px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: rgba(33, 13, 34, .45);
}

.devlog-entry.latest {
  background: linear-gradient(180deg, rgba(255, 210, 63, .14), rgba(33, 13, 34, .45) 60%);
  box-shadow: inset 0 0 0 2px rgba(255, 210, 63, .45);
}

.devlog-entry header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.devlog-entry header div {
  flex: 1;
  min-width: 0;
}

.devlog-entry h3 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.15;
}

.devlog-entry time {
  color: #cdb8d2;
  font-size: .78rem;
  font-weight: 800;
}

.devlog-version {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffe066, #f2b90f);
  box-shadow: 0 3px 0 var(--ink);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
}

.devlog-latest {
  flex: 0 0 auto;
  padding: 2px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #7dff9a;
  color: var(--ink);
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.devlog-entry ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.devlog-entry li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.devlog-entry li p {
  margin: 0;
  color: #f1e6f3;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
}

.devlog-tag {
  flex: 0 0 auto;
  min-width: 88px;
  padding: 2px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.devlog-tag.tag-new { background: #7dff9a; color: var(--ink); }
.devlog-tag.tag-improved { background: #5ec8ff; color: var(--ink); }
.devlog-tag.tag-fixed { background: #ffb04a; color: var(--ink); }
.devlog-tag.tag-balance { background: #b46cff; color: #fff; }

.devlog-empty {
  color: #cdb8d2;
  font-weight: 800;
}

.update-banner {
  position: fixed;
  top: calc(max(12px, env(safe-area-inset-top)) + 64px);
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 10px 18px 10px 12px;
  border: 4px solid var(--ink);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffb04a, #e0661a);
  box-shadow: 0 5px 0 var(--ink), 0 14px 30px rgba(19, 7, 20, .5);
  color: #fff;
  transform: translateX(-50%);
  animation: updateDrop .35s cubic-bezier(.2, 1.4, .4, 1) both;
}

.update-banner[hidden] {
  display: none;
}

.update-banner-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.update-banner-text {
  display: grid;
}

.update-banner-text b {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  text-shadow: 0 2px 0 rgba(33, 13, 34, .6);
}

.update-banner-text em {
  display: inline-block;
  min-width: 1.4em;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.update-banner-text small {
  font-size: .8rem;
  font-weight: 800;
  opacity: .95;
}

.update-banner.urgent {
  background: linear-gradient(180deg, #ff6b88, #d62d55);
  animation: updatePulse .7s ease-in-out infinite alternate;
}

@keyframes updateDrop {
  from { opacity: 0; transform: translate(-50%, -30px); }
}

@keyframes updatePulse {
  to { box-shadow: 0 5px 0 var(--ink), 0 0 28px rgba(255, 79, 115, .8); }
}

.update-card-wrap {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(19, 7, 20, .82);
  backdrop-filter: blur(4px);
}

.update-card-wrap[hidden] {
  display: none;
}

.update-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(420px, 100%);
  padding: 26px 24px 24px;
  border: 4px solid var(--ink);
  border-radius: 24px;
  background: linear-gradient(180deg, #5c2a5e, #3c1a3e);
  box-shadow: 0 8px 0 var(--ink), 0 24px 60px rgba(0, 0, 0, .5);
  color: #fff;
  text-align: center;
}

.update-card h2 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
}

.update-card p {
  margin: 0;
  color: #e7d3ea;
  font-weight: 700;
  line-height: 1.4;
}

.update-spinner {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 5px solid rgba(255, 210, 63, .25);
  border-top-color: #ffd23f;
  border-radius: 50%;
  animation: updateSpin 1s linear infinite;
}

.update-spinner span {
  font-size: 2rem;
  animation: updateSpin 1s linear infinite reverse;
}

.update-refresh {
  margin-top: 8px;
}

.update-refresh[hidden] {
  display: none;
}

@keyframes updateSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .devlog-dot,
  .update-banner,
  .update-banner.urgent,
  .update-spinner,
  .update-spinner span {
    animation: none;
  }
}

.hub-top {
  right: calc(max(14px, env(safe-area-inset-right)) + 236px);
}

@media (max-width: 760px) {
  .hub-devlog {
    right: calc(max(14px, env(safe-area-inset-right)) + 54px);
  }

  .hub-top {
    right: calc(max(14px, env(safe-area-inset-right)) + 108px);
  }
}

.piano-overlay {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  width: min(1040px, calc(100vw - 24px));
  pointer-events: none;
}
.piano-overlay[hidden] { display: none; }
.piano-panel {
  pointer-events: auto;
  background: linear-gradient(180deg, #3a1f2c 0%, #24111c 100%);
  border: 3px solid #1a0a12;
  box-shadow: 0 0 0 2px rgba(255, 210, 63, .55) inset, 0 18px 50px rgba(0, 0, 0, .55);
  border-radius: 18px;
  padding: 10px 12px 10px;
  animation: piano-in .22s ease-out;
}
@keyframes piano-in { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.piano-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 2px 8px;
  color: #fff;
}
.piano-title { font-family: var(--font-display, "Lilita One", sans-serif); font-size: 20px; color: #ffd23f; letter-spacing: .5px; }
.piano-range { font-weight: 800; font-size: 13px; color: #e9d7ff; opacity: .85; }
.piano-tools { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.piano-btn {
  font: 800 13px var(--font-body, "Nunito", sans-serif);
  color: #fff;
  background: #4b2a3c;
  border: 2px solid #1a0a12;
  border-bottom-width: 4px;
  border-radius: 10px;
  padding: 5px 10px;
  cursor: pointer;
}
.piano-btn:hover { background: #5c3449; }
.piano-btn.piano-pedal.on { background: #ffd23f; color: #2a1208; }
.piano-btn.piano-leave { background: #b9334f; }
.piano-keys {
  --whites: 15;
  position: relative;
  height: clamp(110px, 17vw, 170px);
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  background: #120810;
  border: 3px solid #120810;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.piano-key {
  font: 800 11px var(--font-body, "Nunito", sans-serif);
  padding: 0;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
}
.piano-key.white {
  flex: 1 1 0;
  margin-right: 2px;
  background: linear-gradient(180deg, #fbf7ee 0%, #fffdf8 70%, #e9e1d0 100%);
  border-radius: 0 0 7px 7px;
  color: #6b5a4b;
  padding-bottom: 8px;
  box-shadow: inset 0 -6px 0 #d8ccb6;
  transition: background .05s, box-shadow .05s;
}
.piano-key.white:last-child { margin-right: 0; }
.piano-key.white.down {
  background: linear-gradient(180deg, #ffe9a8 0%, #ffd23f 100%);
  box-shadow: inset 0 -2px 0 #c99a10;
}
.piano-key.black {
  position: absolute;
  top: 0;
  z-index: 2;
  width: calc(100% / var(--whites) * .62);
  left: calc(100% / var(--whites) * var(--i) - (100% / var(--whites) * .31));
  height: 62%;
  background: linear-gradient(180deg, #2e2630 0%, #120e14 100%);
  border-radius: 0 0 6px 6px;
  color: #cbb8d8;
  padding-bottom: 6px;
  box-shadow: inset 0 -5px 0 #000, 0 3px 4px rgba(0, 0, 0, .5);
}
.piano-key.black.down { background: linear-gradient(180deg, #7a4bd1 0%, #4b2a8f 100%); box-shadow: inset 0 -2px 0 #2b1758; }
.piano-key em { font-style: normal; font-size: 10px; color: #a8957e; }
.piano-key small { font-size: 10px; opacity: .8; }
.piano-hint { margin: 8px 4px 0; font-size: 12px; font-weight: 700; color: #d9c6e8; opacity: .85; }
.piano-hint kbd { font: 800 11px var(--font-body, "Nunito", sans-serif); background: #4b2a3c; border: 1px solid #1a0a12; border-radius: 5px; padding: 0 5px; color: #fff; }
@media (max-width: 700px), (pointer: coarse) {
  .piano-key small, .piano-hint { display: none; }
  .piano-head { margin-bottom: 6px; }
  .piano-title { font-size: 16px; }
}

.foot.crate {
  background: linear-gradient(90deg, #ff5ea8, #ff8a3d);
  color: #fff;
}
.foot.staff {
  background: linear-gradient(90deg, #2b6cff, #45c7ff);
  color: #fff;
}
.crate-ribbon,
.staff-ribbon {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 1;
  padding: 1px 7px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  color: #fff;
  font-family: var(--font-display);
  font-style: normal;
  font-size: .78rem;
  transform: rotate(8deg);
}
.crate-ribbon { background: linear-gradient(135deg, #ffd23f, #ff5ea8); }
.staff-ribbon { background: linear-gradient(135deg, #8fd8ff, #2b6cff); }
.item-card.exclusive.crate-only {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 94, 168, .42), transparent 62%),
    linear-gradient(180deg, #5a2346, #3d1631);
}
.item-card.exclusive.staff-only {
  background:
    radial-gradient(circle at 50% 38%, rgba(69, 160, 255, .45), transparent 62%),
    linear-gradient(180deg, #1d2f5c, #141f3d);
}

.dev-world .hub-mm-moon {
  display: none;
}

.city-fade {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #8fd0ff 35%, #3b5bdb 70%, #120a2a 100%);
  transition: opacity .38s ease;
}

.city-fade.on {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .city-fade {
    transition: none;
  }
}

.slash-menu {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 64px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  max-height: min(330px, calc(100% - 74px));
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: linear-gradient(180deg, #1d2f5c, #141f3d);
  box-shadow: 0 5px 0 var(--ink), 0 14px 30px rgba(10, 14, 40, .5), inset 0 0 0 2px rgba(94, 200, 255, .25);
  color: #eaf4ff;
  overflow: hidden;
  animation: emojiPop .16s cubic-bezier(.2, 1.3, .4, 1) both;
  transform-origin: bottom left;
}

.slash-menu[hidden] {
  display: none;
}

.slash-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 7px 12px;
  border-bottom: 2px solid rgba(94, 200, 255, .25);
  font: 400 .92rem var(--font-display);
  color: #5ec8ff;
}

.slash-head small {
  margin-left: auto;
  font: 800 .68rem var(--font-body);
  color: rgba(234, 244, 255, .55);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.slash-list {
  overflow-y: auto;
  padding: 4px 6px 6px;
}

.slash-cat {
  padding: 6px 6px 2px;
  font: 900 .66rem var(--font-body);
  color: #ffd23f;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.slash-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 8px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: var(--cursor-pointer, pointer);
}

.slash-item.on,
.slash-item:hover {
  background: rgba(94, 200, 255, .18);
}

.slash-name {
  font: 900 .86rem var(--font-body);
  color: #fff;
}

.slash-args {
  overflow: hidden;
  font: 700 .74rem var(--font-body);
  color: rgba(234, 244, 255, .55);
  white-space: nowrap;
  text-overflow: ellipsis;
  align-self: center;
}

.slash-desc {
  grid-column: 1 / -1;
  font: 700 .74rem var(--font-body);
  color: rgba(234, 244, 255, .78);
}

.slash-hint {
  padding: 8px 12px 4px;
}

.slash-hint p {
  margin: 0 0 4px;
}

.slash-usage {
  font: 900 .86rem var(--font-body);
  color: #fff;
  overflow-wrap: anywhere;
}

.slash-usage mark {
  padding: 0 3px;
  border-radius: 5px;
  background: #ffd23f;
  color: #1e1a2e;
}

.slash-example code {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .3);
  font: 800 .74rem ui-monospace, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #b8f28a;
}

.slash-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 2px 12px 6px;
}

.slash-chip {
  padding: 3px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #2f80ed;
  color: #fff;
  font: 900 .76rem var(--font-body);
  cursor: var(--cursor-pointer, pointer);
}

.slash-chip.on,
.slash-chip:hover {
  background: #ffd23f;
  color: #1e1a2e;
}

.slash-empty {
  margin: 0;
  padding: 10px 12px;
  font: 800 .8rem var(--font-body);
  color: rgba(234, 244, 255, .7);
}

.slash-foot {
  flex: none;
  margin: 0;
  padding: 4px 12px 6px;
  border-top: 2px solid rgba(94, 200, 255, .15);
  font: 800 .66rem var(--font-body);
  color: rgba(234, 244, 255, .5);
}

.chat-admin {
  margin: 8px 4px 0;
  padding: 7px 10px 8px;
  border: 2px solid #5ec8ff;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(29, 47, 92, .92), rgba(20, 31, 61, .92));
  box-shadow: 0 0 12px rgba(94, 200, 255, .25);
  color: #eaf4ff;
  animation: chatIn .22s ease-out both;
}

.chat-admin.error {
  border-color: #ff6b6b;
  box-shadow: 0 0 12px rgba(255, 107, 107, .25);
}

.chat-admin-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 .9rem var(--font-display);
}

.chat-admin-head small {
  margin-left: auto;
  font: 800 .62rem var(--font-body);
  color: rgba(234, 244, 255, .5);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.chat-admin-lines {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font: 700 .78rem var(--font-body);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.chat-admin-lines li + li {
  margin-top: 2px;
}

.map-edit-btn {
  position: fixed;
  top: calc(max(14px, env(safe-area-inset-top)) + 84px);
  left: max(14px, env(safe-area-inset-left));
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(180deg, #2f80ed, #1b4a8f);
  box-shadow: 0 4px 0 var(--ink), 0 0 16px rgba(94, 200, 255, .35);
  color: #fff;
  font: 400 1rem var(--font-display);
  cursor: var(--cursor-pointer, pointer);
  transition: transform .12s ease, filter .12s ease;
}

.map-edit-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.menu-screen:has(.hub-lvlcrate:not([hidden])) .map-edit-btn {
  top: calc(max(14px, env(safe-area-inset-top)) + 150px);
}

@media (max-width: 760px) {
  .map-edit-btn {
    top: calc(max(14px, env(safe-area-inset-top)) + 182px);
  }

  .menu-screen:has(.hub-lvlcrate:not([hidden])) .map-edit-btn {
    top: calc(max(14px, env(safe-area-inset-top)) + 246px);
  }
}

.map-edit-btn[hidden],
.map-editor[hidden],
.me-ask[hidden],
.me-status[hidden],
.me-drag-ghost[hidden] {
  display: none;
}

.menu-screen.hub-editing .hub-hud,
.menu-screen.hub-mode.hub-editing .hub-hud,
.menu-screen.hub-mode.hub-editing .hub-extras {
  display: none;
}

.map-editor {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  color: #eaf4ff;
  font-family: var(--font-body);
}

.map-editor > * {
  pointer-events: auto;
}

.me-bar {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: linear-gradient(180deg, #1d2f5c, #141f3d);
  box-shadow: 0 5px 0 var(--ink), 0 12px 26px rgba(10, 14, 40, .45);
  overflow-x: auto;
}

.me-title {
  margin-right: 6px;
  font: 400 1.1rem var(--font-display);
  color: #5ec8ff;
  white-space: nowrap;
}

.me-bar button {
  flex: none;
  padding: 6px 11px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #2b3d6e;
  box-shadow: 0 3px 0 var(--ink);
  color: #fff;
  font: 900 .82rem var(--font-body);
  white-space: nowrap;
  cursor: var(--cursor-pointer, pointer);
}

.me-bar button:hover:not(:disabled) {
  filter: brightness(1.2);
}

.me-bar button:disabled {
  opacity: .4;
  cursor: default;
}

.me-bar button.on {
  background: #ffd23f;
  color: #1e1a2e;
}

.me-bar .me-save {
  background: linear-gradient(180deg, #3ddc72, #1f9a4a);
  font-size: .9rem;
}

.me-bar .me-discard {
  background: #6b3242;
}

.me-bar .me-exit {
  background: #4a4f6b;
}

.me-bar .me-latest {
  background: #ff9a2a;
  color: #1e1a2e;
}

.me-sep {
  flex: none;
  width: 2px;
  height: 24px;
  background: rgba(94, 200, 255, .25);
}

.me-grow {
  flex: 1;
}

.me-zoom {
  min-width: 42px;
  text-align: center;
  font: 900 .8rem var(--font-body);
}

.me-changes {
  font: 800 .78rem var(--font-body);
  color: rgba(234, 244, 255, .75);
  white-space: nowrap;
}

.me-palette {
  position: absolute;
  top: calc(max(10px, env(safe-area-inset-top)) + 66px);
  left: 10px;
  bottom: 60px;
  width: 196px;
  display: flex;
  flex-direction: column;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(29, 47, 92, .96), rgba(20, 31, 61, .96));
  box-shadow: 0 5px 0 var(--ink);
  overflow: hidden;
}

.me-palette-head {
  flex: none;
  margin: 0;
  padding: 8px 12px 6px;
  border-bottom: 2px solid rgba(94, 200, 255, .2);
  font: 400 1rem var(--font-display);
  color: #fff;
}

.me-palette-head small {
  display: block;
  font: 800 .66rem var(--font-body);
  color: rgba(234, 244, 255, .6);
}

.me-palette-list {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 5px;
  overflow-y: auto;
  padding: 4px 8px 10px;
}

.me-cat {
  grid-column: 1 / -1;
  margin: 6px 2px 0;
  font: 900 .66rem var(--font-body);
  color: #ffd23f;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.me-prefab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 4px 3px 5px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font: 800 .68rem var(--font-body);
  line-height: 1.1;
  text-align: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.me-prefab:hover {
  background: rgba(94, 200, 255, .2);
}

.me-prefab.on {
  border-color: #ffd23f;
  background: rgba(255, 210, 63, .2);
}

.me-thumb {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background: radial-gradient(circle at 50% 70%, #6bb85b, #4f9a42);
  pointer-events: none;
}

.me-status {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: min(760px, calc(100% - 240px));
  margin: 0;
  padding: 7px 16px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: rgba(20, 31, 61, .94);
  box-shadow: 0 4px 0 var(--ink);
  font: 800 .82rem var(--font-body);
  text-align: center;
  pointer-events: none;
}

.me-status.bad {
  border-color: #ff4646;
  color: #ffb3b3;
}

.me-ask {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 24, .55);
}

.me-ask-box {
  width: min(400px, calc(100% - 32px));
  padding: 18px 20px 16px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: linear-gradient(180deg, #1d2f5c, #141f3d);
  box-shadow: 0 6px 0 var(--ink);
}

.me-ask-box b {
  font: 400 1.3rem var(--font-display);
}

.me-ask-box p {
  margin: 8px 0 14px;
  font: 700 .9rem var(--font-body);
  color: rgba(234, 244, 255, .85);
}

.me-ask-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.me-ask-row button {
  padding: 8px 14px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #4a4f6b;
  box-shadow: 0 3px 0 var(--ink);
  color: #fff;
  font: 900 .9rem var(--font-body);
  cursor: var(--cursor-pointer, pointer);
}

.me-ask-row .me-save {
  background: linear-gradient(180deg, #ff6b6b, #c43a3a);
}

.me-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  font-size: 34px;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45));
}

.hub-mm-tab {
  position: absolute;
  bottom: 3%;
  left: 3%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #49204b;
  font-size: .8rem;
  line-height: 1;
  box-shadow: 0 2px 0 var(--ink), 0 0 8px rgba(183, 123, 255, .5);
  cursor: var(--cursor-pointer);
  opacity: .85;
}

.hub-mm-tab:hover,
.hub-mm-tab:focus-visible {
  opacity: 1;
  transform: scale(1.08);
}

.hub-tab {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(14, 6, 22, .62);
  pointer-events: auto;
  animation: hubTabIn .18s ease-out;
}

.hub-tab[hidden] {
  display: none;
}

@keyframes hubTabIn {
  from { opacity: 0; transform: scale(.98); }
}

.hub-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(1180px, 100%);
  max-height: 100%;
  padding: 14px 16px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: linear-gradient(180deg, #3a1d47, #24112d);
  box-shadow: 0 8px 0 var(--ink), 0 0 40px rgba(183, 123, 255, .35);
  color: #fff;
}

.hub-tab-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hub-tab-head b {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 1.35rem var(--font-display);
}

.hub-tab-head small {
  flex: 1;
  font-weight: 800;
  opacity: .7;
}

.hub-tab-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #49204b;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 3px 0 var(--ink);
  cursor: var(--cursor-pointer);
}

.hub-tab-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  min-height: 0;
}

.hub-tab-map {
  position: relative;
  align-self: start;
  width: 100%;
  max-height: calc(100vh - 170px);
  border: 3px solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
  background: #08100b;
}

.hub-tab-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hub-tab-spots {
  position: absolute;
  inset: 0;
}

.hub-tab-spot {
  position: absolute;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #6a3a86, #2a1336);
  box-shadow: 0 3px 0 var(--ink), 0 0 0 2px rgba(255, 210, 63, .7);
  font-size: 1rem;
  line-height: 1;
  cursor: var(--cursor-pointer);
  transform: translate(-50%, -50%);
  transition: transform .12s ease, box-shadow .12s ease;
}

.hub-tab-spot i {
  font-style: normal;
}

.hub-tab-spot span {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  padding: 3px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #ffd23f;
  color: var(--ink);
  font: 400 .8rem var(--font-display);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .12s ease, transform .12s ease;
}

.hub-tab-spot:hover,
.hub-tab-spot:focus-visible {
  z-index: 2;
  box-shadow: 0 3px 0 var(--ink), 0 0 0 3px #ffd23f, 0 0 18px rgba(255, 210, 63, .8);
  transform: translate(-50%, -50%) scale(1.18);
}

.hub-tab-spot:hover span,
.hub-tab-spot:focus-visible span {
  opacity: 1;
  transform: translate(-50%, 0);
}

.hub-tab-spot.here {
  box-shadow: 0 3px 0 var(--ink), 0 0 0 2px #7dff9a;
}

.hub-tab-spot:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.6);
}

.hub-tab-players {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 170px);
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: rgba(20, 8, 28, .55);
  overflow: hidden;
}

.hub-tab-players h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 10px 12px;
  border-bottom: 2px solid rgba(255, 255, 255, .08);
  font: 400 1.05rem var(--font-display);
}

.hub-tab-players h3 em {
  min-width: 26px;
  padding: 2px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #3ddc72;
  color: var(--ink);
  font: 900 .8rem var(--font-body);
  font-style: normal;
  text-align: center;
}

.hub-tab-players ul {
  flex: 1;
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
}

.hub-tab-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 12px;
  cursor: var(--cursor-pointer);
}

.hub-tab-player:hover,
.hub-tab-player:focus-visible {
  background: rgba(255, 255, 255, .08);
}

.hub-tab-player.me {
  background: rgba(61, 220, 114, .12);
  cursor: default;
}

.hub-tab-who {
  display: grid;
  flex: 1;
  min-width: 0;
}

.hub-tab-who b {
  overflow: hidden;
  font: 400 .95rem var(--font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-tab-who small {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  font-weight: 800;
  font-size: .72rem;
  opacity: .75;
  white-space: nowrap;
}

.hub-tab-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8f7390;
}

.hub-tab-player.hollow .hub-tab-dot,
.hub-tab-player.admin .hub-tab-dot {
  background: #3ddc72;
  box-shadow: 0 0 6px #3ddc72;
}

.hub-tab-player.match .hub-tab-dot {
  background: #ff5e7e;
  box-shadow: 0 0 6px #ff5e7e;
}

.hub-tab-staff {
  margin-right: 4px;
  font-style: normal;
}

.hub-tab-you {
  padding: 0 6px;
  border-radius: 999px;
  background: #3ddc72;
  color: var(--ink);
  font: 900 .62rem var(--font-body);
  font-style: normal;
  vertical-align: middle;
}

.hub-tab-lvl {
  flex: none;
  padding: 2px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #5ec8ff;
  color: var(--ink);
  font: 900 .72rem var(--font-body);
}

.hub-tab-empty {
  padding: 18px 10px;
  font-weight: 800;
  opacity: .7;
  text-align: center;
}

.hub-tab-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 800;
  font-size: .8rem;
  opacity: .8;
}

.hub-tab-foot kbd {
  padding: 1px 6px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-radius: 6px;
  font: 900 .75rem var(--font-body);
}

.hub-tab-foot [data-tab-cool].ready {
  color: #7dff9a;
}

@media (max-width: 760px) {
  .hub-tab-panel {
    gap: 8px;
    padding: 10px;
    overflow-y: auto;
  }

  .hub-tab-body {
    grid-template-columns: 1fr;
  }

  .hub-tab-map,
  .hub-tab-players {
    max-height: none;
  }

  .hub-tab-players ul {
    max-height: 260px;
  }

  .hub-tab-spot {
    width: 28px;
    height: 28px;
    font-size: .85rem;
  }

  .hub-tab-head small,
  .hub-tab-foot span:first-child {
    display: none;
  }
}

.poker-overlay {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  width: min(980px, calc(100vw - 24px));
  pointer-events: none;
}
.poker-overlay[hidden] { display: none; }
.poker-panel {
  pointer-events: auto;
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(42, 163, 94, .28), transparent 60%),
    linear-gradient(180deg, #1d3a2a 0%, #10221a 100%);
  border: 3px solid #08120d;
  box-shadow: 0 0 0 2px rgba(255, 210, 63, .5) inset, 0 18px 50px rgba(0, 0, 0, .55);
  border-radius: 18px;
  padding: 10px 12px 12px;
  color: #fff;
  font: 700 13px var(--font-body, "Nunito", sans-serif);
  animation: poker-in .22s ease-out;
}
@keyframes poker-in { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.poker-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 8px; min-width: 0; }
.poker-title { font-family: var(--font-display, "Lilita One", sans-serif); font-size: 20px; color: #ffd23f; letter-spacing: .4px; white-space: nowrap; }
.poker-meta { font-size: 12.5px; color: #cdeedb; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.poker-tools { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.poker-btn {
  font: 800 13px var(--font-body, "Nunito", sans-serif);
  color: #fff;
  background: #2c5a40;
  border: 2px solid #08120d;
  border-bottom-width: 4px;
  border-radius: 10px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .08s ease, filter .12s ease;
}
.poker-btn:hover:not(:disabled) { filter: brightness(1.12); }
.poker-btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
.poker-btn:disabled { opacity: .55; cursor: not-allowed; }
.poker-btn:focus-visible, .poker-chipbtn:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }
.poker-btn small { font-size: 11.5px; opacity: .9; margin-left: 3px; }
.poker-btn.ghost { background: rgba(255, 255, 255, .08); }
.poker-btn.go, .poker-btn.sit { background: #ffd23f; color: #2a1208; }
.poker-btn.fold { background: #6b6475; }
.poker-btn.call { background: #2f7cf6; }
.poker-btn.raise { background: #e8452f; min-width: 116px; }
.poker-rules {
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 8px 12px;
  margin: 0 0 8px;
  font-weight: 600;
  line-height: 1.45;
  color: #e2f5ea;
}
.poker-rules[hidden] { display: none; }
.poker-rules p { margin: 4px 0; }
.poker-ranks { font-size: 12px; color: #ffd23f; }
.poker-seats {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.poker-seat {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "av who" "st st";
  align-items: center;
  column-gap: 6px;
  row-gap: 3px;
  min-height: 62px;
  padding: 6px 7px;
  background: rgba(0, 0, 0, .3);
  border: 2px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  overflow: hidden;
}
.poker-seat .avatar { grid-area: av; width: 30px; height: 30px; }
.poker-seat.empty { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-style: dashed; }
.poker-seatno { font-size: 11px; color: #9fc7b1; text-transform: uppercase; letter-spacing: .6px; }
.poker-open { color: #9fc7b1; font-size: 12px; }
.poker-btn.sit { padding: 4px 10px; font-size: 12px; }
.poker-who { grid-area: who; display: flex; flex-direction: column; min-width: 0; padding-right: 16px; }
.poker-who b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poker-who em { font-style: normal; font-size: 9.5px; background: #3ddc72; color: #08200f; border-radius: 6px; padding: 0 4px; margin-left: 2px; vertical-align: 1px; }
.poker-who small { color: #ffd23f; font-size: 12px; }
.poker-status { grid-area: st; font-size: 11px; color: #cdeedb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 14px; }
.poker-status b { color: #ffd23f; }
.poker-seat.turn { border-color: #ffd23f; box-shadow: 0 0 0 2px rgba(255, 210, 63, .35), 0 0 18px rgba(255, 210, 63, .25); }
.poker-seat.you { background: rgba(61, 220, 114, .12); }
.poker-seat.folded { opacity: .55; }
.poker-seat.winner { border-color: #3ddc72; animation: poker-win 1s ease-in-out 3; }
@keyframes poker-win { 50% { box-shadow: 0 0 22px rgba(61, 220, 114, .7); } }
.poker-dbtn {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fffaf0;
  color: #1a0d12;
  border: 2px solid #1a0d12;
  font: 900 10px/13px var(--font-display, "Lilita One", sans-serif);
  font-style: normal;
  text-align: center;
}
.poker-bet {
  position: absolute;
  right: 5px;
  bottom: 5px;
  font-size: 11px;
  font-weight: 900;
  color: #2a1208;
  background: #ffd23f;
  border-radius: 8px;
  padding: 0 5px;
}
.poker-won { position: absolute; right: 5px; bottom: 5px; font: 14px var(--font-display, "Lilita One", sans-serif); color: #3ddc72; text-shadow: 0 2px 0 #08120d; }
.poker-mini { position: absolute; right: 5px; top: 5px; display: flex; gap: 1px; }
.poker-seat.has-cards .poker-who { padding-right: 38px; }
.poker-seat.has-cards .poker-dbtn { top: auto; right: auto; left: 25px; bottom: 22px; width: 15px; height: 15px; font-size: 9px; line-height: 11px; }
.poker-note.win { color: #3ddc72; font: 16px var(--font-display, "Lilita One", sans-serif); }
.poker-note.win b { color: #ffd23f; font-weight: 400; }
.poker-mini img { width: 17px; height: 24px; border-radius: 2px; }
.poker-timer {
  --k: 1;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: calc(var(--k) * 100%);
  background: #3ddc72;
}
.poker-timer.low { background: #ff5a5a; }
.poker-middle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px;
  margin-bottom: 8px;
  background: radial-gradient(ellipse at center, #1f8a4c 0%, #12673a 70%, #0c4d2a 100%);
  border: 3px solid #5a2412;
  box-shadow: 0 0 0 2px #c98a3c inset, inset 0 6px 18px rgba(0, 0, 0, .35);
  border-radius: 60px;
}
.poker-board { display: flex; gap: 6px; }
.poker-card {
  display: inline-block;
  width: 50px;
  height: 70px;
  border-radius: 5px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
}
.poker-card.slot { border: 2px dashed rgba(255, 236, 170, .3); box-shadow: none; }
.poker-card.big { width: 66px; height: 92px; border-radius: 7px; }
.poker-card.ghost { border: 2px dashed rgba(255, 255, 255, .18); box-shadow: none; }
.poker-card.fresh { animation: poker-card-in .32s ease-out; }
@keyframes poker-card-in { from { transform: rotateY(90deg) translateY(-8px); } to { transform: none; } }
.poker-potbox { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 280px; }
.poker-pot { font: 18px var(--font-display, "Lilita One", sans-serif); color: #fff; text-shadow: 0 2px 0 #08120d; }
.poker-pot b { color: #ffd23f; font-weight: 400; }
.poker-say { font-size: 12px; color: #e6ffe9; font-style: italic; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.poker-me {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
}
.poker-me:not(.seated) { display: block; }
.poker-watch { display: flex; align-items: center; gap: 8px; padding: 6px 4px; color: #cdeedb; }
.poker-eye { font-size: 20px; }
.poker-hole { display: flex; gap: 5px; }
.poker-mine { display: flex; flex-direction: column; gap: 4px; min-width: 110px; }
.poker-strength { font: 16px var(--font-display, "Lilita One", sans-serif); color: #ffd23f; min-height: 18px; }
.poker-stack { font-size: 12.5px; color: #cdeedb; }
.poker-stack b { color: #fff; }
.poker-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.poker-note { margin: 0; color: #cdeedb; }
.poker-note.small { font-size: 12px; }
.poker-standwrap { justify-self: end; }
.poker-actbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.poker-yourturn { position: relative; display: inline-flex; align-items: center; gap: 4px; font: 15px var(--font-display, "Lilita One", sans-serif); color: #ffd23f; padding-bottom: 5px; }
.poker-yourturn b { color: #fff; font-weight: 400; min-width: 26px; }
.poker-timer.wide { height: 3px; border-radius: 2px; }
.poker-raise { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.poker-presets { display: inline-flex; gap: 4px; }
.poker-chipbtn {
  font: 800 11.5px var(--font-body, "Nunito", sans-serif);
  color: #2a1208;
  background: #f4e6c4;
  border: 2px solid #08120d;
  border-radius: 999px;
  padding: 3px 9px;
  cursor: pointer;
}
.poker-chipbtn.on, .poker-chipbtn:hover { background: #ffd23f; }
.poker-raise input[type="range"] { width: 120px; accent-color: #e8452f; }
.poker-raise input[type="number"], .poker-buyin-amount input {
  width: 86px;
  font: 800 13px var(--font-body, "Nunito", sans-serif);
  color: #fff;
  background: rgba(0, 0, 0, .35);
  border: 2px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  padding: 4px 6px;
}
.poker-buyin {
  pointer-events: auto;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(4, 10, 7, .55);
  border-radius: 18px;
}
.poker-buyin[hidden] { display: none; }
.poker-buyin-card {
  width: min(360px, calc(100% - 24px));
  background: linear-gradient(180deg, #24402f, #142a1e);
  border: 3px solid #08120d;
  box-shadow: 0 0 0 2px rgba(255, 210, 63, .55) inset, 0 16px 40px rgba(0, 0, 0, .5);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fff;
}
.poker-buyin-title { font: 22px var(--font-display, "Lilita One", sans-serif); color: #ffd23f; }
.poker-buyin-sub { margin: 0; font-weight: 600; color: #cdeedb; line-height: 1.4; }
.poker-buyin-amount { display: flex; align-items: center; gap: 8px; }
.poker-buyin-amount input { width: 140px; font-size: 18px; }
.poker-coin { width: 22px; height: 22px; background: url("../assets/images/currency/Coin.png") center / contain no-repeat; }
.poker-buyin input[type="range"] { width: 100%; accent-color: #ffd23f; }
.poker-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.poker-buyin-row { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 760px) {
  .poker-seats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .poker-card { width: 40px; height: 56px; }
  .poker-card.big { width: 54px; height: 76px; }
  .poker-middle { border-radius: 26px; gap: 10px; }
  .poker-me { grid-template-columns: auto minmax(0, 1fr); }
  .poker-acts { grid-column: 1 / -1; }
  .poker-standwrap { grid-column: 1 / -1; justify-self: start; }
  .poker-title { font-size: 17px; }
  .poker-meta { display: none; }
  .poker-raise input[type="range"] { width: 100%; flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .poker-panel, .poker-card.fresh, .poker-seat.winner { animation: none; }
}

.poker-chat {
  position: fixed;
  z-index: 61;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  min-height: 0;
  color: #fff;
  font: 700 13px var(--font-body, "Nunito", sans-serif);
  background: linear-gradient(180deg, rgba(29, 58, 42, .96) 0%, rgba(16, 34, 26, .96) 100%);
  border: 3px solid #08120d;
  box-shadow: 0 0 0 2px rgba(255, 210, 63, .45) inset, 0 14px 40px rgba(0, 0, 0, .5);
  border-radius: 16px;
  overflow: hidden;
  animation: poker-in .22s ease-out;
}
.poker-chat[hidden] { display: none; }
.poker-chat.moving, .poker-chat.sizing { user-select: none; -webkit-user-select: none; box-shadow: 0 0 0 2px rgba(255, 210, 63, .8) inset, 0 20px 50px rgba(0, 0, 0, .6); }
.pchat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 10px;
  background: rgba(0, 0, 0, .25);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  cursor: grab;
  touch-action: none;
  flex-shrink: 0;
}
.poker-chat.moving .pchat-head { cursor: grabbing; }
.pchat-grab { color: rgba(255, 255, 255, .35); font-size: 12px; letter-spacing: -2px; }
.pchat-title { font: 16px var(--font-display, "Lilita One", sans-serif); color: #ffd23f; letter-spacing: .3px; white-space: nowrap; }
.pchat-unread { min-width: 20px; padding: 0 6px; border-radius: 999px; background: #ff5a5a; color: #fff; font: 900 11px/18px var(--font-body, "Nunito", sans-serif); text-align: center; }
.pchat-unread[hidden] { display: none; }
.pchat-icon {
  margin-left: auto;
  width: 26px;
  height: 24px;
  border-radius: 8px;
  border: 2px solid #08120d;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font: 900 15px/1 var(--font-body, "Nunito", sans-serif);
  cursor: pointer;
}
.pchat-icon:hover { background: rgba(255, 255, 255, .2); }
.pchat-icon:focus-visible, .pchat-chip:focus-visible, .pchat-send:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }
.pchat-log {
  list-style: none;
  margin: 0;
  padding: 8px 8px 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.pchat-msg { display: flex; gap: 7px; align-items: flex-start; line-height: 1.35; animation: pchat-in .18s ease-out; }
@keyframes pchat-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pchat-msg .avatar { width: 26px; height: 26px; flex-shrink: 0; margin-top: 1px; }
.pchat-body { display: flex; flex-direction: column; min-width: 0; }
.pchat-who { display: flex; align-items: center; gap: 5px; font-size: 12.5px; min-width: 0; }
.pchat-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchat-who time { margin-left: auto; padding-left: 6px; font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .4); white-space: nowrap; }
.pchat-seat { font-style: normal; font-size: 10px; font-weight: 900; color: #2a1208; background: #ffd23f; border-radius: 6px; padding: 0 4px; }
.pchat-seat.watch { background: rgba(255, 255, 255, .12); color: #fff; padding: 0 3px; }
.pchat-staff { font-style: normal; font-size: 11px; }
.pchat-text { color: #f1fff5; font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
.pchat-msg.me .pchat-text { color: #d9ffe6; }
.pchat-msg.dealer {
  display: block;
  padding: 4px 9px;
  border-radius: 10px;
  background: rgba(255, 210, 63, .1);
  border: 1px solid rgba(255, 210, 63, .22);
  font-size: 12px;
}
.pchat-msg.dealer .pchat-who { display: inline; color: #ffd23f; margin-right: 5px; }
.pchat-msg.dealer .pchat-text { color: #fff4cf; font-style: italic; }
.pchat-empty { margin: auto; color: #9fc7b1; font-weight: 600; text-align: center; padding: 14px 6px; }
.pchat-quick { display: flex; gap: 4px; padding: 4px 8px 0; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.pchat-quick::-webkit-scrollbar { display: none; }
.pchat-chip {
  flex-shrink: 0;
  font: 800 11.5px var(--font-body, "Nunito", sans-serif);
  color: #2a1208;
  background: #f4e6c4;
  border: 2px solid #08120d;
  border-radius: 999px;
  padding: 2px 9px;
  cursor: pointer;
}
.pchat-chip:hover { background: #ffd23f; }
.pchat-status { margin: 0; padding: 0 10px; max-height: 0; overflow: hidden; color: #ff9b9b; font-size: 11.5px; transition: max-height .15s ease, padding .15s ease; flex-shrink: 0; }
.pchat-status.show { max-height: 34px; padding: 4px 10px 0; }
.pchat-form { display: flex; gap: 6px; padding: 7px 8px 9px; flex-shrink: 0; }
.pchat-form input {
  flex: 1 1 auto;
  min-width: 0;
  font: 700 13px var(--font-body, "Nunito", sans-serif);
  color: #fff;
  background: rgba(0, 0, 0, .35);
  border: 2px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  padding: 7px 10px;
}
.pchat-form input:focus { outline: none; border-color: #ffd23f; }
.pchat-send {
  width: 38px;
  border-radius: 10px;
  border: 2px solid #08120d;
  border-bottom-width: 4px;
  background: #ffd23f;
  color: #2a1208;
  font-size: 15px;
  cursor: pointer;
}
.pchat-grip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  touch-action: none;
  background:
    linear-gradient(135deg, transparent 50%, rgba(255, 210, 63, .7) 50%, rgba(255, 210, 63, .7) 58%, transparent 58%, transparent 70%, rgba(255, 210, 63, .7) 70%, rgba(255, 210, 63, .7) 78%, transparent 78%);
}
.poker-chat.min .pchat-log,
.poker-chat.min .pchat-quick,
.poker-chat.min .pchat-status,
.poker-chat.min .pchat-form,
.poker-chat.min .pchat-grip { display: none; }
.poker-chat.min .pchat-head { border-bottom: 0; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .poker-chat, .pchat-msg { animation: none; }
}

.poker-standwrap { display: flex; align-items: center; gap: 6px; }
.poker-tipwrap { position: relative; }
.poker-btn.tip:not(:disabled) { color: #ffd23f; }
.poker-tipmenu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  display: flex;
  gap: 5px;
  padding: 7px;
  background: #142a1e;
  border: 2px solid #08120d;
  box-shadow: 0 0 0 2px rgba(255, 210, 63, .45) inset, 0 10px 26px rgba(0, 0, 0, .5);
  border-radius: 12px;
  z-index: 2;
  animation: poker-in .16s ease-out;
}
.poker-tipmenu .poker-chipbtn { white-space: nowrap; }
.poker-chipbtn:disabled { opacity: .45; cursor: not-allowed; }
.poker-tipjar { font-size: 11.5px; color: #ffd23f; opacity: .9; }
.poker-tipjar[hidden] { display: none; }
@media (max-width: 760px) {
  .poker-tipmenu { right: auto; left: 0; flex-wrap: wrap; width: max-content; max-width: 70vw; }
}

.bot-diff {
  display: flex;
  align-items: stretch;
  gap: 5px;
  margin-top: 8px;
  padding: 5px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .1);
}
.bot-diff-label {
  align-self: center;
  padding: 0 4px 0 6px;
  font: 800 11px var(--font-body, "Nunito", sans-serif);
  text-transform: uppercase;
  letter-spacing: .7px;
  color: rgba(255, 255, 255, .6);
}
.bot-diff [data-bot-diff] {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 4px 6px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
  transition: background .12s ease, transform .08s ease, border-color .12s ease;
}
.bot-diff [data-bot-diff] b { font: 14px var(--font-display, "Lilita One", sans-serif); letter-spacing: .3px; }
.bot-diff [data-bot-diff] small { font: 800 10px var(--font-body, "Nunito", sans-serif); color: rgba(255, 255, 255, .62); white-space: nowrap; }
.bot-diff [data-bot-diff]:hover { background: rgba(255, 255, 255, .12); }
.bot-diff [data-bot-diff]:active { transform: translateY(1px); }
.bot-diff [data-bot-diff]:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }
.bot-diff [data-bot-diff="easy"].on { background: #2bb673; border-color: #0f3d26; }
.bot-diff [data-bot-diff="medium"].on { background: #f0a020; border-color: #4a2c05; }
.bot-diff [data-bot-diff="hard"].on { background: #e2453c; border-color: #4a0f0b; }
.bot-diff [data-bot-diff].on small { color: rgba(255, 255, 255, .92); }
.hub-play-pop .bot-diff { margin-top: 6px; }
.hub-play-pop.race .bot-diff { display: none; }
.bot-diff[hidden] { display: none; }
.raceway .bot-diff { display: none; }

.mode-switch:has(.mode-opt[data-size="4"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mode-switch:has(.mode-opt[data-size="4"]) .mode-opt { gap: 8px; padding: 6px 6px; }
.mode-switch:has(.mode-opt[data-size="4"]) .mode-copy b { font-size: 1.15rem; }
.mode-dots.team i { width: 18px; height: 18px; }
.mode-dots.team i + i { margin-left: -6px; }
.mode-dots.team i:nth-child(3) { margin-left: 3px; }
.hub-sizes:has([data-hub-size="4"]) { grid-template-columns: repeat(3, 1fr); }
.fighter-plate.opp.ally { background: linear-gradient(180deg, #7be39a, #2f9a52); }
.fighter-plate.opp.foe2 { background: linear-gradient(180deg, #ff8a6f, #d0442c); }
.turn-banner.theirs.foe2 { background: #b8452e; }
.gem-hold.ally { background: linear-gradient(180deg, #7be39a, #2a9a54); }
.ally-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 6px;
  background: #3ddc72;
  color: #08200f;
  font: 900 .62rem var(--font-body, "Nunito", sans-serif);
  letter-spacing: .04em;
  vertical-align: 2px;
}
.round-overlay li.team-us, #roundBoard li.team-us, .standings li.team-us { box-shadow: inset 4px 0 0 #3ddc72; }
#roundBoard li.team-them, .standings li.team-them { box-shadow: inset 4px 0 0 #ff5a6e; }
.recent-with { margin-left: 6px; font-style: normal; font-size: .78rem; color: #8ff0b2; white-space: nowrap; }
.vs-stage.teams { width: min(1080px, 100%); }
.vs-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.vs-stage.teams .avatar.big { --size: clamp(58px, 10vw, 96px); }
.vs-stage.teams .vs-card { padding: 18px 10px 16px; }
.vs-card.ally { background: linear-gradient(180deg, #5fe0a0, #22a060); animation: vsSlideLeft .55s cubic-bezier(.2, 1.3, .3, 1) .12s both; }
.vs-stage.teams .vs-team.them .vs-card:nth-child(2) { animation-delay: .12s; }
@media (max-width: 680px) {
  .vs-team { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .vs-stage.teams .vs-card { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; padding: 8px 12px; }
  .vs-stage.teams .vs-card .avatar.big { --size: 48px; grid-row: span 4; }
  .mode-switch:has(.mode-opt[data-size="4"]) .mode-copy small { display: none; }
}

.opp-plates.multi.trio { max-width: 620px; gap: 6px; }
.opp-plates.trio .fighter-plate { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 7px; row-gap: 2px; padding: 5px 8px 5px 6px; }
.opp-plates.trio .fighter-plate .avatar { --size: 34px; grid-row: 1 / span 2; }
.opp-plates.trio .fighter-copy { min-width: 0; }
.opp-plates.trio .fighter-copy b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.opp-plates.trio .fighter-chips { display: none; }
.opp-plates.trio .round-pips { grid-column: 2; justify-self: start; padding: 2px 4px; }
.opp-plates.trio .ally-tag { display: none; }

.me-palette { min-width: 170px; min-height: 180px; }
.me-palette.moving, .me-palette.sizing { user-select: none; box-shadow: 0 0 0 3px rgba(94, 200, 255, .6), 0 5px 0 var(--ink); }
.me-palette-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; cursor: grab; touch-action: none; user-select: none; }
.me-palette.moving .me-palette-head { cursor: grabbing; }
.me-palette-head small { flex-basis: 100%; }
.me-palette-grab { color: rgba(234, 244, 255, .4); font-size: .8rem; letter-spacing: -2px; }
.me-palette-grip {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 20px;
  height: 20px;
  border-radius: 0 0 10px 0;
  cursor: nwse-resize;
  touch-action: none;
  z-index: 3;
  background: linear-gradient(135deg, transparent 50%, rgba(94, 200, 255, .8) 50%, rgba(94, 200, 255, .8) 58%, transparent 58%, transparent 70%, rgba(94, 200, 255, .8) 70%, rgba(94, 200, 255, .8) 78%, transparent 78%);
}
.me-palette-trash {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  place-items: center;
  border-radius: 12px;
  background: rgba(196, 34, 58, .82);
  color: #fff;
  font: 400 1.25rem var(--font-display);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  pointer-events: none;
}
.me-palette.trash { border-color: #ff5a6e; }
.me-palette.trash .me-palette-trash { display: grid; animation: me-trash-pulse .9s ease-in-out infinite; }
.me-palette.trash-no .me-palette-trash { background: rgba(60, 64, 84, .88); }
.me-palette.trash-no .me-palette-trash::after { content: " — can't delete this one"; font-size: .8rem; }
@keyframes me-trash-pulse { 50% { background-color: rgba(226, 52, 76, .9); } }
.me-palette.list .me-palette-list { grid-template-columns: minmax(0, 1fr); gap: 3px; }
.me-palette.list .me-prefab { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 3px 8px 3px 4px; text-align: left; font-size: .74rem; }
.me-palette.list .me-thumb { width: 34px; height: 34px; border-radius: 8px; }
.me-palette.tiles .me-palette-list { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
.me-palette.tiles .me-thumb { width: 52px; height: 52px; }
.me-palette.trash .me-palette-list { pointer-events: none; }

.poker-timer {
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--from, 1));
  animation-name: poker-timer-run, poker-timer-low;
  animation-timing-function: linear, step-end;
  animation-fill-mode: forwards, forwards;
  will-change: transform;
}
@keyframes poker-timer-run { from { transform: scaleX(var(--from, 1)); } to { transform: scaleX(0); } }
@keyframes poker-timer-low { from, to { background-color: #ff5a5a; } }

.bj-panel { background: radial-gradient(120% 90% at 50% 0%, rgba(31, 154, 106, .28), transparent 60%), linear-gradient(180deg, #17382c 0%, #0e2219 100%); }
.bj-dealer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 14px;
  margin-bottom: 8px;
  background: radial-gradient(ellipse at center, #1f9a6a 0%, #13704b 70%, #0b5236 100%);
  border: 3px solid #5a2412;
  box-shadow: 0 0 0 2px #c98a3c inset, inset 0 6px 18px rgba(0, 0, 0, .35);
  border-radius: 0 0 80px 80px;
}
.bj-dealer-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 300px; }
.bj-dealer-who b { font: 17px var(--font-display, "Lilita One", sans-serif); color: #ffd23f; }
.bj-dealer-who small { font-size: 12px; color: #e6ffe9; font-style: italic; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bj-dealer-cards { display: flex; gap: 6px; }
.bj-total { display: inline-block; align-self: flex-start; padding: 1px 8px; border-radius: 8px; background: rgba(0, 0, 0, .35); color: #fff; font: 14px var(--font-display, "Lilita One", sans-serif); }
.bj-total.bust { background: #b8233a; }
.bj-seat .poker-status { display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; }
.bj-mini { display: inline-flex; align-items: center; gap: 1px; padding: 1px 3px; border-radius: 6px; background: rgba(0, 0, 0, .25); }
.bj-mini.active { box-shadow: 0 0 0 2px #ffd23f; }
.bj-mini img { width: 14px; height: 20px; border-radius: 2px; }
.bj-mini b { margin-left: 3px; font-size: 10.5px; color: #fff; }
.bj-res { font-style: normal; font: 11px var(--font-display, "Lilita One", sans-serif); padding: 0 5px; border-radius: 6px; background: #3a3f55; color: #fff; }
.bj-res.blackjack { background: #ffd23f; color: #2a1208; }
.bj-res.win { background: #2bb673; }
.bj-res.push { background: #5a6bbf; }
.bj-res.lose, .bj-res.bust { background: #b8233a; }
.poker-won.neg { color: #ff8a98; }
.bj-me { grid-template-columns: minmax(0, 1fr) auto; }
.bj-mine { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.bj-hands { display: flex; gap: 14px; flex-wrap: wrap; }
.bj-hand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 6px; border-radius: 12px; border: 2px solid transparent; }
.bj-hand.active { border-color: #ffd23f; background: rgba(255, 210, 63, .08); }
.bj-hand-cards { display: flex; }
.bj-hand-cards .poker-card.big + .poker-card.big { margin-left: -30px; }
.bj-hand small { color: #cdeedb; font-size: 11.5px; }
.bj-bet { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bj-stake { font: 15px var(--font-display, "Lilita One", sans-serif); color: #fff; }
.bj-stake b { color: #ffd23f; font-weight: 400; }
.bj-chips { display: inline-flex; gap: 5px; }
.bj-chip {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px dashed rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 3px #08120d, 0 4px 0 #08120d;
  color: #fff;
  font: 12px var(--font-display, "Lilita One", sans-serif);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  cursor: pointer;
  transition: transform .08s ease;
}
.bj-chip:hover:not(:disabled) { transform: translateY(-2px); }
.bj-chip:active:not(:disabled) { transform: translateY(1px); }
.bj-chip:disabled { opacity: .4; cursor: not-allowed; }
.bj-chip:focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
.bj-chip.c50 { background: #d3253a; }
.bj-chip.c100 { background: #262a44; }
.bj-chip.c500 { background: #8a4fe0; }
.bj-chip.c1000 { background: #f07f1f; }
.bj-chip.c5000 { background: #c99a10; color: #1c1a2e; text-shadow: none; }
.bj-clock { position: relative; display: inline-flex; align-items: center; gap: 4px; padding-bottom: 5px; color: #cdeedb; font-weight: 800; }
.bj-clock b { color: #ffd23f; min-width: 22px; }
@media (max-width: 760px) {
  .bj-dealer { border-radius: 0 0 30px 30px; flex-wrap: wrap; }
  .bj-me { grid-template-columns: minmax(0, 1fr); }
  .bj-chip { width: 34px; height: 34px; font-size: 11px; }
}

.wheel-overlay { width: min(620px, calc(100vw - 24px)); }
.wheel-panel {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 94, 140, .26), transparent 60%),
    linear-gradient(180deg, #4a0d1f 0%, #24050f 100%);
  box-shadow: 0 0 0 2px rgba(255, 210, 63, .6) inset, 0 18px 50px rgba(0, 0, 0, .55);
}
.wheel-panel .poker-meta { display: inline-flex; gap: 12px; align-items: center; }
.wheel-panel .poker-meta span { display: inline-flex; gap: 4px; align-items: center; }
.wheel-body { display: grid; gap: 8px; margin-top: 8px; }
.wheel-actions { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.wheel-btn {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 9px 8px 8px;
  border: 3px solid #1a0d12;
  border-radius: 14px;
  font: 400 18px "Lilita One", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 0 #1a0d12;
  transition: transform .08s ease, filter .15s ease;
}
.wheel-btn small { display: inline-flex; align-items: center; gap: 4px; font: 800 12px var(--font-body, "Nunito", sans-serif); opacity: .95; }
.wheel-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #1a0d12; }
.wheel-btn:hover:not(:disabled) { filter: brightness(1.1); }
.wheel-btn:disabled { filter: grayscale(.7) brightness(.7); cursor: not-allowed; box-shadow: 0 2px 0 #1a0d12; }
.wheel-btn.free { background: linear-gradient(180deg, #3ddc72, #1d8f47); }
.wheel-btn.free.ready:not(:disabled) { animation: wheel-ready 1.2s ease-in-out infinite; }
.wheel-btn.coins { background: linear-gradient(180deg, #ffcf3f, #d18a12); color: #3a2400; }
.wheel-btn.cash { background: linear-gradient(180deg, #2bb673, #126b42); }
@keyframes wheel-ready { 0%, 100% { box-shadow: 0 4px 0 #1a0d12, 0 0 0 0 rgba(61, 220, 114, .6); } 50% { box-shadow: 0 4px 0 #1a0d12, 0 0 0 8px rgba(61, 220, 114, 0); } }
.wheel-status { margin: 0; min-height: 20px; text-align: center; color: #ffe9a0; font: 800 13px var(--font-body, "Nunito", sans-serif); }
.wheel-status b { color: #ffd23f; }
.wheel-odds, .wheel-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.wheel-odds { grid-template-columns: 1fr 1fr; column-gap: 14px; background: rgba(0, 0, 0, .25); border-radius: 10px; padding: 8px 10px; }
.wheel-odds[hidden] { display: none; }
.wheel-odds li, .wheel-recent li { display: grid; grid-template-columns: 10px 1fr auto; gap: 7px; align-items: center; font-size: 12px; }
.wheel-odds li i, .wheel-recent li i { width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid #1a0d12; }
.wheel-odds li b { color: #ffd23f; }
.wheel-odds .wheel-odds-note { grid-column: 1 / -1; display: block; opacity: .75; font-weight: 700; font-size: 11px; margin-top: 4px; }
.wheel-recent-wrap { background: rgba(0, 0, 0, .22); border-radius: 10px; padding: 6px 10px 8px; }
.wheel-recent-title { display: block; font: 400 13px "Lilita One", sans-serif; color: #ffcf6a; margin-bottom: 4px; }
.wheel-recent li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wheel-recent li b { color: #fff; font-weight: 800; }
.wheel-recent li.big b { color: #ffd23f; }
.wheel-recent li.empty { display: block; opacity: .7; }
@media (max-width: 520px) {
  .wheel-actions { grid-template-columns: 1fr 1fr; }
  .wheel-btn.free { grid-column: 1 / -1; }
  .wheel-odds { grid-template-columns: 1fr; }
}

.desktop-app .desktop-dl { display: none; }
.mobile-app .desktop-dl,
.mobile-app #installButton,
.mobile-app:not(.iap) .pill-plus,
.mobile-app:not(.iap) .get-more { display: none !important; }
.mobile-app:not(.iap) .buyable { pointer-events: none; cursor: default; }

.delete-account { display: grid; gap: 12px; text-align: left; }
.delete-account p { margin: 0; line-height: 1.45; }
.delete-account-note { font-size: .88rem; opacity: .8; }
.delete-account-note a { color: inherit; text-decoration: underline; }
.delete-account-field { display: grid; gap: 6px; font-weight: 800; }
.delete-account-field input {
  min-height: 46px;
  padding: 0 14px;
  border: 3px solid var(--ink);
  border-radius: 13px;
  background: #fffaf0;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  box-shadow: inset 0 3px 0 rgba(33, 13, 34, .15);
}
.delete-account-field input:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px var(--ink), inset 0 3px 0 rgba(33, 13, 34, .15); }
.delete-account-error { color: #ff7b8f; font-weight: 800; }

.report-form { display: grid; gap: 12px; text-align: left; }
.report-form p { margin: 0; line-height: 1.45; }
.report-reasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin: 0; padding: 0; border: 0; }
.report-reasons legend { padding: 0 0 6px; font-weight: 900; }
.report-reasons label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 2px solid rgba(255, 255, 255, .14); border-radius: 11px; cursor: var(--cursor-pointer); font-weight: 800; }
.report-reasons label:has(input:checked) { border-color: var(--yellow); background: rgba(255, 210, 63, .12); }
.report-reasons input { accent-color: #ffd23f; }
.report-note { display: grid; gap: 6px; font-weight: 800; }
.report-note textarea {
  padding: 10px 12px;
  border: 3px solid var(--ink);
  border-radius: 13px;
  background: #fffaf0;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .95rem;
  resize: vertical;
}
.report-mute { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.report-mute input { accent-color: #ffd23f; width: 18px; height: 18px; }
.report-error { color: #ff7b8f; font-weight: 800; }
.react-pick.react-report { margin-left: 4px; border-left: 1px solid rgba(255, 255, 255, .18); }

.auction-overlay { width: min(920px, calc(100vw - 24px)); }
.auction-panel {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(233, 185, 73, .2), transparent 60%),
    linear-gradient(180deg, #3a2414 0%, #1e1009 100%);
  box-shadow: 0 0 0 2px rgba(233, 185, 73, .55) inset, 0 18px 50px rgba(0, 0, 0, .55);
}
.auction-panel .poker-meta { display: inline-flex; gap: 12px; align-items: center; }
.auction-panel .poker-meta span { display: inline-flex; gap: 4px; align-items: center; }
.auction-body { display: grid; grid-template-columns: 1.15fr 1.25fr .9fr; gap: 12px; align-items: stretch; }
.auction-body[hidden] { display: none; }
.auction-lot, .auction-bid, .auction-next { background: rgba(0, 0, 0, .25); border-radius: 12px; padding: 10px; min-width: 0; }
.auction-lot { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: center; }
.auction-thumb { width: 84px; height: 84px; border-radius: 12px; background: radial-gradient(circle at 50% 40%, rgba(255, 236, 190, .35), rgba(0, 0, 0, .2)); border: 2px solid rgba(233, 185, 73, .5); display: grid; place-items: center; overflow: hidden; }
.auction-thumb img { width: 100%; height: 100%; object-fit: contain; }
.auction-info { display: grid; gap: 3px; min-width: 0; }
.auction-info b { font: 400 19px "Lilita One", sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auction-info small { color: #d8c4a4; font-weight: 700; }
.auction-no { color: #e9b949; font: 400 12px "Lilita One", sans-serif; letter-spacing: .06em; }
.chip-r { justify-self: start; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; text-transform: uppercase; color: var(--r); background: color-mix(in srgb, var(--r) 18%, transparent); border: 1px solid color-mix(in srgb, var(--r) 50%, transparent); }
.auction-empty { grid-column: 1 / -1; display: grid; gap: 4px; text-align: center; padding: 14px 6px; color: #d8c4a4; }
.auction-empty b { font: 400 18px "Lilita One", sans-serif; color: #ffe9b0; }
.auction-bid { display: grid; gap: 8px; align-content: start; }
.auction-price { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; }
.auction-price span { color: #d8c4a4; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.auction-price b { grid-row: 2; font: 400 28px "Lilita One", sans-serif; color: #ffd23f; display: inline-flex; align-items: center; gap: 6px; }
.auction-price small { grid-row: 3; color: #f0e2cc; font-weight: 700; }
.auction-price .sold { grid-row: 1 / 3; grid-column: 2; color: #3ddc72; font: 400 18px "Lilita One", sans-serif; }
.auction-price .unsold { grid-row: 1 / 3; grid-column: 2; color: #ff9aa8; font: 400 18px "Lilita One", sans-serif; }
.auction-clock { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.auction-clock .poker-timer { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.auction-clock .poker-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ffd23f, #3ddc72); transition: width .25s linear; }
.auction-clock .poker-timer i.low { background: linear-gradient(90deg, #ff5a5a, #ffb627); }
.auction-clock span { font: 400 14px "Lilita One", sans-serif; color: #ffe9b0; min-width: 48px; text-align: right; }
.auction-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.auction-actions input { width: 96px; height: 34px; border-radius: 10px; border: 2px solid rgba(233, 185, 73, .45); background: rgba(0, 0, 0, .35); color: #fff; font: 800 14px var(--font-body, "Nunito", sans-serif); padding: 0 8px; }
.auction-go { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 12px; border: 3px solid #1a0d12; background: linear-gradient(180deg, #ffd23f, #ff9a1f); color: #3a1a00; font: 400 16px "Lilita One", sans-serif; cursor: pointer; box-shadow: 0 3px 0 #1a0d12; }
.auction-go:active { transform: translateY(2px); box-shadow: 0 1px 0 #1a0d12; }
.auction-why { color: #ffe9b0; font-weight: 800; font-size: 13px; }
.auction-next { font-size: 12.5px; color: #f0e2cc; }
.auction-next b { display: block; font: 400 13px "Lilita One", sans-serif; color: #e9b949; margin-bottom: 4px; }
.auction-next b.mt { margin-top: 8px; }
.auction-next ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.auction-next li { display: flex; justify-content: space-between; gap: 6px; }
.auction-next li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auction-next li small { display: inline-flex; gap: 3px; align-items: center; color: #d8c4a4; white-space: nowrap; }
.auction-next p { margin: 0; color: #b8a488; }
.auction-sell { display: grid; gap: 12px; }
.sell-intro { margin: 0; color: var(--text-dim, #cdbfe0); }
.sell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 260px; overflow: auto; padding: 2px; }
.sell-item { position: relative; display: grid; gap: 4px; justify-items: center; padding: 8px 6px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .25); color: inherit; cursor: pointer; font: 800 11.5px var(--font-body, "Nunito", sans-serif); }
.sell-item canvas { width: 64px; height: 64px; }
.sell-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sell-item i { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 11px; color: #ffd23f; }
.sell-item.on { border-color: #ffd23f; box-shadow: 0 0 0 3px rgba(255, 210, 63, .25); background: rgba(255, 210, 63, .1); }
.sell-form { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.seg-cur { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg-cur button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .3); color: inherit; font: 800 13px var(--font-body, "Nunito", sans-serif); cursor: pointer; }
.seg-cur button.on { border-color: #ffd23f; background: rgba(255, 210, 63, .14); }
.sell-form label { display: grid; gap: 4px; font-weight: 800; font-size: 13px; }
.sell-form input { height: 38px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .35); color: #fff; padding: 0 10px; font: 800 15px var(--font-body, "Nunito", sans-serif); }
.sell-fee { margin: 0; font-weight: 700; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sell-fee.bad { color: #ff9aa8; }
.sell-lots { display: grid; gap: 6px; }
.sell-lot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .25); }
.sell-lot span { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sell-lots small { color: var(--text-dim, #cdbfe0); }
.empty-sell { padding: 18px; text-align: center; border: 1px dashed rgba(255, 255, 255, .2); border-radius: 12px; }
@media (max-width: 760px) {
  .auction-body { grid-template-columns: 1fr; }
  .auction-next { display: none; }
}

.poker-me.seated, .bj-me.seated { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: stretch; min-height: 0; }
.dock-cards { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 112px; }
.dock-hand { font: 400 15px var(--font-display, "Lilita One", sans-serif); color: #ffd23f; text-align: center; min-height: 18px; }
.dock-main { min-width: 0; display: flex; }
.dock-prompt { flex: 1; display: grid; gap: 8px; align-content: start; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 2px solid rgba(255, 255, 255, .08); }
.dock-prompt.turn { border-color: #ffd23f; background: linear-gradient(180deg, rgba(255, 210, 63, .16), rgba(0, 0, 0, .28)); animation: dock-glow 1.6s ease-in-out infinite; }
.dock-prompt.win { border-color: #3ddc72; background: linear-gradient(180deg, rgba(61, 220, 114, .18), rgba(0, 0, 0, .28)); }
.dock-prompt.lose { border-color: rgba(255, 90, 110, .6); }
.dock-prompt.warn { border-color: #ff9a3c; background: linear-gradient(180deg, rgba(255, 154, 60, .16), rgba(0, 0, 0, .28)); }
@keyframes dock-glow { 50% { box-shadow: 0 0 0 4px rgba(255, 210, 63, .18), 0 0 22px rgba(255, 210, 63, .25); } }
.dock-title { display: flex; align-items: center; gap: 8px; font: 400 21px var(--font-display, "Lilita One", sans-serif); color: #fff; line-height: 1.1; }
.dock-prompt.turn .dock-title { color: #ffd23f; }
.dock-prompt.win .dock-title { color: #7dffb0; }
.dock-secs:not(:empty) { font: 800 12px var(--font-body, "Nunito", sans-serif); color: #3a2400; background: #ffd23f; padding: 2px 8px; border-radius: 999px; }
.dock-sub { margin: 0; font-size: 13.5px; line-height: 1.4; color: #e3f1e8; }
.dock-sub b { color: #fff; }
.dock-prompt .poker-timer.wide { display: block; width: 100%; height: 5px; border-radius: 999px; }
.dock-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.act { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; min-width: 128px; padding: 8px 12px 9px; border-radius: 13px; border: 3px solid #08120d; color: #fff; text-align: left; cursor: pointer; box-shadow: 0 4px 0 #08120d; transition: transform .08s ease, filter .15s ease, box-shadow .08s ease; }
.act b { font: 400 19px var(--font-display, "Lilita One", sans-serif); letter-spacing: .3px; line-height: 1.05; }
.act small { grid-row: 2; font: 800 11.5px var(--font-body, "Nunito", sans-serif); opacity: .92; }
.act kbd { grid-row: 1 / 3; grid-column: 2; font: 800 11px var(--font-body, "Nunito", sans-serif); padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .28); }
.act:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.act:active:not(:disabled), .act.pressed { transform: translateY(3px); box-shadow: 0 1px 0 #08120d; }
.act:disabled { filter: grayscale(.8) brightness(.65); cursor: not-allowed; }
.act.fold { background: linear-gradient(180deg, #ef5b61, #b8282f); }
.act.check { background: linear-gradient(180deg, #4c8dff, #1f55d6); }
.act.call { background: linear-gradient(180deg, #34d27a, #158a45); }
.act.raise, .act.go { background: linear-gradient(180deg, #ffd23f, #f2930f); color: #3a1d00; }
.act.raise kbd, .act.go kbd { color: #3a1d00; border-color: rgba(58, 29, 0, .35); background: rgba(255, 255, 255, .3); }
.act.split { background: linear-gradient(180deg, #a978ff, #6b3ae0); }
.act.wide { flex: 1 1 260px; }
.dock-raise { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.dock-raise-lbl { font: 800 12px var(--font-body, "Nunito", sans-serif); color: #ffe39a; text-transform: uppercase; letter-spacing: .05em; }
.dock-raise .step { width: 32px; height: 32px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font: 800 18px var(--font-body, "Nunito", sans-serif); cursor: pointer; }
.dock-raise input { width: 110px; height: 32px; border-radius: 10px; border: 2px solid rgba(255, 210, 63, .5); background: rgba(0, 0, 0, .35); color: #fff; font: 800 15px var(--font-body, "Nunito", sans-serif); text-align: center; }
.dock-presets { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 4px; }
.pill { height: 30px; padding: 0 11px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .07); color: #fff; font: 800 12px var(--font-body, "Nunito", sans-serif); cursor: pointer; white-space: nowrap; }
.pill:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }
.pill.on { border-color: #ffd23f; color: #ffd23f; background: rgba(255, 210, 63, .12); }
.pill:disabled { opacity: .45; cursor: not-allowed; }
.dock-side { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 8px; min-width: 128px; }
.dock-stack { display: grid; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .25); text-align: center; }
.dock-stack small { font-size: 11px; color: #b9d9c6; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.dock-stack b { font: 400 17px var(--font-display, "Lilita One", sans-serif); color: #fff; }
.dock-side .poker-btn { justify-content: center; }
.dock-leaving { font-size: 12px; color: #ffd9a8; text-align: center; }
.dock-watch { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 2px dashed rgba(120, 240, 170, .35); color: #d6f5e2; }
.dock-watch-ico { font-size: 30px; }
.dock-watch b { display: block; font: 400 19px var(--font-display, "Lilita One", sans-serif); color: #fff; }
.dock-watch span { font-size: 13.5px; }
.dock-watch em { font-style: normal; color: #7dffb0; font-weight: 900; }
.bj-steps { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; font: 800 13px var(--font-body, "Nunito", sans-serif); color: #b9d9c6; }
.bj-steps li { display: inline-flex; align-items: center; gap: 6px; }
.bj-steps i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; background: rgba(255, 255, 255, .12); color: #fff; }
.bj-steps li.on { color: #ffd23f; }
.bj-steps li.on i { background: #ffd23f; color: #3a2400; box-shadow: 0 0 0 3px rgba(255, 210, 63, .25); }
.bj-steps li.done { color: #7dffb0; }
.bj-steps li.done i { background: #3ddc72; color: #062b15; }
.bj-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.bj-chiprow .bj-chip { width: 50px; height: 50px; font-size: 14px; }
.dock-betbox { display: grid; justify-items: center; gap: 4px; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.dock-betbox small { font-size: 11px; color: #b9d9c6; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.dock-betbox b { font: 400 22px var(--font-display, "Lilita One", sans-serif); color: #ffd23f; }
.dock-clock { font-size: 12.5px; color: #cdeedb; font-weight: 800; }
@media (max-width: 760px) {
  .poker-me.seated, .bj-me.seated { grid-template-columns: 1fr; }
  .dock-cards { flex-direction: row; justify-content: flex-start; }
  .dock-side { flex-direction: row; flex-wrap: wrap; }
  .act { flex: 1 1 120px; min-width: 0; }
}
.dock-prompt .poker-timer { position: relative; left: auto; bottom: auto; flex: none; }
.act.back { background: linear-gradient(180deg, #5a6b63, #3a4842); }
.act { grid-template-columns: 1fr; }

.factory-overlay { width: min(560px, calc(100vw - 24px)); }
.factory-panel {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 210, 63, .16), transparent 60%),
    linear-gradient(180deg, #2c3038 0%, #16181d 100%);
  box-shadow: 0 0 0 2px rgba(255, 210, 63, .55) inset, 0 18px 50px rgba(0, 0, 0, .55);
}
.factory-body { display: grid; gap: 10px; }
.factory-body:empty { display: none; }
.factory-intro, .factory-work, .factory-done, .factory-game { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); }
.factory-intro p, .factory-done p { margin: 0; color: #f4ecd6; font-weight: 700; }
.factory-intro b, .factory-done p b { color: #ffd23f; }
.factory-pay { color: #ffe9a6; font-weight: 800; }
.factory-hint { color: #b9c2cc; font-weight: 700; }
.factory-done > b { font: 400 20px "Lilita One", sans-serif; color: #7dffb0; }
.factory-done small { color: #b9c2cc; font-weight: 700; }
.factory-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.factory-actions .act { flex: 1 1 160px; justify-items: center; text-align: center; }
.factory-actions .act.go { font: 400 19px "Lilita One", sans-serif; }
.factory-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #f4ecd6; font-weight: 700; }
.factory-progress { position: relative; height: 26px; border-radius: 999px; border: 2px solid #08120d; background: rgba(255, 255, 255, .08); overflow: hidden; }
.factory-progress span { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(-45deg, #ffd23f 0 12px, #f2b50f 12px 24px); transition: width .4s ease; }
.factory-progress b { position: relative; display: grid; place-items: center; height: 100%; font: 400 15px "Lilita One", sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.factory-step { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 18px "Lilita One", sans-serif; color: #fff; }
.factory-step-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(62, 224, 255, .18); border: 2px solid rgba(62, 224, 255, .7); font-size: 20px; flex: none; }
.factory-miss { color: #ffb2a8; font-weight: 800; }
.factory-game small { color: #d8dde4; font-weight: 700; }
.factory-game.shake { animation: factoryShake .32s ease; }
.tape-bar { position: relative; height: 30px; border-radius: 10px; border: 2px solid #08120d; background: linear-gradient(90deg, #6b3a2a, #8a5a2c); overflow: hidden; }
.tape-zone { position: absolute; top: 0; bottom: 0; background: rgba(61, 220, 114, .85); box-shadow: 0 0 12px rgba(61, 220, 114, .8) inset; }
.tape-mark { position: absolute; top: -2px; bottom: -2px; width: 6px; margin-left: -3px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 2px #08120d, 0 0 10px rgba(255, 255, 255, .8); }
@keyframes factoryShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.factory-pop { margin-top: 10px; }
.factory-pop[hidden] { display: none; }
.factory-pop .factory-game {
  background: rgba(0, 0, 0, .28);
  box-shadow: 0 0 0 2px rgba(255, 210, 63, .55) inset;
  animation: factoryPop .18s ease-out;
}
.factory-pop .factory-step { font-size: 20px; }
.factory-pop .tape-bar { height: 38px; }
@keyframes factoryPop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.factory-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.factory-steps li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: #9aa3ad; font: 400 14px "Lilita One", sans-serif; }
.factory-steps li span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: 12px; }
.factory-steps li.on { background: rgba(62, 224, 255, .18); color: #fff; box-shadow: 0 0 0 2px rgba(62, 224, 255, .7) inset; }
.factory-steps li.on span { background: #3ee0ff; color: #08120d; }
.factory-steps li.done { color: #7dffb0; }
.factory-steps li.done span { background: #3ddc72; color: #08120d; }

.fc-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.fc-tabs[hidden] { display: none; }
.fc-tabs button {
  position: relative; flex: 1; padding: 6px 8px; border: 2px solid rgba(255, 255, 255, .12); border-radius: 999px;
  background: rgba(255, 255, 255, .06); color: #b9c2cc; font: 400 14px "Lilita One", sans-serif; cursor: var(--cursor-pointer);
}
.fc-tabs button:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.fc-tabs button.on { color: #1d1b22; background: linear-gradient(180deg, #ffe27a, #ffbf1f); border-color: #1d1b22; box-shadow: 0 2px 0 #1d1b22; }
.fc-dot { position: absolute; top: -3px; right: 6px; width: 11px; height: 11px; border-radius: 50%; background: #ff4d6d; border: 2px solid #16181d; animation: fcPing 1.4s ease-in-out infinite; }
.fc-dot[hidden] { display: none; }
@keyframes fcPing { 50% { transform: scale(1.25); } }
.factory-body { max-height: min(62vh, 560px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.fc-mini {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border-radius: 10px;
  border: 1px solid rgba(255, 210, 63, .35); background: rgba(255, 210, 63, .08); color: #f4ecd6; font-weight: 800; font-size: .85rem; cursor: var(--cursor-pointer);
}
.fc-mini b { color: #ffd23f; font: 400 1rem "Lilita One", sans-serif; }
.fc-mini em { font-style: normal; color: #7dffb0; }
.fc-blurb { display: block; margin-top: 4px; color: #c9d1da; font-weight: 700; font-size: .86rem; }
.fc-jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fc-job {
  display: grid; justify-items: center; gap: 2px; padding: 8px 6px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05); color: #f4ecd6; cursor: var(--cursor-pointer); transition: transform .12s ease, border-color .12s ease;
}
.fc-job i { font-style: normal; font-size: 1.7rem; line-height: 1.1; }
.fc-job b { font: 400 .92rem "Lilita One", sans-serif; text-align: center; }
.fc-job small { color: #9aa3ad; font-weight: 800; font-size: .72rem; }
.fc-job:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(62, 224, 255, .6); }
.fc-job.on { border-color: #3ee0ff; background: rgba(62, 224, 255, .14); box-shadow: 0 0 14px rgba(62, 224, 255, .35); }
.fc-job.on small { color: #bdf3ff; }
.fc-job:disabled { opacity: .5; filter: grayscale(.7); cursor: not-allowed; }
.fc-jobline { display: flex; justify-content: space-between; gap: 8px; color: #ffe9a6; font: 400 .95rem "Lilita One", sans-serif; }
.fc-team, .fc-fast { font-style: normal; color: #7dffb0; }
.fc-fast { font-weight: 900; animation: fcPing 1s ease-in-out infinite; transform-origin: left center; }
.fc-card { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 210, 63, .2), rgba(255, 140, 40, .08)); border: 2px solid rgba(255, 210, 63, .55); }
.fc-badge {
  display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 50%; font-size: 1.9rem;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #ffbf1f 60%, #c98a00); border: 3px solid #1d1b22; box-shadow: 0 3px 0 #1d1b22, 0 0 18px rgba(255, 210, 63, .5);
}
.fc-who { display: grid; gap: 1px; min-width: 0; }
.fc-who small { color: #ffe9a6; font-weight: 900; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.fc-who b { font: 400 1.35rem "Lilita One", sans-serif; color: #fff; }
.fc-who span { color: #c9d1da; font-weight: 700; font-size: .78rem; }
.fc-warn { padding: 7px 10px; border-radius: 10px; background: rgba(255, 90, 70, .14); border: 1px solid rgba(255, 120, 100, .55); color: #ffd2c9; font-weight: 800; }
.fc-warn b { color: #fff; }
.fc-next { display: grid; gap: 7px; }
.fc-next p { margin: 0; color: #f4ecd6; font-weight: 800; }
.fc-next p b { color: #ffd23f; font: 400 1.05rem "Lilita One", sans-serif; }
.fc-next p small { color: #9aa3ad; }
.fc-next.top p { color: #ffe9a6; }
.fc-req { position: relative; display: flex; justify-content: space-between; padding: 5px 10px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .07); border: 2px solid #08120d; color: #fff; font: 400 .9rem "Lilita One", sans-serif; }
.fc-req span, .fc-req b { position: relative; z-index: 1; text-shadow: 0 1px 2px #000; }
.fc-req i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2f6fd0, #3ee0ff); transition: width .5s ease; }
.fc-req.met i { background: linear-gradient(90deg, #22a35a, #3ddc72); }
.fc-promote:not(:disabled) { animation: fcGlow 1.3s ease-in-out infinite; }
@keyframes fcGlow { 50% { box-shadow: 0 0 22px rgba(255, 210, 63, .9); filter: brightness(1.12); } }
.fc-ladder { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.fc-ladder li {
  display: grid; grid-template-columns: 22px 26px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  padding: 5px 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); color: #8f98a3;
}
.fc-ladder .fc-rank { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .1); font: 400 .75rem "Lilita One", sans-serif; }
.fc-ladder i { grid-row: span 2; font-style: normal; font-size: 1.2rem; }
.fc-ladder b { font: 400 .95rem "Lilita One", sans-serif; }
.fc-ladder small { grid-column: 3; font-weight: 700; font-size: .72rem; }
.fc-ladder em { grid-row: 1 / span 2; grid-column: 4; font-style: normal; font: 400 .85rem "Lilita One", sans-serif; color: #ffe9a6; }
.fc-ladder li.past { color: #9fe8b9; }
.fc-ladder li.past .fc-rank { background: #3ddc72; color: #08120d; }
.fc-ladder li.now { color: #fff; background: rgba(255, 210, 63, .16); box-shadow: 0 0 0 2px rgba(255, 210, 63, .7) inset; }
.fc-ladder li.now .fc-rank { background: #ffd23f; color: #1d1b22; }
.fc-ladder li.next { color: #d8f6ff; background: rgba(62, 224, 255, .08); box-shadow: 0 0 0 1px rgba(62, 224, 255, .45) inset; }
.fc-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.fc-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.fc-list li.mate { background: rgba(61, 220, 114, .1); box-shadow: 0 0 0 1px rgba(61, 220, 114, .4) inset; }
.fc-list li.got { background: rgba(255, 210, 63, .12); box-shadow: 0 0 0 1px rgba(255, 210, 63, .55) inset; }
.fc-name { display: grid; min-width: 0; }
.fc-name b { color: #fff; font: 400 1rem "Lilita One", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-name small { color: #9aa3ad; font-weight: 800; font-size: .72rem; }
.fc-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.fc-acts .act { padding: 5px 12px; min-height: 0; font: 400 .9rem "Lilita One", sans-serif; }
.fc-acts .poker-btn { padding: 4px 9px; }
.fc-tag { padding: 3px 9px; border-radius: 999px; background: rgba(61, 220, 114, .2); color: #7dffb0; font: 400 .8rem "Lilita One", sans-serif; }
.fc-tag.wait { background: rgba(255, 255, 255, .1); color: #c9d1da; }
.fc-empty { color: #c9d1da; }
.qc-game .qc-belt { width: 100%; height: auto; aspect-ratio: 520 / 150; border-radius: 10px; border: 2px solid #08120d; background: #1d2026; }
.qc-dots { display: flex; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.qc-dots li { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 2px solid #08120d; }
.qc-dots li.on { background: #3ee0ff; box-shadow: 0 0 8px #3ee0ff; }
.qc-dots li.ok { background: #3ddc72; }
.qc-dots li.bad { background: #ff5a4f; }
.qc-game .qc-reject { background: linear-gradient(180deg, #e8473c, #a51f22); }
.qc-game kbd { margin-left: 6px; padding: 0 6px; border-radius: 5px; background: rgba(0, 0, 0, .3); font: 700 .75rem ui-monospace, monospace; }
.qc-stop { justify-self: end; }
.fc-invite {
  position: fixed; top: calc(max(12px, env(safe-area-inset-top)) + 64px); left: 50%; z-index: 60; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; width: min(520px, calc(100vw - 24px)); padding: 10px 12px; border-radius: 16px;
  background: linear-gradient(180deg, #2c3038, #16181d); border: 3px solid #1d1b22; box-shadow: 0 0 0 2px rgba(255, 210, 63, .7) inset, 0 14px 40px rgba(0, 0, 0, .55); color: #f4ecd6;
}
.fc-invite[hidden] { display: none; }
.fc-invite.show { animation: fcDrop .42s cubic-bezier(.2, 1.4, .4, 1); }
.fc-invite > i { font-style: normal; font-size: 1.8rem; }
.fc-invite > span:first-of-type { flex: 1; display: grid; font-weight: 800; }
.fc-invite b { color: #ffd23f; }
.fc-invite small { color: #9aa3ad; font-weight: 700; }
@keyframes fcDrop { from { transform: translate(-50%, -30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.fc-promo { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: radial-gradient(circle, rgba(255, 210, 63, .25), rgba(0, 0, 0, .65)); animation: factoryPop .25s ease-out; cursor: var(--cursor-pointer); }
.fc-promo.out { opacity: 0; transition: opacity .35s ease; }
.fc-promo-card {
  display: grid; justify-items: center; gap: 6px; padding: 22px 34px 24px; border-radius: 22px; text-align: center; color: #fff;
  background: linear-gradient(180deg, #34383f, #16181d); border: 4px solid #1d1b22; box-shadow: 0 0 0 3px #ffd23f inset, 0 0 60px rgba(255, 210, 63, .6);
  animation: fcPromo .6s cubic-bezier(.2, 1.5, .4, 1);
}
.fc-promo-card small { font: 400 1.3rem "Lilita One", sans-serif; letter-spacing: .14em; color: #ffd23f; }
.fc-promo-badge {
  display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; font-size: 3.6rem;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #ffbf1f 60%, #c98a00); border: 4px solid #1d1b22; box-shadow: 0 5px 0 #1d1b22, 0 0 40px rgba(255, 210, 63, .8);
  animation: fcSpin 1.1s ease-out;
}
.fc-promo-card b { font: 400 2rem "Lilita One", sans-serif; text-shadow: 0 3px 0 #1d1b22; }
.fc-promo-card span { color: #ffe9a6; font-weight: 800; }
.fc-promo-card em { font-style: normal; color: #7dffb0; font-weight: 900; }
@keyframes fcPromo { from { transform: scale(.4) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes fcSpin { from { transform: rotateY(540deg) scale(.6); } to { transform: rotateY(0) scale(1); } }
@media (max-width: 520px) {
  .fc-jobs { grid-template-columns: 1fr; }
  .fc-job { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; column-gap: 10px; }
  .fc-job i { font-size: 1.3rem; }
}
.reduced-motion .fc-dot, .reduced-motion .fc-promote, .reduced-motion .fc-fast, .reduced-motion .fc-promo-card, .reduced-motion .fc-promo-badge, .reduced-motion .fc-invite.show { animation: none; }

.hub-work {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 9px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 45%),
    linear-gradient(180deg, #3d434c, #1c1f25);
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 4px 0 var(--ink), 0 0 18px rgba(255, 210, 63, .55);
  cursor: var(--cursor-pointer);
  overflow: hidden;
  animation: hubWorkGlow 1.8s ease-in-out infinite;
}
.hub-work[hidden] { display: none; }
.hub-work::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5px;
  background: repeating-linear-gradient(-45deg, #ffd23f 0 8px, #1d1b22 8px 16px);
}
.hub-work i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffd23f;
  border: 2px solid var(--ink);
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1;
  animation: hubLvlWiggle 2.2s ease-in-out infinite;
}
.hub-work span { display: grid; text-align: left; }
.hub-work b { font: 400 1.05rem var(--font-display); color: #ffd23f; letter-spacing: .02em; }
.hub-work small { font-weight: 900; font-size: .68rem; color: #d8dde4; }
.hub-work:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-2px); }
.hub-work:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink), 0 0 18px rgba(255, 210, 63, .55); }
.hub-work:disabled { filter: grayscale(.6) brightness(.8); }
@keyframes hubWorkGlow { 50% { box-shadow: 0 4px 0 var(--ink), 0 0 30px rgba(255, 210, 63, .95); } }
@media (prefers-reduced-motion: reduce) {
  .hub-work, .hub-work i { animation: none; }
}

.blitz-panel { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(8, 4, 12, .45); }
.blitz-panel[hidden] { display: none; }
.blitz-card { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 140px); overflow: auto; border-radius: 18px; padding: 14px 16px 16px; background: radial-gradient(120% 90% at 50% 0%, rgba(62, 224, 255, .16), transparent 60%), linear-gradient(180deg, #232a3a 0%, #121620 100%); box-shadow: 0 0 0 2px rgba(255, 210, 63, .6) inset, 0 20px 60px rgba(0, 0, 0, .6); color: #fff; }
.blitz-head { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-bottom: 10px; }
.blitz-head b { font: 400 24px "Lilita One", sans-serif; color: #ffd23f; }
.blitz-head small { grid-column: 1; color: #b9c8de; font-weight: 800; }
.blitz-x { grid-row: 1 / 3; grid-column: 2; width: 36px; height: 36px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font-size: 16px; cursor: pointer; }
.blitz-body h4 { margin: 12px 0 6px; font: 400 17px "Lilita One", sans-serif; display: flex; align-items: center; gap: 8px; }
.blitz-body h4 em { font-style: normal; font-size: 13px; padding: 1px 8px; border-radius: 999px; background: #ff3a5c; }
.blitz-find { width: 100%; justify-items: center; font: 400 22px "Lilita One", sans-serif !important; padding: 12px !important; }
.blitz-queue { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; padding: 10px 12px; border-radius: 14px; background: rgba(62, 224, 255, .12); box-shadow: 0 0 0 2px rgba(62, 224, 255, .5) inset; }
.blitz-queue b { font: 400 18px "Lilita One", sans-serif; }
.blitz-queue small { grid-column: 2; color: #b9c8de; font-weight: 800; }
.blitz-queue .act { grid-row: 1 / 3; grid-column: 3; min-width: 96px; }
.blitz-spin { grid-row: 1 / 3; width: 26px; height: 26px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .2); border-top-color: #3ee0ff; animation: blitzSpin .8s linear infinite; }
@keyframes blitzSpin { to { transform: rotate(360deg); } }
.blitz-rules { margin: 10px 0 0; color: #d8e2f2; font-weight: 700; font-size: 13px; }
.blitz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.blitz-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .3); }
.blitz-vs { display: flex; gap: 6px; align-items: baseline; font: 400 17px "Lilita One", sans-serif; min-width: 0; }
.blitz-vs b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.blitz-vs i { font-style: normal; color: #ffd23f; font-size: 13px; }
.blitz-meta { grid-column: 1; color: #b9c8de; font-weight: 800; font-size: 12px; }
.blitz-row .blitz-watch { grid-row: 1 / 3; grid-column: 2; min-width: 110px; justify-items: center; }
.blitz-empty { color: #b9c8de; font-weight: 700; }
.blitz-hud { position: fixed; top: calc(max(12px, env(safe-area-inset-top)) + 70px); left: 50%; transform: translateX(-50%); z-index: 60; display: grid; justify-items: center; gap: 8px; pointer-events: none; width: min(560px, calc(100vw - 24px)); }
.blitz-hud[hidden] { display: none; }
.blitz-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 3px #08120d, 0 10px 30px rgba(0, 0, 0, .5); font: 400 19px "Lilita One", sans-serif; color: #fff; }
.blitz-side { padding: 8px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blitz-side.a { background: linear-gradient(90deg, #1f55d6, #3e8cff); }
.blitz-side.b { background: linear-gradient(90deg, #ff4a5c, #c0263a); text-align: right; }
.blitz-mid { display: grid; justify-items: center; padding: 4px 14px; background: #14161b; }
.blitz-mid b { color: #ffd23f; font-weight: 400; font-size: 15px; }
.blitz-mid small { font-size: 18px; }
.blitz-count { font: 400 96px "Lilita One", sans-serif; color: #ffd23f; text-shadow: 0 6px 0 #08120d, 0 0 30px rgba(255, 210, 63, .7); animation: blitzPulse 1s ease-out infinite; }
@keyframes blitzPulse { 0% { transform: scale(1.3); opacity: .4; } 30% { transform: scale(1); opacity: 1; } }
.blitz-tip { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border-radius: 999px; background: rgba(10, 10, 16, .82); box-shadow: 0 0 0 2px rgba(255, 255, 255, .15) inset; color: #f4ecd6; font-weight: 800; font-size: 13px; pointer-events: auto; }
.blitz-cd { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(#ff5a5a calc(var(--k) * 360deg), rgba(255, 255, 255, .15) 0); box-shadow: 0 0 0 2px #08120d; }
.blitz-leave { pointer-events: auto; border: 2px solid rgba(255, 255, 255, .25); border-radius: 999px; background: rgba(255, 70, 90, .25); color: #fff; font: 800 12px "Nunito", sans-serif; padding: 4px 10px; cursor: pointer; }
.blitz-result { display: grid; justify-items: center; padding: 12px 22px; border-radius: 18px; background: rgba(10, 10, 16, .88); box-shadow: 0 0 0 3px #ffd23f, 0 20px 50px rgba(0, 0, 0, .6); animation: blitzPop .4s cubic-bezier(.2, 1.6, .4, 1); }
.blitz-result b { font: 400 34px "Lilita One", sans-serif; color: #fff; }
.blitz-result.win b { color: #7dffb0; }
.blitz-result small { color: #d8e2f2; font-weight: 800; }
@keyframes blitzPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Blitz rounds, score and stadium practice */
.blitz-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.blitz-side.b { justify-content: flex-end; }
.blitz-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blitz-score { flex: none; min-width: 30px; padding: 0 8px; border-radius: 10px; background: rgba(0, 0, 0, .3); text-align: center; font-weight: 400; font-size: 22px; }
.blitz-result.round b { font-size: 26px; }
.blitz-spin.sm { width: 16px; height: 16px; border-width: 3px; }
.blitz-practice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.blitz-practice .blitz-bot { flex: 1 1 180px; justify-items: center; }
.blitz-lvls { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .3); }
.blitz-lvl { border: 0; border-radius: 9px; padding: 7px 10px; background: transparent; color: #b9c8de; font: 800 13px "Nunito", sans-serif; cursor: pointer; }
.blitz-lvl.on { background: #ffd23f; color: #241606; }
.blitz-tag { flex: none; align-self: center; padding: 1px 8px; border-radius: 999px; background: rgba(62, 224, 255, .18); color: #9fefff; font: 800 11px "Nunito", sans-serif; }

/* "Try Chrome or Brave" tip, shown once when the game runs slow in a browser that draws it on the CPU */
.browser-tip {
  position: fixed;
  left: 50%;
  bottom: calc(104px + env(safe-area-inset-bottom));
  z-index: 90;
  width: min(430px, calc(100vw - 32px));
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: #3e1a42;
  box-shadow: var(--hard-sm), 0 18px 40px rgba(0, 0, 0, .4);
  color: #fff;
  transform: translateX(-50%);
  animation: browserTipIn .35s cubic-bezier(.2, 1.2, .35, 1);
}

.browser-tip.leaving {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
}

.browser-tip-icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 13px;
  background: var(--gold);
  font-size: 1.35rem;
}

.browser-tip-text b {
  display: block;
  font: 400 1.2rem var(--font-display);
  letter-spacing: .02em;
  color: var(--gold);
}

.browser-tip-text small {
  display: block;
  margin-top: 3px;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.35;
  color: #f4e4ee;
}

.browser-tip-text strong {
  color: #fff;
  font-weight: 900;
}

.browser-tip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.browser-tip-actions button {
  padding: 7px 14px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  font: 400 .95rem var(--font-display);
  letter-spacing: .02em;
  color: var(--ink);
  cursor: pointer;
}

.browser-tip-ok {
  background: var(--gold);
  box-shadow: 0 3px 0 var(--ink);
}

.browser-tip-never {
  background: rgba(255, 255, 255, .14);
  color: #fff !important;
}

@keyframes browserTipIn {
  from { opacity: 0; transform: translateX(-50%) translateY(18px) scale(.96); }
  to { opacity: 1; transform: translateX(-50%); }
}

/* In-world chat (Hollow, admin hub, dev map): see-through, shooter-style chat pinned to the far left,
   vertically centred. Closed it's a feed of fading lines; T / Enter opens the full log, tabs and input. */
:root {
  --wc-left: max(10px, env(safe-area-inset-left));
  --wc-w: min(420px, calc(100vw - 24px));
  --wc-h: min(420px, 56vh);
  --wc-top: calc(50% - var(--wc-h) / 2);
  --wc-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .55);
}

/* position and size come from the drag / resize helpers (saved separately from the menu chat) */
.chat-dock .chat-panel.world-chat {
  width: var(--wc-w);
  height: var(--wc-h);
  z-index: 40;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(6, 3, 10, .58), rgba(6, 3, 10, .36) 60%, rgba(6, 3, 10, .08));
  box-shadow: none;
  animation: worldChatOpen .16s ease-out both;
}

.chat-panel.world-chat .chat-grip,
.chat-panel.world-chat .chat-size {
  color: rgba(255, 255, 255, .75);
  text-shadow: var(--wc-shadow);
}

.chat-panel.world-chat .chat-head {
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  background: none;
}

.chat-panel.world-chat .chat-tabs {
  padding: 0;
  border: 0;
  background: none;
}

.chat-panel.world-chat .chat-tab {
  padding: 3px 9px;
  border-radius: 7px;
  color: rgba(255, 255, 255, .62);
  font-size: .82rem;
  text-shadow: var(--wc-shadow);
}

.chat-panel.world-chat .chat-tab.active {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  box-shadow: none;
}

.chat-panel.world-chat .chat-online {
  color: rgba(255, 255, 255, .7);
  text-shadow: var(--wc-shadow);
}

.chat-panel.world-chat .chat-close {
  border: 0;
  background: rgba(255, 255, 255, .1);
  box-shadow: none;
  color: #fff;
}

.chat-panel.world-chat .chat-log {
  padding: 6px 8px;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

/* one compact line per message: [lvl] Name: text */
.chat-panel.world-chat .chat-msg {
  margin-top: 2px;
  padding: 2px 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  line-height: 1.35;
  animation: none;
}

.chat-panel.world-chat .chat-msg:hover {
  background: rgba(255, 255, 255, .07);
}

.chat-panel.world-chat .chat-meta {
  display: inline-flex;
  margin-right: 5px;
  vertical-align: 1px;
}

.chat-panel.world-chat .chat-name::after {
  content: ":";
}

.chat-panel.world-chat .chat-name,
.chat-panel.world-chat .chat-text {
  text-shadow: var(--wc-shadow);
}

/* skin-gradient names include dark colours: lift them so they read on the see-through panel */
.chat-panel.world-chat .chat-msg.skin-name .chat-name {
  background: linear-gradient(90deg, color-mix(in srgb, var(--name-a) 50%, #fff), color-mix(in srgb, var(--name-b) 50%, #fff));
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .95));
}

.chat-panel.world-chat .chat-react-btn {
  top: 50%;
  right: 2px;
  width: 22px;
  height: 20px;
  border: 0;
  background: rgba(255, 255, 255, .16);
  box-shadow: none;
  font-size: .78rem;
  transform: translateY(-50%);
}

.chat-panel.world-chat .chat-lvl {
  border-width: 1px;
  font-size: .64rem;
}

.chat-panel.world-chat .chat-line,
.chat-panel.world-chat .chat-line .chat-text {
  display: inline;
}

.chat-panel.world-chat .chat-text {
  color: #fff;
  font-size: .92rem;
}

.chat-panel.world-chat .chat-ts {
  display: none;
}

.chat-panel.world-chat .chat-announce {
  margin: 4px 0 0;
  padding: 3px 4px;
  border: 0;
  background: none;
  box-shadow: none;
  animation: none;
}

.chat-panel.world-chat .chat-announce-icon {
  width: auto;
  height: auto;
  border: 0;
  background: none;
  box-shadow: none;
}

.chat-panel.world-chat .chat-announce .chat-text {
  color: #ffe27a;
}

.chat-panel.world-chat .chat-system {
  margin: 4px 0 0;
  padding: 2px 4px;
  border: 0;
  color: rgba(255, 255, 255, .7);
  text-align: left;
  text-shadow: var(--wc-shadow);
}

.chat-panel.world-chat .chat-empty {
  color: rgba(255, 255, 255, .6);
  text-shadow: var(--wc-shadow);
}

.chat-panel.world-chat .chat-form {
  padding: 6px 8px 8px;
  border-top: 0;
  background: none;
}

.chat-panel.world-chat .chat-input {
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  box-shadow: none;
}

.chat-panel.world-chat .chat-input::placeholder {
  color: rgba(255, 255, 255, .5);
}

.chat-panel.world-chat .chat-input:focus {
  border-color: rgba(62, 224, 255, .8);
  box-shadow: 0 0 0 2px rgba(62, 224, 255, .2);
}

.chat-panel.world-chat .chat-send {
  width: 38px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  box-shadow: none;
}

@keyframes worldChatOpen {
  from {
    opacity: 0;
  }
}

/* closed state: recent lines in the same spot as the open log, fading out on their own */
.world-feed {
  position: fixed;
  left: var(--wc-left);
  top: var(--wc-top);
  z-index: 5;
  width: var(--wc-w);
  height: var(--wc-h);
  margin: 0;
  padding: 0 8px 54px;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 2px;
  overflow: hidden;
  pointer-events: none;
}

.world-feed[hidden] {
  display: none;
}

.world-feed li {
  max-width: 100%;
  padding: 2px 8px 2px 4px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0));
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
  text-shadow: var(--wc-shadow);
  overflow-wrap: anywhere;
  animation: worldFeedIn .2s ease-out both;
  transition: opacity .6s ease;
}

.world-feed li.fading {
  opacity: 0;
}

.world-feed .wf-name {
  margin-right: 2px;
  color: var(--name, #ffd23f);
  font-family: var(--font-display);
  font-weight: 400;
}

.world-feed .wf-msg.staff .wf-name {
  color: #5ec8ff;
}

.world-feed .wf-lvl {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 16px;
  margin-right: 5px;
  padding: 0 4px;
  border: 1px solid var(--ink);
  border-radius: 5px;
  background: var(--cyan);
  color: var(--ink);
  font-size: .64rem;
  font-weight: 900;
  vertical-align: 1px;
  text-shadow: none;
}

.world-feed .wf-system {
  color: #ffe27a;
}

.world-feed .wf-icon {
  margin-right: 5px;
}

.world-feed .wf-hint {
  color: rgba(255, 255, 255, .78);
  font-size: .85rem;
  font-style: italic;
}

@keyframes worldFeedIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
}

/* Staff-only chat tabs (👥 Team, 🛡️ Admin): shown to owners / admins only */
.chat-tab[hidden] {
  display: none;
}

.chat-tab.staff-tab {
  color: #9fdcff;
}

.chat-tab.staff-tab.active {
  background: #2f6fb8;
  color: #fff;
}

.team-chat,
.admin-tools {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.team-chat[hidden],
.admin-tools[hidden] {
  display: none;
}

.at-scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

.at-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(94, 200, 255, .25);
  border-radius: 10px;
  background: rgba(20, 31, 61, .38);
}

.at-block h4 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  color: #9fdcff;
  font: 400 .9rem var(--font-display);
  letter-spacing: .02em;
}

.at-block h4 small {
  color: rgba(234, 244, 255, .5);
  font: 700 .66rem var(--font-body);
  letter-spacing: 0;
}

.at-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.at-input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  background: rgba(0, 0, 0, .4);
  color: #fff;
  font: 700 .85rem var(--font-body);
}

.at-block > .at-input {
  flex: none;
}

.at-input::placeholder {
  color: rgba(255, 255, 255, .45);
}

.at-input:focus {
  outline: none;
  border-color: rgba(62, 224, 255, .8);
}

.at-input.shake {
  border-color: #ff6b6b;
  animation: chatShake .35s ease;
}

.at-btn {
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: 400 .82rem var(--font-display);
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: var(--cursor-pointer);
}

.at-btn:hover {
  background: rgba(255, 255, 255, .22);
}

.at-btn.danger {
  border-color: rgba(255, 90, 110, .5);
  background: rgba(255, 90, 110, .22);
}

.at-btn.danger:hover {
  background: rgba(255, 90, 110, .4);
}

.at-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #eaf4ff;
  font: 800 .78rem var(--font-body);
}

.at-select select {
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  background: #1d2f5c;
  color: #fff;
  font: 700 .8rem var(--font-body);
}

.at-recent {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.at-recent li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 6px;
  color: #fff;
  font: 700 .82rem var(--font-body);
}

.at-recent li:hover {
  background: rgba(255, 255, 255, .08);
}

.at-name {
  flex: none;
  max-width: 40%;
  padding: 0;
  border: 0;
  background: none;
  color: #ffd23f;
  font: 400 .85rem var(--font-display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: var(--cursor-pointer);
}

.at-name:hover {
  text-decoration: underline;
}

.at-text {
  flex: 1;
  min-width: 0;
  color: rgba(255, 255, 255, .85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.at-tools {
  display: flex;
  flex: none;
  gap: 3px;
}

.at-mini {
  width: 26px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .12);
  font-size: .8rem;
  cursor: var(--cursor-pointer);
}

.at-mini:hover {
  background: rgba(255, 90, 110, .45);
}

.at-recent .at-empty {
  color: rgba(255, 255, 255, .55);
  font-style: italic;
}

.at-log {
  flex: none;
  max-height: 34%;
  margin: 0;
  padding: 0 6px 6px;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
}

.at-log:empty {
  display: none;
}

/* team lines in the in-world feed */
.world-feed .wf-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 0 5px;
  border-radius: 5px;
  background: rgba(47, 111, 184, .9);
  color: #fff;
  font: 400 .7rem var(--font-display);
  letter-spacing: .03em;
  vertical-align: 1px;
  text-shadow: none;
}

.world-feed .wf-msg.team {
  color: #cfe9ff;
}

/* map editor: prefab search + landmarks */
.me-search { display: flex; align-items: center; gap: 6px; margin: 2px 8px 4px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); }
.me-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: 800 .8rem var(--font-body); }
.me-search input::placeholder { color: rgba(255, 255, 255, .55); }
.me-prefab[hidden], .me-cat[hidden] { display: none; }
.me-landmark { position: relative; background: rgba(255, 210, 63, .1); border-color: rgba(255, 210, 63, .25); }
.me-landmark-icon { display: grid; place-items: center; font-style: normal; font-size: 1.6rem; background: radial-gradient(circle at 50% 60%, #7a5a9a, #4a2f63); }
.me-landmark.gone { border-style: dashed; border-color: rgba(255, 120, 120, .7); background: rgba(255, 90, 90, .1); }
.me-landmark.gone::after { content: "removed — drag to put back"; position: absolute; top: 3px; left: 3px; right: 3px; padding: 1px 4px; border-radius: 6px; background: #c0392b; color: #fff; font: 900 .52rem var(--font-body); text-transform: uppercase; }

.desktop-dl .desktop-dl-alt { opacity: 0.7; font-size: 0.92em; }