:root {
  --bg-main: #0b1020;
  --bg-main-2: #111827;
  --bg-main-3: #0f172a;

  --bg-section: #12182b;
  --bg-section-soft: #151c31;

  --bg-card: #171f36;
  --bg-card-2: #1b2542;
  --bg-card-elevated: #202b4a;

  --text-main: #f3f4f6;
  --text-sub: #c7cfdd;
  --text-muted: #8e9ab0;

  --accent-cyan: #67e8f9;
  --accent-cyan-soft: rgba(103, 232, 249, 0.12);

  --accent-purple: #a855f7;
  --accent-purple-2: #c084fc;

  --accent-gold: #fbbf24;
  --accent-orange: #fb923c;
  --accent-green: #34d399;
  --accent-red: #f87171;

  --border-soft: rgba(103, 232, 249, 0.12);
  --border-soft-2: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(168, 85, 247, 0.22);

  --shadow-panel: 0 10px 30px rgba(0, 0, 0, 0.28);
  --shadow-soft: 0 6px 16px rgba(0, 0, 0, 0.20);

  --surface-highlight: rgba(255, 255, 255, 0.03);

  /* legacy aliases */
  --bg-1: var(--bg-main);
  --bg-2: var(--bg-main-2);
  --bg-3: var(--bg-main-3);
  --ink: var(--text-main);
  --accent: var(--accent-purple);
  --accent-2: var(--accent-cyan);
  --panel: rgba(18, 24, 43, 0.94);
  --shadow: rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
html {
  overflow-x: hidden;
}

body {
  font-family: "Fira Sans", "Trebuchet MS", sans-serif;
  background:
    radial-gradient(420px 420px at -80px -120px, rgba(240, 138, 93, 0.30), rgba(240, 138, 93, 0) 70%),
    radial-gradient(420px 420px at calc(100% + 80px) calc(100% + 120px), rgba(78, 205, 196, 0.28), rgba(78, 205, 196, 0) 70%),
    linear-gradient(135deg, var(--bg-1), var(--bg-2) 55%, var(--bg-3));
  color: var(--ink);
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  z-index: 0;
  padding-top: var(--site-header-height, 84px);
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  background: rgba(20, 17, 12, 0.8);
  color: #f8f3e9;
}
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.topbar.is-hidden {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}
.topbar.is-compact-static {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .topbar {
    transition: none;
  }
}
.safe-mode * {
  animation: none !important;
  transition: none !important;
}
.ui-effects-off * {
  animation: none !important;
  transition: none !important;
}
.ui-effects-off *::before,
.ui-effects-off *::after {
  animation: none !important;
  transition: none !important;
}
.logo {
  font-weight: 800;
  letter-spacing: 1.4px;
  font-family: "Bebas Neue", "Oswald", "Impact", sans-serif;
  font-size: 22px;
}
.logo-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 4px 10px 4px 0;
  color: inherit;
  text-decoration: none;
}
.logo-link:hover {
  text-decoration: none;
}
.maintenance-banner {
  padding: 0 16px;
  margin: 0 auto 12px;
}
.maintenance-banner-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 196, 92, 0.28);
  background: rgba(255, 196, 92, 0.12);
  color: #ffe5a1;
  font-size: 13px;
  line-height: 1.45;
}
.user {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.user a { color: #f8f3e9; }
.user-chip {
  --robot-chip-size: 40px;
  --robot-chip-radius: 12px;
  --robot-chip-padding: 5px;
  --avatar-chip-size: 18px;
  --avatar-chip-offset: -4px;
  position: relative;
  width: var(--robot-chip-size);
  height: var(--robot-chip-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: 6px;
  overflow: visible;
}
.user-chip.is-robot-icon {
  flex: 0 0 auto;
}
.user-chip.variant-header {
  --robot-chip-size: 38px;
  --robot-chip-radius: 10px;
  --robot-chip-padding: 4px;
  --avatar-chip-size: 16px;
  --avatar-chip-offset: -3px;
}
.user-chip.variant-hero,
.user-chip.variant-mvp {
  --robot-chip-size: 48px;
  --robot-chip-radius: 14px;
  --robot-chip-padding: 6px;
  --avatar-chip-size: 20px;
}
.user-chip.variant-ranking {
  --robot-chip-size: 46px;
  --robot-chip-radius: 13px;
  --robot-chip-padding: 6px;
  --avatar-chip-size: 19px;
}
.user-chip.variant-record {
  --robot-chip-size: 42px;
  --robot-chip-radius: 12px;
  --robot-chip-padding: 5px;
  --avatar-chip-size: 18px;
}
.user-chip.variant-log {
  --robot-chip-size: 40px;
  --robot-chip-radius: 11px;
  --robot-chip-padding: 5px;
  --avatar-chip-size: 17px;
}
.user-chip.is-podium {
  --robot-chip-size: 48px;
}
.user-chip-main {
  width: 100%;
  height: 100%;
  border-radius: var(--robot-chip-radius);
  border: 1px solid rgba(33, 28, 20, 0.25);
  background:
    radial-gradient(circle at 50% 32%, rgba(103, 232, 249, 0.24), rgba(103, 232, 249, 0) 62%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(9, 14, 25, 0.98));
  padding: var(--robot-chip-padding);
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.28);
}
.user-chip-robot {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}
.user-chip-avatar {
  position: absolute;
  right: var(--avatar-chip-offset);
  bottom: var(--avatar-chip-offset);
  width: var(--avatar-chip-size);
  height: var(--avatar-chip-size);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.48);
  background: rgba(10, 16, 28, 0.94);
  box-shadow: 0 6px 12px rgba(2, 6, 23, 0.32);
}
.user-chip-avatar.is-generated {
  opacity: 0.72;
  transform: scale(0.93);
}
.user-chip.variant-log .user-chip-avatar.is-generated {
  opacity: 0.58;
}
.user-chip-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.header-user-name {
  font-weight: 700;
  color: var(--text-main);
}
.user-name-with-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
  vertical-align: middle;
}
.user-name-with-badges.is-compact {
  gap: 5px;
}
.user-name-text {
  min-width: 0;
}
.user-trophy-list {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.user-trophy-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(245, 204, 96, 0.52);
  background: linear-gradient(180deg, rgba(94, 69, 18, 0.96), rgba(55, 40, 10, 0.96));
  color: #ffe7a6;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(9, 14, 25, 0.24);
}
.user-trophy-list.is-compact .user-trophy-badge {
  padding: 1px 6px;
  font-size: 10px;
}
.user-trophy-badge.trophy-supporter_founder {
  border-color: rgba(250, 204, 21, 0.64);
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 247, 205, 0.24), rgba(255, 247, 205, 0) 56%),
    linear-gradient(180deg, rgba(126, 86, 12, 0.98), rgba(74, 48, 8, 0.98));
  color: #fff1b8;
}
.user-trophy-badge.trophy-supporter_lab {
  border-color: rgba(251, 191, 36, 0.78);
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 247, 205, 0.3), rgba(255, 247, 205, 0) 56%),
    linear-gradient(180deg, rgba(150, 99, 12, 0.98), rgba(92, 60, 8, 0.98));
  color: #fff7c2;
  box-shadow: 0 4px 10px rgba(9, 14, 25, 0.24), 0 0 10px rgba(250, 204, 21, 0.12);
}
.user-trophy-badge.is-more {
  border-color: rgba(148, 163, 184, 0.42);
  background: rgba(15, 23, 42, 0.86);
  color: rgba(226, 232, 240, 0.88);
}
.settings-avatar-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 14px;
}
.settings-avatar-row,
.settings-avatar-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.settings-avatar-label {
  color: var(--text-muted);
  font-size: 0.94rem;
}
.settings-avatar-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(14, 21, 38, 0.92);
  color: var(--text-sub);
}
.settings-avatar-input {
  max-width: min(100%, 340px);
}
.settings-avatar-form button {
  flex: 0 0 auto;
}
.badge-overlay {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid rgba(33, 28, 20, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.robot-badge-32 {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
  display: block;
}
.robot-badge-32.preview {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(33, 28, 20, 0.35);
  border-radius: 6px;
  background: rgba(255, 253, 248, 0.9);
}
.robot-badge-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.user-chip[data-presence-state] {
  animation: user-chip-float 3.8s ease-in-out infinite;
  transform-origin: 50% 100%;
  will-change: transform, filter;
}
.user-chip[data-presence-state] .user-chip-main,
.user-chip[data-presence-state] .user-chip-avatar {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.user-chip[data-presence-state="active"] {
  animation-duration: 2.2s;
  filter: drop-shadow(0 3px 8px rgba(26, 107, 103, 0.22));
}
.user-chip[data-presence-state="active"] .user-chip-main {
  box-shadow:
    0 0 0 2px rgba(26, 107, 103, 0.18),
    0 8px 18px rgba(26, 107, 103, 0.22);
  border-color: rgba(82, 214, 206, 0.48);
}
.user-chip[data-presence-state="active"] .user-chip-avatar {
  box-shadow: 0 0 0 2px rgba(26, 107, 103, 0.14), 0 6px 12px rgba(2, 6, 23, 0.32);
  border-color: rgba(82, 214, 206, 0.48);
}
.user-chip[data-presence-state="warm"] {
  animation-duration: 3s;
  filter: drop-shadow(0 3px 8px rgba(201, 132, 38, 0.16));
}
.user-chip[data-presence-state="warm"] .user-chip-main {
  box-shadow:
    0 0 0 2px rgba(201, 132, 38, 0.14),
    0 8px 18px rgba(201, 132, 38, 0.18);
  border-color: rgba(251, 191, 36, 0.4);
}
.user-chip[data-presence-state="warm"] .user-chip-avatar {
  box-shadow: 0 0 0 2px rgba(201, 132, 38, 0.12), 0 6px 12px rgba(2, 6, 23, 0.32);
  border-color: rgba(251, 191, 36, 0.4);
}
.user-chip[data-presence-state="idle"] {
  animation-duration: 4.6s;
}
.user-chip.is-podium .user-chip-main {
  border-color: rgba(251, 191, 36, 0.56);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.14),
    0 12px 24px rgba(2, 6, 23, 0.34),
    0 0 24px rgba(251, 191, 36, 0.16);
}
.user-chip.is-podium .user-chip-avatar {
  border-color: rgba(251, 191, 36, 0.48);
}
.presence-mini-label {
  font-size: 11px;
  color: #5b6575;
  line-height: 1.35;
}
@keyframes user-chip-float {
  0%,
  100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(-1deg); }
  55% { transform: translateY(1px) rotate(0.6deg); }
  80% { transform: translateY(-1px) rotate(1deg); }
}

.container {
  padding: 24px;
  position: relative;
  z-index: 0;
}

.footer {
  position: relative;
  z-index: 0;
}

h1, h2 {
  font-family: "Bebas Neue", "Oswald", "Impact", sans-serif;
  letter-spacing: 1px;
}

.card {
  border: 1px solid rgba(33, 28, 20, 0.2);
  padding: 16px;
  background: var(--panel);
  margin-bottom: 16px;
  border-radius: 12px;
  box-shadow: 0 12px 26px var(--shadow);
}

.notice {
  background: #fff3c4;
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: 10px;
}
.is-hidden { display: none; }
.error {
  background: #ffd6d6;
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: 10px;
}
.error-box {
  border: 1px solid #d94d4d;
  background: #fff5f5;
}
.error-trace {
  max-height: 260px;
  overflow: auto;
  background: #2f1d1d;
  color: #ffdada;
  padding: 10px;
  border-radius: 8px;
  font-size: 12px;
}

/* Image viewer/lightbox safety defaults:
   keep overlays invisible unless an explicit open-state class is set. */
.image-viewer-overlay,
.image-modal-overlay,
.lightbox-overlay,
.lightbox-backdrop,
.modal-backdrop.image-backdrop {
  display: none;
}
body.image-viewer-open .image-viewer-overlay,
body.modal-open .image-modal-overlay,
body.lightbox-open .lightbox-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.link { margin-top: 16px; }

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  align-items: center;
  margin-bottom: 22px;
}
.landing-page {
  display: grid;
  gap: 18px;
}
.landing-arcade-page {
  position: relative;
}
.landing-front-stage {
  position: relative;
}
.landing-front-banner {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.landing-front-showcase {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 18px 18px 0;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #6aa4e3 0%, #4b6fbe 48%, #2d2a6d 100%);
}
.landing-front-showcase-main {
  width: min(100%, 720px);
  min-height: 180px;
  max-height: 300px;
  object-fit: contain;
  image-rendering: auto;
}
.landing-front-icons {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 12px;
}
.landing-front-icons img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(16, 20, 54, 0.24));
}
.landing-front-card,
.landing-front-subcard {
  background: linear-gradient(180deg, rgba(24, 24, 32, 0.97), rgba(31, 33, 41, 0.96));
  color: #f6f4ef;
  border: 2px solid rgba(149, 225, 255, 0.55);
  box-shadow: 0 18px 42px rgba(13, 19, 48, 0.22);
}
.landing-front-card {
  display: grid;
  gap: 10px;
}
.landing-front-subcard {
  display: grid;
  gap: 12px;
}
.landing-front-card .upgrade-cost,
.landing-front-card .robot-time,
.landing-front-subcard .robot-time {
  color: rgba(246, 244, 239, 0.82);
}
.landing-front-caption {
  font-size: 13px;
  color: rgba(246, 244, 239, 0.86);
}
.landing-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
}
.landing-title {
  margin: 0;
  font-size: clamp(40px, 8vw, 68px);
  line-height: 0.95;
}
.landing-tagline {
  font-size: clamp(22px, 4.4vw, 34px);
  font-weight: 900;
  line-height: 1.1;
}
.landing-subline {
  font-size: 16px;
  line-height: 1.6;
  color: #46566f;
}
.landing-front-card .landing-subline {
  color: rgba(246, 244, 239, 0.86);
}
.landing-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.landing-primary-cta,
.landing-secondary-cta,
.landing-front-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  min-width: 180px;
}
.landing-cta-row-hero {
  align-items: stretch;
}
.landing-front-btn {
  border-radius: 16px;
  padding: 12px 18px;
  font-weight: 900;
  text-decoration: none;
  color: #181818;
  border: 2px solid rgba(33, 28, 20, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.landing-front-btn-primary {
  background: linear-gradient(180deg, #ffe16a 0%, #ffc62e 100%);
}
.landing-front-btn-secondary {
  color: #f8faff;
  background: linear-gradient(180deg, #4f6fff 0%, #1f2cff 100%);
}
.landing-front-btn-google {
  color: #182333;
  background: linear-gradient(180deg, #f6f8fb 0%, #dfe8f7 100%);
}
.landing-front-btn-mini {
  min-height: 44px;
  min-width: 0;
  font-size: 15px;
  background: linear-gradient(180deg, #ffe16a 0%, #ffc62e 100%);
}
.landing-mini-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.landing-inline-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.landing-inline-metric {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(149, 225, 255, 0.18);
}
.landing-inline-metric-label {
  font-size: 12px;
  color: rgba(246, 244, 239, 0.72);
}
.landing-inline-metric-value {
  font-size: 22px;
  font-weight: 900;
  color: #fff4be;
}
.landing-mvp-image {
  width: 100%;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(33, 28, 20, 0.12);
  object-fit: contain;
}
.landing-world-panel,
.landing-steps-panel,
.landing-updates-panel,
.landing-mvp-panel,
.landing-support-panel {
  display: grid;
  gap: 12px;
}
.landing-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.landing-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.landing-metric-card,
.landing-update-card {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(33, 28, 20, 0.12);
  background: rgba(255, 250, 240, 0.84);
}
.landing-metric-label,
.landing-update-meta {
  font-size: 12px;
  color: #5a5348;
}
.landing-metric-value {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
}
.landing-metric-value span {
  font-size: 15px;
  margin-left: 4px;
}
.landing-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 16px;
}
.landing-main-stack,
.landing-side-stack,
.landing-step-list,
.landing-update-list {
  display: grid;
  gap: 12px;
}
.landing-step-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(33, 28, 20, 0.12);
  background: rgba(255, 250, 240, 0.84);
}
.landing-step-no {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 107, 103, 0.12);
  color: #0d5956;
  font-weight: 900;
}
.landing-mvp-robot-name {
  font-size: 20px;
  font-weight: 800;
}
.auth-alt-actions {
  display: grid;
  justify-items: center;
  gap: 6px;
}
.home-support-card {
  display: grid;
  gap: 10px;
}
.support-product-grid {
  display: grid;
  gap: 16px;
}
.support-product-card {
  display: grid;
  gap: 10px;
}
.home-main-robot { margin-bottom: 14px; }
.home-priority-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-summary-panel .card {
  display: grid;
  gap: 6px;
}
.home-summary-line {
  line-height: 1.6;
}
.priority-next-action { order: 1; }
.priority-core { order: 2; }
.priority-boss-alert { order: 3; }
.priority-boost { order: 4; }
.priority-progress { order: 5; }
.priority-research { order: 6; }
.priority-medals { order: 2; }
.home-collapsible > summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.home-collapsible > summary::-webkit-details-marker {
  display: none;
}
.home-collapsible-content {
  margin-top: 10px;
}
.home-layout-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
  align-items: start;
}
.home-main-stack {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}
.home-right-stack {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}
.home-social-stack {
  grid-auto-rows: min-content;
}
.home-social-stack .home-actions-panel { order: 1; }
.home-social-stack .home-weekly-panel { order: 2; }
.home-social-stack .home-faction-panel { order: 3; }
.home-social-stack .home-nav-panel { order: 4; }
.home-social-stack .home-ranking-panel { order: 5; }
.home-social-stack .home-visibility-panel { order: 6; }
.home-right-stack > .panel {
  margin-bottom: 0;
}
.home-actions-grid {
  margin-top: 12px;
}
.world-env-card {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(33, 28, 20, 0.15);
  background: #fffaf0;
  font-size: 13px;
  line-height: 1.5;
}
.world-env-reason {
  opacity: 0.85;
}
.faction-row {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.faction-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(33, 28, 20, 0.2);
  background: rgba(255, 255, 255, 0.85);
  padding: 2px;
}
.faction-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.faction-badge.is-active {
  border-color: rgba(26, 107, 103, 0.7);
  background: rgba(236, 255, 253, 0.9);
}
.faction-badge.is-inactive {
  opacity: 0.65;
}
.slot-overflow-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(33, 28, 20, 0.22);
  background: rgba(233, 86, 47, 0.12);
  font-size: 12px;
}
.ranking-mini {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ranking-mini li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(33, 28, 20, 0.2);
}
.weekly-fit-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(26, 107, 103, 0.35);
  background: rgba(78, 205, 196, 0.15);
  font-size: 11px;
  font-weight: 700;
}
.boss-badge-strong {
  border-color: rgba(212, 27, 47, 0.6);
  background: rgba(212, 27, 47, 0.16);
  color: #8e0817;
  font-weight: 900;
}
.main-robot-layout {
  display: grid;
  gap: 12px;
  align-items: start;
}
.robot-top-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.robot-top-visual {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.robot-info-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}
.main-robot-meta-grid {
  display: grid;
  gap: 10px;
}
.robot-status-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.robot-top-row .stat-card {
  min-width: 0;
}
.robot-name-card,
.robot-personality-card {
  min-height: 100%;
}
.stat-card-full {
  grid-column: 1 / -1;
}
.main-robot-achievement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin-top: 6px;
}
.main-robot-thumb {
  width: 128px;
  height: 128px;
}
.stat-small {
  font-size: 16px;
  line-height: 1.2;
}
.home-action-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  align-items: center;
}
.inline-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inline-form-top {
  margin-top: 8px;
}
.inline-form select {
  border: 1px solid rgba(33, 28, 20, 0.2);
  border-radius: 8px;
  padding: 7px 8px;
}
.inline-form select.is-invalid {
  border-color: #d94d4d;
  background: #fff5f5;
}
.fuse-mode-switch {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.fuse-mode-tabs {
  display: flex;
  gap: 8px;
}
.fuse-mode-tab {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid rgba(33, 28, 20, 0.2);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.fuse-mode-tab.is-active {
  background: #fffaf0;
  border-color: rgba(26, 107, 103, 0.45);
  font-weight: 700;
}
.fuse-panel .robot-grid {
  margin-top: 10px;
}
.fuse-select-status {
  margin: 8px 0 4px;
  font-size: 14px;
}
.fuse-selection-summary {
  border: 1px solid rgba(33, 28, 20, 0.16);
  border-radius: 10px;
  background: #fffaf0;
  padding: 8px 10px;
  font-size: 13px;
  display: grid;
  gap: 4px;
}
.fuse-exec-summary {
  margin-top: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  opacity: 0.85;
}
.fuse-card {
  width: min(100%, 360px);
}
.fuse-stack-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}
.fuse-stack-card {
  cursor: pointer;
}
.fuse-stack-card input[type="radio"] {
  margin-bottom: 6px;
}
.fuse-pickers-card {
  margin-top: 10px;
}
.fuse-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.fuse-picker-grid label {
  display: grid;
  gap: 4px;
  font-size: 13px;
}
.fuse-picker-grid select {
  border: 1px solid rgba(33, 28, 20, 0.2);
  border-radius: 8px;
  padding: 7px 8px;
  min-width: 0;
}
.fuse-submit-large {
  font-size: 18px;
  font-weight: 800;
  padding: 12px 18px;
  width: min(100%, 360px);
}
.fuse-estimate {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(33, 28, 20, 0.15);
  border-radius: 8px;
  background: #fffaf0;
  font-size: 12px;
}
.fuse-estimate-title {
  font-weight: 700;
  margin-bottom: 4px;
}
.fuse-estimate-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 2px 0;
}
.fuse-estimate-row .delta {
  font-weight: 700;
  color: #2f7c3f;
}
.fuse-instance-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 6px;
}
.fuse-instance {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
}
.fuse-role-label {
  font-size: 10px;
  opacity: 0.75;
}
.fuse-instance img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  border: 1px solid rgba(33, 28, 20, 0.15);
  border-radius: 6px;
  background: #fff;
}
.fuse-result-card {
  margin-top: 10px;
}
.strengthen-hub-card,
.fuse-warehouse-panel,
.warehouse-actions,
.warehouse-summary-note {
  display: grid;
  gap: 12px;
}
.strengthen-entry-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.strengthen-entry-grid .action-card.is-active {
  border-color: rgba(103, 232, 249, 0.34);
  box-shadow: 0 14px 28px rgba(3, 7, 18, 0.26);
  background: linear-gradient(180deg, rgba(32, 48, 82, 0.98), rgba(22, 33, 58, 0.98));
  color: var(--text-main);
}
.warehouse-note-item,
.warehouse-empty {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(103, 232, 249, 0.22);
  background: rgba(18, 30, 58, 0.72);
  color: var(--text-main);
}
.warehouse-group-grid {
  margin-top: 10px;
}
.warehouse-group-card {
  display: grid;
  gap: 10px;
}
.warehouse-actions {
  justify-items: start;
}
.fuse-secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(33, 28, 20, 0.18);
  background: rgba(255, 250, 240, 0.96);
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}
.fuse-secondary-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(33, 28, 20, 0.10);
}
.fuse-result-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.fuse-outcome {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.fuse-outcome.great {
  background: rgba(88, 47, 189, 0.12);
  border: 1px solid rgba(88, 47, 189, 0.35);
}
.fuse-outcome.success {
  background: rgba(47, 124, 63, 0.12);
  border: 1px solid rgba(47, 124, 63, 0.35);
}
.fuse-outcome.fail {
  background: rgba(145, 76, 42, 0.12);
  border: 1px solid rgba(145, 76, 42, 0.35);
}
.fuse-created {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(33, 28, 20, 0.2);
}
.fuse-created-row {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fuse-created-row img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  border-radius: 6px;
  border: 1px solid rgba(33, 28, 20, 0.18);
  background: #fff;
}
.fuse-created-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(68px, 1fr));
  gap: 4px 8px;
  font-size: 12px;
}
.compact-part-card {
  padding: 8px;
}
.compact-part-card .robot-id {
  margin-bottom: 4px;
}
.compact-part-card .robot-part {
  font-size: 12px;
  line-height: 1.3;
}
.compact-part-card .robot-time {
  margin-top: 4px;
}
.compact-part-card .robot-thumb {
  width: 96px;
  height: 96px;
  margin-bottom: 6px;
}
.part-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.part-sort-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.part-sort-label {
  font-size: 13px;
  font-weight: 700;
}
.part-sort-form select {
  min-width: 180px;
}
.part-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(33, 28, 20, 0.18);
  background: rgba(255, 250, 240, 0.94);
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.part-filter-chip:hover,
.part-filter-chip.is-pending {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(33, 28, 20, 0.10);
}
.part-filter-chip.is-active {
  border-color: rgba(26, 107, 103, 0.45);
  background: rgba(227, 247, 245, 0.98);
  color: #0d5956;
}
.part-page-summary-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.part-summary-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.part-summary-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.95);
  border: 1px solid rgba(33, 28, 20, 0.14);
  font-size: 13px;
  font-weight: 700;
}
.part-list-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.part-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.part-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.fuse-batch-panel {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
.fuse-batch-card {
  display: grid;
  gap: 10px;
}
.part-card-grid.is-storage {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.part-compare-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.part-compare-card.is-equipped {
  border-color: rgba(26, 107, 103, 0.34);
  box-shadow: 0 14px 28px rgba(26, 107, 103, 0.12);
}
.part-compare-card.is-locked {
  border-color: rgba(196, 128, 24, 0.52);
  box-shadow: 0 14px 28px rgba(196, 128, 24, 0.14);
}
.part-compare-focus {
  display: grid;
  gap: 12px;
}
.part-card-topline {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.part-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}
.part-lock-note {
  font-size: 12px;
  color: #0d5956;
  font-weight: 700;
}
.part-card-main {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.part-card-image {
  width: 84px;
  height: 84px;
  image-rendering: pixelated;
  border-radius: 10px;
  border: 1px solid rgba(33, 28, 20, 0.18);
  background: #fff;
  flex-shrink: 0;
}
.part-card-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.part-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.part-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.96);
  border: 1px solid rgba(33, 28, 20, 0.14);
  font-size: 12px;
  font-weight: 700;
}
.part-chip.is-equipped {
  background: rgba(227, 247, 245, 0.98);
  border-color: rgba(26, 107, 103, 0.34);
  color: #0d5956;
}
.part-chip.is-locked,
.part-lock-badge {
  background: rgba(255, 244, 214, 0.98);
  border-color: rgba(196, 128, 24, 0.46);
  color: #734407;
}
.part-lock-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
  font-size: 12px;
  font-weight: 800;
}
.part-chip.rarity-n {
  background: rgba(221, 221, 221, 0.26);
}
.part-chip.rarity-r {
  background: rgba(36, 105, 181, 0.14);
}
.part-chip.rarity-sr,
.part-chip.rarity-ssr,
.part-chip.rarity-ur {
  background: rgba(143, 81, 224, 0.14);
}
.part-meta-line {
  font-size: 13px;
  line-height: 1.4;
  color: #4b453b;
}
.part-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.part-stat-item {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(33, 28, 20, 0.12);
  background: rgba(255, 250, 240, 0.72);
}
.part-stat-item.is-focus {
  border-color: rgba(26, 107, 103, 0.28);
  background: rgba(227, 247, 245, 0.76);
}
.part-stat-label {
  font-size: 11px;
  opacity: 0.78;
}
.part-stat-value {
  font-size: 16px;
  font-weight: 800;
}
.part-stat-value.compare {
  font-size: 14px;
}
.part-stat-arrow {
  opacity: 0.62;
}
.part-stat-delta {
  font-size: 11px;
  font-weight: 800;
}
.part-stat-delta.is-up {
  color: #1e7e43;
}
.part-stat-delta.is-down {
  color: #b0502b;
}
.part-stat-delta.is-flat {
  color: #6c6357;
}
.part-subsection {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(33, 28, 20, 0.16);
}
.part-subsection-title {
  font-size: 13px;
  font-weight: 800;
}
.part-mini-grid {
  display: grid;
  gap: 8px;
}
.part-mini-card {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 250, 240, 0.76);
  border: 1px solid rgba(33, 28, 20, 0.12);
}
.part-mini-image {
  width: 42px;
  height: 42px;
  image-rendering: pixelated;
  border-radius: 8px;
  border: 1px solid rgba(33, 28, 20, 0.16);
  background: #fff;
  flex-shrink: 0;
}
.part-mini-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.part-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.part-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(33, 28, 20, 0.18);
  background: rgba(255, 250, 240, 0.96);
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}
.part-page-link.is-disabled {
  opacity: 0.52;
  cursor: default;
}
.part-page-indicator {
  font-size: 13px;
  font-weight: 700;
}
.is-submitting button[type="submit"] {
  opacity: 0.72;
}
.part-result-card {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.part-compare-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
.part-compare-column {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}
.part-compare-arrow {
  font-weight: 900;
  color: #0b6f75;
  white-space: nowrap;
}
.fuse-candidate-card .part-subsection {
  margin-top: 2px;
}
.part-picker-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(50, 136, 133, 0.16);
  background: linear-gradient(180deg, rgba(13, 23, 43, 0.96), rgba(19, 34, 60, 0.96));
  box-shadow: 0 10px 22px rgba(6, 12, 24, 0.22);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease, background 0.16s ease;
}
.picker-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.picker-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.part-picker-main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}
.picker-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}
.picker-heading {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.picker-title {
  font-weight: 800;
  line-height: 1.35;
  color: #f6fbff;
}
.picker-submeta {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(203, 223, 238, 0.78);
}
.picker-selected-badge {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(90, 242, 225, 0.16);
  border: 1px solid rgba(90, 242, 225, 0.46);
  color: #98fff2;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.picker-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.picker-total-label {
  font-size: 12px;
  line-height: 1.3;
  color: rgba(184, 210, 228, 0.72);
}
.picker-total-value {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  color: #f2f7ff;
}
.picker-total-value.is-up {
  color: #82f0cb;
}
.picker-total-value.is-down {
  color: #ff9e95;
}
.picker-total-note {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(184, 210, 228, 0.68);
}
.picker-diff-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.picker-diff-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 700;
  color: #dce8f4;
}
.picker-diff-chip.is-up {
  background: rgba(93, 217, 176, 0.14);
  border-color: rgba(93, 217, 176, 0.34);
  color: #8ff0ce;
}
.picker-diff-chip.is-down {
  background: rgba(255, 120, 110, 0.14);
  border-color: rgba(255, 120, 110, 0.34);
  color: #ffb2a8;
}
.picker-detail {
  border-top: 1px dashed rgba(139, 175, 205, 0.2);
  padding-top: 8px;
}
.picker-detail > summary {
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  color: #8ff0ff;
}
.picker-detail > summary::-webkit-details-marker {
  display: none;
}
.picker-detail-note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(184, 210, 228, 0.76);
}
.picker-detail-lines {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.picker-detail-line {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #edf4ff;
}
.picker-mini-delta {
  margin-left: 4px;
  font-style: normal;
  font-weight: 800;
}
.picker-mini-delta.is-up {
  color: #8ff0ce;
}
.picker-mini-delta.is-down {
  color: #ffb2a8;
}
.picker-mini-delta.is-flat {
  color: rgba(184, 210, 228, 0.74);
}
.picker-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.part-picker-card:has(.picker-radio:checked),
.part-picker-card.is-selected {
  border-color: rgba(95, 243, 233, 0.58);
  background: linear-gradient(180deg, rgba(9, 35, 46, 0.98), rgba(10, 56, 72, 0.96));
  box-shadow: 0 16px 30px rgba(3, 12, 28, 0.34), 0 0 0 1px rgba(95, 243, 233, 0.2);
  transform: translateY(-1px);
}
.part-picker-card:has(.picker-radio:checked) .picker-selected-badge,
.part-picker-card.is-selected .picker-selected-badge {
  display: inline-flex;
}
.part-picker-card:has(.picker-radio:checked) .picker-thumb,
.part-picker-card.is-selected .picker-thumb {
  border-color: rgba(95, 243, 233, 0.58);
  box-shadow: 0 0 0 2px rgba(95, 243, 233, 0.16);
}
.part-picker-card .part-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #dce8f4;
}
.part-picker-card .picker-thumb {
  width: 52px;
  height: 52px;
  margin-right: 0;
}
.part-picker-card .part-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.part-picker-card .part-stat-item {
  padding: 6px 7px;
}
@media (max-width: 720px) {
  .fuse-picker-grid {
    grid-template-columns: 1fr;
  }
  .compact-part-card .robot-thumb {
    width: 84px;
    height: 84px;
  }
  .part-card-grid,
  .part-card-grid.is-storage {
    grid-template-columns: 1fr;
  }
  .part-card-main {
    align-items: center;
  }
  .part-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .part-compare-head {
    grid-template-columns: 1fr;
  }
  .part-compare-arrow {
    justify-self: center;
  }
  .part-page-link {
    width: 100%;
  }
  .part-pagination {
    align-items: stretch;
  }
  .picker-list {
    grid-template-columns: 1fr;
  }
  .picker-total-row {
    align-items: center;
  }
  .picker-detail-line {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.lead { font-size: 16px; line-height: 1.5; }

.click-button {
  font-family: "Bebas Neue", "Oswald", "Impact", sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
  padding: 18px 40px;
  border: none;
  border-radius: 999px;
  background: radial-gradient(circle at top, #ffb26b, #e9562f);
  color: #1c130c;
  box-shadow: 0 8px 16px rgba(233, 86, 47, 0.22);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.2s ease;
}
.click-button:active {
  transform: scale(0.96);
  box-shadow: 0 4px 10px rgba(233, 86, 47, 0.18);
}
.combo { margin-top: 10px; font-weight: 700; color: var(--accent-2); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.stat-card {
  background: #fffaf0;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(33, 28, 20, 0.15);
}
.stat-label { font-size: 12px; opacity: 0.8; }
.stat-value { font-size: 22px; font-weight: 800; }

.upgrade {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.upgrade button {
  border: none;
  background: var(--accent-2);
  color: #f8f3e9;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
}
.upgrade-cost { font-size: 13px; opacity: 0.8; }

.panel {
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid rgba(33, 28, 20, 0.15);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 6px 14px var(--shadow);
}
.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.action-card {
  display: block;
  padding: 14px;
  border-radius: 12px;
  background: #fffaf0;
  border: 1px solid rgba(33, 28, 20, 0.12);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease, box-shadow 0.2s ease;
}
.action-card:hover {
  border-color: rgba(33, 28, 20, 0.24);
  box-shadow: 0 5px 12px var(--shadow);
}
.action-title { font-weight: 800; margin-bottom: 4px; }
.action-desc { font-size: 13px; opacity: 0.8; }

.actions button, .button-link {
  margin-right: 8px;
  border: none;
  background: #1e1c17;
  color: #f8f3e9;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.inline-form button {
  border: none;
  background: #1e1c17;
  color: #f8f3e9;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.battle-card .enemy-name { font-weight: 800; margin-bottom: 6px; }
.hp-bar {
  height: 8px;
  background: #e8e2d6;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
.hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffb26b, #e9562f);
}
.hp-fill-0 { width: 0%; }
.hp-fill-1 { width: 20%; }
.hp-fill-2 { width: 40%; }
.hp-fill-3 { width: 60%; }
.hp-fill-4 { width: 80%; }
.hp-fill-5 { width: 100%; }

.log { list-style: none; padding: 0; }
.log li {
  background: #fff;
  border: 1px solid #ddd;
  margin: 6px 0;
  padding: 8px;
  border-radius: 10px;
  line-height: 1.6;
}
.log li.log-important {
  border-color: #e9562f;
  font-weight: 700;
}
.battle-log-container {
  max-height: none;
  overflow: visible;
  border: 1px solid rgba(33, 28, 20, 0.15);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 253, 248, 0.92);
}
.battle-log-entry {
  border-bottom: 1px dashed rgba(33, 28, 20, 0.15);
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.battle-log-entry:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.battle-log-meta {
  font-size: 12px;
  opacity: 0.78;
  margin-bottom: 6px;
}

.robot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.robot-card {
  background: #fffaf0;
  border: 1px solid rgba(33, 28, 20, 0.12);
  border-radius: 12px;
  padding: 12px;
}
.robot-detail-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.robot-id { font-weight: 800; margin-bottom: 6px; }
.robot-part { font-size: 13px; }
.robot-time { font-size: 12px; opacity: 0.7; margin-top: 8px; }
.robot-thumb {
  width: 128px;
  height: 128px;
  border: 1px solid rgba(33, 28, 20, 0.2);
  border-radius: 8px;
  background: #f6f1e6;
  image-rendering: pixelated;
  display: block;
  margin-bottom: 8px;
}
.robot-thumb.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(33, 28, 20, 0.6);
  font-size: 12px;
}
.title-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.title-badge {
  display: inline-block;
  border: 1px solid rgba(26, 107, 103, 0.35);
  background: rgba(78, 205, 196, 0.15);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}
.insect-research-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(250, 204, 21, 0.38);
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(113, 63, 18, 0.32);
  color: #fde68a;
  font-size: 12px;
  font-weight: 900;
}
.insect-research-badge.is-complete {
  border-color: rgba(52, 211, 153, 0.48);
  background: rgba(6, 78, 59, 0.36);
  color: #a7f3d0;
}
.title-badge-list-compact {
  gap: 5px;
  margin: 4px 0;
}
.title-badge-new {
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #e5e7eb;
}
.title-badge-new.is-style {
  border-color: rgba(34, 211, 238, 0.34);
  color: #0891b2;
}
.title-badge-new.is-battle,
.title-badge-new.is-record,
.title-badge-new.is-gold {
  border-color: rgba(217, 119, 6, 0.36);
  color: #b45309;
}
.title-badge-new.is-growth,
.title-badge-new.is-green,
.title-badge-new.is-mint {
  border-color: rgba(22, 163, 74, 0.32);
  color: #15803d;
}
.title-badge-new.is-support,
.title-badge-new.is-crown_gold {
  border-color: rgba(217, 119, 6, 0.34);
  color: #92400e;
}
.timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline-list li {
  border-left: 3px solid rgba(33, 28, 20, 0.2);
  padding: 6px 0 8px 10px;
  margin: 6px 0;
}
.stats-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
.battle-log-math {
  margin: 6px 0;
}
.battle-log-math > summary {
  cursor: pointer;
  font-size: 12px;
}
.rarity-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #f5f5f5;
}
.rarity-badge.rarity-n {
  background: #ececec;
  color: #333;
}
.rarity-badge.rarity-r {
  background: #d9ecff;
  color: #0d4a8a;
}
.rarity-badge.rarity-sr {
  background: #eadbff;
  color: #5a2b92;
}
.rarity-badge.rarity-ur {
  background: #fff1b8;
  color: #7a5a00;
}
.showcase-sort-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.ranking-robot-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ranking-robot-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 1px solid rgba(33, 28, 20, 0.18);
  background: #f6f1e6;
  image-rendering: pixelated;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
}
.presence-user-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.presence-user-line .user-chip {
  margin-right: 0;
  flex: 0 0 auto;
}
.user-signal {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.user-signal-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.user-signal-name {
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}
.user-signal-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.user-name-inline-note {
  color: inherit;
  font-weight: inherit;
}
.user-signal-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}
.user-signal.is-podium .user-signal-name {
  color: #ffe8a3;
}
.user-signal.is-podium .user-signal-sub {
  color: rgba(255, 232, 163, 0.78);
}
.ranking-user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.home-ranking-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
}
.home-ranking-row + .home-ranking-row {
  border-top: 1px dashed rgba(33, 28, 20, 0.12);
}
.home-ranking-row.is-podium {
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(103, 232, 249, 0.08));
}
.home-ranking-row.is-podium + .home-ranking-row {
  border-top-color: transparent;
}
.record-ranking-item {
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 12px;
}
.record-ranking-item.is-podium {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(103, 232, 249, 0.06));
}
.record-ranking-main {
  flex: 1;
  min-width: 0;
}
.record-owner-line,
.record-user-line {
  margin-top: 4px;
}
.record-owner-line .user-chip.mini,
.record-user-line .user-chip.mini {
  --robot-chip-size: 38px;
  --avatar-chip-size: 16px;
}
.record-highlight-thumb,
.world-mvp-thumb {
  width: 96px;
  height: 96px;
}

.fusion-card { margin-top: 12px; }
.fusion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.fusion-item {
  border: 1px solid rgba(33, 28, 20, 0.12);
  border-radius: 10px;
  padding: 8px;
  background: #fffaf0;
  display: grid;
  gap: 4px;
}
.fusion-item input { margin-right: 6px; }
.fusion-id { font-weight: 800; }
.fusion-part { font-size: 12px; }

.auth {
  width: min(560px, 100%);
  margin: 10px auto 20px;
  padding-inline: 4px;
}
.auth-shell {
  display: grid;
  gap: 18px;
}
.auth-register-shell {
  max-width: 1080px;
  margin: 0 auto;
}
.auth-hero-stage {
  display: grid;
  gap: 14px;
}
.auth-hero-card {
  background:
    radial-gradient(circle at top center, rgba(64, 218, 255, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(16, 18, 28, 0.98), rgba(20, 18, 28, 0.98));
  color: #f4f3ee;
  border: 1px solid rgba(126, 224, 255, 0.16);
  box-shadow: 0 22px 48px rgba(10, 16, 32, 0.32);
  overflow: hidden;
  padding: 18px;
}
.auth-hero-visual {
  display: flex;
  justify-content: center;
}
.auth-hero-image-card {
  width: min(960px, 100%);
  padding: 0;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(130, 232, 255, 0.14);
  box-shadow: 0 18px 36px rgba(7, 10, 18, 0.28);
}
.auth-hero-image {
  width: 100%;
  display: block;
  aspect-ratio: 5 / 2;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  object-position: center center;
}
.auth-register-main {
  display: grid;
  gap: 18px;
}
.auth-register-card {
  display: grid;
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  background:
    linear-gradient(180deg, rgba(22, 20, 31, 0.98), rgba(24, 22, 36, 0.98));
  color: #f4f3ee;
  border: 1px solid rgba(164, 108, 255, 0.14);
  box-shadow: 0 18px 40px rgba(12, 10, 24, 0.24);
}
.auth-register-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.auth-mode-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 360px);
  margin: 0 auto;
  padding: 6px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 14, 26, 0.58);
}
.auth-mode-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 14px;
  color: rgba(233, 236, 245, 0.82);
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.auth-mode-tab:hover {
  color: #f8fbff;
  background: rgba(255, 255, 255, 0.05);
}
.auth-mode-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.96), rgba(192, 132, 252, 0.92));
  box-shadow: 0 10px 24px rgba(122, 67, 224, 0.28);
}
.auth-register-ref {
  margin: 0;
}
.auth-register-card .auth-title {
  text-align: center;
  font-size: clamp(22px, 2.8vw, 32px);
  letter-spacing: 0.02em;
}
.auth-pane-stack {
  display: grid;
  gap: 12px;
}
.auth-pane {
  display: grid;
  gap: 12px;
}
.auth-pane[hidden] {
  display: none !important;
}
.auth-pane-copy {
  display: grid;
  gap: 4px;
  text-align: center;
}
.auth-pane-title {
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 900;
  line-height: 1.15;
}
.auth-pane-feedback {
  margin: 0;
}
.auth-register-separator {
  position: relative;
  margin: 18px 0 10px;
  text-align: center;
}
.auth-register-separator::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  border-top: 1px solid rgba(233, 236, 245, 0.14);
}
.auth-register-separator span {
  position: relative;
  display: inline-block;
  padding: 0 12px;
  background: linear-gradient(180deg, rgba(22, 20, 31, 0.98), rgba(24, 22, 36, 0.98));
  color: rgba(233, 236, 245, 0.62);
  font-size: 13px;
  font-weight: 700;
}
.auth-register-alt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid rgba(233, 236, 245, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #eef2fb;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  width: min(100%, 420px);
  margin: 0 auto;
}
.auth-register-alt-btn-disabled {
  opacity: 0.72;
  cursor: default;
}
.auth-register-alt-note {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  color: rgba(233, 236, 245, 0.62);
}
.auth-card-register {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.auth-form-grid {
  display: grid;
  gap: 10px;
}
.auth-form-footnote {
  text-align: center;
}
.auth-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.auth-step-card,
.auth-world-card {
  display: grid;
  gap: 12px;
  height: 100%;
  padding: 18px;
  background: linear-gradient(180deg, rgba(251, 249, 243, 0.92), rgba(244, 249, 250, 0.96));
  border: 1px solid rgba(97, 121, 132, 0.12);
  box-shadow: 0 14px 32px rgba(16, 24, 38, 0.08);
}
.auth-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.auth-step-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
.auth-step-item {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(33, 28, 20, 0.1);
  background: rgba(255, 252, 246, 0.88);
}
.auth-step-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-step-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 207, 86, 0.18), rgba(255, 157, 42, 0.14));
  color: #805018;
}
.auth-step-icon-svg {
  width: 20px;
  height: 20px;
}
.auth-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #805018;
  font-size: 14px;
  font-weight: 900;
}
.auth-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 56px;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(26, 107, 103, 0.1);
  color: #0d5956;
  font-size: 13px;
  font-weight: 900;
}
.auth-step-text {
  font-size: 15px;
  line-height: 1.55;
  font-weight: 700;
  color: #2a2a2a;
}
.auth-world-metrics {
  display: grid;
  gap: 10px;
}
.auth-world-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(33, 28, 20, 0.1);
  background: rgba(255, 252, 246, 0.88);
}
.auth-world-metric-label {
  font-size: 13px;
  color: #5a5348;
}
.auth-world-metric-value {
  font-size: 26px;
  line-height: 1.1;
  font-weight: 900;
  text-align: right;
}
.auth-world-mvp {
  padding-top: 4px;
  margin-top: auto;
}
.auth-world-mvp-main {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(33, 28, 20, 0.1);
  background: rgba(255, 252, 246, 0.88);
}
.auth-world-mvp-robot {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  padding: 4px;
}
.auth-world-mvp-copy {
  min-width: 0;
}
.auth-beta-card {
  margin-bottom: 12px;
}
.auth-title {
  margin: 0 0 6px;
  font-size: clamp(30px, 4.2vw, 44px);
}
.auth-card {
  padding: 18px 16px;
}
.auth-card label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin: 12px 0 6px;
  color: #f4f3ee;
}
.auth-card input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  margin: 0;
  border-radius: 12px;
  border: 1px solid rgba(148, 156, 255, 0.16);
  background: rgba(35, 40, 63, 0.92);
  color: #f8fbff;
  font-size: 16px;
  line-height: 1.35;
}
.auth-card button {
  border: none;
  background: linear-gradient(180deg, #b14fff 0%, #8e41db 100%);
  color: #fffaf0;
  min-height: 54px;
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 14px;
  cursor: pointer;
  width: min(100%, 420px);
  margin-inline: auto;
  font-size: 16px;
  font-weight: 800;
}
.auth-form-footnote {
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  color: rgba(233, 236, 245, 0.68);
}
.auth-form-footnote a {
  color: #d7a8ff;
  font-weight: 700;
}

.chat-form {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.chat-form input {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(33, 28, 20, 0.2);
}
.chat-form button {
  border: none;
  background: var(--accent-2);
  color: #f8f3e9;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.chat-box {
  max-height: 320px;
  overflow-y: auto;
  position: relative;
  background: #111;
  border: 1px solid #333;
  padding: 10px;
}
.home-mini-log-panel {
  margin-top: 8px;
}
.home-mini-log-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.home-mini-log-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(33, 28, 20, 0.12);
  border-radius: 8px;
}
.home-mini-log-item .user-chip.mini {
  --robot-chip-size: 34px;
  --avatar-chip-size: 14px;
}
.home-mini-log-main {
  min-width: 0;
}
.home-mini-log-text {
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.home-mini-log-time {
  margin-top: 1px;
  font-size: 11px;
  color: #60708a;
}
.home-mini-log-empty {
  padding: 8px 10px;
  font-size: 13px;
  color: #60708a;
  border: 1px dashed rgba(33, 28, 20, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
}

.post-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.post-form input {
  flex: 1;
  min-width: 160px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(33, 28, 20, 0.2);
}
.post-form textarea {
  width: 100%;
  min-height: 82px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(33, 28, 20, 0.2);
  font: inherit;
  resize: vertical;
}
.post-form select {
  min-width: 180px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(33, 28, 20, 0.2);
}
.post-form button {
  border: none;
  background: #1e1c17;
  color: #f8f3e9;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.robot-preview {
  position: relative;
  width: 128px;
  height: 128px;
  border: 1px solid rgba(33, 28, 20, 0.2);
  border-radius: 8px;
  margin-bottom: 6px;
  background: #f6f1e6;
}
.robot-preview .layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
  transform: translate(
    calc(var(--layer-offset-x, 0) * var(--preview-layer-scale, 1) * 1px),
    calc(var(--layer-offset-y, 0) * var(--preview-layer-scale, 1) * 1px)
  );
}
.robot-preview .layer[data-layer="DECORATION"] {
  top: 6px;
  left: 6px;
  width: 28px;
  height: 28px;
  transform: none;
  object-fit: contain;
  z-index: 6;
  border-radius: 6px;
}
.robot-preview .layer.is-hidden {
  display: none;
}
.robot-preview.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(33, 28, 20, 0.6);
}
.build-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.build-preview {
  display: grid;
  gap: 10px;
  align-content: start;
}
.build-after-picker {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.build-submit-card {
  border: 1px solid rgba(33, 28, 20, 0.2);
  border-radius: 12px;
  background: var(--panel);
  padding: 16px;
  box-shadow: 0 12px 26px var(--shadow);
  margin-bottom: 0;
}
.build-estimate {
  margin: 0;
}
.build-preview-primary.is-compare-pulse,
.build-estimate.is-compare-pulse {
  animation: build-compare-pulse 0.24s ease-out;
}
@keyframes build-compare-pulse {
  0% {
    transform: translateY(0);
    box-shadow: 0 12px 26px rgba(6, 12, 24, 0.18);
  }
  50% {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(50, 197, 187, 0.22);
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 12px 26px rgba(6, 12, 24, 0.18);
  }
}
.estimate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 1fr));
  gap: 8px;
}
.estimate-item {
  border: 1px solid rgba(69, 212, 255, 0.22);
  border-radius: 8px;
  background: rgba(12, 24, 48, 0.72);
  padding: 6px 8px;
  font-size: 12px;
  color: var(--text);
}
.estimate-item b {
  display: block;
  font-size: 18px;
}
.estimate-power {
  margin-top: 8px;
}
.estimate-bonus {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(69, 212, 255, 0.2);
  background: rgba(12, 24, 48, 0.72);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.estimate-bonus.is-current {
  margin-top: 8px;
}
.build-preview-canvas {
  --preview-layer-scale: 2;
  width: 256px;
  height: 256px;
  margin: 0 auto;
  image-rendering: pixelated;
}
.build-preview-canvas .layer {
  width: 100%;
  height: 100%;
}
.build-preview-canvas .layer[data-layer="DECORATION"] {
  top: 6px;
  left: 6px;
  width: 56px;
  height: 56px;
}
.build-offset-panel {
  display: grid;
  gap: 12px;
  margin: 0;
}
.build-offset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.build-offset-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(69, 212, 255, 0.22);
  border-radius: 12px;
  background: rgba(12, 24, 48, 0.72);
  color: var(--text);
}
.build-offset-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.build-offset-reset {
  border: 1px solid rgba(69, 212, 255, 0.28);
  background: rgba(18, 38, 72, 0.92);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.build-offset-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
}
.build-offset-row input[type="range"] {
  width: 100%;
  margin: 0;
}
.build-offset-row output {
  justify-self: end;
  min-width: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.build-picker {
  display: grid;
  gap: 10px;
}
.picker-section > summary {
  margin: 0;
  padding: 4px 0 8px;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
}
.picker-section {
  margin: 0;
}
.picker-section > summary::-webkit-details-marker {
  display: none;
}
.picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.picker-item {
  display: grid;
  grid-template-columns: auto 64px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(33, 28, 20, 0.2);
  border-radius: 8px;
  background: #fffaf0;
}
.picker-current-row {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(76, 149, 183, 0.22);
  background: rgba(18, 31, 54, 0.92);
}
.picker-current-row.is-empty {
  opacity: 0.78;
}
.picker-current-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(180, 208, 230, 0.72);
}
.picker-current-name {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  color: #f0f6ff;
}
.picker-current-row .part-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #dce8f4;
}
.picker-current-row .part-chip.is-equipped {
  background: rgba(95, 243, 233, 0.14);
  border-color: rgba(95, 243, 233, 0.26);
  color: #9dfff4;
}
.picker-thumb {
  width: 64px;
  height: 64px;
}
.part-thumb {
  width: 48px;
  height: 48px;
  margin-right: 6px;
  vertical-align: middle;
  image-rendering: pixelated;
  border: 1px solid rgba(33, 28, 20, 0.2);
  border-radius: 4px;
  background: #f6f1e6;
}

.offset-form {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
  gap: 6px;
  align-items: center;
}
.offset-form input {
  width: 100%;
  padding: 4px 6px;
}
.offset-form button {
  grid-column: span 4;
  border: none;
  background: #1e1c17;
  color: #f8f3e9;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}

.battle-title {
  font-size: 22px;
  font-weight: 800;
  margin: 4px 0 8px;
}

.battle-scene {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.battle-scene.has-boss-bg {
  background-image: linear-gradient(rgba(24, 20, 16, 0.55), rgba(24, 20, 16, 0.55)), var(--battle-bg-image);
  background-size: cover;
  background-position: center;
  padding: 10px;
}
body.battle-page #battle-ritual-overlay {
  display: none;
  pointer-events: none;
}
body.battle-page .boss-victory-ritual #battle-ritual-overlay {
  display: block;
}
.boss-alert-line {
  background: rgba(212, 27, 47, 0.2);
  border: 1px solid rgba(212, 27, 47, 0.45);
  color: #700311;
  font-weight: 900;
}
body.battle-page .layer-boss-victory-head {
  margin-bottom: 10px;
  border-left: 6px solid rgba(255, 255, 255, 0.82);
  background: linear-gradient(120deg, #ffefe3, #fff8f2);
  animation: unlock-pop 200ms ease-out;
}
body.battle-page .layer-boss-victory-head.layer-theme-1 {
  background: linear-gradient(120deg, #e8f5ff, #f7fcff);
  border-left-color: #1d6fad;
}
body.battle-page .layer-boss-victory-head.layer-theme-2 {
  background: linear-gradient(120deg, #f4ebff, #fff5fb);
  border-left-color: #8d3fb9;
}
body.battle-page .layer-boss-victory-head.layer-theme-3 {
  background: linear-gradient(120deg, #ffece2, #fff7ef);
  border-left-color: #cb5a1e;
}
body.battle-page .layer-boss-victory-main {
  font-family: "Bebas Neue", "Oswald", "Impact", sans-serif;
  letter-spacing: 0.05em;
  font-size: 32px;
  line-height: 1;
}
body.battle-page .layer-boss-victory-sub {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 800;
}
@keyframes unlock-pop {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.battle-turn {
  margin: 8px 0;
  padding: 0;
  overflow: hidden;
  font-size: 12px;
}

.battle-turn-head {
  background: #666;
  color: #fff;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 12px;
}

.battle-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
}

.battle-side {
  flex: 1;
  background: #f6f6f6;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 8px;
  min-width: 0;
}

.battle-side.enemy {
  background: #fff6f6;
}

.battle-vs {
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #444;
  font-size: 11px;
}

.battle-side-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.battle-avatar {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #ddd;
  background: #fff;
  image-rendering: pixelated;
}

.battle-name {
  font-weight: 800;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-line .hp-text {
  font-size: 11px;
  margin-bottom: 4px;
  color: #333;
}

.hpbar {
  height: 7px;
  background: #ddd;
  border-radius: 999px;
  overflow: hidden;
}

.hpbar-inner {
  height: 100%;
  background: #3cb371;
  border-radius: 999px;
}
.hpbar-meter {
  width: 100%;
  height: 7px;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  background: #ddd;
  display: block;
}
.hpbar-meter::-webkit-progress-bar {
  background: #ddd;
  border-radius: 999px;
}
.hpbar-meter::-webkit-progress-value {
  background: #3cb371;
  border-radius: 999px;
}
.hpbar-meter::-moz-progress-bar {
  background: #3cb371;
  border-radius: 999px;
}

.battle-text {
  padding: 0 8px 8px;
}

.battle-line {
  margin: 2px 0;
  line-height: 1.3;
  font-size: 12px;
}

.battle-skill {
  color: #2b4cff;
  font-weight: 800;
  margin: 2px 0 4px;
  font-size: 12px;
}

.who {
  font-weight: 800;
}

.act {
  color: #333;
}

.dmg {
  color: #d11;
  font-weight: 900;
  font-size: 14px;
  margin: 0 4px;
}

.dmg.crit {
  color: #b000ff;
}

.battle-flag {
  margin-top: 2px;
  font-weight: 900;
  color: #b000ff;
  font-size: 12px;
}

.battle-note {
  margin-left: 6px;
  color: #6d2f1a;
  font-weight: 700;
}

.battle-summary {
  margin-top: 8px;
  font-size: 12px;
}

.battle-outcome-banner {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.battle-outcome-banner.win {
  border-left: 6px solid #0a8a2a;
}

.battle-outcome-banner.lose {
  border-left: 6px solid #d11;
}
.boss-defeated-card {
  margin-top: 10px;
  border: 1px solid rgba(212, 27, 47, 0.45);
  background: linear-gradient(135deg, rgba(255, 245, 228, 0.96), rgba(255, 232, 209, 0.96));
}
.boss-defeated-card .battle-outcome-label {
  color: #a31125;
  letter-spacing: 0.04em;
}

.battle-outcome-label {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.battle-outcome-banner.win .battle-outcome-label {
  color: #0a8a2a;
}

.battle-outcome-banner.lose .battle-outcome-label {
  color: #d11;
}

.battle-outcome-sub {
  font-size: 14px;
  opacity: 0.85;
}

.battle-summary-upgraded {
  margin-top: 8px;
}

.battle-result-compact-stack {
  display: grid;
  gap: 8px;
}

.battle-summary-upgraded-compact {
  display: grid;
  gap: 6px;
}

.battle-section-title-compact {
  margin: 2px 0 0;
}
.battle-progress-card {
  margin-top: 10px;
  border-left: 4px solid rgba(26, 107, 103, 0.45);
  background: linear-gradient(120deg, rgba(235, 249, 247, 0.96), rgba(250, 253, 253, 0.96));
}
.battle-progress-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 4px 0;
}
.battle-progress-row .label {
  min-width: 40px;
  font-size: 12px;
  color: #5b6575;
}

.battle-drop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.battle-drop-card {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(33, 28, 20, 0.18);
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  text-decoration: none;
  color: inherit;
}

.battle-drop-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(33, 28, 20, 0.2);
  background: #fffdf8;
  object-fit: cover;
}

.battle-drop-meta {
  font-size: 12px;
  line-height: 1.3;
}

.battle-actions-top {
  margin: 10px 0 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.battle-actions-top form {
  margin: 0;
}

.battle-actions-top button,
.battle-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
}

.battle-home-link {
  border: 1px solid rgba(33, 28, 20, 0.2);
  background: #fff;
  text-decoration: none;
  color: inherit;
}
.battle-home-link.active {
  border-color: rgba(26, 107, 103, 0.45);
  background: linear-gradient(120deg, #e4f5f3, #f0fbfa);
}
.battle-next-cta {
  border-color: rgba(26, 107, 103, 0.5);
  background: linear-gradient(120deg, #e4f5f3, #f0fbfa);
  font-weight: 900;
}
.battle-next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.battle-next-card {
  display: grid;
  gap: 10px;
}
.battle-next-card form {
  margin: 0;
}

#explore-return-form {
  display: grid;
  gap: 8px;
}

#explore-return-btn {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 900;
}

.battle-return-ct {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
}

.battle-detail-fold {
  margin-top: 8px;
}

.battle-detail-fold > summary {
  cursor: pointer;
  list-style: none;
}

.battle-detail-fold > summary::-webkit-details-marker {
  display: none;
}

.battle-detail-fold > summary::before {
  content: "▸";
  margin-right: 6px;
  color: var(--accent-cyan);
}

.battle-detail-fold[open] > summary::before {
  content: "▾";
}

.battle-next-card-primary {
  border-color: rgba(26, 107, 103, 0.22);
  background: linear-gradient(180deg, rgba(228, 245, 243, 0.85), rgba(255, 255, 255, 0.98));
}

.home-explore-card .card {
  display: grid;
  gap: 10px;
}

.home-explore-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.home-explore-kicker {
  color: var(--accent-cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-explore-status {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(103, 232, 249, 0.24);
  background: rgba(18, 24, 43, 0.84);
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.home-explore-context {
  color: var(--text-muted);
  font-size: 13px;
}

.home-research-boost {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(103, 232, 249, 0.22);
  border-radius: 8px;
  background: rgba(11, 18, 32, 0.72);
}

.presence-bar-shell {
  position: relative;
  z-index: 5;
  margin-bottom: 10px;
}

.presence-bar {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(20, 184, 166, 0.28);
  background: rgba(9, 18, 27, 0.86);
  color: #e8f5f3;
  text-align: left;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.presence-bar-title {
  font-weight: 900;
  letter-spacing: 0;
}

.presence-bar-subtitle,
.presence-modal-sub,
.presence-member-time {
  color: #9fb4ba;
  font-size: 0.86rem;
}

.presence-avatar-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 120px;
}

.presence-avatar,
.presence-avatar-more {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  margin-left: -7px;
  border-radius: 8px;
  border: 2px solid #10202b;
  background: #172533;
  overflow: hidden;
}

.presence-avatar:first-child {
  margin-left: 0;
}

.presence-avatar img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.presence-avatar.is-active {
  border-color: #22c55e;
}

.presence-avatar.is-warm {
  border-color: #f59e0b;
}

.presence-avatar.is-idle {
  border-color: #64748b;
}

.presence-avatar-more {
  color: #e2e8f0;
  font-weight: 900;
  font-size: 0.82rem;
}

.presence-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 6, 23, 0.66);
}

.presence-modal-backdrop[hidden] {
  display: none;
}

.presence-modal {
  width: min(920px, 100%);
  max-height: min(720px, 86vh);
  overflow: auto;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #0f172a;
  color: #eef6f8;
}

.presence-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.presence-modal-head h2 {
  margin: 0 0 4px;
}

.presence-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: #1f2937;
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

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

.presence-member-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.94);
}

.presence-member-card.is-active {
  border-color: rgba(34, 197, 94, 0.5);
}

.presence-member-card.is-warm {
  border-color: rgba(245, 158, 11, 0.5);
}

.presence-member-card.is-idle {
  border-color: rgba(100, 116, 139, 0.5);
}

.presence-member-visual {
  position: relative;
  flex: 0 0 52px;
}

.presence-member-robot {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  background: #172533;
}

.presence-member-avatar {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  border-radius: 8px;
  border: 1px solid #0f172a;
  background: #111827;
}

.presence-member-meta {
  min-width: 0;
}

.presence-member-name {
  overflow: hidden;
  color: #f8fafc;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presence-member-state {
  color: #c4d5da;
  font-size: 0.9rem;
}

.presence-empty {
  grid-column: 1 / -1;
  padding: 16px;
  color: #9fb4ba;
}

.recent-robots-shell {
  padding: 10px 12px 12px;
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(7, 18, 24, 0.94), rgba(17, 24, 39, 0.9)),
    rgba(9, 18, 27, 0.9);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  color: #e8f5f3;
}

.recent-robots-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.recent-robots-title {
  margin: 0;
  color: #f8fafc;
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: 0;
}

.recent-robots-subtitle,
.recent-robots-empty {
  color: #9fb4ba;
  font-size: 0.86rem;
}

.recent-robots-crown-note {
  margin-top: 3px;
  color: #d9c77d;
  font-size: 0.72rem;
  font-weight: 700;
}

.recent-robot-carousel {
  display: grid;
  grid-auto-columns: clamp(76px, 22vw, 124px);
  grid-auto-flow: column;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 1px 2px 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.recent-robot-card {
  display: grid;
  grid-template-rows: 48px 1fr auto auto auto;
  align-items: center;
  min-height: 138px;
  min-width: 0;
  padding: 8px 7px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.78);
  color: #eef6f8;
  text-align: center;
  text-decoration: none;
  scroll-snap-align: start;
}

.recent-robot-card.is-exploring,
.recent-robot-card.is-returned,
.recent-robot-card.is-active {
  border-color: rgba(34, 211, 238, 0.48);
}

.recent-robot-card.is-fuse_success,
.recent-robot-card.is-evolve_success,
.recent-robot-card.is-build_update,
.recent-robot-card.is-recent {
  border-color: rgba(74, 222, 128, 0.42);
}

.recent-robot-card.is-boss_found,
.recent-robot-card.is-record_update,
.recent-robot-card.is-champion_break,
.recent-robot-card.is-weekly {
  border-color: rgba(250, 204, 21, 0.38);
}

.recent-robot-card.is-recent_seen {
  border-color: rgba(168, 85, 247, 0.34);
}

.recent-robot-card.is-weekly_hot {
  border-color: rgba(245, 158, 11, 0.34);
}

.recent-robot-card.is-featured {
  border-color: rgba(226, 232, 240, 0.62);
  box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.14), 0 12px 26px rgba(0, 0, 0, 0.24);
}

.recent-robot-card.is-supporter {
  box-shadow: inset 0 0 18px rgba(125, 92, 255, 0.08);
}

.recent-robot-card.is-featured.is-supporter {
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.2), 0 12px 28px rgba(0, 0, 0, 0.26), inset 0 0 20px rgba(34, 211, 238, 0.08);
}

.recent-robot-card:hover {
  border-color: rgba(226, 232, 240, 0.52);
  transform: translateY(-1px);
}

.recent-robot-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  flex: 0 0 48px;
  min-width: 48px;
}

.recent-robot-icon {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.45);
}

.recent-robot-badges {
  position: absolute;
  top: -5px;
  right: -3px;
  display: grid;
  gap: 2px;
  justify-items: end;
}

.recent-robot-badges span {
  max-width: 54px;
  overflow: hidden;
  padding: 2px 4px;
  border: 1px solid rgba(250, 204, 21, 0.4);
  border-radius: 6px;
  background: rgba(24, 24, 27, 0.9);
  color: #fde68a;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-robot-badges span.is-mvp,
.recent-robot-badges span.is-champion,
.recent-robot-badges span.is-ranker {
  border-color: rgba(250, 204, 21, 0.42);
  color: #fde68a;
}

.recent-robot-badges span.is-supporter {
  border-color: rgba(250, 204, 21, 0.44);
  background: rgba(73, 50, 10, 0.92);
  color: #fde68a;
}

.recent-robot-card:hover .recent-robot-badges span.is-supporter {
  border-color: rgba(253, 230, 138, 0.64);
  color: #fff7c2;
}

.recent-robot-name,
.recent-robot-unit {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-robot-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #f8fafc;
  font-size: 0.78rem;
  font-weight: 900;
}

.recent-robot-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-robot-crown {
  flex: 0 0 auto;
  color: #fde68a;
  font-size: 0.75rem;
  line-height: 1;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.24);
}

.recent-robot-unit {
  color: #b8cbd0;
  font-size: 0.7rem;
}

.recent-robot-title-chip {
  justify-self: center;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 5px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.72);
  color: #e5e7eb;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-robot-title-chip.is-style {
  border-color: rgba(34, 211, 238, 0.28);
  color: #a5f3fc;
}

.recent-robot-title-chip.is-battle,
.recent-robot-title-chip.is-record,
.recent-robot-title-chip.is-gold {
  border-color: rgba(250, 204, 21, 0.34);
  color: #fde68a;
}

.recent-robot-title-chip.is-growth,
.recent-robot-title-chip.is-mint,
.recent-robot-title-chip.is-green {
  border-color: rgba(74, 222, 128, 0.32);
  color: #bbf7d0;
}

.recent-robot-title-chip.is-support,
.recent-robot-title-chip.is-crown_gold {
  border-color: rgba(250, 204, 21, 0.3);
  color: #fde68a;
}

.recent-robot-status {
  justify-self: center;
  max-width: 100%;
  overflow: hidden;
  padding: 3px 5px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 6px;
  color: #dbeafe;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-robot-status.is-active {
  border-color: rgba(34, 211, 238, 0.36);
  background: rgba(8, 145, 178, 0.18);
  color: #a5f3fc;
}

.recent-robot-status.is-exploring,
.recent-robot-status.is-returned {
  border-color: rgba(34, 211, 238, 0.36);
  background: rgba(8, 145, 178, 0.18);
  color: #a5f3fc;
}

.recent-robot-status.is-fuse_success,
.recent-robot-status.is-evolve_success,
.recent-robot-status.is-build_update,
.recent-robot-status.is-recent {
  border-color: rgba(74, 222, 128, 0.34);
  background: rgba(22, 101, 52, 0.18);
  color: #bbf7d0;
}

.recent-robot-status.is-boss_found,
.recent-robot-status.is-record_update,
.recent-robot-status.is-champion_break,
.recent-robot-status.is-weekly {
  border-color: rgba(250, 204, 21, 0.34);
  background: rgba(113, 63, 18, 0.18);
  color: #fde68a;
}

.recent-robot-status.is-recent_seen {
  border-color: rgba(168, 85, 247, 0.28);
  background: rgba(88, 28, 135, 0.16);
  color: #ddd6fe;
}

.recent-robot-status.is-weekly_hot {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(113, 63, 18, 0.15);
  color: #fed7aa;
}

.recent-robot-status-icon {
  display: inline-block;
  margin-right: 3px;
}

.recent-robots-empty {
  padding: 10px 0 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .recent-robot-card {
    transition: border-color 160ms ease, transform 160ms ease;
  }

  .recent-robot-icon {
    animation: recent-robot-float 4.8s ease-in-out infinite;
  }

  .recent-robot-card:nth-child(2n) .recent-robot-icon {
    animation-delay: 0.7s;
  }

  .recent-robot-card:nth-child(3n) .recent-robot-icon {
    animation-delay: 1.3s;
  }

  .recent-robot-card.is-featured {
    animation: recent-robot-featured-pulse 4.6s ease-in-out infinite;
  }

  .recent-robot-card.is-boss_found .recent-robot-status,
  .recent-robot-card.is-record_update .recent-robot-status,
  .recent-robot-card.is-champion_break .recent-robot-status {
    animation: recent-robot-label-glow 3.8s ease-in-out infinite;
  }
}

@keyframes recent-robot-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes recent-robot-featured-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.12), 0 12px 26px rgba(0, 0, 0, 0.22);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.24), 0 14px 30px rgba(0, 0, 0, 0.28);
  }
}

@keyframes recent-robot-label-glow {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.18);
  }
}

.home-research-boost-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.home-research-boost-timer,
.home-research-boost-active-inline {
  color: var(--accent-cyan);
  font-weight: 800;
}

.home-research-boost-form {
  margin: 0;
  flex: 0 0 auto;
}

.home-research-boost-button {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 900;
  white-space: nowrap;
}

.home-research-boost-button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.home-research-share {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.home-research-share-form {
  width: 100%;
}

.home-research-share-button {
  width: 100%;
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(18, 24, 38, 0.16);
  background: #111827;
  color: #ffffff;
  font-weight: 800;
}

.home-research-share-note {
  color: #64748b;
  font-size: 0.88rem;
}

.home-research-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.home-research-toggle-status {
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 800;
}

.share-robot-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 24px;
  align-items: center;
  padding: 24px 0;
}

.share-robot-visual {
  min-height: 320px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #17202a 0%, #25313f 48%, #113f45 100%);
  overflow: hidden;
}

.share-robot-image {
  width: min(72vw, 520px);
  max-height: 520px;
  object-fit: contain;
  image-rendering: auto;
}

.share-robot-copy h1 {
  margin: 8px 0 12px;
}

@media (max-width: 720px) {
  .share-robot-page {
    grid-template-columns: 1fr;
  }

  .share-robot-visual {
    min-height: 260px;
  }
}

.home-primary-explore-form {
  width: 100%;
  margin: 0;
}

.home-primary-explore-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(49, 39, 84, 0.98), rgba(31, 57, 86, 0.98));
  color: var(--text-main);
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(3, 7, 18, 0.24);
}

button.home-primary-explore-cta:disabled {
  opacity: 0.82;
  cursor: not-allowed;
}

.home-explore-card-link {
  margin: 0;
}

#battle-short-replay[hidden] {
  display: none !important;
}

body.battle-page.battle-short-replay-active #battle-replay-followup {
  display: none;
}

.battle-short-replay {
  margin: 10px 0 14px;
  padding: 14px;
  border: 1px solid rgba(96, 180, 255, 0.22);
  background:
    radial-gradient(circle at top, rgba(110, 173, 255, 0.16), transparent 46%),
    linear-gradient(180deg, rgba(9, 19, 39, 0.96), rgba(12, 18, 31, 0.98));
  color: #eef6ff;
  overflow: hidden;
}

.battle-short-replay-head,
.battle-short-replay-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.battle-short-replay-head {
  margin-bottom: 12px;
}

.battle-short-replay-area,
.battle-short-replay-alert,
.battle-short-replay-style {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.battle-short-replay-alert {
  color: #ffd2c7;
}

.battle-short-replay-style {
  color: #a8ceff;
}

.battle-short-replay-skip {
  min-height: 32px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #f7fbff;
  font-weight: 800;
}

.battle-short-replay-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr);
  align-items: end;
  gap: 0;
  min-height: 212px;
  padding: 16px 14px 32px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(162, 203, 255, 0.16);
  background:
    radial-gradient(circle at center 40%, rgba(255, 255, 255, 0.04), transparent 38%),
    linear-gradient(180deg, rgba(17, 34, 60, 0.96), rgba(8, 13, 24, 0.98));
  isolation: isolate;
}

.battle-short-replay-stage::before {
  content: "";
  position: absolute;
  inset: 24% 18% 22%;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(255, 209, 138, 0.12), rgba(255, 209, 138, 0) 52%),
    radial-gradient(circle at 28% 68%, rgba(158, 213, 255, 0.12), rgba(158, 213, 255, 0) 44%),
    radial-gradient(circle at 72% 36%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 30%);
  opacity: 0.92;
  pointer-events: none;
  z-index: 0;
}

.battle-short-replay-stage::after {
  content: "";
  position: absolute;
  inset: auto 8% 16px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(206, 226, 255, 0.26), rgba(255, 213, 153, 0.24), transparent);
}

.battle-short-replay.theme-workshop .battle-short-replay-stage {
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.09), transparent 44%),
    linear-gradient(180deg, rgba(34, 51, 72, 0.96), rgba(13, 20, 32, 0.98));
}

.battle-short-replay.theme-mist .battle-short-replay-stage {
  background:
    radial-gradient(circle at 48% 36%, rgba(223, 244, 255, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(54, 92, 117, 0.94), rgba(12, 24, 37, 0.98));
}

.battle-short-replay.theme-forge .battle-short-replay-stage,
.battle-short-replay.theme-boss .battle-short-replay-stage {
  background:
    radial-gradient(circle at center, rgba(255, 206, 142, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(86, 34, 28, 0.96), rgba(17, 10, 15, 0.98));
}

.battle-short-replay.theme-lab .battle-short-replay-stage {
  background:
    radial-gradient(circle at 54% 34%, rgba(182, 255, 245, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(18, 66, 69, 0.96), rgba(9, 18, 24, 0.98));
}

.battle-short-replay.theme-scrap .battle-short-replay-stage {
  background:
    radial-gradient(circle at center, rgba(233, 217, 186, 0.14), transparent 40%),
    linear-gradient(180deg, rgba(77, 62, 46, 0.96), rgba(20, 14, 13, 0.98));
}

.battle-short-replay.theme-goal .battle-short-replay-stage {
  background:
    radial-gradient(circle at center, rgba(237, 255, 188, 0.12), transparent 40%),
    linear-gradient(180deg, rgba(65, 93, 42, 0.96), rgba(15, 18, 12, 0.98));
}

.battle-short-replay-ground {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 12px;
  height: 46px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(199, 224, 255, 0.16), rgba(199, 224, 255, 0) 68%),
    radial-gradient(circle at center, rgba(255, 205, 140, 0.08), rgba(255, 205, 140, 0) 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  opacity: 0.9;
  pointer-events: none;
}

.battle-short-replay-unit {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  padding-bottom: 8px;
  transition: filter 180ms ease, opacity 180ms ease;
  z-index: 2;
}

.battle-short-replay-unit.is-player {
  justify-self: end;
  padding-right: clamp(2px, 1vw, 10px);
}

.battle-short-replay-unit.is-enemy {
  justify-self: start;
  padding-left: clamp(2px, 1vw, 10px);
}

.battle-short-replay-unit::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: min(28vw, 104px);
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0));
  transform: translateX(-50%);
  opacity: 0.88;
  pointer-events: none;
}

.battle-short-replay-frame {
  position: relative;
  width: min(40vw, 164px);
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid rgba(220, 236, 255, 0.04);
  background: linear-gradient(180deg, rgba(14, 25, 45, 0.08), rgba(8, 15, 27, 0.02));
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 26px rgba(0, 0, 0, 0.16);
}

.battle-short-replay-frame::before {
  content: "";
  position: absolute;
  inset: 14% 16% 10%;
  border-radius: 30% 30% 22% 22%;
  background: radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  opacity: 0.5;
}

.battle-short-replay.is-boss [data-replay-unit="enemy"] .battle-short-replay-frame {
  width: min(43vw, 176px);
}

.battle-short-replay-frame img {
  position: absolute;
  inset: 5% 6% 2%;
  width: 88%;
  height: 92%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.4));
}

.battle-short-replay-status {
  display: grid;
  gap: 5px;
  justify-items: center;
  width: min(36vw, 168px);
}

.battle-short-replay-name {
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(10, 16, 28, 0.54);
  border: 1px solid rgba(207, 227, 255, 0.08);
}

.battle-short-replay-hp {
  position: relative;
  width: min(28vw, 116px);
  height: 6px;
  border-radius: 999px;
  background: rgba(8, 13, 23, 0.72);
  border: 1px solid rgba(189, 216, 255, 0.14);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.battle-short-replay.is-boss .battle-short-replay-hp {
  height: 7px;
  border-color: rgba(255, 209, 148, 0.24);
}

.battle-short-replay-hp-track,
.battle-short-replay-hp-lag,
.battle-short-replay-hp-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: inherit;
}

.battle-short-replay-hp-track {
  background: linear-gradient(90deg, rgba(56, 82, 122, 0.8), rgba(40, 56, 90, 0.56));
}

.battle-short-replay-hp-lag {
  background: linear-gradient(90deg, rgba(255, 170, 124, 0.72), rgba(255, 120, 106, 0.56));
  transition: width 260ms ease-out;
}

.battle-short-replay-hp-fill {
  background: linear-gradient(90deg, rgba(142, 255, 207, 0.96), rgba(92, 226, 255, 0.92));
  box-shadow: 0 0 10px rgba(125, 243, 255, 0.26);
  transition: width 140ms ease-out;
}

.battle-short-replay-hp.is-low .battle-short-replay-hp-fill {
  background: linear-gradient(90deg, rgba(255, 236, 138, 0.96), rgba(255, 152, 96, 0.92));
  box-shadow: 0 0 10px rgba(255, 168, 96, 0.3);
}

.battle-short-replay-hp.is-empty .battle-short-replay-hp-fill,
.battle-short-replay-hp.is-empty .battle-short-replay-hp-lag {
  width: 0 !important;
}

.battle-short-replay-hp.is-hurt {
  filter: brightness(1.08);
}

.battle-short-replay-hp.is-critical-damage .battle-short-replay-hp-fill {
  box-shadow: 0 0 16px rgba(255, 178, 112, 0.46);
}

.battle-short-replay-hp.is-bracing .battle-short-replay-hp-fill {
  animation: battle-replay-hp-brace 260ms ease-out;
}

.battle-short-replay-center {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 26px;
  height: 26px;
  pointer-events: none;
}

.battle-short-replay-impact {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 244, 202, 0.26), rgba(255, 244, 202, 0));
  opacity: 0.08;
  transform: scale(0.32);
  transition: transform 160ms ease, opacity 160ms ease;
}

.battle-short-replay-projectile,
.battle-short-replay-hitflash,
.battle-short-replay-sparks {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}

.battle-short-replay-projectile {
  top: 52%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 220, 130, 0.95), rgba(255, 255, 255, 0));
  box-shadow: 0 0 14px rgba(255, 205, 120, 0.42);
}

.battle-short-replay-projectile.from-player.to-enemy {
  left: 42%;
  transform-origin: left center;
}

.battle-short-replay-projectile.from-enemy.to-player {
  right: 42%;
  transform-origin: right center;
}

.battle-short-replay-projectile.is-live.from-player.to-enemy {
  animation: battle-replay-shot-player 260ms ease-out;
}

.battle-short-replay-projectile.is-live.from-enemy.to-player {
  animation: battle-replay-shot-enemy 260ms ease-out;
}

.battle-short-replay-projectile.is-heavy,
.battle-short-replay-projectile.is-critical {
  height: 5px;
  box-shadow: 0 0 18px rgba(255, 184, 92, 0.62);
}

.battle-short-replay-hitflash {
  top: 48%;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
}

.battle-short-replay-hitflash.target-player {
  left: 19%;
}

.battle-short-replay-hitflash.target-enemy {
  right: 19%;
}

.battle-short-replay-hitflash.is-live {
  animation: battle-replay-hitflash 230ms ease-out;
}

.battle-short-replay-hitflash.is-critical {
  width: 72px;
  height: 72px;
  background: radial-gradient(circle, rgba(255, 176, 140, 0.95), rgba(255, 176, 140, 0));
}

.battle-short-replay-sparks {
  top: 46%;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 230, 180, 0.66), rgba(255, 230, 180, 0) 56%),
    conic-gradient(from 0deg, rgba(255, 0, 0, 0), rgba(255, 210, 110, 0.92), rgba(255, 0, 0, 0), rgba(255, 210, 110, 0.92), rgba(255, 0, 0, 0));
  mix-blend-mode: screen;
}

.battle-short-replay-sparks.target-player {
  left: 18%;
}

.battle-short-replay-sparks.target-enemy {
  right: 18%;
}

.battle-short-replay-sparks.is-live {
  animation: battle-replay-sparks 300ms ease-out;
}

.battle-short-replay-sparks.is-critical {
  width: 84px;
  height: 84px;
}

.battle-short-replay-part {
  position: absolute;
  display: block;
  background: rgba(163, 219, 255, 0.18);
  border: 1px solid rgba(214, 242, 255, 0.18);
  box-shadow: 0 0 0 1px rgba(11, 15, 24, 0.25) inset;
  opacity: 0.2;
  transition: transform 170ms ease, opacity 170ms ease, filter 170ms ease, background 170ms ease;
}

.battle-short-replay-part.part-head {
  top: 12%;
  left: 50%;
  width: 24%;
  height: 15%;
  border-radius: 999px;
  transform: translateX(-50%);
}

.battle-short-replay-part.part-right,
.battle-short-replay-part.part-left {
  top: 40%;
  width: 16%;
  height: 16%;
  border-radius: 10px;
}

.battle-short-replay-part.part-right {
  left: 18%;
}

.battle-short-replay-part.part-left {
  right: 18%;
}

.battle-short-replay-part.part-legs {
  bottom: 12%;
  left: 50%;
  width: 34%;
  height: 14%;
  border-radius: 999px;
  transform: translateX(-50%);
}

.battle-short-replay-unit.trait-accuracy-high .part-head,
.battle-short-replay-unit.trait-enemy-fast .part-head {
  opacity: 0.42;
}

.battle-short-replay-unit.trait-burst-high .part-right {
  opacity: 0.48;
}

.battle-short-replay-unit.trait-defense-high .part-left {
  opacity: 0.46;
}

.battle-short-replay-unit.trait-speed-high .part-legs,
.battle-short-replay-unit.trait-enemy-fast .part-legs {
  opacity: 0.46;
}

.battle-short-replay-bottom {
  margin-top: 12px;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.battle-short-replay-caption {
  min-height: 28px;
  padding: 2px 16px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
  color: #fff0cb;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.42);
  border-radius: 999px;
  background: rgba(6, 12, 22, 0.44);
  border: 1px solid rgba(225, 237, 255, 0.08);
}

.battle-short-replay-result {
  text-align: center;
}

.battle-short-replay-result-main {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
}

.battle-short-replay-result-sub {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(233, 242, 255, 0.82);
}

.battle-short-replay.is-critical .battle-short-replay-impact {
  opacity: 0.54;
  transform: scale(1.08);
  background: radial-gradient(circle, rgba(255, 112, 95, 0.92), rgba(255, 112, 95, 0));
}

.battle-short-replay.is-heavy .battle-short-replay-impact {
  opacity: 0.38;
  transform: scale(0.88);
}

.battle-short-replay.is-hit-stop .battle-short-replay-stage {
  transform: scale(0.994);
  filter: brightness(1.04);
}

.battle-short-replay-stage[data-current-event="boss_warning"] {
  box-shadow: inset 0 0 0 1px rgba(255, 130, 116, 0.3), 0 0 28px rgba(255, 122, 96, 0.12);
}

.battle-short-replay-stage[data-current-event="boss_warning"] .battle-short-replay-impact {
  opacity: 0.3;
  transform: scale(1.22);
}

.battle-short-replay-stage[data-current-actor="player"] [data-replay-unit="player"].is-acting {
  animation: battle-replay-lunge-player 280ms ease-out;
}

.battle-short-replay-stage[data-current-actor="enemy"] [data-replay-unit="enemy"].is-acting {
  animation: battle-replay-lunge-enemy 280ms ease-out;
}

.battle-short-replay-stage[data-current-target="enemy"] [data-replay-unit="enemy"].is-hit {
  animation: battle-replay-hit-enemy 310ms ease-out;
  filter: brightness(1.08);
}

.battle-short-replay.is-critical .battle-short-replay-stage[data-current-target="enemy"] [data-replay-unit="enemy"].is-hit,
.battle-short-replay.is-heavy .battle-short-replay-stage[data-current-target="enemy"] [data-replay-unit="enemy"].is-hit {
  animation: battle-replay-hit-enemy-critical 360ms ease-out;
  filter: brightness(1.16);
}

.battle-short-replay-stage[data-current-target="player"] [data-replay-unit="player"].is-hit {
  animation: battle-replay-hit-player 310ms ease-out;
  filter: brightness(1.08);
}

.battle-short-replay.is-critical .battle-short-replay-stage[data-current-target="player"] [data-replay-unit="player"].is-hit,
.battle-short-replay.is-heavy .battle-short-replay-stage[data-current-target="player"] [data-replay-unit="player"].is-hit {
  animation: battle-replay-hit-player-critical 360ms ease-out;
  filter: brightness(1.16);
}

.battle-short-replay-stage[data-current-target="player"] [data-replay-unit="player"].is-evading {
  animation: battle-replay-evade-player 290ms ease-out;
}

.battle-short-replay-stage[data-current-target="enemy"] [data-replay-unit="enemy"].is-evading {
  animation: battle-replay-evade-enemy 290ms ease-out;
}

.battle-short-replay-stage[data-reaction="brace"] [data-replay-unit="player"].is-guarding {
  animation: battle-replay-brace 360ms ease-out;
}

.battle-short-replay-stage[data-reaction="brace"] [data-replay-unit="player"].is-guarding .part-left {
  opacity: 0.95;
  animation: battle-replay-shield-pulse 360ms ease-out;
  filter: drop-shadow(0 0 12px rgba(145, 222, 255, 0.72));
  background: rgba(145, 222, 255, 0.48);
}

.battle-short-replay-stage[data-current-event="boss_defeated"] [data-replay-unit="enemy"].is-finished {
  animation: battle-replay-finish-enemy 420ms ease-out;
  opacity: 0.2;
  filter: brightness(1.25);
}

.battle-short-replay-stage[data-current-actor="player"] [data-replay-unit="player"] .part-right,
.battle-short-replay-stage[data-current-actor="enemy"] [data-replay-unit="enemy"] .part-right {
  opacity: 0.94;
  transform: scale(1.4);
  background: rgba(255, 208, 116, 0.54);
}

.battle-short-replay-stage[data-current-target="player"] [data-replay-unit="player"] .part-legs,
.battle-short-replay-stage[data-current-target="enemy"] [data-replay-unit="enemy"] .part-legs {
  opacity: 0.9;
  transform: translateX(-50%) scale(1.34);
  background: rgba(109, 224, 255, 0.52);
}

.battle-short-replay-stage[data-current-actor="player"] [data-replay-unit="player"] .part-head,
.battle-short-replay-stage[data-current-actor="enemy"] [data-replay-unit="enemy"] .part-head {
  opacity: 0.82;
  background: rgba(154, 243, 255, 0.46);
}

.battle-short-replay.is-critical .battle-short-replay-stage[data-current-actor="player"] [data-replay-unit="player"] .part-head,
.battle-short-replay.is-critical .battle-short-replay-stage[data-current-actor="enemy"] [data-replay-unit="enemy"] .part-head {
  box-shadow: 0 0 14px rgba(255, 202, 148, 0.66);
  background: rgba(255, 186, 121, 0.62);
}

@keyframes battle-replay-shot-player {
  0% {
    width: 0;
    opacity: 0;
    transform: translateY(-50%) scaleX(0.2);
  }
  22% {
    opacity: 1;
  }
  100% {
    width: 18%;
    opacity: 0;
    transform: translateY(-50%) scaleX(1);
  }
}

@keyframes battle-replay-shot-enemy {
  0% {
    width: 0;
    opacity: 0;
    transform: translateY(-50%) scaleX(0.2);
  }
  22% {
    opacity: 1;
  }
  100% {
    width: 18%;
    opacity: 0;
    transform: translateY(-50%) scaleX(1);
  }
}

@keyframes battle-replay-hitflash {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(0.25);
  }
  28% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(1.55);
  }
}

@keyframes battle-replay-sparks {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(0.35) rotate(0deg);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(1.28) rotate(48deg);
  }
}

@keyframes battle-replay-lunge-player {
  0% {
    transform: translateX(0) translateY(0) scale(1);
  }
  45% {
    transform: translateX(18px) translateY(-6px) scale(1.02);
  }
  100% {
    transform: translateX(0) translateY(0) scale(1);
  }
}

@keyframes battle-replay-lunge-enemy {
  0% {
    transform: translateX(0) translateY(0) scale(1);
  }
  45% {
    transform: translateX(-18px) translateY(-6px) scale(1.02);
  }
  100% {
    transform: translateX(0) translateY(0) scale(1);
  }
}

@keyframes battle-replay-hit-enemy {
  0% {
    transform: translateX(0) scale(1);
  }
  30% {
    transform: translateX(16px) scale(0.98);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

@keyframes battle-replay-hit-enemy-critical {
  0% {
    transform: translateX(0) scale(1);
  }
  30% {
    transform: translateX(28px) translateY(2px) scale(0.95);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

@keyframes battle-replay-hit-player {
  0% {
    transform: translateX(0) scale(1);
  }
  30% {
    transform: translateX(-16px) scale(0.98);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

@keyframes battle-replay-hit-player-critical {
  0% {
    transform: translateX(0) scale(1);
  }
  30% {
    transform: translateX(-28px) translateY(2px) scale(0.95);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

@keyframes battle-replay-evade-player {
  0% {
    transform: translateX(0) translateY(0);
  }
  40% {
    transform: translateX(-22px) translateY(-10px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

@keyframes battle-replay-evade-enemy {
  0% {
    transform: translateX(0) translateY(0);
  }
  40% {
    transform: translateX(22px) translateY(-10px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

@keyframes battle-replay-brace {
  0% {
    transform: translateX(0) scale(1);
  }
  26% {
    transform: translateX(-14px) scale(0.98);
  }
  62% {
    transform: translateX(-4px) scale(0.99);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

@keyframes battle-replay-shield-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.62);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes battle-replay-hp-brace {
  0% {
    filter: brightness(1);
  }
  30% {
    filter: brightness(1.18);
  }
  60% {
    filter: brightness(0.92);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes battle-replay-finish-enemy {
  0% {
    transform: translateX(0) translateY(0) scale(1);
  }
  35% {
    transform: translateX(26px) translateY(8px) scale(0.9);
  }
  100% {
    transform: translateX(0) translateY(14px) scale(0.84);
  }
}

@media (max-width: 720px) {
  .battle-short-replay {
    padding: 12px;
  }

  .battle-short-replay-stage {
    grid-template-columns: minmax(0, 1fr) 4px minmax(0, 1fr);
    min-height: 184px;
    padding: 12px 8px 26px;
  }

  .battle-short-replay-frame {
    width: min(42vw, 132px);
    border-radius: 12px;
  }

  .battle-short-replay.is-boss [data-replay-unit="enemy"] .battle-short-replay-frame {
    width: min(44vw, 140px);
  }

  .battle-short-replay-status {
    width: min(40vw, 136px);
  }

  .battle-short-replay-name {
    font-size: 12px;
  }

  .battle-short-replay-hp {
    width: min(31vw, 102px);
    height: 5px;
  }

  .battle-short-replay-caption {
    font-size: 13px;
    padding: 2px 10px;
  }

  .battle-short-replay-result {
    text-align: center;
  }

  .battle-short-replay-result-main {
    font-size: 18px;
  }

  .battle-short-replay-projectile.from-player.to-enemy {
    left: 39%;
  }

  .battle-short-replay-projectile.from-enemy.to-player {
    right: 39%;
  }

  .battle-short-replay-hitflash.target-player,
  .battle-short-replay-sparks.target-player {
    left: 12%;
  }

  .battle-short-replay-hitflash.target-enemy,
  .battle-short-replay-sparks.target-enemy {
    right: 12%;
  }
}

.battle-log-fold {
  margin-top: 8px;
}

.battle-log-fold > summary {
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f5efe5;
  border: 1px solid rgba(33, 28, 20, 0.16);
  font-weight: 700;
}

.feed-card {
  margin-bottom: 10px;
}
.feed-card-boss {
  border-left: 4px solid rgba(160, 21, 44, 0.55);
  background: linear-gradient(120deg, rgba(255, 246, 239, 0.96), rgba(255, 251, 247, 0.96));
}
.feed-card-evolve {
  border-left: 4px solid rgba(23, 104, 109, 0.55);
  background: linear-gradient(120deg, rgba(238, 251, 250, 0.96), rgba(248, 253, 253, 0.96));
}
.feed-card-weekly {
  border-left: 4px solid rgba(116, 87, 26, 0.45);
  background: linear-gradient(120deg, rgba(255, 249, 235, 0.96), rgba(255, 253, 247, 0.96));
}
.feed-kicker-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 4px;
}
.feed-kicker {
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 900;
  color: #5d6878;
}

.feed-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.feed-user {
  font-weight: 800;
}

.feed-time {
  font-size: 12px;
  opacity: 0.8;
}

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

.feed-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 1px solid rgba(33, 28, 20, 0.2);
  object-fit: cover;
  background: #fff;
}

.feed-text {
  font-size: 14px;
  margin-bottom: 2px;
}
.feed-meta {
  font-size: 12px;
  color: #5b6575;
}

.feed-type {
  font-size: 11px;
  opacity: 0.7;
}

.comms-shell {
  display: grid;
  gap: 14px;
}
.comms-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #1d6662;
}
.comms-lead {
  margin: 0;
  color: #4f5f75;
  line-height: 1.5;
}
.comms-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.comms-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.comms-hub-card {
  display: grid;
  gap: 8px;
}
.comms-hub-card-muted {
  opacity: 0.92;
}
.comms-card-topline {
  display: flex;
  justify-content: flex-start;
}
.comms-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(26, 107, 103, 0.12);
  color: #16686d;
  font-size: 12px;
  font-weight: 800;
}
.comms-status-badge.is-muted {
  background: rgba(107, 117, 136, 0.12);
  color: #5b6575;
}
.comms-card-meta {
  font-size: 12px;
  color: #5b6575;
}
.comms-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.comms-toolbar-copy {
  font-size: 12px;
  color: #5b6575;
}
.comms-toolbar-stack {
  display: grid;
  gap: 2px;
}
.comms-count-pill {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 6px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(26, 107, 103, 0.12);
  color: #145854;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.comms-post-form {
  margin-bottom: 0;
}
.comms-timeline-item {
  margin-bottom: 0;
}
.comms-timeline-item-system {
  box-shadow: inset 0 0 0 1px rgba(26, 107, 103, 0.06);
}
.comms-legacy-system-card {
  border-left: 4px solid rgba(91, 101, 117, 0.24);
  background: linear-gradient(120deg, rgba(248, 249, 252, 0.96), rgba(255, 255, 255, 0.96));
}
.comms-message-card {
  border-left: 4px solid rgba(26, 107, 103, 0.3);
  background: linear-gradient(120deg, rgba(244, 250, 249, 0.96), rgba(255, 255, 255, 0.96));
}
.comms-message-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.comms-message-body {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.comms-room-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.comms-room-hero {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid rgba(33, 28, 20, 0.12);
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(255, 251, 240, 0.92), rgba(247, 251, 255, 0.96));
}
.comms-room-list {
  display: grid;
  gap: 10px;
}
.comms-room-form {
  margin-bottom: 0;
}
.comms-empty-card,
.comms-placeholder-card {
  background: linear-gradient(120deg, rgba(255, 251, 240, 0.92), rgba(250, 252, 255, 0.96));
}
.comms-personal-card {
  margin-bottom: 0;
}

.world-competition-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.world-score-list {
  display: grid;
  gap: 10px;
}

.world-score-card.is-user {
  border-left: 4px solid rgba(26, 107, 103, 0.45);
}

.world-score-card.is-tailwind {
  background: linear-gradient(120deg, rgba(244, 252, 248, 0.96), rgba(255, 253, 247, 0.96));
}

.world-score-head {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.world-score-title {
  display: flex;
  gap: 10px;
  align-items: center;
}

.world-score-emblem {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(33, 28, 20, 0.18);
  background: #fff;
}

.world-score-points {
  font-weight: 900;
  font-size: 18px;
}

.battle-summary-title {
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 4px;
}

.battle-summary-row {
  margin: 2px 0;
}
.bonus-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 6px;
}
.chip {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  white-space: nowrap;
}
.reward-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin-bottom: 6px;
}
.reward-item {
  display: flex;
  gap: 8px;
  align-items: baseline;
  white-space: nowrap;
  min-width: 0;
}
.reward-item .label {
  opacity: 0.75;
}
.reward-item .value {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.battle-drop-list {
  margin-top: 6px;
}

.battle-drop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  flex-wrap: wrap;
}

.battle-drop-mini {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(33, 28, 20, 0.2);
  background: #fff;
  object-fit: cover;
  flex: 0 0 auto;
}

.battle-drop-name {
  line-height: 1.3;
}

.battle-drop-count-mini {
  font-weight: 700;
}

.battle-drop-lock-form {
  margin-left: auto;
}

.battle-drop-lock-btn {
  padding: 5px 10px;
  font-size: 12px;
}

.core-drop-banner {
  margin: 8px 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid rgba(24, 143, 151, 0.55);
  background: linear-gradient(135deg, rgba(227, 255, 253, 0.95), rgba(243, 248, 255, 0.95));
  animation: coreDropPop 220ms ease-out both;
}

.core-drop-banner-head {
  font-weight: 900;
  color: #0f6f75;
  margin-bottom: 6px;
}

.core-drop-banner-body {
  display: flex;
  align-items: center;
  gap: 10px;
}

.core-drop-icon {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  border: 1px solid rgba(23, 104, 109, 0.35);
  background: #fff;
  object-fit: cover;
}

.core-drop-meta {
  flex: 1;
  min-width: 0;
}

.core-drop-name {
  font-weight: 800;
}

.core-drop-sub {
  font-size: 12px;
  opacity: 0.82;
}

.core-drop-count {
  font-weight: 900;
  color: #0d6a70;
  white-space: nowrap;
}

.rare-glow-card {
  box-shadow: 0 4px 12px rgba(35, 152, 160, 0.16);
}

.evolve-success-banner {
  border: 2px solid rgba(41, 133, 177, 0.4);
  background: linear-gradient(135deg, rgba(237, 247, 255, 0.94), rgba(239, 255, 250, 0.94));
  animation: coreDropPop 220ms ease-out both;
}

.evolve-overview-card {
  border-left: 4px solid rgba(26, 107, 103, 0.4);
  background: linear-gradient(120deg, #f4fbfb, #fbfefe);
}

.evolve-overview-head {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.evolve-core-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(26, 107, 103, 0.28);
  background: rgba(255, 255, 255, 0.78);
  font-weight: 700;
}

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

.evolve-overview-item {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(33, 28, 20, 0.12);
  background: rgba(255, 255, 255, 0.72);
}

.evolve-help-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.evolve-section-kicker {
  margin-bottom: 8px;
}

.evolve-compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin: 10px 0;
}

.evolve-compare-item {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(33, 28, 20, 0.2);
  background: #fff;
  text-align: center;
}

.evolve-target {
  border-color: rgba(23, 105, 109, 0.35);
}

.evolve-compare-title {
  font-size: 12px;
  opacity: 0.76;
  margin-bottom: 4px;
}

.evolve-compare-image {
  width: 74px;
  height: 74px;
  border-radius: 10px;
  border: 1px solid rgba(33, 28, 20, 0.18);
  background: #fff;
  object-fit: cover;
}

.evolve-compare-name {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
}

.evolve-compare-plus {
  font-weight: 800;
}

.evolve-compare-arrow {
  font-weight: 900;
  color: #0b6f75;
  white-space: nowrap;
}

.evolve-preview-inline {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: 0.88;
}

.evolve-preview-thumb {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(33, 28, 20, 0.2);
  background: #fff;
  object-fit: cover;
}

@keyframes coreDropPop {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 rgba(35, 152, 160, 0);
  }
  45% {
    box-shadow: 0 10px 28px rgba(35, 152, 160, 0.28);
  }
  100% {
    box-shadow: 0 8px 22px rgba(35, 152, 160, 0.22);
  }
}

@media (min-width: 1100px) {
  .reward-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .reward-grid {
    grid-template-columns: 1fr;
  }
  .core-drop-banner-body {
    align-items: flex-start;
  }
  .evolve-overview-grid {
    grid-template-columns: 1fr;
  }
  .evolve-compare-grid {
    grid-template-columns: 1fr;
  }
  .evolve-compare-arrow {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .core-drop-banner,
  .evolve-success-banner {
    animation: none;
  }
}

.outcome.win {
  color: #0a8a2a;
  font-weight: 900;
}

.outcome.lose {
  color: #d11;
  font-weight: 900;
}

.drop {
  font-weight: 800;
}

.table-wrap {
  overflow-x: auto;
}

.admin-parts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-parts-table th,
.admin-parts-table td {
  border: 1px solid rgba(33, 28, 20, 0.2);
  padding: 8px;
  vertical-align: top;
}

.admin-parts-table th {
  background: #f1eadf;
  text-align: left;
}

.admin-thumb {
  width: 56px;
  height: 56px;
}

.admin-delete-form {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.admin-delete-form input[type="text"] {
  min-width: 120px;
}

.danger-link {
  color: #b30000;
  font-weight: 700;
}

.danger-card {
  border-color: #c85a5a;
  background: #fff6f6;
}

.danger-btn {
  border: none;
  background: #b30000;
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}

.danger-btn-small {
  padding: 6px 8px;
  font-size: 11px;
}

.footer {
  text-align: center;
  padding: 18px;
  font-size: 12px;
  opacity: 0.7;
}

.streak-hint,
.streak-break {
  opacity: 0.85;
  font-size: 0.95em;
  margin-top: 4px;
}

.robot-idle-line {
  margin-top: 6px;
  font-size: 0.95em;
  opacity: 0.85;
}

.enemy-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.enemy-sprite-frame {
  position: relative;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border: 1px solid rgba(115, 145, 255, 0.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 72%, rgba(150, 182, 255, 0.2), transparent 58%),
    linear-gradient(180deg, rgba(14, 21, 39, 0.98), rgba(9, 14, 28, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 26px rgba(2, 6, 23, 0.24);
}

.enemy-sprite-frame img {
  image-rendering: pixelated;
  object-fit: contain;
}

.enemy-image,
.battle-enemy-image,
.admin-enemy-image {
  object-fit: contain;
  image-rendering: pixelated;
}

.battle-enemy-thumb-frame {
  width: 112px;
  height: 112px;
  flex: 0 0 auto;
}

.battle-enemy-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.34));
}

.enemy-dex-thumb-frame {
  width: 128px;
  height: 128px;
  margin-bottom: 8px;
}

.enemy-dex-thumb {
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.34));
}

.research-unlock-banner {
  border-left: 4px solid #3d8a43;
}
.axis-hint-line {
  margin-bottom: 8px;
}
.next-action-panel {
  margin-bottom: 10px;
}
.home-priority-stack {
  display: block;
}
.next-action-card {
  margin-bottom: 0;
  border-left: 6px solid rgba(26, 107, 103, 0.52);
  background: linear-gradient(120deg, #eef9f8, #f8fdfd);
}
.home-boost-inline {
  margin-top: 6px;
}
.home-nav-panel {
  margin-bottom: 0;
}
.home-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.home-nav-section-title {
  margin: 8px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #4a556a;
}
.home-status-panel {
  margin-bottom: 0;
}
.main-robot-stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.boss-medal-card,
.boss-medal-records-panel {
  display: grid;
  gap: 12px;
}
.boss-medal-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
.boss-medal-head h2 {
  margin: 0 0 4px;
}
.boss-medal-count {
  flex: 0 0 auto;
  min-width: 58px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(103, 232, 249, 0.34);
  color: #cffafe;
  text-align: center;
  font-weight: 800;
  background: rgba(8, 47, 73, 0.42);
}
.boss-medal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.boss-medal-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.62);
}
.boss-medal-chip img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
}
.boss-medal-chip span {
  font-size: 13px;
  font-weight: 700;
}
.boss-medal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.boss-medal-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(103, 232, 249, 0.22);
  background: rgba(15, 23, 42, 0.52);
}
.boss-medal-tile.is-locked {
  opacity: 0.58;
  border-style: dashed;
}
.boss-medal-frame {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(3, 7, 18, 0.34);
}
.boss-medal-frame img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: pixelated;
}
.boss-medal-copy {
  min-width: 0;
}
.boss-medal-empty {
  padding: 12px;
  border-radius: 8px;
  border: 1px dashed rgba(148, 163, 184, 0.3);
  color: var(--text-sub);
}
.robot-status-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-unlock-guide-card {
  margin: 8px 0 10px;
}
.home-primary-actions-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.home-primary-actions-grid .action-card {
  margin-bottom: 0;
  padding: 10px 10px 9px;
}
.home-primary-actions-grid .action-title {
  font-size: 14px;
}
.home-primary-actions-grid .action-desc {
  font-size: 12px;
  line-height: 1.3;
}
.home-secondary-actions-grid {
  margin-top: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.home-nav-card {
  margin-bottom: 0;
}
.home-invite-actions {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.home-inline-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.home-inline-actions .inline-form-top,
.home-inline-actions .link {
  margin-top: 0;
  margin-bottom: 0;
}
.home-social-log-list {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}
.home-comms-panel {
  display: grid;
  gap: 8px;
  align-content: start;
}
.home-comms-tabs,
.home-comms-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.home-comms-tabs button,
.home-comms-subtabs button {
  border: 1px solid rgba(33, 28, 20, 0.2);
  cursor: pointer;
  font: inherit;
}
.home-comms-panes {
  display: grid;
  gap: 8px;
}
.home-comms-pane,
.home-comms-room-pane {
  display: none;
}
.home-comms-pane.is-active,
.home-comms-room-pane.is-active {
  display: grid;
  gap: 8px;
  align-content: start;
}
.home-comms-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.home-comms-list {
  display: grid;
  gap: 8px;
  min-height: 0;
}
.home-comms-list.is-scrollable {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
.home-comms-item {
  margin-bottom: 0;
}
.home-room-form {
  margin-bottom: 0;
}
.home-chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
}
.home-chat-form input {
  min-width: 0;
}
.home-chat-form button {
  white-space: nowrap;
}
.mvp-hero-card {
  border-left: 4px solid rgba(26, 107, 103, 0.5);
}
.home-area-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
body.home-page .layer-card-grid,
body.home-page .layer-status-card,
body.home-page .locked-layer-card {
  display: none !important;
}
.home-area-card {
  margin-bottom: 0;
  padding: 10px;
}
.home-area-card.is-selected {
  border-color: rgba(26, 107, 103, 0.4);
  background: linear-gradient(120deg, #eef9f8, #fbfefd);
}
.guide-term-list {
  display: grid;
  gap: 10px;
}
.guide-style-grid,
.guide-set-bonus-grid {
  display: grid;
  gap: 10px;
}
.guide-style-card,
.guide-set-bonus-card {
  border: 1px solid rgba(33, 28, 20, 0.12);
  border-radius: 12px;
  background: #fffaf0;
  padding: 12px 14px;
}
.guide-style-line {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
.guide-term-item {
  border: 1px solid rgba(33, 28, 20, 0.12);
  border-radius: 10px;
  background: #fffaf0;
  padding: 10px 12px;
}
.guide-term-name {
  font-weight: 800;
  margin-bottom: 4px;
}
.guide-term-body {
  font-size: 14px;
  line-height: 1.5;
}
@media (min-width: 720px) {
  .guide-style-grid,
  .guide-set-bonus-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.shop-product {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.shop-product-image {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  padding: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.invite-link-row {
  margin-top: 6px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.invite-link-row input {
  flex: 1 1 auto;
  min-width: 0;
}
.attempt-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 2px;
}
.attempt-dot {
  font-size: 14px;
  line-height: 1;
}
.attempt-dot.is-filled {
  color: #1e1c17;
}
.attempt-dot.is-empty {
  color: rgba(33, 28, 20, 0.28);
}
.attempt-dot.is-last {
  font-size: 17px;
  font-weight: 900;
  padding: 0 3px;
  border: 1px solid rgba(233, 86, 47, 0.55);
  border-radius: 999px;
  background: rgba(233, 86, 47, 0.12);
}
.layer-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}
.layer-status-card {
  margin-bottom: 0;
  padding: 10px;
}
.layer-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}
.layer-status-title {
  font-weight: 900;
}
.new-layer-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(120deg, #ff2b5e, #ff8c2b);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.layer-status-main {
  font-size: 13px;
  font-weight: 800;
}
.layer-status-sub {
  font-size: 12px;
  opacity: 0.8;
}
.layer-status-card.is-open.layer-theme-1 {
  background: linear-gradient(135deg, #e6f4ff, #f8fcff);
  border-color: rgba(15, 79, 132, 0.35);
}
.layer-status-card.is-open.layer-theme-2 {
  background: linear-gradient(135deg, #f6e9ff, #fff5fb);
  border-color: rgba(107, 47, 155, 0.35);
}
.layer-status-card.is-open.layer-theme-3 {
  background: linear-gradient(135deg, #ffece3, #fff7ec);
  border-color: rgba(138, 29, 29, 0.32);
}
.layer-status-card.is-locked {
  background: linear-gradient(135deg, #f3f1ea, #faf8f3);
  border-style: dashed;
}
.locked-layer-card {
  text-align: left;
  background: linear-gradient(135deg, #f4f2ee, #fbfaf8);
  border: 1px dashed rgba(33, 28, 20, 0.3);
}
.locked-layer-icon {
  font-size: 22px;
}
.locked-layer-main {
  font-weight: 900;
}
.locked-layer-sub {
  font-size: 12px;
  opacity: 0.82;
}

.research-card {
  display: grid;
  gap: 10px;
}

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

.research-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.research-progress-line {
  display: grid;
  gap: 6px;
}
.research-progress-meter {
  width: 100%;
  height: 10px;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  background: #e5e0d6;
}
.research-progress-meter::-webkit-progress-bar {
  background: #e5e0d6;
  border-radius: 999px;
}
.research-progress-meter::-webkit-progress-value {
  background: #5f8f4d;
  border-radius: 999px;
}
.research-progress-meter::-moz-progress-bar {
  background: #5f8f4d;
  border-radius: 999px;
}

.research-progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #e5e0d6;
  overflow: hidden;
}

.research-progress-fill {
  height: 100%;
  background: #5f8f4d;
}

.research-stage {
  font-size: 13px;
}

.research-stage-dots {
  margin-left: 8px;
  letter-spacing: 2px;
}

.admin-balance-actions {
  margin-top: 8px;
}

@media (max-width: 960px) {
  .home-priority-stack {
    display: flex;
    flex-direction: column;
  }
  .home-priority-stack .priority-next-action { order: 1; }
  .home-priority-stack .priority-core { order: 2; }
  .home-priority-stack .priority-medals { order: 2; }
  .home-priority-stack .priority-boss-alert { order: 3; }
  .home-priority-stack .priority-boost { order: 4; }
  .home-priority-stack .priority-progress { order: 5; }
  .home-priority-stack .priority-research { order: 6; }
  .home-layout-grid {
    grid-template-columns: 1fr;
  }
  .home-right-stack {
    grid-template-columns: 1fr;
  }
  .home-main-stack {
    grid-template-columns: 1fr;
  }
  .home-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-primary-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-secondary-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-actions-grid .action-card {
    padding: 12px;
  }
  .home-actions-grid .action-desc {
    font-size: 12px;
    line-height: 1.35;
  }
  .build-grid {
    grid-template-columns: 1fr;
  }
  .build-preview-canvas {
    width: 192px;
    height: 192px;
  }
  .build-offset-grid {
    grid-template-columns: 1fr;
  }
  .robot-top-row {
    grid-template-columns: 132px minmax(0, 1fr);
  }
  .robot-info-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .robot-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .main-robot-achievement-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .build-preview-canvas {
    width: 168px;
    height: 168px;
  }
  .top { flex-direction: column; gap: 8px; }
  .click-button { width: 100%; }
  .upgrade { flex-direction: column; align-items: flex-start; }
  .layer-card-grid { grid-template-columns: 1fr; }
  body.battle-page .layer-boss-victory-main { font-size: 24px; }
  .home-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-primary-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-secondary-actions-grid {
    grid-template-columns: 1fr;
  }
  .home-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-area-card-grid {
    display: none;
  }
  .home-social-log-list {
    max-height: 220px;
  }
  .home-chat-form {
    grid-template-columns: 1fr;
  }
  .home-comms-tabs,
  .home-comms-subtabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-comms-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .comms-nav,
  .comms-room-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .comms-toolbar,
  .comms-room-hero,
  .comms-message-head {
    flex-direction: column;
  }
  .comms-toolbar,
  .comms-room-hero {
    align-items: flex-start;
  }
  .comms-count-pill {
    margin-left: 4px;
  }
  .auth {
    width: 100%;
    margin-top: 6px;
    margin-bottom: 14px;
    padding-inline: 0;
  }
  .auth-card {
    padding: 14px 12px;
    border-radius: 12px;
  }
  .auth-title {
    font-size: 30px;
    line-height: 1.05;
  }
  .auth-lead {
    font-size: 13px;
    margin-bottom: 10px;
  }
  .landing-main-grid {
    grid-template-columns: 1fr;
  }
  .landing-front-showcase {
    padding: 14px 14px 0;
  }
  .landing-front-showcase-main {
    min-height: 140px;
    max-height: 220px;
  }
  .landing-front-icons img {
    width: 54px;
    height: 54px;
  }
  .landing-cta-row {
    flex-direction: column;
  }
  .landing-primary-cta,
  .landing-secondary-cta,
  .landing-front-btn {
    width: 100%;
  }
  .landing-mini-nav {
    display: grid;
    grid-template-columns: 1fr;
  }
  .auth-hero-grid,
  .auth-info-grid {
    grid-template-columns: 1fr;
  }
  .auth-step-grid {
    grid-template-columns: 1fr;
  }
  .auth-hero-cta-stack {
    max-width: none;
  }
  .auth-hero-cta {
    width: 100%;
  }
  .home-mini-log-item {
    padding: 6px;
    gap: 6px;
  }
  .home-mini-log-text {
    font-size: 12px;
  }

  .robot-top-row {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }

  .robot-image-card {
    justify-self: center;
    width: 140px;
  }

  .robot-info-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .robot-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .container {
    padding: 14px;
  }

  .home-explore-card .card {
    padding: 12px;
    gap: 8px;
  }

  .home-explore-card-head {
    gap: 8px;
  }

  .home-primary-explore-cta {
    min-height: 52px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 900;
  }

  .home-explore-utility-form,
  .home-explore-utility-link {
    display: none !important;
  }

  .home-priority-stack,
  .home-layout-grid,
  .home-layout-grid > *,
  .home-current-robot,
  .home-actions-panel,
  .main-robot-layout,
  .robot-top-row,
  .main-robot-meta-grid,
  .main-robot-stat-grid {
    min-width: 0;
  }

  .home-layout-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .home-main-stack { order: 1; }
  .home-social-stack { order: 2; }
  .home-social-stack .home-weekly-panel { order: 2; }
  .home-social-stack .home-faction-panel { order: 3; }
  .home-social-stack .home-nav-panel { order: 4; }
  .home-social-stack .home-ranking-panel { order: 5; }
  .home-social-stack .home-visibility-panel { order: 6; }

  .enemy-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .battle-enemy-thumb-frame {
    width: 88px;
    height: 88px;
    margin: 0 auto;
  }

  .battle-enemy-thumb {
    margin: 0;
  }

  .main-robot-layout {
    gap: 10px;
  }

  .robot-top-row {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
  }

  .robot-info-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .robot-top-visual {
    justify-content: flex-start;
  }

  .main-robot-thumb {
    width: 112px;
    height: 112px;
    margin: 0;
  }

  .robot-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .main-robot-stat-grid .stat-card {
    padding: 9px;
  }

  .main-robot-stat-grid .stat-value {
    font-size: 18px;
  }

  .home-actions-panel .inline-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  .home-actions-panel .inline-form label,
  .home-actions-panel .inline-form select,
  .home-actions-panel .inline-form button {
    width: 100%;
    min-width: 0;
  }

  .home-actions-panel .link a,
  .home-actions-panel .battle-home-link {
    overflow-wrap: anywhere;
  }

  .home-support-card .home-inline-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .top {
    gap: 8px;
  }

  .top .user {
    min-width: 0;
    flex-wrap: wrap;
    word-break: break-word;
  }
}

.market-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  margin-bottom: 16px;
}
.market-wallet {
  min-width: 180px;
  padding: 12px;
  border: 1px solid rgba(125, 211, 252, 0.24);
  border-radius: 8px;
  background: rgba(10, 20, 32, 0.72);
}
.market-wallet-coins,
.market-summary-total,
.market-summary-count {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
}
.market-section {
  margin-bottom: 18px;
}
.market-protect-note {
  max-width: 1120px;
  margin: 8px auto 14px;
  padding: 8px 12px;
  border: 1px solid rgba(196, 128, 24, 0.28);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.92);
  color: #5b3b11;
  font-size: 13px;
}
.market-inventory-note {
  max-width: 1120px;
  margin: 8px auto 14px;
  padding: 9px 12px;
  border: 1px solid rgba(46, 125, 50, 0.24);
  border-radius: 8px;
  background: rgba(237, 247, 237, 0.94);
  color: #24562a;
  font-size: 13px;
}
.market-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.market-refresh-form {
  flex-shrink: 0;
}
.market-listing-card {
  position: relative;
}
.market-listing-card.is-featured {
  border-color: rgba(250, 204, 21, 0.46);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.12), 0 10px 28px rgba(8, 13, 24, 0.28);
}
.market-featured-label {
  display: inline-flex;
  width: fit-content;
  margin: 4px 0 8px;
  padding: 3px 7px;
  border-radius: 8px;
  border: 1px solid rgba(250, 204, 21, 0.38);
  color: #fde68a;
  background: rgba(113, 63, 18, 0.18);
  font-size: 12px;
  font-weight: 800;
}
.market-sell-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  align-items: start;
  gap: 14px;
}
.market-sell-card {
  cursor: pointer;
}
.market-sell-summary {
  position: sticky;
  top: 12px;
}
.market-summary-list {
  min-height: 76px;
  margin: 10px 0;
  padding-left: 18px;
  color: rgba(221, 231, 246, 0.86);
}
button.secondary {
  margin-top: 8px;
  background: rgba(30, 41, 59, 0.72);
}
@media (max-width: 768px) {
  .market-hero,
  .market-section-heading,
  .market-sell-layout {
    grid-template-columns: 1fr;
  }
  .market-section-heading {
    display: grid;
  }
  .market-refresh-form {
    width: 100%;
  }
  .market-sell-summary {
    position: static;
    order: -1;
  }
}

/* Home-specific mobile fallback for browsers that keep desktop-like defaults (e.g. in-app webviews). */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  body.home-page .container,
  body.home-page .panel,
  body.home-page .card,
  body.home-page .home-priority-stack,
  body.home-page .home-layout-grid,
  body.home-page .home-current-robot,
  body.home-page .home-main-stack,
  body.home-page .home-actions-panel,
  body.home-page .home-social-stack,
  body.home-page .main-robot-layout,
  body.home-page .robot-top-row,
  body.home-page .main-robot-meta-grid,
  body.home-page .main-robot-stat-grid,
  body.home-page .home-nav-grid,
  body.home-page .home-community-panel {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.home-page .home-layout-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  body.home-page .home-primary-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.home-page .home-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.home-page .home-area-card-grid {
    display: none !important;
  }

  body.home-page .home-main-stack { order: 1; }
  body.home-page .home-social-stack { order: 2; }
  body.home-page .home-social-stack .home-weekly-panel { order: 2; }
  body.home-page .home-social-stack .home-faction-panel { order: 3; }
  body.home-page .home-social-stack .home-nav-panel { order: 4; }
  body.home-page .home-social-stack .home-ranking-panel { order: 5; }
  body.home-page .home-social-stack .home-visibility-panel { order: 6; }

  body.home-page .main-robot-layout {
    gap: 10px !important;
  }

body.home-page .robot-top-row {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

body.home-page .robot-info-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

body.home-page .main-robot-stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
body.home-page .robot-status-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

  body.home-page .main-robot-thumb {
    width: 112px !important;
    height: 112px !important;
    margin: 0 auto !important;
  }

  body.home-page .home-actions-panel .inline-form,
  body.home-page .home-actions-panel .inline-form label,
  body.home-page .home-actions-panel .inline-form select,
  body.home-page .home-actions-panel .inline-form button,
  body.home-page .action-card,
  body.home-page .home-nav-card,
  body.home-page input,
  body.home-page select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.home-page .invite-link-row {
    flex-direction: column;
    align-items: stretch;
  }

  body.home-page {
    overflow-x: hidden;
  }
}

body.home-page.home-mobile .container,
body.home-page.home-mobile .panel,
body.home-page.home-mobile .card,
body.home-page.home-mobile .home-priority-stack,
body.home-page.home-mobile .home-layout-grid,
body.home-page.home-mobile .home-current-robot,
body.home-page.home-mobile .home-main-stack,
body.home-page.home-mobile .home-actions-panel,
body.home-page.home-mobile .home-social-stack,
body.home-page.home-mobile .main-robot-layout,
body.home-page.home-mobile .robot-top-row,
body.home-page.home-mobile .main-robot-meta-grid,
body.home-page.home-mobile .main-robot-stat-grid,
body.home-page.home-mobile .home-nav-grid,
body.home-page.home-mobile .home-community-panel {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.home-page.home-mobile .home-layout-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
body.home-page.home-mobile .home-primary-actions-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.home-page.home-mobile .home-nav-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.home-page.home-mobile .home-area-card-grid {
  display: none !important;
}

body.home-page.home-mobile .home-main-stack { order: 1; }
body.home-page.home-mobile .home-social-stack { order: 2; }
body.home-page.home-mobile .home-social-stack .home-weekly-panel { order: 2; }
body.home-page.home-mobile .home-social-stack .home-faction-panel { order: 3; }
body.home-page.home-mobile .home-social-stack .home-nav-panel { order: 4; }
body.home-page.home-mobile .home-social-stack .home-ranking-panel { order: 5; }
body.home-page.home-mobile .home-social-stack .home-visibility-panel { order: 6; }

body.home-page.home-mobile .main-robot-layout {
  gap: 10px !important;
}

body.home-page.home-mobile .robot-top-row {
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 10px !important;
}
body.home-page.home-mobile .robot-info-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
body.home-page.home-mobile .robot-status-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.home-page.home-mobile .main-robot-thumb {
  width: 112px !important;
  height: 112px !important;
  margin: 0 auto !important;
}

body.home-page.home-mobile .home-actions-panel .inline-form,
body.home-page.home-mobile .home-actions-panel .inline-form label,
body.home-page.home-mobile .home-actions-panel .inline-form select,
body.home-page.home-mobile .home-actions-panel .inline-form button,
body.home-page.home-mobile .action-card,
body.home-page.home-mobile .home-nav-card,
body.home-page.home-mobile input,
body.home-page.home-mobile select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.home-page.home-mobile .home-explore-card .card {
  padding: 12px !important;
  gap: 8px !important;
}

body.home-page.home-mobile .home-primary-explore-cta {
  width: 100% !important;
  min-height: 52px !important;
  font-size: 16px !important;
}

body.home-page.home-mobile .presence-bar {
  align-items: flex-start !important;
  flex-direction: column !important;
}

body.home-page.home-mobile .presence-avatar-row {
  justify-content: flex-start !important;
  min-width: 0 !important;
  padding-left: 7px !important;
}

body.home-page.home-mobile .presence-modal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.home-page.home-mobile .recent-robots-shell {
  padding: 10px 8px 11px !important;
}

body.home-page.home-mobile .recent-robots-head {
  margin-bottom: 8px !important;
}

body.home-page.home-mobile .recent-robot-carousel {
  grid-auto-columns: 76px !important;
  gap: 7px !important;
  padding-bottom: 5px !important;
}

body.home-page.home-mobile .recent-robot-card {
  min-height: 128px !important;
  padding: 7px 5px !important;
}

body.home-page.home-mobile .recent-robot-icon {
  width: 48px !important;
  height: 48px !important;
}

@media (max-width: 420px) {
  body.home-page.home-mobile .presence-modal-grid {
    grid-template-columns: 1fr !important;
  }
}

body.home-page.home-mobile .home-research-boost {
  align-items: stretch !important;
  flex-direction: column !important;
}

body.home-page.home-mobile .home-research-boost-button {
  width: 100% !important;
  min-height: 48px !important;
  font-size: 16px !important;
}

body.home-page.home-mobile .home-research-toggle {
  align-items: stretch !important;
  flex-direction: column !important;
}

body.home-page.home-mobile .home-research-share-button {
  min-height: 48px !important;
  font-size: 16px !important;
}

body.home-page.home-mobile .home-explore-utility-form,
body.home-page.home-mobile .home-explore-utility-link {
  display: none !important;
}

@media (max-width: 640px) {
  body {
    padding-top: 0;
  }

  .topbar,
  .topbar.is-hidden,
  .topbar.is-compact-static {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .top {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
  }

  .user {
    width: 100%;
    gap: 6px;
  }

  body.home-page .robot-top-row,
  body.home-page.home-mobile .robot-top-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  body.home-page .robot-info-row,
  body.home-page.home-mobile .robot-info-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.home-page .robot-image-card,
  body.home-page.home-mobile .robot-image-card {
    justify-self: center !important;
    width: 140px !important;
  }

  body.home-page .robot-top-visual,
  body.home-page.home-mobile .robot-top-visual {
    justify-content: center !important;
  }

  body.home-page .main-robot-thumb,
  body.home-page.home-mobile .main-robot-thumb {
    margin: 0 auto !important;
  }

  body.home-page .robot-status-grid,
  body.home-page.home-mobile .robot-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

body.home-page.home-mobile .invite-link-row {
  flex-direction: column;
  align-items: stretch;
}

@media (max-width: 640px) {
  body.home-page .main-robot-layout,
  body.home-page.home-mobile .main-robot-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  body.home-page .robot-top-row,
  body.home-page.home-mobile .robot-top-row {
    display: contents !important;
  }

  body.home-page .robot-top-visual,
  body.home-page.home-mobile .robot-top-visual,
  body.home-page .robot-image-card,
  body.home-page.home-mobile .robot-image-card {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    justify-content: center !important;
    width: 140px !important;
  }

  body.home-page .robot-info-row,
  body.home-page.home-mobile .robot-info-row {
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.home-page .main-robot-stat-grid,
  body.home-page .robot-status-grid,
  body.home-page.home-mobile .main-robot-stat-grid,
  body.home-page.home-mobile .robot-status-grid {
    grid-column: 2 !important;
    grid-row: 2 !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-self: start !important;
  }

  body.home-page .main-robot-stat-grid .stat-card,
  body.home-page.home-mobile .main-robot-stat-grid .stat-card {
    padding: 9px 10px !important;
    min-height: 0 !important;
  }

  body.home-page .robot-overview-meta,
  body.home-page.home-mobile .robot-overview-meta {
    gap: 6px !important;
  }

  body.home-page .robot-overview-meta span,
  body.home-page.home-mobile .robot-overview-meta span {
    padding: 3px 7px !important;
    font-size: 13px !important;
  }

  body.home-page .home-robot-details,
  body.home-page.home-mobile .home-robot-details {
    grid-column: 1 / -1 !important;
  }
}

@media (min-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.client-error-fallback {
  border: 1px solid #b71c1c;
  background: #fff3f3;
  color: #7f1010;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.client-error-fallback-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.client-error-fallback-desc {
  font-size: 13px;
  margin-bottom: 8px;
}

.client-error-fallback-actions {
  display: flex;
  gap: 10px;
}

.battle-return-ct {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  opacity: 0.8;
}

.admin-users-table-wrap {
  overflow: auto;
}

.admin-inline-form {
  display: inline;
}

.intro-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.intro-guide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 24, 0.6);
}

.intro-guide-card {
  position: relative;
  width: min(560px, 100%);
  max-height: min(90vh, 680px);
  overflow: auto;
  background:
    linear-gradient(180deg, rgba(17, 25, 44, 0.98) 0%, rgba(13, 20, 36, 0.98) 100%);
  color: #eef4ff;
  border: 1px solid rgba(103, 232, 249, 0.18);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 18px 42px rgba(2, 8, 23, 0.42);
}

.intro-guide-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: auto;
  min-width: 0;
  height: auto;
  border-radius: 0;
  border: 0;
  background: transparent;
  padding: 2px 6px;
  line-height: 1;
  font-size: 20px;
  font-weight: 600;
  color: #dce9ff;
  cursor: pointer;
}

.intro-guide-head {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding-right: 28px;
}

.intro-guide-npc {
  display: block;
  width: 56px;
  height: 56px;
  max-width: none;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(103, 232, 249, 0.2);
  background: rgba(11, 16, 32, 0.9);
}

.intro-guide-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(103, 232, 249, 0.22);
  color: #86ecff;
  background: rgba(103, 232, 249, 0.1);
}

.intro-guide-subcopy {
  margin-top: 4px;
  color: #bfcee7;
  font-size: 14px;
  line-height: 1.5;
}

.intro-guide-body p {
  margin: 7px 0;
  line-height: 1.55;
  color: #eef4ff;
}

.display-name-setup-card {
  width: min(520px, 100%);
}

.display-name-setup-form {
  margin-top: 10px;
}

.display-name-setup-form label {
  display: block;
  margin-bottom: 8px;
  color: #dce9ff;
  font-weight: 700;
}

.display-name-setup-form input[type="text"] {
  width: 100%;
  margin-bottom: 10px;
}

.intro-guide-footer {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #eef4ff;
  border: 1px solid rgba(103, 232, 249, 0.16);
}

.btn-unlock {
  background: rgba(120, 49, 49, 0.94);
  color: #fff8f2;
  border: 1px solid rgba(174, 84, 84, 0.68);
}

.btn-unlock:hover {
  background: rgba(145, 58, 58, 0.98);
}

.intro-guide-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin-top: 12px;
  font-size: 13px;
  color: #bfcee7;
  min-width: 0;
}

.beginner-mission-head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
}

.beginner-mission-npc {
  display: block;
  width: 40px;
  height: 40px;
  max-width: none;
  border-radius: 10px;
  border: 1px solid rgba(33, 28, 20, 0.16);
  background: #fff;
  object-fit: cover;
}

.home-mission-robot {
  width: 45px;
  height: 45px;
}

@media (max-width: 720px) {
  .intro-guide-modal {
    padding: 12px;
    align-items: flex-end;
  }

  .beginner-mission-head {
    grid-template-columns: 36px 1fr;
    gap: 8px;
  }

  .beginner-mission-npc {
    width: 36px;
    height: 36px;
  }

  .home-mission-robot {
    width: 37px;
    height: 37px;
  }

  .intro-guide-card {
    border-radius: 14px;
    padding: 14px 12px 12px;
    max-height: 88vh;
  }

  .intro-guide-close {
    top: 8px;
    right: 8px;
    padding: 2px 6px;
    font-size: 20px;
    border: 0;
    background: transparent;
    width: auto;
    min-width: 0;
    height: auto;
  }

  .intro-guide-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .intro-guide-footer .inline-form,
  .intro-guide-footer button {
    width: 100%;
  }

  .intro-guide-checkbox {
    margin-top: 8px;
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .home-mission-robot {
    width: 35px;
    height: 35px;
  }
}

.lab-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.lab-card-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.lab-top-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lab-top-action-wide {
  grid-column: 1 / -1;
}

.mini-lab-top-card {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}
.mini-lab-top-card img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  image-rendering: pixelated;
}
.mini-lab-layout {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.mini-lab-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
  background:
    linear-gradient(180deg, rgba(103, 232, 249, 0.12), rgba(251, 191, 36, 0.08)),
    var(--panel);
}
.mini-robot-visual {
  width: min(220px, 70vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(103, 232, 249, 0.2);
  background: rgba(7, 12, 24, 0.5);
}
.mini-robot-visual img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  image-rendering: pixelated;
}
.mini-state-badge {
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.18);
  color: #ffe5a1;
  font-size: 12px;
  font-weight: 800;
}
.mini-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.mini-status-grid div,
.mini-debug-grid div {
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}
.mini-status-grid span,
.mini-debug-grid span,
.mini-log-row span {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
}
.mini-debug-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.mini-rename-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mini-rename-form input {
  min-width: 180px;
}
.mini-care-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.mini-care-grid button {
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  background: #1e1c17;
  color: #f8f3e9;
  cursor: pointer;
}
.mini-select-intro {
  margin-bottom: 16px;
}
.mini-select-card {
  display: grid;
  gap: 10px;
  text-align: center;
}
.mini-select-card img {
  width: min(180px, 70vw);
  aspect-ratio: 1;
  margin: 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
}
.mini-select-card button {
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  background: #1e1c17;
  color: #f8f3e9;
  cursor: pointer;
}
.mini-log-list {
  display: grid;
  gap: 8px;
}
.mini-log-row {
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}
.mini-growth-bar,
.mini-growth-progress {
  height: 14px;
  width: 100%;
  border-radius: 999px;
  margin-bottom: 8px;
}
.mini-growth-progress {
  overflow: hidden;
  border: 0;
  appearance: none;
  background: rgba(255, 255, 255, 0.08);
}
.mini-growth-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-gold));
}
.mini-growth-progress::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}
.mini-growth-progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--accent-green), var(--accent-gold));
  border-radius: 999px;
}
.mini-growth-progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--accent-green), var(--accent-gold));
  border-radius: 999px;
}
.mini-catalog-card {
  text-align: center;
}
.mini-catalog-card img,
.mini-catalog-image,
.mini-silhouette {
  width: 120px;
  height: 120px;
  margin: 0 auto 10px;
  object-fit: contain;
}
.mini-silhouette {
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.35);
  font-size: 54px;
  font-weight: 900;
}
.mini-catalog-card.is-locked,
.mini-catalog-card--locked {
  opacity: 0.72;
}
.mini-catalog-image--locked {
  filter: grayscale(1) brightness(0.6);
  opacity: 0.75;
}

.lab-live-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.lab-entry-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lab-race-bet-hero,
.lab-race-bet-guide,
.lab-entry-bet-card {
  border-radius: 18px;
}

.lab-race-bet-copy {
  margin-top: 6px;
  color: rgba(27, 35, 48, 0.78);
}

.lab-entry-bet-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.lab-entry-bet-figure {
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: 12px;
  border-radius: 16px;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%),
    linear-gradient(145deg, rgba(43, 56, 77, 0.12), rgba(43, 56, 77, 0.04));
}

.lab-entry-bet-figure img {
  width: min(100%, 112px);
  height: 112px;
  object-fit: contain;
}

.lab-entry-bet-name {
  font-size: 1.05rem;
}

.lab-entry-bet-copy {
  min-height: 2.8em;
  color: rgba(27, 35, 48, 0.76);
}

.lab-entry-bet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.lab-entry-bet-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.92rem;
}

.lab-entry-bet-stats span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(67, 84, 109, 0.08);
}

.lab-entry-bet-form {
  margin-top: auto;
}

.lab-entry-bet-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lab-entry-bet-actions button {
  width: 100%;
}

@media (max-width: 900px) {
  .lab-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .lab-top-action-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mini-lab-layout,
  .lab-live-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mini-status-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lab-entry-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lab-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.lab-showcase-card {
  text-decoration: none;
  color: inherit;
}

.lab-showcase-card .robot-thumb {
  width: min(176px, 100%);
  height: 176px;
  object-fit: contain;
  margin: 0 auto 12px;
  border-radius: 12px;
}

.lab-upload-form {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.lab-upload-section {
  display: grid;
  gap: 14px;
}

.lab-upload-section h2 {
  margin: 0;
}

.lab-field-stack {
  display: grid;
  gap: 7px;
}

.lab-field-stack label,
.lab-upload-section > label {
  color: var(--text-main);
  font-weight: 800;
}

.lab-field-stack input,
.lab-field-stack select,
.lab-field-stack textarea,
.lab-stat-card select {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border-radius: 10px;
}

.lab-field-stack textarea {
  min-height: 112px;
  resize: vertical;
}

.lab-upload-two-col,
.lab-upload-classification {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lab-upload-classification {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
  align-items: start;
}

.lab-compact-field {
  max-width: 260px;
}

.lab-image-field input[type="file"] {
  padding: 14px;
}

.lab-stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.lab-stat-total {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(103, 232, 249, 0.24);
  background: rgba(12, 22, 43, 0.82);
  color: var(--text-main);
  font-weight: 800;
}

.lab-stat-total.is-over {
  border-color: rgba(248, 113, 113, 0.62);
  background: rgba(75, 22, 32, 0.86);
  color: #fecaca;
}

.lab-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.lab-stat-body {
  display: grid;
  gap: 14px;
}

.lab-stat-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(103, 232, 249, 0.16);
  background: rgba(15, 25, 49, 0.72);
  color: var(--text-main);
  font-weight: 800;
}

.lab-submit-section .lab-terms-box {
  margin-top: 0;
}

.lab-submit-section button[type="submit"] {
  justify-self: start;
  min-height: 48px;
  min-width: 220px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--accent-purple) 0%, #7c3aed 100%);
  color: #fdfbff;
  box-shadow: 0 12px 24px rgba(91, 33, 182, 0.26);
  font-weight: 900;
  cursor: pointer;
}

.lab-submit-section button[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

.lab-radar-panel {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(103, 232, 249, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 35%, rgba(103, 232, 249, 0.12), transparent 48%),
    rgba(7, 15, 30, 0.58);
}

.lab-radar-chart {
  width: min(220px, 100%);
  height: auto;
  overflow: visible;
}

.lab-radar-ring {
  fill: none;
  stroke: rgba(103, 232, 249, 0.22);
  stroke-width: 1.2;
}

.lab-radar-ring.is-mid,
.lab-radar-ring.is-low {
  stroke: rgba(148, 163, 184, 0.16);
}

.lab-radar-axis {
  stroke: rgba(148, 163, 184, 0.16);
  stroke-width: 1;
}

.lab-radar-fill {
  fill: rgba(103, 232, 249, 0.18);
  stroke: rgba(103, 232, 249, 0.78);
  stroke-width: 2;
}

.lab-radar-dot {
  fill: #67e8f9;
  stroke: rgba(6, 12, 25, 0.92);
  stroke-width: 1.5;
}

.lab-radar-label {
  fill: rgba(220, 229, 247, 0.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.lab-badge-row,
.lab-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.lab-badge,
.lab-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(103, 232, 249, 0.22);
  background: rgba(20, 34, 64, 0.82);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.lab-tag {
  border-color: rgba(168, 85, 247, 0.26);
  background: rgba(41, 30, 70, 0.78);
  color: rgba(232, 221, 255, 0.94);
}

.lab-checkbox-grid,
.lab-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.lab-check-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(103, 232, 249, 0.16);
  border-radius: 12px;
  background: rgba(15, 25, 49, 0.76);
  color: var(--text-main);
}

.lab-check-card input[type="checkbox"] {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
}

.lab-terms-box,
.lab-adoption-note {
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(103, 232, 249, 0.22);
  background:
    linear-gradient(180deg, rgba(18, 31, 58, 0.92), rgba(12, 20, 39, 0.94));
  color: var(--text-main);
}

.lab-terms-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-weight: 800;
}

.lab-terms-check input[type="checkbox"] {
  width: auto;
  min-width: 0;
}

.lab-terms-snapshot {
  white-space: pre-wrap;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(103, 232, 249, 0.16);
  background: rgba(6, 12, 25, 0.72);
  color: var(--text-sub);
  line-height: 1.7;
}

.lab-chart-grid,
.lab-mini-chart {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.lab-chart-row,
.lab-mini-chart-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  color: var(--text-sub);
}

.lab-mini-chart-row {
  grid-template-columns: 58px minmax(0, 1fr);
  font-size: 12px;
}

.lab-chart-bar,
.lab-mini-chart-row i {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
}

.lab-chart-bar i,
.lab-mini-chart-row i::before {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.82), rgba(250, 204, 21, 0.78));
  content: "";
}

.lab-admin-grid label {
  display: grid;
  gap: 4px;
  color: var(--text-sub);
}

@media (min-width: 1024px) {
  .lab-upload-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .lab-upload-section:nth-of-type(n + 5) {
    grid-column: 1 / -1;
  }

  .lab-upload-section {
    min-height: 100%;
  }

  .lab-upload-classification {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 240px);
  }

  .lab-upload-classification .lab-checkbox-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lab-stat-body {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 220px);
    align-items: start;
  }

  .lab-stat-card {
    padding: 10px 12px;
  }

  .lab-stat-card select {
    min-height: 40px;
  }
}

@media (max-width: 760px) {
  .lab-upload-two-col,
  .lab-upload-classification,
  .lab-stat-body,
  .lab-stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lab-compact-field {
    max-width: none;
  }

  .lab-stat-card {
    grid-template-columns: minmax(0, 1fr) 88px;
  }

  .lab-submit-section button[type="submit"] {
    width: 100%;
  }
}

.lab-detail-thumb {
  width: min(320px, 100%);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 16px auto 12px;
  border-radius: 14px;
}

.lab-detail-grid {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.lab-detail-summary-card,
.lab-detail-spec-card,
.lab-detail-action-card,
.lab-detail-admin-card {
  min-width: 0;
}

.lab-detail-spec-card h2,
.lab-detail-admin-card h2 {
  margin-top: 0;
}

.lab-detail-spec-card .lab-radar-panel {
  margin-top: 12px;
}

.lab-radar-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  width: 100%;
}

.lab-radar-value-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.62);
  color: var(--text-sub);
  font-size: 12px;
}

.lab-radar-value-row strong {
  color: var(--text-main);
}

.lab-report-form {
  margin-top: 12px;
}

@media (min-width: 920px) {
  .lab-detail-grid.is-pair {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
    align-items: start;
  }

  .lab-detail-grid.is-single {
    max-width: 760px;
  }
}

@media (max-width: 640px) {
  .lab-radar-values {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lab-race-stage {
  position: relative;
  min-height: 360px;
  margin-top: 12px;
  border: 1px solid rgba(34, 64, 30, 0.65);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.18), transparent 24%),
    radial-gradient(circle at 83% 16%, rgba(255, 255, 255, 0.12), transparent 22%),
    linear-gradient(180deg, #93e57d 0%, #78d363 34%, #5cb84c 68%, #3f9539 100%);
  box-shadow: inset 0 -24px 48px rgba(21, 58, 17, 0.16);
}

.lab-race-stage.course-gravity_lane {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.18), transparent 24%),
    radial-gradient(circle at 83% 16%, rgba(255, 255, 255, 0.12), transparent 22%),
    linear-gradient(180deg, #99d8fb 0%, #7abce8 30%, #67a0d0 58%, #4b76a9 100%);
  box-shadow: inset 0 -24px 48px rgba(18, 34, 72, 0.18);
}

.lab-race-stage::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 32%;
  background: linear-gradient(180deg, rgba(17, 48, 18, 0) 0%, rgba(17, 48, 18, 0.12) 42%, rgba(17, 48, 18, 0.28) 100%);
  pointer-events: none;
}

.lab-race-stage-pack {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.lab-race-stage-badge {
  position: absolute;
  top: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(15, 26, 16, 0.72);
  color: #f3f7ef;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.lab-race-stage-badge.is-start {
  left: 16px;
}

.lab-race-stage-badge.is-goal {
  right: 16px;
  background: rgba(243, 189, 87, 0.86);
  color: #3d2408;
}

.lab-race-finish-line {
  position: absolute;
  top: 0;
  right: 72px;
  bottom: 0;
  width: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    repeating-linear-gradient(180deg, rgba(32, 34, 39, 0.95) 0 14px, rgba(247, 247, 247, 0.96) 14px 28px);
  background-size: 100% 100%, 100% 28px;
  background-blend-mode: multiply;
  border-left: 2px solid rgba(255, 255, 255, 0.72);
  border-right: 2px solid rgba(255, 255, 255, 0.72);
  opacity: 0.68;
}

.lab-race-obstacles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.lab-race-obstacle {
  position: absolute;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  opacity: 0.88;
}

.lab-race-obstacle.obstacle-boost_pad {
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 234, 160, 0.95), rgba(243, 189, 87, 0.95)),
    linear-gradient(90deg, transparent 0 20%, rgba(255, 255, 255, 0.3) 20% 28%, transparent 28% 52%, rgba(255, 255, 255, 0.3) 52% 60%, transparent 60%);
  box-shadow: 0 4px 10px rgba(125, 90, 16, 0.18);
}

.lab-race-obstacle.obstacle-barrier_spin {
  border-radius: 999px;
  border: 3px solid rgba(232, 93, 67, 0.9);
  animation: lab-race-obstacle-spin 1.2s linear infinite;
}

.lab-race-obstacle.obstacle-barrier_spin::before,
.lab-race-obstacle.obstacle-barrier_spin::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: rgba(232, 93, 67, 0.92);
  transform: translate(-50%, -50%);
}

.lab-race-obstacle.obstacle-barrier_spin::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.lab-race-obstacle.obstacle-oil_slick {
  width: 36px;
  height: 20px;
  border-radius: 999px 999px 14px 14px;
  background: radial-gradient(circle at 30% 35%, rgba(255, 255, 255, 0.18), transparent 28%), rgba(29, 36, 34, 0.74);
  filter: blur(0.2px);
}

.lab-race-obstacle.obstacle-pitfall {
  width: 38px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 45%, rgba(10, 20, 10, 0.96), rgba(38, 64, 26, 0.18) 68%, transparent 70%);
}

.lab-race-obstacle.obstacle-slow_zone {
  width: 42px;
  height: 18px;
  border-radius: 10px;
  background: rgba(117, 146, 180, 0.24);
  border: 2px dashed rgba(71, 99, 135, 0.7);
}

.lab-race-obstacle.obstacle-warp_gate {
  border-radius: 999px;
  border: 3px solid rgba(111, 210, 197, 0.86);
  box-shadow: 0 0 0 4px rgba(111, 210, 197, 0.16);
  animation: lab-race-obstacle-pulse 1.1s ease-in-out infinite;
}

.lab-race-obstacle.obstacle-reverse_zone {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: rgba(138, 86, 195, 0.18);
  border: 2px solid rgba(138, 86, 195, 0.62);
}

.lab-race-obstacle.obstacle-reverse_zone::before {
  content: "<";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(138, 86, 195, 0.9);
  font-size: 16px;
  font-weight: 900;
}

.lab-race-live-row {
  box-shadow: 0 0 0 2px rgba(243, 189, 87, 0.18);
}

.lab-race-runner {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 72px;
  transform-origin: center bottom;
  transition: transform 0.16s linear, filter 0.16s linear, opacity 0.16s linear;
  pointer-events: none;
}

.lab-race-runner-shadow {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 44px;
  height: 14px;
  border-radius: 999px;
  background: rgba(11, 20, 8, 0.26);
  transform: translateX(-50%);
  filter: blur(2px);
}

.lab-race-runner-icon {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(17, 39, 12, 0.2));
}

.lab-race-runner.is-user-entry .lab-race-runner-icon {
  filter: drop-shadow(0 0 14px rgba(243, 189, 87, 0.5)) drop-shadow(0 6px 10px rgba(17, 39, 12, 0.2));
}

.lab-race-runner.state-boost,
.lab-race-runner.state-warp,
.lab-race-runner.state-dash {
  filter: saturate(1.12);
}

.lab-race-runner.state-hit_bar,
.lab-race-runner.state-pitfall,
.lab-race-runner.state-slip,
.lab-race-runner.state-reverse {
  opacity: 0.92;
}

.lab-race-runner.state-boost .lab-race-runner-icon,
.lab-race-runner.state-warp .lab-race-runner-icon,
.lab-race-runner.state-dash .lab-race-runner-icon {
  filter: drop-shadow(0 0 14px rgba(243, 189, 87, 0.44)) drop-shadow(0 6px 10px rgba(17, 39, 12, 0.2));
}

.lab-race-runner.state-hit_bar .lab-race-runner-icon,
.lab-race-runner.state-pitfall .lab-race-runner-icon,
.lab-race-runner.state-slip .lab-race-runner-icon,
.lab-race-runner.state-reverse .lab-race-runner-icon {
  filter: drop-shadow(0 0 10px rgba(234, 125, 91, 0.34)) drop-shadow(0 6px 10px rgba(17, 39, 12, 0.18));
}

.lab-race-runner.state-finish .lab-race-runner-icon {
  filter: drop-shadow(0 0 14px rgba(157, 225, 111, 0.42)) drop-shadow(0 6px 10px rgba(17, 39, 12, 0.2));
}

.lab-race-runner.effect-boost .lab-race-runner-icon {
  animation: lab-race-boost-burst 0.42s ease-out;
}

.lab-race-runner.effect-warp .lab-race-runner-icon {
  animation: lab-race-warp-blink 0.52s ease-out;
}

.lab-race-runner.effect-hit-bar .lab-race-runner-icon {
  animation: lab-race-crash-spin 0.56s ease-out;
}

.lab-race-runner.effect-hit-bar .lab-race-runner-shadow {
  animation: lab-race-shadow-shake 0.56s ease-out;
}

.lab-race-runner.effect-pitfall .lab-race-runner-icon {
  animation: lab-race-pitfall-bounce 0.62s ease-out;
}

.lab-race-runner.effect-pitfall .lab-race-runner-shadow {
  animation: lab-race-shadow-dip 0.62s ease-out;
}

.lab-race-runner.effect-slip .lab-race-runner-icon {
  animation: lab-race-slip-skid 0.48s ease-out;
}

.lab-race-runner.effect-reverse .lab-race-runner-icon {
  animation: lab-race-reverse-jolt 0.52s ease-out;
}

.lab-race-runner-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #f2f6fa;
  border: 1px solid rgba(16, 24, 32, 0.15);
  font-size: 10px;
  font-weight: 700;
  color: #10202a;
}

.lab-race-runner-focus {
  position: absolute;
  top: -12px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(243, 189, 87, 0.92);
  color: #342007;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.lab-race-entry-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.lab-race-entry-card {
  padding: 10px 12px;
  border: 1px solid rgba(39, 48, 61, 0.72);
  border-radius: 16px;
  background: rgba(24, 30, 40, 0.88);
}

.lab-race-entry-card.is-user-entry {
  box-shadow: 0 0 0 2px rgba(243, 189, 87, 0.18);
}

.lab-race-entry-head,
.lab-race-entry-foot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lab-race-entry-head {
  justify-content: space-between;
}

.lab-race-entry-foot {
  justify-content: space-between;
  margin-top: 8px;
}

.lab-race-entry-icon {
  width: 40px;
  height: 40px;
  flex: none;
}

.lab-race-entry-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.lab-race-entry-body {
  flex: 1;
  min-width: 0;
}

.lab-race-entry-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lab-race-entry-owner {
  font-size: 11px;
  color: #b9c5d1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lab-race-entry-progress {
  margin-top: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.lab-race-entry-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6fd2c5 0%, #f3bd57 100%);
}

.lab-race-entry-rank,
.lab-race-entry-no,
.lab-race-entry-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.lab-race-entry-rank {
  background: rgba(111, 210, 197, 0.18);
  color: #bfece6;
}

.lab-race-entry-no {
  background: rgba(255, 255, 255, 0.08);
  color: #d8e1ea;
}

.lab-race-entry-state {
  background: rgba(255, 255, 255, 0.08);
  color: #d8e1ea;
}

.lab-race-entry-state.state-boost,
.lab-race-entry-state.state-warp,
.lab-race-entry-state.state-dash {
  background: rgba(243, 189, 87, 0.18);
  color: #ffd996;
}

.lab-race-entry-state.state-hit_bar,
.lab-race-entry-state.state-pitfall,
.lab-race-entry-state.state-slip,
.lab-race-entry-state.state-reverse {
  background: rgba(234, 125, 91, 0.18);
  color: #ffc0ab;
}

.lab-race-entry-state.state-finish {
  background: rgba(157, 225, 111, 0.18);
  color: #cbf4a9;
}

/* ------------------------------------------------------------------
   Dark laboratory theme unification
------------------------------------------------------------------- */
body {
  background:
    radial-gradient(circle at top center, rgba(103, 232, 249, 0.08), transparent 38%),
    radial-gradient(circle at 88% 14%, rgba(168, 85, 247, 0.08), transparent 24%),
    linear-gradient(180deg, var(--bg-main) 0%, var(--bg-main-2) 55%, var(--bg-main-3) 100%);
  color: var(--text-main);
}

a {
  color: var(--accent-cyan);
}

a:hover {
  color: var(--accent-purple-2);
}

.top {
  background:
    linear-gradient(180deg, rgba(10, 15, 30, 0.94), rgba(15, 23, 42, 0.92));
  color: var(--text-main);
  border-bottom: 1px solid var(--border-soft-2);
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.42);
}

.logo,
.user,
.user a,
.auth-header-links a {
  color: var(--text-main);
}

.logo {
  text-shadow: 0 0 18px rgba(103, 232, 249, 0.12);
}

.user-chip-main,
.badge-overlay,
.robot-badge-32.preview {
  border-color: var(--border-soft);
  background: rgba(16, 23, 42, 0.92);
}

.presence-mini-label,
.robot-time,
.upgrade-cost,
.landing-metric-label,
.landing-update-meta,
.landing-front-card .upgrade-cost,
.landing-front-card .robot-time,
.landing-front-subcard .robot-time,
.landing-front-caption,
.landing-inline-metric-label,
.feed-meta,
.feed-time,
.feed-type,
.comms-lead,
.comms-card-meta,
.comms-toolbar-copy,
.comms-kicker,
.comms-message-body,
.home-mini-log-time,
.home-mini-log-empty,
.auth-form-footnote,
.auth-register-alt-note,
.auth-world-metric-label,
.auth-step-text,
.part-meta-line,
.part-stat-label,
.part-page-indicator,
.guide-term-body,
.world-env-reason {
  color: var(--text-sub);
}

.card,
.panel,
.world-env-card,
.action-card,
.robot-card,
.stat-card,
.build-submit-card,
.fuse-selection-summary,
.fuse-estimate,
.part-summary-pill,
.part-stat-item,
.part-mini-card,
.part-page-link,
.part-chip,
.part-filter-chip,
.part-mini-image,
.part-card-image,
.part-picker-card,
.home-mini-log-item,
.comms-room-hero,
.comms-empty-card,
.comms-placeholder-card,
.comms-message-card,
.comms-legacy-system-card,
.world-score-card,
.guide-term-item,
.picker-item,
.estimate-item,
.fusion-item,
.layer-status-card,
.locked-layer-card,
.battle-drop-card,
.battle-home-link,
.battle-log-fold > summary,
.battle-log-container,
.log li,
.battle-side,
.timeline-list li,
.ranking-mini li,
.auth-step-card,
.auth-world-card,
.auth-step-item,
.auth-world-metric,
.auth-world-mvp-main,
.landing-metric-card,
.landing-update-card,
.landing-step-card {
  color: var(--text-main);
  border-color: var(--border-soft);
  background: rgba(23, 31, 54, 0.96);
  box-shadow: var(--shadow-soft);
}

.panel,
.auth-hero-card,
.auth-register-card,
body#page-home .panel,
body#page-ranking .container > h1:first-child,
body#page-showcase .container > h1:first-child {
  background: rgba(18, 24, 43, 0.94);
  border-color: var(--border-soft-2);
  box-shadow: var(--shadow-panel);
}

body#page-ranking .container > h1:first-child,
body#page-showcase .container > h1:first-child {
  margin: 0 0 16px;
  padding: 18px 20px;
  border-radius: 16px;
}

.notice {
  background: rgba(103, 232, 249, 0.12);
  color: var(--text-main);
  border: 1px solid var(--border-soft);
}

.error,
.client-error-fallback {
  background: rgba(248, 113, 113, 0.12);
  color: #ffd4d4;
  border: 1px solid rgba(248, 113, 113, 0.26);
}

.error-box {
  border-color: rgba(248, 113, 113, 0.36);
  background: rgba(120, 26, 26, 0.32);
}

.footer {
  color: var(--text-muted);
  border-top: 1px solid var(--border-soft-2);
  background: rgba(8, 12, 24, 0.82);
}

.footer a {
  color: var(--accent-purple-2);
}

input,
select,
textarea,
.chat-form input,
.post-form input,
.post-form textarea,
.post-form select,
.inline-form select {
  border: 1px solid var(--border-soft);
  background: rgba(14, 21, 38, 0.92);
  color: var(--text-main);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

.actions button,
.button-link,
.inline-form button:not(.btn-secondary):not(.danger-btn),
.auth-card button,
.upgrade button,
.post-form button,
.chat-form button,
.offset-form button {
  background: linear-gradient(180deg, var(--accent-purple) 0%, #7c3aed 100%);
  color: #fdfbff;
  box-shadow: 0 12px 24px rgba(91, 33, 182, 0.26);
}

.action-card,
.part-page-link,
.part-filter-chip,
.part-chip,
.battle-home-link,
.fuse-mode-tab,
.showcase-sort-tabs .fuse-mode-tab {
  color: var(--text-main);
}

.btn-secondary,
.battle-home-link,
.part-page-link,
.part-filter-chip,
.part-summary-pill,
.part-chip,
.fuse-mode-tab,
.battle-log-fold > summary {
  background: rgba(27, 37, 66, 0.86);
  border-color: var(--border-soft);
  color: var(--text-sub);
}

.action-card:hover,
.part-filter-chip:hover,
.part-page-link:hover,
.fuse-mode-tab:hover {
  border-color: rgba(103, 232, 249, 0.28);
  box-shadow: 0 12px 22px rgba(3, 7, 18, 0.28);
}

.fuse-mode-tab.is-active,
.part-filter-chip.is-active,
.part-chip.is-equipped,
.weekly-fit-badge,
.battle-home-link.active,
.battle-next-cta,
.home-area-card.is-selected,
.world-score-card.is-user,
.mvp-hero-card {
  border-color: var(--border-strong);
  background: linear-gradient(180deg, rgba(47, 32, 76, 0.92), rgba(28, 36, 68, 0.96));
  color: var(--text-main);
}

.world-score-card.is-tailwind,
.home-mini-log-item,
.comms-message-card,
.feed-card-evolve {
  background: linear-gradient(180deg, rgba(20, 36, 60, 0.94), rgba(21, 30, 52, 0.98));
}

.feed-card,
.feed-card-boss,
.feed-card-weekly,
.comms-legacy-system-card,
.comms-empty-card,
.comms-placeholder-card,
.comms-room-hero,
.next-action-card,
.battle-progress-card,
.evolve-overview-card,
.battle-next-card-primary {
  background: linear-gradient(180deg, rgba(21, 29, 50, 0.96), rgba(25, 34, 59, 0.96));
  color: var(--text-main);
}

.feed-card-boss,
.boss-defeated-card {
  border-left-color: rgba(251, 146, 60, 0.78);
}

.feed-card-weekly,
.world-score-card.is-tailwind,
.world-score-points,
.auth-world-mvp-copy b,
.landing-inline-metric-value,
.landing-metric-value,
.battle-outcome-banner.win .battle-outcome-label,
.battle-outcome-label,
.battle-drop-count-mini,
.core-drop-count,
.world-score-points {
  color: var(--accent-gold);
}

.comms-status-badge,
.comms-count-pill,
.comms-hub-card,
.world-env-card .link a,
.link a,
.robot-idle-line,
.part-lock-note,
.part-stat-delta.is-up,
.battle-next-cta,
.battle-next-card .action-title,
.home-room-form .robot-time {
  color: var(--accent-cyan);
}

.slot-overflow-badge,
.boss-badge-strong,
.danger-link,
.part-stat-delta.is-down,
.battle-outcome-banner.lose .battle-outcome-label,
.outcome.lose {
  color: var(--accent-red);
}

.title-badge,
.landing-kicker .weekly-fit-badge,
.chip,
.auth-step-icon-wrap,
.auth-step-icon,
.landing-step-no {
  background: rgba(168, 85, 247, 0.14);
  border-color: rgba(168, 85, 247, 0.24);
  color: var(--accent-purple-2);
}

.landing-front-card,
.landing-front-subcard {
  background: linear-gradient(180deg, rgba(14, 21, 38, 0.98), rgba(23, 31, 54, 0.98));
  border-color: var(--border-soft);
}

.landing-front-showcase {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(12, 16, 32, 0.98));
}

.landing-mvp-image,
.robot-thumb,
.ranking-robot-thumb,
.battle-drop-thumb,
.feed-thumb,
.robot-preview,
.picker-thumb,
.part-thumb,
.world-score-emblem,
.battle-avatar,
.core-drop-icon,
.evolve-compare-image,
.evolve-preview-thumb,
.shop-product-image,
.part-card-image,
.part-mini-image,
.fuse-instance img,
.fuse-created-row img {
  background: rgba(10, 15, 30, 0.94);
  border-color: var(--border-soft);
}

.robot-thumb.empty,
.robot-preview.empty {
  color: var(--text-muted);
}

.stat-value,
.part-stat-value,
.landing-metric-value,
.auth-world-metric-value {
  color: var(--text-main);
}

.part-stat-item.is-focus,
.fuse-outcome.great,
.fuse-outcome.success,
.core-drop-banner,
.evolve-success-banner {
  border-color: rgba(103, 232, 249, 0.28);
  background: linear-gradient(180deg, rgba(17, 43, 58, 0.92), rgba(21, 33, 59, 0.98));
}

.fuse-outcome.fail,
.danger-card {
  background: rgba(120, 26, 26, 0.22);
  border-color: rgba(248, 113, 113, 0.28);
}

.part-stat-delta.is-flat,
.feed-kicker,
.comms-card-meta,
.comms-toolbar-copy,
.home-mini-log-time,
.robot-part,
.auth-step-no {
  color: var(--text-muted);
}

.ranking-mini li,
.timeline-list li,
.home-ranking-row + .home-ranking-row,
.fuse-created,
.battle-log-entry,
.part-subsection,
.comms-timeline-item-system {
  border-color: var(--border-soft-2);
}

.timeline-list li {
  border-left-color: rgba(103, 232, 249, 0.26);
}

.auth-section-head b,
.world-score-title b,
.action-title,
.robot-id,
.guide-term-name,
.auth-title,
h1,
h2 {
  color: var(--text-main);
}

.auth-step-card,
.auth-world-card {
  padding: 18px;
  background: linear-gradient(180deg, rgba(18, 24, 43, 0.96), rgba(21, 28, 49, 0.98));
}

.auth-step-item,
.auth-world-metric,
.auth-world-mvp-main {
  background: rgba(27, 37, 66, 0.92);
  border-color: var(--border-soft);
}

.auth-step-text,
.auth-world-mvp-copy .robot-time {
  color: var(--text-sub);
}

.auth-register-card .auth-title {
  text-align: center;
  font-size: clamp(22px, 2.8vw, 32px);
}

.auth-card button,
.auth-register-alt-btn {
  justify-self: center;
}

.auth-mode-tabs {
  border-color: var(--border-soft);
  background: rgba(10, 16, 32, 0.72);
}

.auth-mode-tab {
  color: var(--text-sub);
}

.auth-mode-tab:hover {
  color: var(--text-main);
}

.auth-pane-copy .robot-time,
.auth-form-footnote,
.auth-register-alt-note {
  color: var(--text-sub);
}

.auth-register-alt-btn {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.auth-register-alt-btn-disabled {
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .auth-register-card {
    gap: 14px;
  }

  .auth-register-head {
    justify-content: center;
  }

  .auth-mode-tabs {
    width: 100%;
  }

  .auth-pane-title {
    font-size: 24px;
  }
}

.home-current-robot,
.home-ranking-panel,
.home-comms-panel,
.home-weekly-panel,
.home-faction-panel,
.home-nav-panel,
.home-visibility-panel,
.home-mvp-panel,
.home-champion-panel,
.research-unlock-banner,
.beginner-mission-panel,
.priority-boss-alert,
.home-return-explore-panel,
.home-explore-card {
  background: rgba(18, 24, 43, 0.94);
}

.world-env-card,
.home-summary-panel .card,
.home-area-card,
.action-card,
.robot-card,
.showcase-grid .card,
.record-highlight-thumb {
  background: rgba(23, 31, 54, 0.96);
}

.world-score-emblem,
.faction-badge,
.beginner-mission-npc {
  background: rgba(10, 15, 30, 0.96);
  border-color: var(--border-soft);
}

.faction-badge.is-active {
  border-color: rgba(103, 232, 249, 0.42);
  background: rgba(19, 48, 59, 0.86);
}

.battle-side {
  background: rgba(20, 27, 47, 0.96);
}

.battle-side.enemy {
  background: rgba(39, 22, 36, 0.94);
}

.champion-hero-card {
  display: grid;
  gap: 12px;
}

.champion-honor-card {
  box-shadow: 0 0 0 1px rgba(255, 212, 92, 0.28), 0 18px 36px rgba(14, 20, 38, 0.34);
  border: 1px solid rgba(255, 212, 92, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 212, 92, 0.08), rgba(20, 27, 47, 0.96) 28%),
    rgba(20, 27, 47, 0.96);
}

.champion-crown-mark {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  filter: drop-shadow(0 0 6px rgba(255, 212, 92, 0.28));
}

.home-champion-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.home-champion-stats,
.champion-stats-grid {
  display: grid;
  gap: 10px;
}

.home-champion-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  font-size: 13px;
  color: var(--text-sub);
}

.champion-main-row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.champion-page-thumb,
.champion-hero-thumb {
  width: min(100%, 220px);
  max-width: 220px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.champion-stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.champion-stat-card,
.champion-active-robot-card,
.champion-recent-card,
.champion-summary-card {
  background: rgba(20, 27, 47, 0.96);
}

.champion-stat-card {
  padding: 12px;
}

.champion-action-row {
  align-items: center;
}

.champion-inline-note {
  flex: 1 1 220px;
}

.champion-recent-list {
  display: grid;
  gap: 10px;
}

.champion-history-list {
  display: grid;
  gap: 10px;
}

.champion-page-title {
  margin: 0 0 6px;
}

.champion-battle-head {
  margin-bottom: 12px;
}

.champion-battle-scene .battle-outcome-banner .upgrade-cost {
  margin-top: 6px;
}

@media (max-width: 720px) {
  .champion-main-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .champion-stats-grid {
    grid-template-columns: 1fr;
  }

  .home-champion-title-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

.battle-turn-head,
.battle-vs {
  background: rgba(27, 37, 66, 0.94);
  color: var(--text-sub);
}

.hp-bar,
.hpbar,
.hpbar-meter,
.research-progress-meter,
.research-progress-bar {
  background: rgba(255, 255, 255, 0.08);
}

.hp-fill,
.hpbar-inner,
.hpbar-meter::-webkit-progress-value,
.hpbar-meter::-moz-progress-bar,
.research-progress-fill,
.research-progress-meter::-webkit-progress-value,
.research-progress-meter::-moz-progress-bar {
  background: linear-gradient(90deg, var(--accent-cyan) 0%, var(--accent-purple-2) 100%);
}

.world-score-card.is-user,
.world-score-card.is-tailwind,
.home-area-card.is-selected,
.mvp-hero-card,
.next-action-card {
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.12), var(--shadow-soft);
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(23, 31, 54, 0.96);
}

th,
td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border-soft-2);
  color: var(--text-main);
}

th {
  text-align: left;
  background: rgba(27, 37, 66, 0.96);
  color: var(--accent-cyan);
}

tr:last-child td {
  border-bottom: 0;
}

.ranking-user-row.is-podium td {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.08), rgba(103, 232, 249, 0.06));
}

.ranking-user-row.is-podium td:first-child {
  color: var(--accent-gold);
  font-weight: 700;
}

body#page-ranking .card,
body#page-world .panel,
body#page-records .panel,
body#page-showcase .card,
body#page-showcase .panel {
  background: rgba(18, 24, 43, 0.94);
}

body#page-ranking .robot-part,
body#page-showcase .robot-part,
body#page-world .robot-part,
body#page-records .robot-part {
  color: var(--text-sub);
}

body#page-showcase .robot-grid,
body#page-records .showcase-grid,
body#page-home .home-layout-grid,
body#page-world .world-competition-grid {
  gap: 14px;
}

@media (max-width: 900px) {
  .auth-info-grid {
    grid-template-columns: 1fr;
  }
}

.lab-watch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.lab-frame-events {
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid #27303d;
  border-radius: 12px;
  background: rgba(24, 30, 40, 0.86);
}

.lab-mini-results {
  margin-top: 10px;
}

@keyframes lab-race-obstacle-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes lab-race-obstacle-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.94);
    opacity: 0.72;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }
}

@keyframes lab-race-boost-burst {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes lab-race-warp-blink {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(0.82);
    opacity: 0.38;
  }
  75% {
    transform: scale(1.18);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lab-race-crash-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  30% {
    transform: rotate(120deg) scale(1.06);
  }
  70% {
    transform: rotate(278deg) scale(0.95);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes lab-race-pitfall-bounce {
  0% {
    transform: translateY(0) scale(1);
  }
  25% {
    transform: translateY(18px) scaleY(0.78);
  }
  58% {
    transform: translateY(-12px) scaleX(1.06);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes lab-race-slip-skid {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  35% {
    transform: translateX(10px) rotate(16deg);
  }
  70% {
    transform: translateX(-8px) rotate(-10deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}

@keyframes lab-race-reverse-jolt {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  30% {
    transform: translateX(-12px) rotate(-12deg);
  }
  65% {
    transform: translateX(4px) rotate(8deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}

@keyframes lab-race-shadow-shake {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }
  35% {
    transform: translateX(-50%) scale(1.16, 0.92);
  }
  70% {
    transform: translateX(-50%) scale(0.9, 1.08);
  }
}

@keyframes lab-race-shadow-dip {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.26;
  }
  32% {
    transform: translateX(-50%) scale(1.32, 0.76);
    opacity: 0.12;
  }
  60% {
    transform: translateX(-50%) scale(0.92, 1.18);
    opacity: 0.3;
  }
}

@media (max-width: 720px) {
  .lab-race-stage {
    min-height: 300px;
  }

  .lab-race-runner {
    width: 58px;
    height: 58px;
  }

  .lab-race-finish-line {
    right: 52px;
    width: 22px;
  }

  .lab-race-entry-strip {
    grid-template-columns: 1fr;
  }
}

.lab-race-watch-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.lab-race-watch-shell {
  overflow: hidden;
}

.lab-race-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.lab-race-broadcast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

.lab-race-main-board {
  min-width: 0;
}

.lab-race-segment-strip {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.lab-race-segment {
  position: relative;
  min-width: 0;
  padding: 10px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #eef3f7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.lab-race-segment.is-live {
  box-shadow: 0 0 0 2px rgba(105, 217, 190, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.lab-race-segment.is-event {
  transform: translateY(-2px);
}

.lab-race-segment.is-user-segment {
  box-shadow: 0 0 0 2px rgba(243, 189, 87, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.lab-race-segment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(18, 23, 32, 0.42);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.lab-race-segment-name {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.lab-race-segment-effect {
  margin-top: 4px;
  font-size: 10px;
  color: rgba(238, 243, 247, 0.78);
  line-height: 1.3;
}

.lab-race-track-shell {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  --lane-count: 8;
}

.lab-race-lane-labels {
  display: grid;
  grid-template-rows: repeat(var(--lane-count), minmax(44px, 1fr));
  gap: 6px;
}

.lab-race-lane-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 14px;
  background: rgba(18, 23, 32, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #d7e1ea;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.lab-race-lane-label.is-user-lane {
  background: rgba(70, 58, 21, 0.92);
  border-color: rgba(243, 189, 87, 0.58);
  color: #fff3cb;
}

.lab-race-lane-label-you {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(243, 189, 87, 0.92);
  color: #3b2409;
  font-size: 9px;
  font-weight: 800;
}

.lab-race-track {
  position: relative;
  height: clamp(520px, calc(var(--lane-count) * 70px), 620px);
  min-height: clamp(520px, calc(var(--lane-count) * 70px), 620px);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(18, 24, 36, 0.86);
  background: linear-gradient(180deg, #0e131c 0%, #121a24 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.lab-race-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.14)),
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.12), transparent 20%);
  pointer-events: none;
  z-index: 1;
}

.lab-race-track-start,
.lab-race-track-goal {
  position: absolute;
  top: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.lab-race-track-start {
  left: 14px;
  background: rgba(29, 37, 28, 0.92);
  color: #f0f6ef;
}

.lab-race-track-goal {
  right: 14px;
  background: rgba(243, 189, 87, 0.94);
  color: #412808;
}

.lab-race-track-segment-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.lab-race-track-segment {
  position: relative;
  min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.lab-race-track-segment:last-child {
  border-right: 0;
}

.lab-race-track-segment.is-live {
  box-shadow: inset 0 0 0 2px rgba(105, 217, 190, 0.18);
}

.lab-race-track-segment.is-event {
  box-shadow: inset 0 0 0 2px rgba(232, 123, 96, 0.24);
}

.lab-race-track-segment.is-user-segment {
  box-shadow: inset 0 0 0 2px rgba(243, 189, 87, 0.24);
}

.lab-race-track-segment-chip,
.lab-race-track-segment-mark {
  position: absolute;
  left: 8px;
  z-index: 2;
}

.lab-race-track-segment-chip {
  top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(17, 22, 30, 0.42);
  color: #eff4f7;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.lab-race-track-segment-mark {
  bottom: 10px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(239, 244, 247, 0.78);
}

.lab-race-track-lanes {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: repeat(var(--lane-count), minmax(44px, 1fr));
}

.lab-race-track-lane {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}

.lab-race-track-lane:nth-child(odd) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}

.lab-race-track-lane:first-child {
  border-top: 0;
}

.lab-race-track-lane.is-user-lane {
  background:
    linear-gradient(90deg, rgba(243, 189, 87, 0.08), rgba(243, 189, 87, 0.02)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}

.lab-race-track-lane::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.14) 12%, rgba(255, 255, 255, 0.04) 92%, transparent 100%);
}

.lab-race-track-finish-line {
  position: absolute;
  top: 0;
  right: 24px;
  bottom: 0;
  z-index: 3;
  width: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
    repeating-linear-gradient(180deg, rgba(29, 34, 41, 0.98) 0 12px, rgba(249, 249, 249, 0.98) 12px 24px);
  background-size: 100% 100%, 100% 24px;
  background-blend-mode: multiply;
  border-left: 2px solid rgba(255, 255, 255, 0.58);
  border-right: 2px solid rgba(255, 255, 255, 0.58);
  opacity: 0.92;
}

.lab-race-track-runners {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.lab-race-track-runner {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transform-origin: center center;
  transition: transform 0.28s linear, filter 0.18s linear, opacity 0.18s linear;
}

.lab-race-track-runner-plate,
.lab-race-track-runner-sprite,
.lab-race-track-runner-trails,
.lab-race-track-runner-smoke {
  position: absolute;
  inset: 0;
}

.lab-race-track-runner-plate {
  border-radius: 12px;
  clip-path: polygon(18% 0, 82% 0, 100% 28%, 100% 72%, 82% 100%, 18% 100%, 0 72%, 0 28%);
  background:
    linear-gradient(180deg, rgba(122, 137, 157, 0.95), rgba(83, 96, 114, 0.95)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 42%);
  border: 1px solid rgba(239, 244, 247, 0.18);
  box-shadow: 0 10px 18px rgba(10, 14, 20, 0.32);
}

.lab-race-track-runner-sprite {
  inset: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lab-race-track-runner-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(8, 12, 18, 0.26));
}

.lab-race-track-runner-trails {
  right: auto;
  width: 22px;
  opacity: 0;
  transform: translateX(-70%);
  background: repeating-linear-gradient(180deg, rgba(121, 233, 212, 0.9) 0 2px, rgba(121, 233, 212, 0) 2px 6px);
  filter: blur(1px);
}

.lab-race-track-runner-smoke {
  left: auto;
  bottom: 4px;
  width: 16px;
  height: 16px;
  opacity: 0;
  background: radial-gradient(circle, rgba(224, 233, 240, 0.56), rgba(224, 233, 240, 0) 70%);
  filter: blur(1px);
}

.lab-race-track-runner-no {
  position: absolute;
  right: -6px;
  bottom: -4px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #f2f6fa;
  border: 1px solid rgba(20, 28, 40, 0.18);
  color: #0f1d29;
  font-size: 10px;
  font-weight: 800;
}

.lab-race-track-runner-focus {
  position: absolute;
  top: -12px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(243, 189, 87, 0.96);
  color: #3c2407;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0;
}

.lab-race-track-runner-finish {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%) scale(0.9);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(160, 231, 111, 0.96);
  color: #20340e;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0;
}

.lab-race-track-runner.is-user-entry .lab-race-track-runner-focus {
  opacity: 1;
}

.lab-race-track-runner.is-user-entry .lab-race-track-runner-plate {
  box-shadow: 0 0 0 2px rgba(243, 189, 87, 0.68), 0 12px 20px rgba(10, 14, 20, 0.32);
}

.lab-race-track-runner.rank-1 .lab-race-track-runner-plate {
  box-shadow: 0 0 0 2px rgba(255, 224, 112, 0.54), 0 12px 20px rgba(10, 14, 20, 0.32);
}

.lab-race-track-runner.rank-2 .lab-race-track-runner-plate {
  box-shadow: 0 0 0 2px rgba(188, 205, 221, 0.52), 0 12px 20px rgba(10, 14, 20, 0.32);
}

.lab-race-track-runner.rank-3 .lab-race-track-runner-plate {
  box-shadow: 0 0 0 2px rgba(214, 156, 105, 0.52), 0 12px 20px rgba(10, 14, 20, 0.32);
}

.lab-race-track-runner.state-boost .lab-race-track-runner-trails,
.lab-race-track-runner.state-dash .lab-race-track-runner-trails,
.lab-race-track-runner.state-warp .lab-race-track-runner-trails {
  opacity: 1;
  animation: lab-race-track-speed-lines 0.32s linear infinite;
}

.lab-race-track-runner.state-slow .lab-race-track-runner-smoke,
.lab-race-track-runner.state-recover .lab-race-track-runner-smoke {
  opacity: 1;
  animation: lab-race-track-brake 0.52s ease-out;
}

.lab-race-track-runner.state-hit_bar .lab-race-track-runner-sprite {
  animation: lab-race-track-spin-out 0.58s ease-out;
}

.lab-race-track-runner.state-pitfall .lab-race-track-runner-sprite {
  animation: lab-race-track-bounce 0.62s ease-out;
}

.lab-race-track-runner.state-slip .lab-race-track-runner-sprite {
  animation: lab-race-track-skid 0.48s ease-out;
}

.lab-race-track-runner.state-warp .lab-race-track-runner-sprite {
  animation: lab-race-track-warp-blink 0.52s ease-out;
}

.lab-race-track-runner.state-finish .lab-race-track-runner-finish {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.lab-race-side-panel {
  display: grid;
  gap: 12px;
}

.lab-race-side-card,
.lab-race-event-panel,
.lab-race-roster-panel {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(19, 25, 35, 0.86);
}

.lab-race-side-title,
.lab-race-panel-title {
  margin-bottom: 10px;
  color: #d7e6ee;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.lab-race-live-row {
  display: grid;
  grid-template-columns: 30px 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  margin-top: 8px;
}

.lab-race-live-row.rank-1 {
  border-color: rgba(255, 224, 112, 0.42);
}

.lab-race-live-row.rank-2 {
  border-color: rgba(188, 205, 221, 0.34);
}

.lab-race-live-row.rank-3 {
  border-color: rgba(214, 156, 105, 0.34);
}

.lab-race-live-row.is-user-entry {
  box-shadow: 0 0 0 2px rgba(243, 189, 87, 0.22);
}

.lab-race-live-rank {
  font-size: 14px;
  font-weight: 900;
  color: #eff4f7;
  text-align: center;
}

.lab-race-live-icon,
.lab-race-roster-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(122, 137, 157, 0.88), rgba(83, 96, 114, 0.88)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 42%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lab-race-live-icon-img,
.lab-race-roster-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.lab-race-live-copy,
.lab-race-roster-copy {
  min-width: 0;
}

.lab-race-live-name,
.lab-race-roster-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lab-race-live-owner,
.lab-race-roster-owner {
  margin-top: 3px;
  font-size: 11px;
  color: #aebfcc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lab-race-live-meta {
  display: grid;
  gap: 4px;
  justify-items: end;
}

.lab-race-live-state,
.lab-race-roster-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.lab-race-live-progress {
  font-size: 11px;
  color: #cbd7de;
  font-weight: 700;
}

.lab-race-event-list {
  display: grid;
  gap: 8px;
}

.lab-race-event-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.lab-race-event-item.is-user-entry {
  box-shadow: 0 0 0 2px rgba(243, 189, 87, 0.18);
}

.lab-race-event-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(28, 37, 51, 0.92);
  color: #ecf2f5;
  font-size: 10px;
  font-weight: 800;
}

.lab-race-event-text {
  min-width: 0;
  color: #e7eef3;
  font-size: 13px;
}

.lab-race-roster-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.lab-race-roster-card {
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.lab-race-roster-card.rank-1 {
  border-color: rgba(255, 224, 112, 0.34);
}

.lab-race-roster-card.rank-2 {
  border-color: rgba(188, 205, 221, 0.28);
}

.lab-race-roster-card.rank-3 {
  border-color: rgba(214, 156, 105, 0.28);
}

.lab-race-roster-card.is-user-entry {
  box-shadow: 0 0 0 2px rgba(243, 189, 87, 0.18);
}

.lab-race-roster-head,
.lab-race-roster-foot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lab-race-roster-head {
  justify-content: space-between;
}

.lab-race-roster-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(53, 88, 93, 0.68);
  color: #eff6f7;
  font-size: 11px;
  font-weight: 800;
}

.lab-race-roster-progress {
  margin-top: 8px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.lab-race-roster-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6bd0c4 0%, #f2c55a 100%);
}

.lab-race-roster-foot {
  justify-content: space-between;
  margin-top: 8px;
}

.lab-race-roster-lane {
  color: #cbd7de;
  font-size: 11px;
  font-weight: 700;
}

.lab-race-live-state.state-run,
.lab-race-roster-state.state-run,
.lab-race-event-item.type-run .lab-race-event-badge {
  background: rgba(63, 92, 118, 0.28);
  color: #dbe9f3;
}

.lab-race-live-state.state-boost,
.lab-race-live-state.state-dash,
.lab-race-roster-state.state-boost,
.lab-race-roster-state.state-dash,
.lab-race-event-item.type-boost .lab-race-event-badge,
.lab-race-event-item.type-dash .lab-race-event-badge {
  background: rgba(244, 188, 77, 0.22);
  color: #ffefb7;
}

.lab-race-live-state.state-warp,
.lab-race-roster-state.state-warp,
.lab-race-event-item.type-warp .lab-race-event-badge {
  background: rgba(95, 219, 212, 0.2);
  color: #d7fffb;
}

.lab-race-live-state.state-hit_bar,
.lab-race-roster-state.state-hit_bar,
.lab-race-event-item.type-hit_bar .lab-race-event-badge,
.lab-race-event-item.type-clash .lab-race-event-badge {
  background: rgba(236, 108, 86, 0.2);
  color: #ffd6ca;
}

.lab-race-live-state.state-slip,
.lab-race-roster-state.state-slip,
.lab-race-event-item.type-slip .lab-race-event-badge {
  background: rgba(59, 79, 98, 0.28);
  color: #d9ebff;
}

.lab-race-live-state.state-pitfall,
.lab-race-live-state.state-slow,
.lab-race-live-state.state-reverse,
.lab-race-live-state.state-recover,
.lab-race-roster-state.state-pitfall,
.lab-race-roster-state.state-slow,
.lab-race-roster-state.state-reverse,
.lab-race-roster-state.state-recover,
.lab-race-event-item.type-pitfall .lab-race-event-badge,
.lab-race-event-item.type-slow .lab-race-event-badge,
.lab-race-event-item.type-reverse .lab-race-event-badge {
  background: rgba(143, 114, 197, 0.22);
  color: #efe4ff;
}

.lab-race-live-state.state-finish,
.lab-race-roster-state.state-finish,
.lab-race-event-item.type-finish .lab-race-event-badge {
  background: rgba(126, 212, 112, 0.22);
  color: #e4ffd5;
}

.theme-bay {
  background:
    linear-gradient(180deg, rgba(94, 111, 129, 0.86), rgba(54, 65, 78, 0.9)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 10px, rgba(255, 255, 255, 0) 10px 20px);
}

.theme-normal {
  background:
    linear-gradient(180deg, rgba(82, 90, 101, 0.84), rgba(50, 57, 68, 0.9)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 6px, rgba(255, 255, 255, 0) 6px 12px);
}

.theme-boost {
  background:
    linear-gradient(180deg, rgba(201, 118, 44, 0.88), rgba(122, 68, 20, 0.92)),
    repeating-linear-gradient(135deg, rgba(255, 231, 161, 0.22) 0 10px, rgba(255, 231, 161, 0) 10px 18px);
}

.theme-oil {
  background:
    linear-gradient(180deg, rgba(31, 39, 49, 0.92), rgba(15, 20, 27, 0.95)),
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.16), transparent 18%);
}

.theme-hazard {
  background:
    linear-gradient(180deg, rgba(141, 43, 35, 0.9), rgba(72, 19, 17, 0.95)),
    repeating-linear-gradient(135deg, rgba(255, 205, 96, 0.24) 0 12px, rgba(255, 205, 96, 0) 12px 24px);
}

.theme-noise {
  background:
    linear-gradient(180deg, rgba(63, 72, 142, 0.88), rgba(39, 42, 87, 0.92)),
    repeating-linear-gradient(90deg, rgba(165, 184, 255, 0.14) 0 6px, rgba(165, 184, 255, 0) 6px 12px);
}

.theme-scrap {
  background:
    linear-gradient(180deg, rgba(115, 92, 67, 0.9), rgba(63, 47, 31, 0.92)),
    repeating-linear-gradient(135deg, rgba(210, 190, 168, 0.14) 0 8px, rgba(210, 190, 168, 0) 8px 16px);
}

.theme-jump {
  background:
    linear-gradient(180deg, rgba(51, 161, 183, 0.88), rgba(26, 96, 119, 0.92)),
    repeating-linear-gradient(135deg, rgba(213, 255, 250, 0.18) 0 10px, rgba(213, 255, 250, 0) 10px 20px);
}

.theme-mist {
  background:
    linear-gradient(180deg, rgba(136, 176, 193, 0.86), rgba(72, 102, 118, 0.92)),
    radial-gradient(circle at 40% 50%, rgba(255, 255, 255, 0.16), transparent 22%);
}

.theme-core {
  background:
    linear-gradient(180deg, rgba(48, 116, 59, 0.92), rgba(21, 58, 28, 0.96)),
    repeating-linear-gradient(135deg, rgba(240, 216, 91, 0.22) 0 10px, rgba(240, 216, 91, 0) 10px 20px);
}

.theme-goal {
  background:
    linear-gradient(180deg, rgba(91, 121, 69, 0.9), rgba(44, 66, 34, 0.94)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 6px, rgba(255, 255, 255, 0) 6px 12px);
}

@keyframes lab-race-track-speed-lines {
  0% {
    transform: translateX(-70%);
  }
  100% {
    transform: translateX(-120%);
  }
}

@keyframes lab-race-track-brake {
  0% {
    transform: scale(0.7);
    opacity: 0.12;
  }
  60% {
    transform: scale(1.1);
    opacity: 0.34;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

@keyframes lab-race-track-spin-out {
  0% {
    transform: rotate(0deg);
  }
  65% {
    transform: rotate(320deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes lab-race-track-bounce {
  0% {
    transform: translateY(0);
  }
  28% {
    transform: translateY(10px) scale(0.94, 1.04);
  }
  55% {
    transform: translateY(-6px) scale(1.04, 0.96);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes lab-race-track-skid {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  35% {
    transform: translateX(6px) rotate(10deg);
  }
  70% {
    transform: translateX(-4px) rotate(-8deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}

@keyframes lab-race-track-warp-blink {
  0% {
    opacity: 1;
    filter: brightness(1);
  }
  35% {
    opacity: 0.2;
    filter: brightness(1.7);
  }
  60% {
    opacity: 0.9;
    filter: brightness(1.2);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

@media (max-width: 1100px) {
  .lab-race-broadcast {
    grid-template-columns: 1fr;
  }

  .lab-race-side-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lab-race-roster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .lab-race-watch-hero {
    flex-direction: column;
  }

  .lab-race-segment-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lab-race-track-shell {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 8px;
  }

  .lab-race-track {
    height: calc(var(--lane-count) * 48px);
    min-height: calc(var(--lane-count) * 48px);
    border-radius: 18px;
  }

  .lab-race-track-start,
  .lab-race-track-goal {
    min-width: 58px;
    height: 26px;
    font-size: 10px;
  }

  .lab-race-track-segment-chip {
    top: 8px;
    min-width: 36px;
    font-size: 8px;
  }

  .lab-race-track-segment-mark,
  .lab-race-segment-effect {
    display: none;
  }

  .lab-race-side-panel {
    grid-template-columns: 1fr;
  }

  .lab-race-roster-grid {
    grid-template-columns: 1fr;
  }

  .lab-race-live-row {
    grid-template-columns: 28px 36px minmax(0, 1fr);
  }

  .lab-race-live-meta {
    grid-column: 2 / span 2;
    justify-items: start;
    grid-auto-flow: column;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .user-chip[data-presence-state] {
    animation: none;
    transform: none;
    filter: none;
  }
}

/* Admin metrics */
.admin-metrics-shell {
  display: grid;
  gap: 18px;
}

.admin-metrics-panel {
  background: rgba(18, 24, 43, 0.94);
  border: 1px solid var(--border-soft-2);
  box-shadow: var(--shadow-panel);
}

.admin-metrics-head-panel {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.admin-metrics-eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 8px;
}

.admin-metrics-desc,
.admin-metrics-section-sub,
.admin-metrics-stat-sub,
.admin-metrics-copy,
.admin-metrics-empty {
  color: var(--text-sub);
}

.admin-metrics-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.admin-metrics-overview-grid,
.admin-metrics-grid {
  display: grid;
  gap: 16px;
}

.admin-metrics-overview-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-metrics-grid-halves {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-metrics-grid-core {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.admin-metrics-stat-card,
.admin-metrics-retention-card,
.admin-metrics-note-card {
  background: rgba(23, 31, 54, 0.96);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
}

.admin-metrics-stat-label,
.admin-metrics-note-label,
.admin-metrics-retention-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.admin-metrics-inline-note {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.22);
  color: var(--text-sub);
  font-size: 11px;
  font-weight: 700;
}

.admin-metrics-stat-value,
.admin-metrics-note-value,
.admin-metrics-retention-value {
  margin-top: 10px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
  font-weight: 800;
  color: var(--text-main);
}

.admin-metrics-section-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-metrics-section-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
}

.admin-metrics-bar-list {
  display: grid;
  gap: 12px;
}

.admin-metrics-bar-row {
  background: rgba(23, 31, 54, 0.72);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 12px 14px;
}

.admin-metrics-bar-head,
.admin-metrics-bar-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.admin-metrics-bar-head {
  align-items: baseline;
  margin-bottom: 8px;
}

.admin-metrics-bar-foot {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 12px;
}

.admin-metrics-bar-label {
  font-weight: 700;
  color: var(--text-main);
}

.admin-metrics-bar-meta {
  color: var(--text-sub);
  font-size: 13px;
}

.admin-metrics-bar-track {
  position: relative;
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.admin-metrics-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple-2));
  box-shadow: 0 0 18px rgba(103, 232, 249, 0.22);
}

.admin-metrics-bar-fill.is-purple {
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-purple-2));
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.25);
}

.admin-metrics-bar-fill.is-cyan {
  background: linear-gradient(90deg, #22d3ee, var(--accent-cyan));
}

.admin-metrics-bar-fill.is-gold {
  background: linear-gradient(90deg, var(--accent-gold), #fde68a);
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.2);
}

.admin-metrics-bar-fill.is-green {
  background: linear-gradient(90deg, var(--accent-green), #6ee7b7);
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.22);
}

.admin-metrics-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.admin-metrics-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.24);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
}

.admin-metrics-retention-grid,
.admin-metrics-note-grid {
  display: grid;
  gap: 12px;
}

.admin-metrics-retention-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-metrics-note-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.admin-metrics-retention-meta {
  margin: 8px 0 12px;
  color: var(--text-sub);
  font-size: 13px;
}

@media (max-width: 1100px) {
  .admin-metrics-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-metrics-grid-halves,
  .admin-metrics-grid-core {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .admin-metrics-head-panel,
  .admin-metrics-section-head,
  .admin-metrics-bar-head,
  .admin-metrics-bar-foot {
    flex-direction: column;
    align-items: start;
  }

  .admin-metrics-overview-grid,
  .admin-metrics-retention-grid,
  .admin-metrics-note-grid {
    grid-template-columns: 1fr;
  }

  .admin-metrics-stat-value,
  .admin-metrics-note-value,
  .admin-metrics-retention-value {
    font-size: 24px;
  }
}

.battle-cinematic-v1 {
  position: relative;
  margin: 10px 0 14px;
  padding: 16px;
  border: 1px solid rgba(103, 232, 249, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at top, rgba(103, 232, 249, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(8, 16, 34, 0.98), rgba(11, 18, 31, 0.99));
  color: var(--text-main);
  overflow: hidden;
}

.battle-cinematic-v1-core {
  display: grid;
  gap: 10px;
}

.battle-cinematic-v1.is-boss {
  border-color: rgba(251, 191, 36, 0.24);
  background:
    radial-gradient(circle at top, rgba(251, 146, 60, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(20, 10, 18, 0.98), rgba(12, 10, 20, 0.99));
}

.battle-cinematic-v1-head,
.battle-cinematic-v1-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.battle-cinematic-v1-head {
  margin-bottom: 0;
}

.battle-cinematic-v1-heading {
  display: grid;
  gap: 6px;
}

.battle-cinematic-v1-title {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.battle-cinematic-v1-progress-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.battle-cinematic-v1-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.battle-cinematic-v1-area,
.battle-cinematic-v1-battle-type,
.battle-cinematic-v1-progress,
.battle-cinematic-v1-card-turn {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.battle-cinematic-v1-area {
  color: var(--accent-cyan);
}

.battle-cinematic-v1-battle-type,
.battle-cinematic-v1-progress,
.battle-cinematic-v1-card-turn {
  color: var(--text-sub);
}

.battle-cinematic-v1-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 8px 0 2px;
  scrollbar-width: none;
}

.battle-cinematic-v1-controls::-webkit-scrollbar {
  display: none;
}

.battle-cinematic-v1-mode-button,
.battle-cinematic-v1-skip {
  flex: 0 0 auto;
  min-width: 72px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(199, 207, 221, 0.18);
  background: rgba(15, 23, 42, 0.7);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 800;
}

.battle-cinematic-v1-mode-button.is-active {
  border-color: rgba(103, 232, 249, 0.42);
  background: rgba(103, 232, 249, 0.14);
  color: #dcf8ff;
}

.battle-cinematic-v1-skip {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.12);
  color: #fff5cf;
}

.battle-cinematic-v1-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  align-items: end;
  gap: 16px;
  min-height: 260px;
  margin-bottom: 0;
  padding: 18px 14px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.05), transparent 34%),
    linear-gradient(180deg, rgba(14, 20, 36, 0.92), rgba(9, 14, 25, 0.96));
  overflow: hidden;
}

.battle-cinematic-v1.theme-workshop .battle-cinematic-v1-stage {
  background:
    radial-gradient(circle at 50% 18%, rgba(103, 232, 249, 0.09), transparent 32%),
    linear-gradient(180deg, rgba(13, 23, 38, 0.94), rgba(10, 16, 28, 0.98));
}

.battle-cinematic-v1.theme-mist .battle-cinematic-v1-stage {
  background:
    radial-gradient(circle at 50% 16%, rgba(125, 211, 252, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(17, 22, 40, 0.94), rgba(10, 15, 26, 0.98));
}

.battle-cinematic-v1.theme-forge .battle-cinematic-v1-stage,
.battle-cinematic-v1.theme-boss .battle-cinematic-v1-stage {
  background:
    radial-gradient(circle at 50% 16%, rgba(251, 146, 60, 0.15), transparent 28%),
    linear-gradient(180deg, rgba(32, 16, 20, 0.96), rgba(13, 10, 18, 0.99));
}

.battle-cinematic-v1.theme-lab .battle-cinematic-v1-stage {
  background:
    radial-gradient(circle at 50% 16%, rgba(167, 139, 250, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(18, 14, 36, 0.95), rgba(9, 11, 23, 0.99));
}

.battle-cinematic-v1-floor,
.battle-cinematic-v1-haze,
.battle-cinematic-v1-center-line {
  position: absolute;
  inset: auto 0 0;
  pointer-events: none;
}

.battle-cinematic-v1-floor {
  height: 92px;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.08), transparent 58%),
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.04));
}

.battle-cinematic-v1-haze {
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(103, 232, 249, 0.08), transparent 24%),
    radial-gradient(circle at 80% 24%, rgba(168, 85, 247, 0.08), transparent 26%);
  opacity: 0.85;
}

.battle-cinematic-v1-center-line {
  left: 50%;
  right: auto;
  bottom: 42px;
  width: 180px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  box-shadow: 0 0 16px rgba(103, 232, 249, 0.18);
}

.battle-cinematic-v1-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 220px;
  height: 54px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.08), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(251, 146, 60, 0.08), transparent 64%);
  pointer-events: none;
}

.battle-cinematic-v1-unit {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: center;
  gap: 8px;
  z-index: 2;
  transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
}

.battle-cinematic-v1-unit.is-player {
  transform: translateX(12px);
}

.battle-cinematic-v1-unit.is-enemy {
  transform: translateX(-12px);
}

.battle-cinematic-v1-nameplate {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}

.battle-cinematic-v1-name {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.32);
}

.battle-cinematic-v1-state-badge {
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 800;
  line-height: 20px;
  color: transparent;
}

.battle-cinematic-v1-state-badge.is-active {
  color: var(--text-main);
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

.battle-cinematic-v1-state-badge.effect-output_surge {
  border-color: rgba(251, 146, 60, 0.3);
  color: #ffe7d1;
}

.battle-cinematic-v1-state-badge.effect-weapon_unstable,
.battle-cinematic-v1-state-badge.effect-armor_crack {
  border-color: rgba(248, 113, 113, 0.32);
  color: #ffe0e0;
}

.battle-cinematic-v1-state-badge.effect-sensor_glitch,
.battle-cinematic-v1-state-badge.effect-drive_drop {
  border-color: rgba(103, 232, 249, 0.32);
  color: #dffaff;
}

.battle-cinematic-v1-state-badge.effect-stance_hold {
  border-color: rgba(52, 211, 153, 0.3);
  color: #dbfff0;
}

.battle-cinematic-v1-hp {
  position: relative;
  width: min(172px, 88%);
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
}

.battle-cinematic-v1-hp-track,
.battle-cinematic-v1-hp-lag,
.battle-cinematic-v1-hp-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.battle-cinematic-v1-hp-track {
  background: rgba(255, 255, 255, 0.12);
}

.battle-cinematic-v1-hp-lag {
  width: 100%;
  background: rgba(251, 191, 36, 0.38);
  transition: width 560ms ease;
}

.battle-cinematic-v1-hp-fill {
  width: 100%;
  background: linear-gradient(90deg, #67e8f9, #a855f7);
  transition: width 400ms ease;
}

.battle-cinematic-v1-hp.is-low .battle-cinematic-v1-hp-fill,
.battle-cinematic-v1-hp.is-low[data-cinematic-hp="enemy"] .battle-cinematic-v1-hp-fill {
  background: linear-gradient(90deg, #f87171, #fb923c);
}

.battle-cinematic-v1-hp.is-empty .battle-cinematic-v1-hp-fill,
.battle-cinematic-v1-hp.is-empty .battle-cinematic-v1-hp-lag {
  width: 0 !important;
}

.battle-cinematic-v1-hp.is-hurt {
  filter: brightness(1.2);
}

.battle-cinematic-v1-hp.is-critical-damage .battle-cinematic-v1-hp-lag {
  background: rgba(248, 113, 113, 0.5);
}

.battle-cinematic-v1-hp.is-bracing .battle-cinematic-v1-hp-fill {
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.45), 0 0 12px rgba(52, 211, 153, 0.24);
}

.battle-cinematic-v1-frame {
  position: relative;
  display: grid;
  place-items: end center;
  width: min(180px, 100%);
  min-height: 132px;
}

.battle-cinematic-v1-frame img {
  position: relative;
  max-width: 138px;
  max-height: 138px;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34));
  transition: transform 170ms ease, filter 170ms ease, opacity 170ms ease;
}

.battle-cinematic-v1.is-boss .battle-cinematic-v1-unit.is-enemy .battle-cinematic-v1-frame img {
  max-width: 154px;
  max-height: 154px;
}

.battle-cinematic-v1-shadow {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 98px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.48), transparent 72%);
}

.battle-cinematic-v1-center {
  position: relative;
  min-height: 180px;
}

.battle-cinematic-v1-impact {
  position: absolute;
  left: 50%;
  bottom: 52px;
  width: 42px;
  height: 42px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2), transparent 70%);
  opacity: 0.45;
}

.battle-cinematic-v1-projectile,
.battle-cinematic-v1-hitflash,
.battle-cinematic-v1-sparks,
.battle-cinematic-v1-damage-pop {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}

.battle-cinematic-v1-finish-call {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 6;
  transform: translateX(-50%) scale(0.9);
  min-width: 132px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.34);
  background: rgba(10, 12, 24, 0.86);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  color: #fff3d1;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  opacity: 0;
}

.battle-cinematic-v1-finish-call.is-visible {
  animation: battleCinematicFinishCall 420ms ease-out forwards;
}

.battle-cinematic-v1-projectile {
  top: 50%;
  width: 136px;
  height: 6px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 255, 255, 0.96), transparent 16%),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0),
      rgba(125, 247, 255, 0.92) 18%,
      rgba(103, 232, 249, 1) 52%,
      rgba(255, 255, 255, 0.72) 76%,
      rgba(255, 255, 255, 0)
    );
  box-shadow:
    0 0 18px rgba(103, 232, 249, 0.62),
    0 0 34px rgba(103, 232, 249, 0.28);
  transform-origin: left center;
  z-index: 5;
  filter: saturate(1.18);
}

.battle-cinematic-v1-projectile::before,
.battle-cinematic-v1-projectile::after {
  content: "";
  position: absolute;
  inset: -7px 18px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
}

.battle-cinematic-v1-projectile.from-player {
  left: calc(50% - 34px);
}

.battle-cinematic-v1-projectile.from-enemy {
  right: calc(50% - 34px);
}

.battle-cinematic-v1-projectile.is-critical {
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 255, 255, 0.98), transparent 18%),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0),
      rgba(255, 209, 102, 0.94) 14%,
      rgba(248, 113, 113, 0.96) 48%,
      rgba(255, 241, 214, 0.84) 76%,
      rgba(255, 255, 255, 0)
    );
  box-shadow:
    0 0 20px rgba(248, 113, 113, 0.72),
    0 0 38px rgba(251, 191, 36, 0.34);
}

.battle-cinematic-v1-projectile.from-player.to-enemy.is-live {
  animation: battleCinematicProjectilePlayer 340ms cubic-bezier(0.18, 0.8, 0.24, 1) forwards;
}

.battle-cinematic-v1-projectile.from-enemy.to-player.is-live {
  animation: battleCinematicProjectileEnemy 340ms cubic-bezier(0.18, 0.8, 0.24, 1) forwards;
}

.battle-cinematic-v1-hitflash,
.battle-cinematic-v1-sparks {
  top: calc(50% - 32px);
  width: 74px;
  height: 74px;
  border-radius: 999px;
}

.battle-cinematic-v1-damage-pop {
  top: calc(50% - 44px);
  min-width: 68px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10, 15, 27, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
  color: #ffe2ad;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.02em;
}

.battle-cinematic-v1-damage-pop.target-player {
  left: 16%;
}

.battle-cinematic-v1-damage-pop.target-enemy {
  right: 16%;
}

.battle-cinematic-v1-damage-pop.is-visible {
  animation: battleCinematicDamagePop 460ms ease-out forwards;
}

.battle-cinematic-v1-damage-pop.is-critical {
  color: #fff1f1;
  border-color: rgba(248, 113, 113, 0.34);
  font-size: 28px;
}

.battle-cinematic-v1-damage-pop.is-miss {
  color: #d8f6ff;
  border-color: rgba(103, 232, 249, 0.34);
}

.battle-cinematic-v1-damage-pop.is-block {
  color: #dbeafe;
  border-color: rgba(148, 163, 184, 0.42);
}

.battle-cinematic-v1-hitflash.target-player,
.battle-cinematic-v1-sparks.target-player {
  left: 18%;
}

.battle-cinematic-v1-hitflash.target-enemy,
.battle-cinematic-v1-sparks.target-enemy {
  right: 18%;
}

.battle-cinematic-v1-hitflash.is-live {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.8), rgba(103, 232, 249, 0.16), transparent 72%);
  animation: battleCinematicFlash 220ms ease-out forwards;
}

.battle-cinematic-v1-hitflash.is-critical {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.96), rgba(248, 113, 113, 0.36), transparent 74%);
}

.battle-cinematic-v1-sparks.is-live {
  background:
    radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.95), transparent 20%),
    radial-gradient(circle at 74% 28%, rgba(251, 191, 36, 0.92), transparent 22%),
    radial-gradient(circle at 46% 72%, rgba(248, 113, 113, 0.82), transparent 24%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.06), transparent 64%);
  animation: battleCinematicSparks 340ms ease-out forwards;
}

.battle-cinematic-v1-sparks.is-critical {
  transform: scale(1.16);
}

.laser-effect--fire.battle-cinematic-v1-projectile {
  height: 8px;
  background:
    radial-gradient(circle at 16% 50%, rgba(255, 255, 255, 0.96), transparent 18%),
    linear-gradient(90deg, transparent, rgba(251, 146, 60, 0.95) 16%, rgba(239, 68, 68, 1) 52%, rgba(255, 237, 213, 0.78) 78%, transparent);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.74), 0 0 38px rgba(251, 146, 60, 0.36);
}

.laser-effect--fire.battle-cinematic-v1-projectile::before {
  opacity: 0.9;
  background:
    radial-gradient(circle at 18% 42%, rgba(255, 255, 255, 0.92), transparent 12%),
    radial-gradient(circle at 46% 66%, rgba(251, 191, 36, 0.9), transparent 11%),
    radial-gradient(circle at 72% 35%, rgba(248, 113, 113, 0.88), transparent 10%);
}

.laser-effect--fire.battle-cinematic-v1-hitflash.is-live {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.92), rgba(248, 113, 113, 0.34), rgba(251, 146, 60, 0.14), transparent 74%);
}

.laser-effect--fire.battle-cinematic-v1-sparks.is-live {
  background:
    radial-gradient(circle at 22% 22%, rgba(255, 255, 255, 0.95), transparent 18%),
    radial-gradient(circle at 72% 30%, rgba(251, 146, 60, 0.96), transparent 22%),
    radial-gradient(circle at 42% 74%, rgba(239, 68, 68, 0.9), transparent 22%);
}

.laser-effect--water.battle-cinematic-v1-projectile {
  height: 4px;
  background:
    radial-gradient(circle at 18% 50%, rgba(240, 249, 255, 0.98), transparent 16%),
    linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.94) 18%, rgba(14, 165, 233, 0.96) 56%, rgba(224, 242, 254, 0.86) 78%, transparent);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.6), 0 0 30px rgba(186, 230, 253, 0.24);
}

.laser-effect--water.battle-cinematic-v1-projectile::before {
  opacity: 0.86;
  background:
    linear-gradient(45deg, transparent 40%, rgba(224, 242, 254, 0.95) 42% 46%, transparent 48%),
    linear-gradient(-38deg, transparent 56%, rgba(125, 211, 252, 0.85) 58% 62%, transparent 64%);
}

.laser-effect--water.battle-cinematic-v1-hitflash.is-live {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9), rgba(125, 211, 252, 0.28), transparent 72%);
}

.laser-effect--water.battle-cinematic-v1-sparks.is-live {
  background:
    radial-gradient(circle at 28% 26%, rgba(224, 242, 254, 0.96), transparent 16%),
    radial-gradient(circle at 70% 32%, rgba(125, 211, 252, 0.9), transparent 18%),
    radial-gradient(circle at 48% 76%, rgba(186, 230, 253, 0.82), transparent 20%);
}

.laser-effect--thunder.battle-cinematic-v1-projectile {
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(108deg, transparent 0 8%, rgba(254, 240, 138, 0.98) 9% 20%, transparent 21% 29%, rgba(250, 204, 21, 1) 30% 48%, transparent 49% 57%, rgba(255, 255, 255, 0.96) 58% 72%, transparent 73%);
  box-shadow: 0 0 22px rgba(250, 204, 21, 0.8), 0 0 36px rgba(254, 240, 138, 0.32);
  clip-path: polygon(0 52%, 18% 4%, 34% 52%, 50% 8%, 68% 58%, 100% 18%, 76% 100%, 56% 62%, 38% 100%, 22% 58%);
}

.laser-effect--thunder.battle-cinematic-v1-projectile.is-live {
  animation-duration: 220ms;
}

.laser-effect--thunder.battle-cinematic-v1-hitflash.is-live {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 1), rgba(250, 204, 21, 0.42), transparent 70%);
  animation-duration: 160ms;
}

.laser-effect--thunder.battle-cinematic-v1-sparks.is-live {
  background:
    radial-gradient(circle at 20% 28%, rgba(255, 255, 255, 1), transparent 14%),
    radial-gradient(circle at 72% 24%, rgba(250, 204, 21, 0.96), transparent 18%),
    linear-gradient(120deg, transparent 44%, rgba(254, 240, 138, 0.92) 46% 50%, transparent 52%);
  animation-duration: 220ms;
}

.laser-effect--wind.battle-cinematic-v1-projectile {
  height: 5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(187, 247, 208, 0.92) 16%, rgba(34, 197, 94, 0.98) 54%, rgba(240, 253, 244, 0.8) 78%, transparent);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.58), 0 0 30px rgba(134, 239, 172, 0.22);
}

.laser-effect--wind.battle-cinematic-v1-projectile::after {
  opacity: 0.82;
  inset: -10px 8px;
  background:
    linear-gradient(135deg, transparent 43%, rgba(220, 252, 231, 0.92) 45% 48%, transparent 50%),
    linear-gradient(135deg, transparent 60%, rgba(74, 222, 128, 0.76) 62% 65%, transparent 67%);
}

.laser-effect--wind.battle-cinematic-v1-hitflash.is-live {
  background: radial-gradient(ellipse at center, rgba(240, 253, 244, 0.86), rgba(34, 197, 94, 0.24), transparent 72%);
}

.laser-effect--wind.battle-cinematic-v1-sparks.is-live {
  background:
    linear-gradient(135deg, transparent 36%, rgba(220, 252, 231, 0.95) 38% 42%, transparent 44%),
    linear-gradient(135deg, transparent 56%, rgba(74, 222, 128, 0.82) 58% 62%, transparent 64%),
    radial-gradient(circle at center, rgba(187, 247, 208, 0.16), transparent 70%);
}

.laser-effect--dark.battle-cinematic-v1-projectile {
  height: 7px;
  background: linear-gradient(90deg, transparent, rgba(216, 180, 254, 0.82) 18%, rgba(126, 34, 206, 0.98) 52%, rgba(24, 24, 27, 0.88) 82%, transparent);
  box-shadow: 0 0 18px rgba(126, 34, 206, 0.72), 0 6px 18px rgba(17, 24, 39, 0.44);
  filter: saturate(1.15) blur(0.15px);
}

.laser-effect--dark.battle-cinematic-v1-projectile.is-live {
  animation-name: battleCinematicProjectileDarkPlayer;
}

.laser-effect--dark.battle-cinematic-v1-projectile.from-enemy.to-player.is-live {
  animation-name: battleCinematicProjectileDarkEnemy;
}

.laser-effect--dark.battle-cinematic-v1-hitflash.is-live {
  background: radial-gradient(circle at center, rgba(233, 213, 255, 0.72), rgba(126, 34, 206, 0.34), rgba(17, 24, 39, 0.16), transparent 74%);
}

.laser-effect--dark.battle-cinematic-v1-sparks.is-live {
  background:
    radial-gradient(circle at 26% 30%, rgba(216, 180, 254, 0.86), transparent 20%),
    radial-gradient(circle at 70% 28%, rgba(88, 28, 135, 0.82), transparent 22%),
    radial-gradient(circle at 48% 72%, rgba(17, 24, 39, 0.62), transparent 24%);
}

.laser-effect--light.battle-cinematic-v1-projectile {
  height: 5px;
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 255, 255, 1), transparent 18%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 1) 18%, rgba(186, 230, 253, 0.98) 54%, rgba(255, 255, 255, 0.9) 82%, transparent);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.88), 0 0 42px rgba(125, 211, 252, 0.36);
}

.laser-effect--light.battle-cinematic-v1-hitflash.is-live {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 1), rgba(186, 230, 253, 0.32), transparent 72%);
}

.laser-effect--light.battle-cinematic-v1-sparks.is-live {
  background:
    radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 1), transparent 20%),
    radial-gradient(circle at 76% 28%, rgba(224, 242, 254, 0.96), transparent 20%),
    radial-gradient(circle at 48% 74%, rgba(186, 230, 253, 0.82), transparent 22%);
}

.battle-cinematic-v1-stage[data-current-actor="player"] .battle-cinematic-v1-unit.is-player.is-acting .battle-cinematic-v1-frame img {
  transform: translate(12px, -4px) scale(1.03);
}

.battle-cinematic-v1-stage[data-current-actor="enemy"] .battle-cinematic-v1-unit.is-enemy.is-acting .battle-cinematic-v1-frame img {
  transform: translate(-12px, -4px) scale(1.03);
}

.battle-cinematic-v1-unit.is-hit .battle-cinematic-v1-frame img {
  animation: battleCinematicHitShake 220ms ease-out;
}

.battle-cinematic-v1-unit.is-crit-hit .battle-cinematic-v1-frame img {
  animation: battleCinematicCritShake 260ms ease-out;
}

.battle-cinematic-v1-unit.is-evading .battle-cinematic-v1-frame img {
  transform: translateY(-4px) translateX(12px);
}

.battle-cinematic-v1-unit.is-blocking .battle-cinematic-v1-frame img {
  filter: brightness(1.12) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34));
}

.battle-cinematic-v1-unit.is-finished {
  opacity: 0.62;
}

.battle-cinematic-v1-unit.is-finished .battle-cinematic-v1-frame img {
  animation: battleCinematicCollapse 420ms ease-out forwards;
  filter: grayscale(0.2) brightness(0.84);
}

.battle-cinematic-v1.is-hit-stop .battle-cinematic-v1-stage {
  transform: scale(1.01);
}

.battle-cinematic-v1.is-finisher .battle-cinematic-v1-stage::after {
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.14), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(251, 146, 60, 0.16), transparent 64%);
}

.battle-cinematic-v1-card,
.battle-cinematic-v1-final {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 15, 27, 0.84);
}

.battle-cinematic-v1-card {
  padding: 14px 16px;
  display: grid;
  gap: 8px;
}

.battle-cinematic-v1-card-actor,
.battle-cinematic-v1-card-action {
  font-weight: 900;
}

.battle-cinematic-v1-card-action {
  font-size: 22px;
  line-height: 1.2;
}

.battle-cinematic-v1-card-result {
  font-size: 16px;
  color: var(--text-main);
}

.battle-cinematic-v1-card-value,
.battle-cinematic-v1-card-status {
  min-height: 20px;
  font-size: 13px;
  font-weight: 800;
}

.battle-cinematic-v1-card-value {
  color: #ffe2ad;
}

.battle-cinematic-v1-card-status {
  color: #d8f6ff;
}

.battle-cinematic-v1-card-summary {
  color: var(--text-sub);
  font-size: 14px;
  line-height: 1.55;
}

.battle-cinematic-v1-final {
  margin-top: 12px;
  padding: 14px 16px;
  display: grid;
  gap: 6px;
}

.battle-cinematic-v1-final-heading {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--accent-cyan);
}

.battle-cinematic-v1-final-label {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.25;
}

.battle-cinematic-v1-final-result {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-sub);
}

@keyframes battleCinematicProjectilePlayer {
  0% {
    opacity: 0;
    transform: translateX(0) scaleX(0.2);
  }
  12% {
    opacity: 0.9;
  }
  42% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(156px) scaleX(1.22);
  }
}

@keyframes battleCinematicProjectileEnemy {
  0% {
    opacity: 0;
    transform: translateX(0) scaleX(0.2);
  }
  12% {
    opacity: 0.9;
  }
  42% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-156px) scaleX(1.22);
  }
}

@keyframes battleCinematicProjectileDarkPlayer {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) scaleX(0.2);
  }
  12% {
    opacity: 0.88;
  }
  46% {
    opacity: 1;
    transform: translateX(72px) translateY(-2px) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: translateX(156px) translateY(2px) scaleX(1.2);
  }
}

@keyframes battleCinematicProjectileDarkEnemy {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) scaleX(0.2);
  }
  12% {
    opacity: 0.88;
  }
  46% {
    opacity: 1;
    transform: translateX(-72px) translateY(2px) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-156px) translateY(-2px) scaleX(1.2);
  }
}

@keyframes battleCinematicFlash {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  34% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.16);
  }
}

@keyframes battleCinematicSparks {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@keyframes battleCinematicHitShake {
  0% {
    transform: translateX(0);
  }
  32% {
    transform: translateX(9px);
  }
  64% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes battleCinematicCritShake {
  0% {
    transform: translateX(0);
  }
  24% {
    transform: translateX(16px) scale(1.03);
  }
  52% {
    transform: translateX(-8px) scale(0.99);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes battleCinematicCollapse {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  42% {
    transform: translateY(8px) scale(0.97);
    opacity: 0.9;
  }
  100% {
    transform: translateY(16px) scale(0.92);
    opacity: 0.66;
  }
}

@keyframes battleCinematicFinishCall {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.86);
  }
  40% {
    opacity: 1;
    transform: translateX(-50%) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes battleCinematicDamagePop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  24% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-16px) scale(1.04);
  }
}

@media (max-width: 720px) {
  #battle-replay-followup {
    display: grid;
    gap: 8px;
  }

  .battle-result-compact-stack {
    gap: 6px;
  }

  .battle-outcome-banner,
  .battle-summary-upgraded,
  .battle-next-card,
  .battle-detail-fold,
  .enemy-card {
    margin-top: 0;
  }

  .battle-outcome-banner,
  .battle-summary-upgraded,
  .battle-next-card,
  .enemy-card {
    padding: 10px;
  }

  .battle-section-title {
    margin: 6px 0 0;
    font-size: 12px;
  }

  .battle-next-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .battle-next-card {
    gap: 8px;
  }

  .battle-next-card-primary {
    position: sticky;
    bottom: 10px;
    z-index: 14;
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.18);
  }

  #explore-return-btn {
    min-height: 54px;
    font-size: 17px;
  }

  .battle-home-link,
  .battle-actions-top button {
    min-height: 42px;
  }

  .battle-cinematic-v1 {
    margin: 6px 0 10px;
    padding: 10px;
    border-radius: 16px;
    overflow: visible;
  }

  .battle-cinematic-v1-core {
    position: sticky;
    top: calc(var(--site-header-height, 0px) + env(safe-area-inset-top, 0px) + 4px);
    z-index: 20;
    margin: -10px -10px 8px;
    padding: 10px 10px 8px;
    border-radius: 16px 16px 14px 14px;
    background:
      radial-gradient(circle at top, rgba(103, 232, 249, 0.08), transparent 38%),
      linear-gradient(180deg, rgba(8, 16, 34, 0.98), rgba(11, 18, 31, 0.99));
    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.28);
  }

  .battle-cinematic-v1.is-boss .battle-cinematic-v1-core {
    background:
      radial-gradient(circle at top, rgba(251, 146, 60, 0.14), transparent 34%),
      linear-gradient(180deg, rgba(20, 10, 18, 0.98), rgba(12, 10, 20, 0.99));
  }

  .battle-cinematic-v1-head,
  .battle-cinematic-v1-card-topline {
    flex-direction: column;
    align-items: start;
    gap: 6px;
  }

  .battle-cinematic-v1-title {
    font-size: 18px;
    line-height: 1.2;
  }

  .battle-cinematic-v1-progress-row {
    display: grid;
    gap: 4px;
  }

  .battle-cinematic-v1-meta {
    gap: 4px 8px;
  }

  .battle-cinematic-v1-area,
  .battle-cinematic-v1-battle-type,
  .battle-cinematic-v1-progress,
  .battle-cinematic-v1-card-turn {
    font-size: 11px;
  }

  .battle-cinematic-v1-controls {
    width: 100%;
    margin-top: 2px;
    padding: 6px 0 0;
  }

  .battle-cinematic-v1-stage {
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    min-height: 184px;
    gap: 6px;
    padding: 10px 6px 12px;
  }

  .battle-cinematic-v1-unit.is-player {
    transform: translateX(2px);
  }

  .battle-cinematic-v1-unit.is-enemy {
    transform: translateX(-2px);
  }

  .battle-cinematic-v1-frame {
    width: 100%;
    min-height: 94px;
  }

  .battle-cinematic-v1-frame img {
    max-width: 90px;
    max-height: 90px;
  }

  .battle-cinematic-v1.is-boss .battle-cinematic-v1-unit.is-enemy .battle-cinematic-v1-frame img {
    max-width: 100px;
    max-height: 100px;
  }

  .battle-cinematic-v1-name {
    font-size: 12px;
  }

  .battle-cinematic-v1-hp {
    width: min(112px, 96%);
    height: 7px;
  }

  .battle-cinematic-v1-hitflash.target-player,
  .battle-cinematic-v1-sparks.target-player {
    left: 8%;
  }

  .battle-cinematic-v1-hitflash.target-enemy,
  .battle-cinematic-v1-sparks.target-enemy {
    right: 8%;
  }

  .battle-cinematic-v1-damage-pop.target-player {
    left: 8%;
  }

  .battle-cinematic-v1-damage-pop.target-enemy {
    right: 8%;
  }

  .battle-cinematic-v1-damage-pop {
    top: calc(50% - 40px);
    min-width: 58px;
    padding: 5px 10px;
    font-size: 20px;
  }

  .battle-cinematic-v1-damage-pop.is-critical {
    font-size: 24px;
  }

  .battle-cinematic-v1-finish-call {
    bottom: 18px;
    min-width: 116px;
    padding: 7px 14px;
    font-size: 13px;
  }

  .battle-cinematic-v1-card-action {
    font-size: 16px;
  }

  .battle-cinematic-v1-card {
    padding: 10px 12px;
    gap: 6px;
  }

  .battle-cinematic-v1-card-summary {
    font-size: 13px;
    line-height: 1.45;
  }

  .battle-cinematic-v1-final-label {
    font-size: 20px;
  }
}

.home-today-progress-card {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.home-today-progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.home-today-progress-link {
  white-space: nowrap;
}
.home-today-progress-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.home-today-progress-grid.is-page {
  margin-bottom: 14px;
}
.home-today-progress-stat {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(115, 143, 196, 0.24);
  background: rgba(18, 30, 58, 0.72);
  display: grid;
  gap: 4px;
}
.home-today-progress-stat.is-gain {
  border-color: rgba(92, 205, 151, 0.42);
  box-shadow: 0 0 0 1px rgba(92, 205, 151, 0.1) inset;
}
.home-today-progress-label {
  font-size: 12px;
  color: rgba(220, 229, 247, 0.74);
}
.home-today-progress-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}
.home-today-progress-foot {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(220, 229, 247, 0.74);
  font-size: 12px;
}
.home-today-progress-empty {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(18, 30, 58, 0.5);
  border: 1px dashed rgba(115, 143, 196, 0.24);
}
.robot-maintenance-page {
  display: grid;
  gap: 14px;
}
.robot-maintenance-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}
.robot-maintenance-hero-copy {
  display: grid;
  gap: 6px;
}
.robot-maintenance-thumb {
  width: min(220px, 34vw);
  height: auto;
}
.robot-maintenance-loadout,
.robot-maintenance-panel {
  display: grid;
  gap: 12px;
}
.robot-maintenance-current-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.robot-maintenance-current-card,
.robot-maintenance-current-focus-card {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(115, 143, 196, 0.24);
  background: rgba(18, 30, 58, 0.52);
}
.robot-maintenance-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.robot-maintenance-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: rgba(27, 44, 83, 0.88);
  border: 1px solid rgba(115, 143, 196, 0.24);
  font-weight: 700;
}
.robot-maintenance-tab.is-active {
  background: rgba(81, 111, 195, 0.28);
  border-color: rgba(129, 165, 255, 0.44);
}
.robot-maintenance-form,
.robot-maintenance-current-focus,
.robot-maintenance-panel-head {
  display: grid;
  gap: 12px;
}
.robot-maintenance-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.robot-maintenance-option-grid.is-decor {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.robot-maintenance-option {
  display: grid;
  gap: 10px;
}
.robot-maintenance-option.is-current {
  border-color: rgba(90, 189, 166, 0.42);
  box-shadow: 0 16px 32px rgba(38, 86, 143, 0.18);
}
.robot-maintenance-delta-block {
  display: grid;
  gap: 8px;
}
.robot-maintenance-delta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.robot-maintenance-delta-item {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(18, 30, 58, 0.66);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.robot-maintenance-delta-item.is-up strong {
  color: #86efac;
}
.robot-maintenance-delta-item.is-down strong {
  color: #fca5a5;
}
.robot-maintenance-delta-item.is-flat strong {
  color: rgba(220, 229, 247, 0.82);
}
.robot-maintenance-decor-image {
  width: 72px;
  height: 72px;
  object-fit: contain;
  image-rendering: pixelated;
}
.robot-maintenance-decor-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.robot-maintenance-decor-slot {
  display: grid;
  gap: 10px;
}
.robot-maintenance-decor-slot.is-current {
  border-color: rgba(90, 189, 166, 0.42);
}
.robot-maintenance-decor-slot-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.robot-maintenance-field {
  display: grid;
  gap: 6px;
  color: rgba(220, 229, 247, 0.78);
  font-size: 12px;
  font-weight: 700;
}
.robot-maintenance-field select,
.robot-maintenance-field input {
  width: 100%;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(115, 143, 196, 0.28);
  background: rgba(8, 16, 34, 0.74);
  color: rgba(244, 248, 255, 0.96);
  padding: 0 10px;
}
.robot-maintenance-decor-offsets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.daily-research-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 8, 20, 0.72);
  backdrop-filter: blur(8px);
}
.daily-research-modal-backdrop.is-hidden {
  display: none;
}
.daily-research-modal {
  width: min(560px, 100%);
  max-height: min(84vh, 720px);
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(94, 234, 212, 0.28);
  background: linear-gradient(180deg, rgba(11, 20, 42, 0.98), rgba(8, 13, 28, 0.98));
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42), 0 0 34px rgba(34, 211, 238, 0.12);
}
.daily-research-modal__header {
  display: grid;
  gap: 4px;
}
.daily-research-modal__header h2 {
  margin: 0;
  font-size: 24px;
}
.daily-research-modal__eyebrow {
  color: #67e8f9;
  font-size: 12px;
  font-weight: 800;
}
.daily-research-section {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(115, 143, 196, 0.22);
  background: rgba(15, 23, 42, 0.7);
}
.daily-research-section--reward {
  border-color: rgba(94, 234, 212, 0.34);
}
.daily-research-section h3,
.daily-research-section p {
  margin: 0;
}
.daily-research-section ul {
  margin: 0;
  padding-left: 18px;
}
.daily-research-reward {
  color: #a7f3d0;
  font-weight: 900;
}
.daily-research-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.style-gauge,
.style-rank {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(94, 234, 212, 0.24);
  background: rgba(8, 16, 34, 0.46);
}
.style-gauge.is-compact,
.style-rank.is-compact {
  margin-top: 8px;
  padding: 8px;
}
.style-gauge-head,
.style-rank-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  color: rgba(231, 241, 255, 0.92);
  font-size: 13px;
}
.style-gauge-head span,
.style-rank-note,
.style-gauge-next {
  color: rgba(220, 229, 247, 0.72);
  font-size: 12px;
}
.style-gauge-rows {
  display: grid;
  gap: 6px;
}
.style-gauge-row {
  display: grid;
  grid-template-columns: 42px minmax(80px, 1fr) 28px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.style-gauge-label {
  color: rgba(220, 229, 247, 0.78);
  font-weight: 700;
}
.style-gauge-track {
  height: 9px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(115, 143, 196, 0.18);
}
.style-gauge-fill {
  display: block;
  width: 100%;
  height: 100%;
  appearance: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
}
.style-gauge-fill::-webkit-progress-bar {
  background: transparent;
}
.style-gauge-fill::-webkit-progress-value {
  border-radius: 8px;
  background: linear-gradient(90deg, #22d3ee, #86efac);
}
.style-gauge-fill::-moz-progress-bar {
  border-radius: 8px;
  background: linear-gradient(90deg, #22d3ee, #86efac);
}
.style-gauge-row.is-current .style-gauge-label,
.style-rank-chip.is-current {
  color: #a7f3d0;
}
.style-gauge-row.is-current .style-gauge-fill::-webkit-progress-value {
  background: linear-gradient(90deg, #5eead4, #facc15);
}
.style-gauge-row.is-current .style-gauge-fill::-moz-progress-bar {
  background: linear-gradient(90deg, #5eead4, #facc15);
}
.style-gauge-row.is-next .style-gauge-fill::-webkit-progress-value {
  background: linear-gradient(90deg, #38bdf8, #f9a8d4);
}
.style-gauge-row.is-next .style-gauge-fill::-moz-progress-bar {
  background: linear-gradient(90deg, #38bdf8, #f9a8d4);
}
.style-gauge-score {
  text-align: right;
  color: rgba(231, 241, 255, 0.9);
  font-variant-numeric: tabular-nums;
}
.style-rank-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.style-rank-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(20, 31, 56, 0.72);
  border: 1px solid rgba(115, 143, 196, 0.22);
  color: rgba(220, 229, 247, 0.84);
  font-weight: 800;
  font-size: 12px;
}
.style-rank-chip.is-current {
  border-color: rgba(94, 234, 212, 0.42);
  background: rgba(20, 83, 45, 0.2);
}
.affinity-card {
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(30, 41, 59, 0.72));
}
.affinity-label {
  color: rgba(226, 232, 240, 0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.affinity-result {
  margin: 3px 0 6px;
  font-size: 24px;
  font-weight: 900;
}
.affinity-card p {
  margin: 0 0 6px;
}
.affinity-advantage {
  border-color: rgba(34, 211, 238, 0.48);
  background: linear-gradient(135deg, rgba(8, 47, 73, 0.86), rgba(20, 83, 45, 0.58));
}
.affinity-advantage .affinity-result {
  color: #67e8f9;
}
.affinity-disadvantage {
  border-color: rgba(251, 146, 60, 0.52);
  background: linear-gradient(135deg, rgba(69, 10, 10, 0.82), rgba(124, 45, 18, 0.58));
}
.affinity-disadvantage .affinity-result {
  color: #fdba74;
}
.affinity-neutral .affinity-result,
.affinity-unknown .affinity-result {
  color: rgba(226, 232, 240, 0.92);
}
.affinity-log-line {
  color: #a7f3d0;
  font-weight: 800;
}
.lab-level-card .card,
.card.lab-level-card {
  border-color: rgba(94, 234, 212, 0.28);
  background: linear-gradient(135deg, rgba(8, 47, 73, 0.28), rgba(15, 23, 42, 0.9));
}
.lab-level-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.lab-level-main {
  margin-top: 2px;
  color: #f8fafc;
  font-size: 28px;
  font-weight: 900;
}
.lab-level-rank {
  padding: 6px 10px;
  border: 1px solid rgba(94, 234, 212, 0.28);
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.12);
  color: #a5f3fc;
  font-weight: 900;
}
.lab-level-bar {
  overflow: hidden;
  height: 10px;
  margin-top: 14px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}
.lab-level-bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  appearance: none;
  border: 0;
  border-radius: inherit;
  overflow: hidden;
  background: transparent;
}
.lab-level-bar-fill::-webkit-progress-bar {
  background: transparent;
}
.lab-level-bar-fill::-webkit-progress-value {
  border-radius: inherit;
  background: linear-gradient(90deg, #22d3ee, #a3e635);
}
.lab-level-bar-fill::-moz-progress-bar {
  border-radius: inherit;
  background: linear-gradient(90deg, #22d3ee, #a3e635);
}
.lab-level-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  color: rgba(226, 232, 240, 0.78);
  font-weight: 800;
}
.home-insect-research-card {
  border-color: rgba(250, 204, 21, 0.25);
  background: linear-gradient(135deg, rgba(69, 42, 8, 0.22), rgba(15, 23, 42, 0.94));
}
.home-insect-research-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.home-insect-research-title {
  margin-top: 2px;
  color: #fef3c7;
  font-size: 22px;
  font-weight: 900;
}
.home-insect-research-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.home-insect-research-stat {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  padding: 10px;
  background: rgba(15, 23, 42, 0.48);
}
.home-insect-research-stat span {
  display: block;
  color: rgba(226, 232, 240, 0.72);
  font-size: 12px;
  font-weight: 800;
}
.home-insect-research-stat b {
  display: block;
  margin-top: 4px;
  color: #f8fafc;
  font-size: 24px;
}
.home-insect-research-link {
  margin-bottom: 0;
}
@media (max-width: 720px) {
  .home-insect-research-grid {
    grid-template-columns: 1fr;
  }
}
.battle-lab-level-inline {
  margin-left: 8px;
  color: rgba(226, 232, 240, 0.76);
}
.battle-lab-level-up {
  color: #a5f3fc;
  font-weight: 900;
}
.robot-overview-row {
  grid-template-columns: 1fr !important;
}
.robot-overview-card {
  display: grid;
  gap: 8px;
}
.robot-overview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(226, 232, 240, 0.82);
  font-weight: 800;
}
.robot-overview-meta span {
  padding: 4px 8px;
  border: 1px solid rgba(94, 234, 212, 0.18);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.36);
}
.home-robot-details {
  border: 1px solid rgba(94, 234, 212, 0.18);
  border-radius: 14px;
  padding: 10px;
  background: rgba(15, 23, 42, 0.18);
}
.home-robot-details > summary,
.home-spotlight-tab > summary {
  cursor: pointer;
  color: #a5f3fc;
  font-weight: 900;
}
.home-robot-details > .main-robot-meta-grid {
  margin-top: 10px;
}
.home-spotlight-tab {
  margin-top: 10px;
}
@media (max-width: 768px) {
  .home-today-progress-grid {
    gap: 8px;
  }
  .home-today-progress-stat {
    padding: 10px;
  }
  .home-today-progress-value {
    font-size: 19px;
  }
  .robot-maintenance-hero {
    grid-template-columns: 1fr;
  }
  .robot-maintenance-thumb {
    width: 120px;
  }
  .robot-maintenance-delta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .style-gauge-row {
    grid-template-columns: 38px minmax(64px, 1fr) 26px;
    gap: 6px;
  }
  .home-priority-stack {
    display: flex;
  }
  .home-layout-grid,
  .home-main-stack,
  .home-right-stack {
    display: contents;
  }
  .home-current-robot { order: 1; }
  .home-actions-panel { order: 2; }
  .home-mvp-panel { order: 6; }
  .home-champion-panel { order: 6; }
  .home-comms-panel { order: 7; }
  .home-weekly-panel { order: 8; }
  .home-faction-panel { order: 9; }
  .home-nav-panel { order: 10; }
  .home-ranking-panel { order: 11; }
  .home-visibility-panel { order: 12; }
}

/* recent robots alignment fix: keep badges off the robot thumbnail */
.recent-robot-card {
  position: relative;
  grid-template-rows: 54px minmax(1.35em, auto) minmax(1.35em, auto) auto auto;
  justify-items: center;
  align-items: start;
  overflow: hidden;
}

.recent-robot-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.45);
  transform: translateZ(0);
}

.recent-robot-icon {
  display: block;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
  object-position: 50% 50%;
  border-radius: 7px;
  background: transparent;
}

.recent-robot-badges {
  position: absolute;
  top: 7px;
  right: 7px;
  left: auto;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  max-width: 58px;
  pointer-events: none;
}

.recent-robot-badges span {
  max-width: 58px;
  padding: 2px 5px;
  font-size: 0.58rem;
  line-height: 1.05;
}

.recent-robot-name,
.recent-robot-unit {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.recent-robot-status {
  justify-content: center;
  min-height: 22px;
}

.boss-unlock-inline,
.boss-unlock-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  color: #cbd5e1;
  font-size: 0.86rem;
}

.boss-unlock-inline span,
.boss-unlock-lines div {
  padding: 3px 7px;
  border: 1px solid rgba(250, 204, 21, 0.24);
  border-radius: 6px;
  background: rgba(250, 204, 21, 0.08);
}

.parts-danger-zone {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.parts-danger-zone summary {
  cursor: pointer;
  color: #94a3b8;
  font-size: 0.88rem;
  font-weight: 700;
}

.btn-danger-subtle {
  margin-top: 8px;
  border: 1px solid rgba(248, 113, 113, 0.38);
  background: rgba(127, 29, 29, 0.18);
  color: #fecaca;
}

.has-fixed-nav {
  padding-bottom: calc(82px + env(safe-area-inset-bottom));
}

.robo-fixed-nav {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 7px;
  width: min(96vw, 720px);
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.38);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
}

.robo-fixed-nav-form {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.robo-fixed-nav-hide-form {
  flex: 0 0 auto;
}

.robo-fixed-nav-item {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 999px;
  color: #e5e7eb;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(30, 41, 59, 0.9);
}

button.robo-fixed-nav-item {
  width: 100%;
  cursor: pointer;
}

.robo-fixed-nav-toggle {
  padding-inline: 9px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.84);
}

.robo-fixed-nav-item.is-active {
  border-color: rgba(56, 189, 248, 0.62);
  color: #e0f2fe;
  background: rgba(14, 116, 144, 0.42);
}

.robo-fixed-nav-explore.is-ready {
  border-color: rgba(34, 197, 94, 0.65);
  color: #ecfdf5;
  background: rgba(22, 101, 52, 0.78);
}

.robo-fixed-nav-explore.is-waiting,
.robo-fixed-nav-explore:disabled {
  color: #cbd5e1;
  cursor: not-allowed;
  opacity: 0.72;
  background: rgba(51, 65, 85, 0.72);
}

.robo-fixed-nav-parts {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
}

.robo-fixed-nav-count {
  color: #cbd5e1;
  font-size: 0.68rem;
  line-height: 1;
}

.robo-fixed-nav-count.is-warning {
  color: #fde68a;
}

.robo-fixed-nav-count.is-full {
  color: #fecaca;
}

.robo-fixed-nav-restore-form {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 1000;
  margin: 0;
}

.robo-fixed-nav-restore {
  padding: 10px 13px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  color: #e5e7eb;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.34);
}

.battle-result-saved-note {
  margin: -6px 0 14px;
  text-align: center;
}

.parts-bottom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  justify-content: center;
  margin: 22px 0 4px;
}

.parts-bottom-actions a {
  min-width: 112px;
  padding: 11px 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;