* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-padding-top: 84px;
  scroll-padding-bottom: 120px;
}

body {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  background: radial-gradient(circle at top, #1e2452 0%, #0b0f2d 42%, #080b1f 100%);
  color: #edf1ff;
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
.site-header h1,
.round-chip,
.hero-tag,
.champion-card {
  font-family: "Orbitron", "Noto Sans TC", "PingFang TC", sans-serif;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #2a3368;
  background: rgba(6, 9, 27, 0.85);
  backdrop-filter: blur(8px);
}

.site-header h1 {
  margin: 0;
  font-size: 1.2rem;
  color: #86a2ff;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

nav a {
  color: #d9e2ff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

nav a:hover {
  color: #95e7ff;
}

nav a.active,
nav a[aria-current="page"] {
  color: #ffffff;
}

a,
button,
input,
select,
textarea,
summary,
[role="button"] {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(149, 231, 255, 0.12);
}

.container {
  width: min(1120px, 100%);
  padding-inline: clamp(14px, 3vw, 22px);
  margin: 1.5rem auto 2.5rem;
}

h2 {
  margin-top: 0;
}

.eyebrow {
  margin: 0 0 0.45rem;
  color: #88c9ff;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.74rem;
  font-weight: 800;
}

.subtle {
  color: #aab8e5;
  margin: 0.5rem 0 1rem;
}

.card {
  background: rgba(15, 20, 48, 0.86);
  border: 1px solid #29315f;
  border-radius: 14px;
  padding: 1.2rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.hero {
  text-align: center;
  padding: 3rem 1.2rem;
}

.hero-spotlight {
  background:
    radial-gradient(circle at top right, rgba(91, 143, 255, 0.24), transparent 34%),
    radial-gradient(circle at bottom left, rgba(255, 79, 125, 0.18), transparent 30%),
    rgba(15, 20, 48, 0.92);
}

.hero h2 {
  font-size: clamp(1.4rem, 2.5vw, 2.3rem);
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}

#visual-builder-section,
#pairing-panel,
#inventory-panel,
#profile-panel,
#setup-section,
#load-section,
#bracket-section {
  scroll-margin-top: 92px;
}

.btn {
  border: 0;
  border-radius: 10px;
  padding: 0.72rem 1.1rem;
  min-height: 48px;
  background: #3d62ff;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  touch-action: manipulation;
}

.btn:hover {
  background: #5072ff;
}

.btn-accent {
  background: #ff4f7d;
}

.btn-accent:hover {
  background: #ff618b;
}

.btn-ghost {
  background: rgba(17, 26, 61, 0.74);
  border: 1px solid #3850a0;
}

.btn-ghost:hover {
  background: rgba(31, 44, 96, 0.9);
}

.btn-sm {
  padding: 0.46rem 0.72rem;
  font-size: 0.82rem;
}

input[type="text"],
input[type="number"],
input[type="file"],
select,
textarea {
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
  border: 1px solid #3a4688;
  background: #111737;
  color: #e5edff;
  padding: 0.7rem 0.82rem;
  font-size: 0.95rem;
  touch-action: manipulation;
}

input::placeholder,
textarea::placeholder {
  color: #7f90ca;
}

textarea {
  min-height: 120px;
  line-height: 1.55;
  resize: vertical;
}

.search-bar {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}

.search-bar input {
  flex: 1;
}

.section-block {
  margin-top: 1rem;
  background: rgba(11, 15, 36, 0.7);
  border: 1px solid #2b3365;
  border-radius: 12px;
  padding: 1rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.profile-grid {
  align-items: start;
}

.feature-card,
.intro-card,
.pairing-card,
.history-card,
.pair-result-card {
  background: rgba(11, 15, 36, 0.72);
}

.feature-card h3,
.intro-card h3 {
  margin: 0;
}

.stack-block {
  display: grid;
  gap: 0.8rem;
}

.two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.align-end {
  display: flex;
  align-items: end;
}

.inline-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.inline-actions h4,
.inline-actions h3 {
  margin: 0;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}

.section-heading h3 {
  margin: 0;
}

.upload-toolbar {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  flex-wrap: wrap;
}

.upload-toolbar input[type="file"] {
  flex: 1;
  min-width: 240px;
}

.field-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #b8c6f8;
}

.hint {
  color: #91a1d8;
  font-size: 0.84rem;
  margin: 0 0 0.9rem;
}

.tournament-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.9fr);
  gap: 1rem;
  background:
    radial-gradient(circle at top right, rgba(108, 143, 255, 0.26), transparent 30%),
    radial-gradient(circle at bottom left, rgba(249, 115, 22, 0.16), transparent 24%),
    rgba(13, 18, 43, 0.92);
}

.tournament-hero-card h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2.3rem);
  line-height: 1.18;
}

.tournament-hero-copy,
.tournament-hero-actions {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.hero-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(123, 151, 255, 0.35);
  background: rgba(13, 18, 43, 0.72);
  color: #b9d0ff;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.hero-mini-panel {
  padding: 0.95rem 1rem;
  border-radius: 16px;
  background: rgba(11, 15, 36, 0.72);
  border: 1px solid #314083;
}

.hero-mini-panel strong {
  display: block;
  margin-bottom: 0.35rem;
}

.hero-mini-panel p {
  margin: 0;
  color: #aab8e5;
  line-height: 1.55;
}

.setup-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.setup-snapshot-card {
  padding: 0.95rem 1rem;
  border-radius: 16px;
  border: 1px solid #2f3c79;
  background: linear-gradient(180deg, rgba(14, 20, 49, 0.92), rgba(10, 14, 35, 0.82));
}

.setup-snapshot-card span,
.share-label {
  display: block;
  margin-bottom: 0.3rem;
  color: #89a4f2;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.setup-snapshot-card strong {
  font-size: 1rem;
  color: #f2f5ff;
}

.error {
  color: #ff9b9b;
}

.loading {
  color: #8fd8ff;
}

pre {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
}

.tier-layout {
  display: grid;
  gap: 1rem;
}

.tier-group {
  border: 1px solid #26315f;
  border-radius: 14px;
  background: rgba(9, 13, 34, 0.62);
}

.tier-label {
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #081126;
  min-height: 100%;
}

.tier-summary {
  list-style: none;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem;
  cursor: pointer;
}

.tier-summary::-webkit-details-marker,
.compact-block summary::-webkit-details-marker {
  display: none;
}

.tier-summary-copy {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
  color: #dfe8ff;
  font-size: 0.92rem;
}

.tier-summary-copy strong {
  font-size: 1rem;
}

.tier-s .tier-label {
  background: linear-gradient(180deg, #ffd45f 0%, #f9a63d 100%);
}

.tier-a .tier-label {
  background: linear-gradient(180deg, #94efff 0%, #53b6ff 100%);
}

.tier-b .tier-label {
  background: linear-gradient(180deg, #9ef5c1 0%, #57d48e 100%);
}

.tier-c .tier-label {
  background: linear-gradient(180deg, #d8d8de 0%, #9398a8 100%);
}

.tier-items {
  display: grid;
  gap: 0.85rem;
  padding: 0 0.9rem 0.9rem;
}

.tier-item,
.vision-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0.9rem;
  padding: 0.85rem;
  border-radius: 12px;
  background: rgba(9, 13, 34, 0.8);
  border: 1px solid #26315f;
}

.tier-item {
  grid-template-columns: 1fr;
}

.tier-thumb,
.vision-preview img {
  width: 100%;
  height: 100%;
  min-height: 96px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  background: #0d122c;
}

.tier-copy h4,
.vision-copy h4 {
  margin: 0;
}

.tier-copy p,
.vision-copy p {
  margin: 0.5rem 0 0;
}

.tier-meta {
  color: #93a5de;
  font-size: 0.86rem;
}

.source-link {
  display: inline-flex;
  margin-top: 0.75rem;
  color: #8fd8ff;
  text-decoration: none;
  font-weight: 700;
}

.wiki-layout {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
  align-items: start;
}

.wiki-thumb {
  width: 100%;
  border-radius: 12px;
  background: #0d122c;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.wiki-copy {
  min-width: 0;
}

.wiki-copy h4 {
  margin: 0.35rem 0 0;
  font-size: 1.15rem;
}

.wiki-copy p {
  margin: 0.7rem 0 0;
  line-height: 1.65;
}

.source-link:hover {
  color: #b6e8ff;
}

.profile-card,
.pairing-output,
.history-list {
  display: grid;
  gap: 1rem;
}

.inventory-card,
.inventory-groups {
  display: grid;
  gap: 1rem;
}

.quick-start-card {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid #3550a0;
  background:
    radial-gradient(circle at top right, rgba(91, 143, 255, 0.16), transparent 34%),
    rgba(11, 15, 36, 0.76);
}

.quick-start-card h4 {
  margin: 0;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.profile-avatar {
  width: 92px;
  height: 92px;
  border-radius: 24px;
  object-fit: cover;
  background: linear-gradient(135deg, #2b74ff 0%, #ff4f7d 100%);
  border: 1px solid #3957bd;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

.profile-header h4 {
  margin: 0;
  font-size: 1.35rem;
}

.inventory-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.inventory-summary-card {
  padding: 0.95rem 1rem;
  border-radius: 16px;
  border: 1px solid #2f3c79;
  background: linear-gradient(180deg, rgba(14, 20, 49, 0.92), rgba(10, 14, 35, 0.82));
}

.inventory-summary-card span,
.inventory-item-stats span {
  display: block;
  margin-bottom: 0.28rem;
  color: #89a4f2;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.inventory-summary-card strong,
.inventory-item-stats strong {
  color: #f2f5ff;
  font-size: 1.04rem;
}

.inventory-group {
  display: grid;
  gap: 0.8rem;
}

.inventory-item-card,
.inventory-empty-card {
  border: 1px solid #2b3365;
  border-radius: 16px;
  padding: 0.95rem;
  background: rgba(11, 15, 36, 0.72);
}

.inventory-item-main,
.inventory-item-actions {
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.inventory-item-actions {
  margin-top: 0.8rem;
}

.inventory-inline-select,
.inventory-inline-qty {
  width: auto;
  min-width: 120px;
}

.inventory-inline-qty {
  max-width: 96px;
}

.pairing-output {
  min-height: 120px;
}

.pairing-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1rem;
  border: 1px solid #2b3365;
  border-radius: 16px;
  padding: 1rem;
}

.pairing-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem;
  border-radius: 16px;
  background: #f4f7ff;
}

.pairing-qr canvas {
  display: block;
  max-width: 100%;
}

.pairing-copy h3 {
  margin: 0.15rem 0 0;
  font-size: 1.8rem;
  letter-spacing: 0.12em;
}

.pair-result-card,
.history-card {
  border: 1px solid #2b3365;
  border-radius: 14px;
  padding: 0.9rem;
}

.shortcut-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.chip-btn {
  border: 1px solid #3850a0;
  background: rgba(16, 22, 52, 0.82);
  color: #dfe8ff;
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.chip-btn:hover {
  background: rgba(31, 44, 96, 0.9);
}

.profile-advanced {
  border: 1px solid #2b3365;
  border-radius: 14px;
  padding: 0.85rem 0.95rem;
  background: rgba(9, 13, 34, 0.55);
}

.profile-advanced summary {
  cursor: pointer;
  font-weight: 700;
  color: #dce6ff;
}

.profile-advanced[open] summary {
  margin-bottom: 0.85rem;
}

.history-win {
  border-color: rgba(83, 212, 142, 0.52);
}

.history-loss {
  border-color: rgba(255, 97, 139, 0.45);
}

.combo-block h4 {
  margin: 0;
}

.compact-block summary {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.compact-block summary strong {
  font-size: 1rem;
}

.compact-block .subtle {
  margin-top: 0.75rem;
}

.combo-list {
  margin: 0.8rem 0 0;
  padding-left: 1.2rem;
}

.combo-list li {
  margin-bottom: 0.45rem;
}

.vision-grid {
  display: grid;
  gap: 0.9rem;
}

.vision-preview {
  align-self: start;
}

.vision-ok {
  border-color: #2f7f68;
}

.vision-error {
  border-color: #8b3d58;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.58rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  background: rgba(76, 97, 186, 0.28);
  color: #dfe8ff;
}

.pill-ok {
  background: rgba(74, 190, 132, 0.18);
  color: #97f0bd;
}

.pill-error {
  background: rgba(255, 107, 107, 0.18);
  color: #ffb5b5;
}

.player-entry {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.player-entry input {
  flex: 1;
  min-width: 180px;
}

.tournament-format-block {
  display: grid;
  gap: 0.9rem;
}

.tournament-tip-card {
  padding: 0.95rem;
  border-radius: 12px;
  border: 1px solid #2b3365;
  background: rgba(9, 13, 34, 0.76);
}

.tournament-tip-card strong {
  display: block;
  margin-bottom: 0.4rem;
}

#player-list,
#ban-list-setup {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
}

.player-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 1px solid #253060;
  padding: 0.52rem 0;
}

.btn-remove {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #ff90a8;
  font-size: 1rem;
  cursor: pointer;
}

.toolbar {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.share-shell {
  display: flex;
  align-items: stretch;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.share-link {
  display: block;
  margin-top: 0.35rem;
  color: #92d7ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.83rem;
  word-break: break-all;
}

.share-card {
  min-width: min(100%, 360px);
  padding: 0.9rem 1rem;
  border-radius: 16px;
  border: 1px solid #30428f;
  background: rgba(11, 15, 36, 0.82);
}

.tournament-meta-card,
.standings-card {
  background: rgba(11, 15, 36, 0.74);
}

.tournament-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.tournament-meta-grid h3 {
  margin: 0;
  font-size: 1.1rem;
}

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

.standings-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.standings-table th,
.standings-table td {
  padding: 0.8rem 0.7rem;
  border-bottom: 1px solid #253060;
  text-align: left;
  vertical-align: top;
}

.standings-table th {
  color: #9cb2ff;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.table-subtle {
  display: block;
  margin-top: 0.2rem;
  color: #94a6dd;
  font-size: 0.82rem;
}

#bracket-display {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.bracket-round {
  min-width: 250px;
}

.bracket-round h3 {
  margin: 0 0 0.6rem;
  color: #9cb2ff;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

.match-card {
  background: rgba(13, 18, 43, 0.85);
  border: 1px solid #2c386f;
  border-radius: 10px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.match-done {
  border-color: #6ca0ff;
}

.match-bye {
  border-style: dashed;
  color: #9dc2ff;
}

.match-players {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.vs {
  font-size: 0.76rem;
  color: #87a0e4;
  text-align: center;
}

.winner {
  color: #8df9c1;
  font-weight: 700;
}

.score-entry {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.score-input {
  width: 74px;
  padding: 0.45rem;
}

.match-pill {
  margin: 0 0 0.65rem;
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: rgba(94, 129, 255, 0.12);
  border: 1px solid rgba(116, 157, 255, 0.35);
  color: #a9c5ff;
  font-size: 0.78rem;
  font-weight: 700;
}

.match-record {
  display: block;
  margin-top: 0.2rem;
  color: #8ea3e6;
  font-size: 0.78rem;
}

.champion-card {
  margin-top: 1rem;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  text-align: center;
  font-size: 1.2rem;
  background: linear-gradient(135deg, #2a77ff 0%, #ff4d7a 100%);
  color: #fff;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25);
}

@media (max-width: 700px) {
  .tournament-hero-card,
  .setup-snapshot-grid {
    grid-template-columns: 1fr;
  }

  .wiki-layout {
    grid-template-columns: 1fr;
  }

  .wiki-thumb {
    max-height: 280px;
  }


  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-grid,
  .two-column,
  .pairing-card {
    grid-template-columns: 1fr;
  }

  .search-bar {
    flex-direction: column;
  }

  .search-bar .btn,
  .search-bar button {
    width: 100%;
  }

  .player-entry {
    flex-direction: column;
  }

  .score-entry {
    flex-wrap: wrap;
  }

  .tier-group,
  .tier-item,
  .vision-card {
    grid-template-columns: 1fr;
  }

  .tier-summary {
    grid-template-columns: 1fr;
  }

  .tier-summary-copy,
  .compact-block summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .tier-label {
    min-height: 70px;
  }
}

/* --- vision-mobile-polish:start --- */
body {
  overflow-x: hidden;
}

.btn,
input[type="text"],
input[type="number"],
input[type="file"] {
  font-size: 1rem;
}

input[type="file"] {
  padding: 0.82rem;
}

.upload-toolbar .btn {
  min-width: 140px;
}

.vision-card {
  align-items: start;
}

.vision-copy {
  min-width: 0;
  display: grid;
  gap: 0.85rem;
}

.vision-header {
  justify-content: space-between;
  align-items: flex-start;
}

.vision-header p {
  margin: 0.3rem 0 0;
}

.vision-preview img {
  aspect-ratio: 4 / 5;
  max-height: 420px;
  object-fit: cover;
}

.vision-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.vision-spec-item {
  min-width: 0;
  padding: 0.8rem 0.85rem;
  border-radius: 12px;
  border: 1px solid #253060;
  background: rgba(11, 15, 36, 0.72);
}

.vision-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: #8ea3e6;
}

.vision-value {
  display: block;
  font-size: 1rem;
  line-height: 1.45;
  color: #f2f5ff;
  word-break: break-word;
}

.vision-detail-stack {
  display: grid;
  gap: 0.7rem;
}

.vision-detail {
  margin: 0;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  border: 1px solid #253060;
  background: rgba(11, 15, 36, 0.72);
  line-height: 1.6;
}

.vision-detail strong {
  display: block;
  margin-bottom: 0.35rem;
  color: #d9e4ff;
}

.vision-raw {
  border-top: 1px solid #253060;
  padding-top: 0.75rem;
}

.vision-raw summary {
  cursor: pointer;
  color: #8fd8ff;
  font-weight: 700;
}

.vision-raw pre {
  margin-top: 0.75rem;
}

#bracket-display {
  scroll-snap-type: x proximity;
}

.bracket-round {
  scroll-snap-align: start;
}

@media (max-width: 700px) {
  .site-header {
    padding: 0.9rem 1rem;
    position: relative;
    top: auto;
    z-index: 1;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  nav {
    width: 100%;
    gap: 0.55rem;
  }

  nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #2a3368;
    background: rgba(16, 22, 52, 0.68);
  }

  .container {
    width: 100%;
    margin: 1rem auto 1.75rem;
    padding-inline: 14px;
    padding-bottom: calc(108px + env(safe-area-inset-bottom));
  }

  .card {
    padding: 1rem;
    border-radius: 16px;
  }

  .hero {
    text-align: left;
    padding: 2rem 1rem 1.2rem;
  }

  .hero h2 {
    line-height: 1.2;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-buttons .btn {
    width: 100%;
  }

  .hero-spotlight,
  .tournament-hero-card,
  .quick-start-card,
  .pairing-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .section-block {
    padding: 0.9rem;
  }

  .search-bar,
  .upload-toolbar {
    align-items: stretch;
  }

  .search-bar,
  .player-entry {
    gap: 0.8rem;
  }

  .upload-toolbar {
    flex-direction: column;
  }

  .upload-toolbar input[type="file"] {
    min-width: 0;
  }

  .search-bar .btn,
  .inline-actions .btn,
  .upload-toolbar .btn,
  .player-entry .btn,
  .align-end .btn,
  #start-btn,
  #load-btn,
  #copy-share-btn {
    width: 100%;
  }

  .tier-label {
    min-height: 60px;
  }

  .tier-item,
  .vision-card {
    padding: 0.8rem;
  }

  .vision-preview img {
    aspect-ratio: 3 / 4;
    max-height: 360px;
  }

  .vision-spec-grid {
    grid-template-columns: 1fr;
  }

  .toolbar {
    align-items: flex-start;
  }

  .toolbar > * {
    width: 100%;
  }

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

  .profile-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }

  .profile-avatar {
    width: 76px;
    height: 76px;
  }

  .inventory-summary-grid {
    grid-template-columns: 1fr;
  }

  .quick-start-card .inline-actions,
  .shortcut-chips {
    align-items: stretch;
  }

  .chip-btn,
  .quick-start-card .btn,
  .inventory-item-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .inventory-item-actions,
  .inventory-item-main {
    flex-direction: column;
    align-items: stretch;
  }

  .inventory-inline-select,
  .inventory-inline-qty {
    width: 100%;
    max-width: none;
  }

  .player-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-remove {
    align-self: flex-end;
  }

  .score-entry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .score-entry .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .score-input {
    width: 100%;
  }

  .bracket-round {
    min-width: min(84vw, 320px);
  }

  .standings-table {
    min-width: 480px;
  }

  .swiss-insight-grid {
    grid-template-columns: 1fr;
  }

  .round-chip {
    min-width: max-content;
  }

  .bracket-round-focus {
    width: 100%;
  }

  .share-shell {
    width: 100%;
  }

  .share-card {
    min-width: 0;
    width: 100%;
  }

  .section-heading,
  .inline-actions,
  .builder-combo-preview {
    flex-direction: column;
    align-items: stretch;
  }

  .builder-combo-preview {
    gap: 0.8rem;
    text-align: left;
  }

  .builder-combo-text {
    font-size: 1.05rem;
    line-height: 1.4;
  }

  .builder-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: none;
    padding-right: 0;
  }

  .builder-item {
    min-height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .site-header h1 {
    font-size: 1.05rem;
  }

  nav a {
    font-size: 0.9rem;
  }

  .hero {
    padding: 2.2rem 1rem;
  }

  .container {
    padding-inline: 12px;
  }

  .btn,
  input[type="text"],
  input[type="number"],
  input[type="file"],
  select,
  textarea {
    font-size: 16px;
  }

  .vision-label {
    font-size: 0.74rem;
  }

  .tournament-meta-grid {
    grid-template-columns: 1fr;
  }

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

  .bottom-nav a {
    font-size: 0.79rem;
    padding: 0.7rem 0 0.95rem;
  }
}
/* --- vision-mobile-polish:end --- */

/* --- NATIVE APP UI & VISUAL BUILDER --- */

/* Hide header nav on mobile */
@media (max-width: 768px) {
  .site-header nav {
    display: none;
  }
  .container {
    margin-bottom: 5rem; /* space for bottom nav */
  }
}

/* Bottom Navigation */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 78px;
  background: rgba(11, 15, 36, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid #2a3368;
  z-index: 40;
  padding-bottom: env(safe-area-inset-bottom);
  pointer-events: auto;
}

@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.bottom-nav a {
  color: #88c9ff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  min-height: 78px;
  padding: 0.72rem 0 0.92rem;
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}

.bottom-nav a:hover,
.bottom-nav a.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(61, 98, 255, 0.14), rgba(255, 77, 122, 0.08));
}

.site-header nav a.active,
.site-header nav a[aria-current="page"] {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(149, 231, 255, 0.2);
}

/* Visual Part Builder */
.builder-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  background: rgba(15, 20, 48, 0.6);
  padding: 0.4rem;
  border-radius: 12px;
  border: 1px solid #29315f;
  overflow-x: auto;
  scrollbar-width: none;
}

.builder-tabs::-webkit-scrollbar {
  display: none;
}

.builder-tab {
  flex: 1 0 0;
  min-width: 120px;
  text-align: center;
  padding: 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  color: #7f90ca;
  transition: all 0.2s ease;
}

.builder-tab.active {
  background: #3d62ff;
  color: #fff;
  box-shadow: 0 4px 12px rgba(61, 98, 255, 0.4);
}

.builder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.8rem;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.builder-item {
  background: rgba(11, 15, 36, 0.7);
  border: 2px solid #2b3365;
  border-radius: 10px;
  padding: 0.8rem 0.4rem;
  text-align: center;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s;
  user-select: none;
}

.builder-item:active {
  transform: scale(0.95);
}

.builder-item.selected {
  border-color: #3d62ff;
  background: rgba(61, 98, 255, 0.2);
  color: #fff;
}

.builder-combo-preview {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(9, 13, 34, 0.8);
  border-radius: 12px;
  text-align: center;
  border: 1px solid #3850a0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.builder-combo-text {
  font-size: 1.2rem;
  font-weight: 800;
  color: #95e7ff;
}

/* --- TOURNAMENT UI POLISH --- */

#bracket-display {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
}

.bracket-round {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 85vw;
  max-width: 320px;
  padding: 0.5rem;
}

.match-card {
  background: rgba(15, 20, 48, 0.95);
  border: 1px solid #3850a0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.match-card:active {
  transform: scale(0.98);
}

.match-card h4 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.score-entry .btn {
  font-size: 1rem;
  padding: 0.8rem 1rem;
  font-weight: bold;
}

.swiss-insight-card {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.swiss-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.swiss-insight-item {
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid #2b3567;
  background: rgba(11, 15, 36, 0.72);
}

.swiss-insight-item span {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
  color: #8ea3e6;
}

.swiss-insight-item strong {
  color: #f4f7ff;
  font-size: 1rem;
}

#round-nav {
  margin-bottom: 0.9rem;
}

.round-chip-row {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.round-chip {
  border: 1px solid #30428f;
  background: rgba(13, 18, 43, 0.82);
  color: #9cb2ff;
  border-radius: 999px;
  padding: 0.65rem 0.95rem;
  font-weight: 700;
  white-space: nowrap;
}

.round-chip.active {
  background: linear-gradient(135deg, rgba(61, 98, 255, 0.24), rgba(255, 77, 122, 0.2));
  color: #ffffff;
  border-color: #6c8fff;
  box-shadow: 0 8px 18px rgba(18, 28, 69, 0.35);
}

.bracket-round-focus {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 0;
}