:root {
  --paper: #fff8e8;
  --paper-2: #f8e6bd;
  --ink: #4b210a;
  --muted: #86674f;
  --red: #ff594d;
  --red-dark: #dd352f;
  --blue: #55b9f5;
  --blue-dark: #1674b8;
  --yellow: #ffc843;
  --green: #53b86b;
  --card: rgba(255,255,255,.88);
  --line: rgba(75,33,10,.14);
  --shadow: 0 24px 70px rgba(84,43,9,.18);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 7%, rgba(255,200,67,.32), transparent 28rem),
    radial-gradient(circle at 94% 88%, rgba(85,185,245,.25), transparent 31rem),
    var(--paper);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.gate {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
}
.gate-art {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.96) 0 4px, transparent 5px),
    radial-gradient(circle at 84% 32%, rgba(255,255,255,.86) 0 3px, transparent 4px),
    linear-gradient(145deg, #5fc9ff 0%, #8cddff 43%, #c4efff 100%);
  border-right: 6px solid var(--ink);
}
.gate-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 60vw;
  height: 60vw;
  min-width: 680px;
  min-height: 680px;
  right: -22vw;
  bottom: -35vw;
  border: clamp(70px, 8vw, 135px) solid rgba(255,255,255,.28);
  border-radius: 50%;
  pointer-events: none;
}
.gate-art::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -6%;
  right: -6%;
  bottom: -7%;
  height: 31%;
  background: #ffc843;
  border-top: 6px solid var(--ink);
  transform: rotate(-2deg);
  box-shadow: inset 0 22px 0 rgba(255,255,255,.25);
}
.gate-art-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .16;
  background-image:
    linear-gradient(rgba(75,33,10,.52) 2px, transparent 2px),
    linear-gradient(90deg, rgba(75,33,10,.52) 2px, transparent 2px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
.gate-art-copy {
  position: absolute;
  z-index: 5;
  top: clamp(52px, 8vh, 100px);
  left: clamp(32px, 5vw, 78px);
  max-width: 540px;
}
.gate-season {
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  color: #fff;
  background: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 5px 0 rgba(255,255,255,.72);
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .12em;
}
.gate-art-copy h2 {
  margin: 21px 0 14px;
  color: var(--ink);
  font-size: clamp(57px, 6vw, 102px);
  line-height: .91;
  letter-spacing: -.07em;
  text-shadow: 4px 5px 0 rgba(255,255,255,.72);
}
.gate-art-copy h2 em {
  position: relative;
  color: #fff;
  font-style: normal;
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
}
.gate-art-copy h2 em::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -3%;
  right: -8%;
  bottom: 4%;
  height: 28%;
  background: var(--red);
  transform: rotate(-2deg);
  border-radius: 50%;
}
.gate-art-copy p {
  display: inline-block;
  margin: 0;
  padding: 12px 18px 13px;
  color: var(--ink);
  background: rgba(255,255,255,.88);
  border: 3px solid var(--ink);
  border-radius: 14px 19px 12px 18px;
  box-shadow: 5px 6px 0 var(--ink);
  font-size: clamp(15px, 1.4vw, 21px);
  font-weight: 800;
  line-height: 1.45;
  transform: rotate(-1deg);
}
.gate-art-copy p b { color: var(--red-dark); }
.mascot-stage {
  position: absolute;
  z-index: 4;
  left: 22%;
  right: 3%;
  bottom: 11%;
  height: 60%;
}
.mascot {
  position: absolute;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 18px 0 rgba(75,33,10,.13)) drop-shadow(0 18px 24px rgba(75,33,10,.16));
  transform-origin: 50% 100%;
}
.mascot-bengbeng {
  z-index: 2;
  width: min(43vw, 650px);
  max-height: 76%;
  left: 0;
  bottom: 0;
  transform: rotate(-5deg);
  animation: mascotBounce 4s ease-in-out infinite;
}
.mascot-tiaotiao {
  z-index: 3;
  width: min(24vw, 355px);
  max-height: 88%;
  right: 0;
  bottom: -2%;
  transform: rotate(5deg);
  animation: mascotHop 3.4s ease-in-out infinite .25s;
}
.mascot-speech {
  position: absolute;
  z-index: 5;
  top: 2%;
  right: 4%;
  padding: 13px 18px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 20px 20px 20px 6px;
  box-shadow: 5px 6px 0 var(--ink);
  font-size: 16px;
  font-weight: 1000;
  transform: rotate(3deg);
}
.mascot-speech b { display: block; color: var(--red-dark); font-size: 11px; letter-spacing: .12em; }
.scrap-orbit {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-weight: 1000;
}
.orbit-one { width: 76px; height: 76px; right: 9%; top: 18%; color: var(--yellow); font-size: 72px; animation: gearSpin 12s linear infinite; }
.orbit-two { left: 8%; bottom: 31%; color: #fff; font-size: 48px; transform: rotate(-15deg); }
.orbit-three { width: 38px; height: 38px; left: 9%; bottom: 19%; color: var(--red); background: var(--ink); border: 10px solid var(--red); border-radius: 50%; }
.gate-track {
  position: absolute;
  z-index: 2;
  left: -2%;
  right: -2%;
  bottom: 6%;
  height: 58px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 4%;
  background: var(--ink);
  border-top: 5px solid #fff;
  transform: rotate(-2deg);
}
.gate-track span { width: 12%; height: 16px; background: #fff; border-radius: 10px; transform: skewX(-24deg); opacity: .92; }
.gate-badges {
  position: absolute;
  z-index: 6;
  left: clamp(30px, 4vw, 64px);
  bottom: 3.5%;
  display: flex;
  gap: 8px;
  transform: rotate(-2deg);
}
.gate-badges > span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px 8px 8px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 4px 0 var(--ink);
  font-size: 12px;
  white-space: nowrap;
}
.gate-badges i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #fff;
  background: var(--red);
  border-radius: 50%;
  font-size: 9px;
  font-style: normal;
  font-weight: 1000;
}
.gate-sticker {
  position: absolute;
  right: clamp(24px, 4vw, 62px);
  bottom: 5%;
  z-index: 8;
  min-width: 132px;
  padding: 12px 18px 14px;
  transform: rotate(3deg);
  color: var(--ink);
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 18px 8px 19px 9px;
  box-shadow: 7px 8px 0 var(--ink);
  text-align: center;
}
.gate-sticker small, .gate-sticker strong, .gate-sticker b { display: block; }
.gate-sticker small {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
}
.gate-sticker strong {
  color: var(--red-dark);
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -.04em;
}
.gate-sticker b { font-size: 11px; letter-spacing: .08em; }
.gate-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 5vw, 82px);
  position: relative;
}
.back-link { position: absolute; top: 28px; left: 42px; color: var(--muted); text-decoration: none; font-weight: 800; }
.gate-logo { width: min(390px, 92%); max-height: 118px; object-fit: contain; object-position: left center; margin-bottom: 24px; }
.eyebrow { color: var(--red-dark); font-size: 13px; font-weight: 1000; letter-spacing: .17em; margin: 0 0 10px; }
.gate h1 { font-size: clamp(38px, 4.3vw, 68px); line-height: 1.07; margin: 0; letter-spacing: -.04em; }
.gate-lead { max-width: 620px; color: var(--muted); font-size: 17px; line-height: 1.8; margin: 20px 0 30px; }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.role-card {
  border: 3px solid var(--ink);
  border-radius: 22px 13px 24px 15px;
  padding: 22px;
  min-height: 212px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 6px 7px 0 var(--ink);
  transition: transform .18s, box-shadow .18s;
}
.role-card:hover { transform: translate(-2px,-3px); box-shadow: 9px 11px 0 var(--ink); }
.role-card.audience { background: #ddf3ff; }
.role-card.control { background: #ffe09a; }
.role-icon { font-size: 34px; }
.role-card strong { font-size: 22px; margin-top: 10px; }
.role-card small { color: var(--muted); margin-top: 6px; line-height: 1.5; }
.role-card b { margin-top: auto; color: var(--red-dark); }
.password-panel, .campus-panel {
  padding: 24px;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 24px 13px 25px 16px;
  box-shadow: 7px 8px 0 var(--ink);
}
.password-panel label span { display: block; font-weight: 900; margin-bottom: 9px; }
.password-panel input { width: 100%; padding: 15px; border: 2px solid var(--line); border-radius: 12px; font-size: 18px; }
.password-panel button[type=submit] { width: 100%; margin-top: 12px; padding: 14px; border: 0; border-radius: 12px; color: #fff; background: var(--ink); font-weight: 900; }
.password-panel p { color: var(--red-dark); font-weight: 800; margin-bottom: 0; }
.campus-panel > p { margin: 0 0 18px; }
.campus-panel > p b, .campus-panel > p span { display: block; }
.campus-panel > p b { font-size: 24px; }
.campus-panel > p span { color: var(--muted); margin-top: 4px; }
.campus-panel > div { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.campus-panel > div button {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 2px 10px;
  align-items: center;
  padding: 17px;
  text-align: left;
  border: 2px solid var(--ink);
  border-radius: 15px;
  background: #fff;
}
.campus-panel > div button:first-child { background: #fff0b9; }
.campus-panel > div button:last-child { background: #dff4ff; }
.campus-panel i { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; color: #fff; background: var(--red); border-radius: 50%; font-style: normal; font-weight: 1000; }
.campus-panel button:last-child i { background: var(--blue-dark); }
.campus-panel strong { font-size: 18px; }
.campus-panel small { color: var(--muted); }
.text-button { border: 0; background: none; color: var(--muted); font-weight: 800; padding: 18px 0 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 12px clamp(18px, 4vw, 64px);
  background: rgba(255,248,232,.94);
  border-bottom: 2px solid var(--line);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; text-align: left; }
.brand img { width: 150px; height: 48px; object-fit: contain; object-position: left; }
.brand span, .brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; }
.brand small { color: var(--red-dark); font-weight: 900; }
.topbar nav { display: flex; gap: 5px; }
.topbar nav button { padding: 11px 15px; border: 0; border-radius: 10px; background: transparent; font-weight: 900; color: var(--muted); }
.topbar nav button.active { color: var(--ink); background: #fff0bc; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.soft-button, .icon-button, .audience-actions button {
  padding: 10px 13px; border: 2px solid var(--line); border-radius: 12px; background: #fff; font-weight: 900;
}
.icon-button { font-size: 20px; }
.sync-status { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.sync-status i, .live-dot i { width: 9px; height: 9px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 5px rgba(83,184,107,.14); }
.sync-status.saving i { background: var(--yellow); }
.control-view { max-width: 1860px; margin: 0 auto; padding: 38px clamp(18px, 4vw, 64px) 80px; }
.control-view.bracket-layout { max-width:none; padding-left:clamp(12px,1.6vw,28px); padding-right:clamp(12px,1.6vw,28px); }
.toast { position: fixed; right: 25px; top: 100px; z-index: 100; padding: 15px 19px; color: #fff; background: var(--ink); border-radius: 12px; box-shadow: var(--shadow); font-weight: 900; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.page-heading-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.page-heading-actions button:disabled { opacity:.42; cursor:not-allowed; box-shadow:none; }
.page-heading .kicker, .section-kicker { color: var(--red-dark); font-weight: 1000; font-size: 12px; letter-spacing: .16em; }
.page-heading h1 { font-size: clamp(34px, 4vw, 58px); margin: 5px 0 3px; letter-spacing: -.045em; }
.page-heading p { color: var(--muted); margin: 0; }
.primary, .danger, .outline {
  border: 2px solid var(--ink); border-radius: 13px; padding: 13px 18px; font-weight: 1000; box-shadow: 4px 5px 0 var(--ink);
}
.primary { color: #fff; background: var(--red); }
.outline { background: #fff; }
.danger { color: #fff; background: var(--ink); }
.primary:active, .danger:active, .outline:active { transform: translate(2px,2px); box-shadow: 2px 3px 0 var(--ink); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(330px,.75fr); gap: 22px; }
.dashboard-hero, .dashboard-side, .panel, .team-row, .bracket-column, .empty-card {
  background: var(--card); border: 2px solid var(--line); border-radius: 25px 15px 27px 17px; box-shadow: 0 15px 40px rgba(86,42,9,.08);
}
.dashboard-hero { min-height: 435px; padding: 34px; position: relative; overflow: hidden; background: linear-gradient(135deg,#fff5ca 0%,#fff 62%,#daf2ff 100%); }
.dashboard-hero::after { content:""; position:absolute; width:260px; height:260px; right:-30px; bottom:-35px; background:url("assets/mascot-bengbeng.png") center/contain no-repeat; }
.dashboard-hero h2 { font-size: clamp(35px, 4vw, 62px); max-width: 750px; margin: 10px 0 15px; line-height: 1.06; }
.dashboard-hero > p { max-width: 660px; color: var(--muted); line-height: 1.7; }
.stat-row { display: flex; gap: 13px; margin-top: 30px; position: relative; z-index: 2; }
.stat-card { min-width: 125px; padding: 16px; background: rgba(255,255,255,.8); border: 2px solid var(--line); border-radius: 14px; }
.stat-card strong, .stat-card span { display: block; }
.stat-card strong { font-size: 30px; }
.stat-card span { color: var(--muted); font-size: 12px; font-weight: 800; }
.dashboard-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; position: relative; z-index: 2; }
.dashboard-side { padding: 27px; }
.dashboard-side h3 { margin: 5px 0 20px; font-size: 24px; }
.next-match { padding: 22px; background: var(--ink); color: #fff; border-radius: 18px 11px 19px 12px; }
.next-match small { color: var(--yellow); font-weight: 1000; letter-spacing: .12em; }
.next-match strong { display: block; font-size: 23px; margin: 12px 0; }
.next-match .versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; text-align: center; }
.next-match .versus b { padding: 10px; border-radius: 10px; background: rgba(255,255,255,.1); overflow-wrap: anywhere; }
.arena-page-heading { align-items:center; }
.arena-live-count { min-width:145px; padding:16px 22px; text-align:center; color:#fff; background:var(--red-dark); border:3px solid var(--ink); border-radius:17px 10px 18px 11px; box-shadow:5px 6px 0 var(--ink); }
.arena-live-count strong,.arena-live-count span { display:block; }
.arena-live-count strong { color:var(--yellow); font-size:38px; line-height:1; }
.arena-live-count span { margin-top:5px; font-size:12px; font-weight:1000; }
.multi-arena-guide { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; padding:14px 18px; color:var(--ink); background:#fff2bd; border:2px solid var(--ink); border-radius:15px 9px 16px 10px; }
.multi-arena-guide b { color:var(--red-dark); }
.multi-arena-guide span { font-size:13px; font-weight:850; }
.arena-control-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:20px; }
.arena-control-card { padding:20px; background:#fff; border:3px solid var(--ink); border-radius:22px 13px 23px 14px; box-shadow:6px 7px 0 rgba(75,33,10,.18); }
.arena-control-card.running { border-color:var(--red); box-shadow:6px 7px 0 var(--red-dark),0 0 28px rgba(255,80,48,.22); }
.arena-control-card.awaiting-decision { background:#fff0aa; }
.arena-control-card > header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.arena-control-card > header small,.arena-control-card > header strong { display:block; }
.arena-control-card > header small { color:var(--red-dark); font-size:11px; font-weight:1000; letter-spacing:.08em; }
.arena-control-card > header strong { margin-top:4px; font-size:20px; }
.arena-state-pill { padding:7px 10px; color:#fff; background:var(--green); border-radius:999px; font-size:10px; font-weight:1000; letter-spacing:.12em; }
.arena-control-card.available .arena-state-pill { color:var(--ink); background:var(--yellow); }
.arena-card-versus { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; margin:18px 0 12px; }
.arena-card-versus > div { min-width:0; padding:13px; text-align:center; background:#fff7dd; border:2px solid var(--line); border-radius:13px; }
.arena-card-versus i { width:29px; height:29px; display:grid; place-items:center; margin:0 auto 7px; color:#fff; background:var(--red); border-radius:50%; font-style:normal; font-weight:1000; }
.arena-card-versus > div:last-child i { background:var(--blue-dark); }
.arena-card-versus b,.arena-card-versus small { display:block; overflow-wrap:anywhere; }
.arena-card-versus small { margin-top:3px; color:var(--muted); }
.arena-card-versus > span { font-size:12px; font-weight:1000; }
.arena-card-timer { text-align:center; font-family:"SF Mono",ui-monospace,monospace; font-size:clamp(54px,5vw,78px); font-weight:1000; line-height:1; color:var(--red-dark); font-variant-numeric:tabular-nums; }
.arena-control-card > footer { display:flex; gap:10px; margin-top:15px; }
.arena-control-card > footer button { flex:1; }
.audience-multi-live { margin-bottom:24px; padding:22px; color:#fff; background:var(--ink); border:4px solid var(--red); border-radius:24px 14px 26px 16px; box-shadow:7px 8px 0 var(--red-dark); }
.audience-multi-live > header { display:flex; justify-content:space-between; align-items:center; }
.audience-multi-live h2 { margin:4px 0 0; color:#fff; }
.audience-multi-live > header > b { color:var(--yellow); }
.audience-multi-live > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px; margin-top:16px; }
.audience-multi-live article { padding:15px; background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.2); border-radius:14px; }
.audience-multi-live article small,.audience-multi-live article strong,.audience-multi-live article em { display:block; }
.audience-multi-live article strong { margin:6px 0; overflow-wrap:anywhere; }
.audience-multi-live article strong span { padding:0 6px; color:var(--yellow); font-size:10px; }
.audience-multi-live article > div { color:var(--yellow); font-family:"SF Mono",ui-monospace,monospace; font-size:42px; font-weight:1000; }
.audience-multi-live article em { color:#fff0b4; font-size:11px; font-style:normal; font-weight:900; }
.rule-list { margin: 20px 0 0; padding: 0; list-style: none; }
.rule-list li { padding: 11px 0; border-bottom: 1px dashed var(--line); color: var(--muted); font-size: 14px; }
.rule-list b { color: var(--ink); }

.tournament-cycle-card {
  display:grid;
  grid-template-columns:minmax(190px,.65fr) minmax(280px,1.25fr) auto;
  align-items:center;
  gap:24px;
  margin-top:22px;
  padding:23px 25px;
  background:linear-gradient(125deg,#fff 0%,#fff5c8 58%,#dff4ff 100%);
  border:3px solid var(--ink);
  border-radius:22px 13px 24px 15px;
  box-shadow:6px 7px 0 rgba(75,33,10,.16);
}
.tournament-cycle-card.complete { background:linear-gradient(125deg,#edffef 0%,#fff9cf 60%,#dff4ff 100%); }
.cycle-status span,.cycle-status strong,.cycle-status small { display:block; }
.cycle-status span { width:max-content; margin-bottom:8px; padding:6px 10px; color:#fff; background:var(--red-dark); border-radius:999px; font-size:10px; font-weight:1000; letter-spacing:.1em; }
.tournament-cycle-card.complete .cycle-status span { background:#318b4b; }
.cycle-status strong { font-size:23px; }
.cycle-status small { margin-top:5px; color:var(--muted); font-weight:800; }
.cycle-copy { padding-left:23px; border-left:2px dashed var(--line); }
.cycle-copy b { font-size:17px; }
.cycle-copy p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }
.archive-next-button { min-width:230px; padding:15px 18px; color:#fff; background:var(--ink); border:3px solid var(--ink); border-radius:14px; box-shadow:4px 5px 0 var(--yellow); font-weight:1000; }
.archive-next-button:hover:not(:disabled) { color:var(--ink); background:var(--yellow); }
.archive-next-button:disabled { opacity:.38; cursor:not-allowed; box-shadow:none; }
.archive-section { margin-top:30px; padding:28px; background:rgba(255,255,255,.72); border:2px solid var(--line); border-radius:25px 15px 27px 17px; }
.archive-section.archive-empty { display:flex; align-items:center; min-height:145px; background:rgba(255,255,255,.48); border-style:dashed; }
.archive-section > header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.archive-section h2 { margin:4px 0; font-size:30px; }
.archive-section p { margin:0; color:var(--muted); }
.archive-count { min-width:72px; padding:9px 13px; text-align:center; color:#fff; background:var(--ink); border-radius:999px; font-size:13px; font-weight:1000; }
.archive-list { display:grid; gap:12px; }
.archive-card { overflow:hidden; background:#fff; border:2px solid var(--line); border-radius:17px 10px 19px 12px; }
.archive-card[open] { border-color:var(--ink); box-shadow:4px 5px 0 rgba(75,33,10,.12); }
.archive-card summary { display:grid; grid-template-columns:minmax(190px,1fr) minmax(150px,.7fr) minmax(110px,.45fr) auto; align-items:center; gap:18px; padding:18px 20px; list-style:none; cursor:pointer; }
.archive-card summary::-webkit-details-marker { display:none; }
.archive-title small,.archive-title strong,.archive-champion small,.archive-champion b,.archive-progress b,.archive-progress small { display:block; }
.archive-title small { color:var(--red-dark); font-size:10px; font-weight:1000; letter-spacing:.08em; }
.archive-title strong { margin-top:4px; font-size:19px; }
.archive-champion,.archive-progress { padding-left:16px; border-left:2px solid var(--line); }
.archive-champion small,.archive-progress small { color:var(--muted); font-size:10px; font-weight:900; }
.archive-champion b,.archive-progress b { margin-bottom:2px; overflow-wrap:anywhere; }
.archive-toggle { padding:8px 11px; color:var(--blue-dark); background:#e6f6ff; border-radius:9px; font-size:11px; font-weight:1000; }
.archive-card[open] .archive-toggle { color:#fff; background:var(--ink); }
.archive-detail { padding:0 20px 20px; border-top:1px dashed var(--line); }
.archive-podium { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:18px 0; }
.archive-podium span { min-width:0; padding:13px; background:#fff7dc; border-radius:11px; }
.archive-podium small,.archive-podium b,.archive-podium em { display:block; }
.archive-podium small { color:var(--red-dark); font-weight:1000; }
.archive-podium b { margin:4px 0 2px; overflow-wrap:anywhere; }
.archive-podium em { color:var(--muted); font-size:12px; font-style:normal; }
.archive-match-list { display:grid; gap:7px; }
.archive-match-row { display:grid; grid-template-columns:38px minmax(0,1fr) minmax(110px,auto); align-items:center; gap:12px; padding:11px 13px; background:#fffaf0; border:1px solid var(--line); border-radius:10px; }
.archive-match-row > span { color:var(--muted); font-family:ui-monospace,monospace; font-weight:1000; }
.archive-match-row small,.archive-match-row b { display:block; }
.archive-match-row small { color:var(--muted); font-size:10px; }
.archive-match-row b { margin-top:2px; overflow-wrap:anywhere; }
.archive-match-row i { padding:0 5px; color:var(--red-dark); font-size:10px; font-style:normal; }
.archive-match-row > strong { justify-self:end; color:var(--muted); font-size:12px; }
.archive-match-row > strong.done { color:#248441; }
.audience-archives { margin-top:32px; }

.panel { padding: 26px; margin-bottom: 22px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.panel-head h2 { margin: 3px 0; font-size: 27px; }
.panel-head p { margin: 4px 0 0; color: var(--muted); }
.import-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.spreadsheet-grid { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr); gap:18px; }
.sheet-dropzone {
  min-height:230px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:24px;
  text-align:center;
  color:var(--ink);
  background:linear-gradient(145deg,#e4f6ff,#fff 62%);
  border:3px dashed var(--blue-dark);
  border-radius:22px 13px 24px 15px;
  cursor:pointer;
  transition:transform .18s,background .18s,box-shadow .18s;
}
.sheet-dropzone:hover,.sheet-dropzone.dragging { transform:translateY(-3px); background:#d9f2ff; box-shadow:0 12px 28px rgba(22,116,184,.15); }
.sheet-icon { font-size:42px; }
.sheet-dropzone strong { font-size:22px; }
.sheet-dropzone small { color:var(--muted); }
.sheet-dropzone b { margin-top:8px; color:var(--blue-dark); font-size:13px; }
.sheet-import-summary {
  min-height:230px;
  padding:26px;
  background:#fff7dc;
  border:2px solid var(--line);
  border-radius:22px 13px 24px 15px;
}
.sheet-import-summary h3 { margin:6px 0 17px; font-size:22px; }
.sheet-columns { display:flex; align-items:center; gap:10px; }
.sheet-columns b { flex:1; padding:13px; text-align:center; background:#fff; border:2px solid var(--ink); border-radius:11px; }
.sheet-columns span { color:var(--red-dark); font-weight:1000; }
.sheet-import-summary > p { min-height:42px; margin:17px 0; color:var(--muted); line-height:1.55; }
.sheet-actions { display:flex; flex-wrap:wrap; gap:10px; }
.sheet-actions button { box-shadow:none; }
.or-divider { display:flex; align-items:center; gap:14px; margin:26px 0; color:var(--muted); font-size:12px; font-weight:1000; letter-spacing:.14em; }
.or-divider::before,.or-divider::after { content:""; height:1px; flex:1; background:var(--line); }
.field { display: grid; gap: 7px; }
.field span { font-size: 13px; font-weight: 900; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px; border: 2px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink);
}
.field textarea { min-height: 132px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.team-list { display: grid; gap: 12px; }
.team-row { padding: 17px; display: grid; grid-template-columns: 48px minmax(150px,1fr) minmax(150px,1fr) minmax(160px,.8fr) auto; align-items: center; gap: 13px; }
.seed { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #fff0bc; font-weight: 1000; }
.team-row strong, .team-row span { display: block; }
.team-row small { color: var(--muted); }
.video-status { padding: 8px 10px; background: #e7f6ff; border-radius: 9px; font-size: 13px; font-weight: 900; color: var(--blue-dark); }
.video-status.none { color: var(--muted); background: #eee9df; }
.row-actions { display: flex; gap: 7px; }
.row-actions button { border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; background: #fff; font-weight: 900; }
.row-actions .delete { color: var(--red-dark); }
.hint { padding: 13px 15px; color: var(--muted); background: #fff7dc; border-left: 5px solid var(--yellow); border-radius: 8px; }

.bracket-scroll {
  width: 100%;
  max-height: none;
  overflow: visible;
  padding: 7px 8px 28px 2px;
}
.climb-bracket {
  min-width: calc(var(--bracket-width, 1260px) + 60px);
  position: relative;
  padding: 115px 25px 35px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 30px 17px 32px 19px;
  background:
    linear-gradient(165deg, rgba(255,255,255,.9), rgba(255,240,188,.72) 58%, rgba(210,241,255,.78)),
    repeating-linear-gradient(0deg, transparent 0 36px, rgba(75,33,10,.06) 37px 38px);
  box-shadow: 8px 9px 0 var(--ink);
}
.climb-bracket::before {
  content: "START";
  position: absolute;
  left: 28px;
  bottom: 318px;
  padding: 8px 12px;
  color: #fff;
  background: var(--red);
  border: 2px solid var(--ink);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .15em;
  transform: rotate(-4deg);
}
.climb-summit {
  position: absolute;
  z-index: 3;
  right: 46px;
  top: 20px;
  min-width: 248px;
  padding: 15px 19px 16px 73px;
  border: 3px solid var(--ink);
  border-radius: 18px 10px 19px 11px;
  background: #ffe376;
  box-shadow: 5px 6px 0 var(--ink);
}
.climb-summit > span { position: absolute; left: 18px; top: 8px; font-size: 43px; }
.climb-summit small, .climb-summit strong { display: block; }
.climb-summit small { color: var(--red-dark); font-size: 10px; font-weight: 1000; letter-spacing: .13em; }
.climb-summit strong { margin-top: 4px; font-size: 19px; overflow-wrap: anywhere; }
.climb-route {
  position: absolute;
  inset: 90px 80px 280px 95px;
  pointer-events: none;
  opacity: .32;
}
.climb-route::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 78%;
  border-top: 8px dashed var(--red);
  transform: skewY(-22deg);
  transform-origin: left bottom;
}
.climb-route i {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 5px solid var(--red);
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}
.climb-route i:nth-child(1) { left: 22%; bottom: 18%; }
.climb-route i:nth-child(2) { left: 47%; bottom: 41%; }
.climb-route i:nth-child(3) { left: 70%; bottom: 63%; }
.climb-route i:nth-child(4) { right: 0; top: 0; }
.bracket {
  min-width: var(--bracket-width, 1260px);
  min-height: 940px;
  display: grid;
  grid-template-columns: repeat(var(--round-count, 4), minmax(235px,1fr));
  gap: 22px;
  align-items: stretch;
  position: relative;
  z-index: 2;
}
.bracket-column {
  padding: 17px;
  position: relative;
  display: flex;
  flex-direction: column;
  transform: translateY(calc((var(--round-count, 4) - var(--round-index, 0) - 1) * 48px - 38px));
}
.bracket-column:not(.last-round)::after {
  content: "↗";
  position: absolute;
  right: -24px;
  top: 46%;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--red-dark);
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 4px 0 var(--ink);
  font-size: 20px;
  font-weight: 1000;
}
.level-tag { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.level-tag span { color: var(--blue-dark); font-size: 10px; font-weight: 1000; letter-spacing: .13em; }
.level-tag b { color: var(--muted); font-size: 10px; }
.bracket-column h3 { font-size: 19px; letter-spacing: .08em; margin: 0 0 14px; color: var(--red-dark); }
.match-stack { display: flex; flex: 1; flex-direction: column; justify-content: space-around; gap: 13px; }
.match-card { padding: 14px; border: 2px solid var(--line); border-radius: 14px; background: #fff; }
.match-card.completed { background: #f2fbef; border-color: rgba(83,184,107,.35); }
.match-card.live { background: #fff2c8; border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255,200,67,.2); }
.match-card > small { color: var(--muted); font-weight: 900; }
.match-team { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border: 0; border-bottom: 1px dashed var(--line); background: none; text-align: left; }
.match-team b { overflow-wrap: anywhere; }
.match-team.winner b::after { content: " ✓"; color: var(--green); }
.match-card footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; color: var(--muted); font-size: 12px; }
.match-card footer button { border: 0; border-radius: 8px; padding: 8px 10px; color: #fff; background: var(--ink); font-weight: 900; }
.bronze-lane {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(260px,.8fr) minmax(380px,1.2fr);
  gap: 28px;
  align-items: center;
  width: min(800px, 75%);
  margin: 25px auto 0;
  padding: 22px 26px;
  border: 2px dashed #9e6d31;
  border-radius: 19px;
  background: rgba(255,255,255,.78);
}
.bronze-lane > div > span { color: var(--blue-dark); font-size: 11px; font-weight: 1000; letter-spacing: .13em; }
.bronze-lane h3 { margin: 5px 0; font-size: 24px; }
.bronze-lane p { margin: 0; color: var(--muted); }
.bronze-lane .match-card { margin: 0; }

.draw-summary {
  display: grid;
  grid-template-columns: 74px minmax(300px,1fr) minmax(260px,.65fr);
  gap: 20px;
  align-items: center;
  margin: 0 0 22px;
  padding: 18px 22px;
  border: 3px solid var(--ink);
  border-radius: 19px 11px 21px 13px;
  background: linear-gradient(135deg,#fff9e9,#fff0b8 58%,#e4f5ff);
  box-shadow: 5px 6px 0 var(--ink);
}
.draw-dice {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--red);
  border: 3px solid var(--ink);
  border-radius: 14px 8px 15px 9px;
  box-shadow: 3px 4px 0 var(--ink);
  font-size: 38px;
  line-height: 1;
  transform: rotate(-4deg);
}
.draw-copy span {
  color: var(--red-dark);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .14em;
}
.draw-copy h3 { margin: 4px 0 6px; font-size: 22px; }
.draw-copy p { margin: 0; color: var(--muted); line-height: 1.55; }
.bye-team-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding-left: 20px;
  border-left: 2px dashed rgba(75,33,10,.24);
}
.bye-team-list small { width: 100%; color: var(--muted); font-weight: 900; }
.bye-team-list b {
  padding: 7px 10px;
  color: var(--blue-dark);
  background: #fff;
  border: 1px solid rgba(28,135,187,.24);
  border-radius: 999px;
  font-size: 12px;
}

.symmetric-bracket {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 0 clamp(5px,1.1vw,20px) 28px;
  border: 4px solid var(--ink);
  border-radius: 30px 17px 32px 19px;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,200,67,.38),transparent 16%),
    linear-gradient(145deg,rgba(255,255,255,.97),rgba(255,244,208,.9) 52%,rgba(222,244,255,.94)),
    repeating-linear-gradient(0deg,transparent 0 35px,rgba(75,33,10,.06) 36px 37px);
  box-shadow: 9px 10px 0 var(--ink);
  overflow: hidden;
}
.bracket-compass {
  min-height: 62px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin: 0 calc(clamp(5px,1.1vw,20px) * -1);
  padding: 10px clamp(12px,1.5vw,28px);
  color: #fff;
  background: var(--ink);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.bracket-compass span:last-child { text-align: right; }
.bracket-compass b {
  padding: 8px 14px;
  color: var(--ink);
  background: var(--yellow);
  border-radius: 999px;
  letter-spacing: .08em;
}
.duel-bracket-board {
  --center-gap: clamp(6px,.75vw,18px);
  width: 100%;
  height: var(--board-height);
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(168px,13vw,225px) minmax(0,1fr);
  column-gap: var(--center-gap);
  position: relative;
}
.bracket-links {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.bracket-links path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.bracket-links .path-shadow {
  stroke: rgba(255,255,255,.96);
  stroke-width: 7;
}
.bracket-links .path-line {
  stroke: var(--red);
  stroke-width: 3;
}
.bracket-side {
  --round-gap: clamp(4px,.6vw,14px);
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--side-rounds),minmax(0,1fr));
  gap: var(--round-gap);
}
.weighted-rounds .bracket-left {
  grid-template-columns: minmax(0,1.28fr) repeat(var(--inner-rounds),minmax(0,1fr));
}
.weighted-rounds .bracket-right {
  grid-template-columns: repeat(var(--inner-rounds),minmax(0,1fr)) minmax(0,1.28fr);
}
.bracket-round {
  height: 100%;
  position: relative;
  min-width: 0;
}
.round-heading {
  position: absolute;
  z-index: 8;
  top: 13px;
  left: 0;
  right: 0;
  min-height: 52px;
  padding: 8px clamp(3px,.45vw,10px);
  text-align: center;
  background: rgba(255,255,255,.94);
  border: 2px solid var(--ink);
  border-radius: 12px 7px 13px 8px;
  box-shadow: 3px 3px 0 rgba(75,33,10,.18);
}
.round-heading small,.round-heading strong,.round-heading span { display: block; }
.round-heading small { color: var(--red-dark); font-size: clamp(7px,.52vw,9px); font-weight: 1000; letter-spacing: .08em; }
.round-heading strong { margin: 2px 0; font-size: clamp(11px,.85vw,15px); }
.round-heading span { color: var(--muted); font-size: clamp(7px,.52vw,9px); font-weight: 900; }
.round-pairs {
  position: absolute;
  inset: 76px 0 18px;
  display: flex;
  flex-direction: column;
}
.duel-pair {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.duel-slot {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
}
.duel-slot::before,.duel-slot::after,.duel-pair::before,.duel-pair::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.duel-slot::before,.duel-slot::after,.duel-pair::before,.duel-pair::after { display: none; }
.duel-slot::before,.duel-slot::after {
  top: 50%;
  width: calc(var(--round-gap) / 2);
  border-top: 3px solid var(--red);
}
.duel-slot::before { left: calc(var(--round-gap) / -2); }
.duel-slot::after { right: calc(var(--round-gap) / -2); }
.duel-pair:not(.single)::before {
  top: 25%;
  bottom: 25%;
  border-right: 3px solid var(--red);
}
.duel-pair::after {
  top: 50%;
  width: calc(var(--round-gap) / 2);
  border-top: 3px solid var(--red);
}
.bracket-round.left .duel-pair::before { right: calc(var(--round-gap) / -2); }
.bracket-round.left .duel-pair::after { right: calc(var(--round-gap) * -1); }
.bracket-round.right .duel-pair::before { left: calc(var(--round-gap) / -2); }
.bracket-round.right .duel-pair::after { left: calc(var(--round-gap) * -1); }
.bracket-round.left.outer .duel-slot::before,
.bracket-round.right.outer .duel-slot::after { display: none; }
.duel-slot > .match-card {
  z-index: 2;
  width: 100%;
  min-height: 106px;
  padding: clamp(5px,.5vw,10px);
  border-color: var(--ink);
  border-radius: 13px 7px 14px 8px;
  box-shadow: 3px 4px 0 rgba(75,33,10,.16);
}
.duel-slot > .match-card > small { font-size: clamp(7px,.48vw,9px); letter-spacing: .04em; }
.duel-slot .match-team {
  align-items: flex-start;
  flex-direction: column;
  gap: 1px;
  padding: 5px 0;
  font-size: clamp(9px,.68vw,12px);
  line-height: 1.18;
}
.duel-slot .match-team span { color: var(--muted); font-size: clamp(7px,.54vw,10px); overflow-wrap: anywhere; }
.duel-slot .match-card footer { align-items: flex-start; flex-wrap: wrap; gap: 3px; margin-top: 5px; font-size: clamp(7px,.52vw,10px); }
.duel-slot .match-card footer button { padding: 5px 6px; font-size: clamp(7px,.52vw,10px); }
.match-card.bye {
  background: linear-gradient(135deg,#fff4bd,#fff 62%);
  border-color: var(--yellow);
}
.bye-stamp {
  margin: 6px 0 2px;
  padding: 5px 7px;
  text-align: center;
  color: var(--red-dark);
  background: #fff0b5;
  border: 1px dashed var(--red-dark);
  border-radius: 7px;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .05em;
}

.bracket-center {
  height: 100%;
  position: relative;
  z-index: 4;
}
.champion-crown {
  position: absolute;
  z-index: 5;
  top: 22px;
  left: 50%;
  width: calc(100% - 8px);
  min-height: 112px;
  padding: 14px 10px 14px clamp(54px,4.7vw,78px);
  color: var(--ink);
  background: #ffe16a;
  border: 4px solid var(--ink);
  border-radius: 22px 12px 23px 13px;
  box-shadow: 6px 7px 0 var(--ink);
  transform: translateX(-50%) rotate(-1deg);
}
.champion-crown > span { position: absolute; left: clamp(11px,1.1vw,19px); top: 10px; color: var(--red); font-size: clamp(38px,3.4vw,54px); }
.champion-crown small,.champion-crown strong { display: block; }
.champion-crown small { color: var(--red-dark); font-size: 9px; font-weight: 1000; letter-spacing: .14em; }
.champion-crown strong { margin-top: 5px; font-size: clamp(14px,1.2vw,20px); overflow-wrap: anywhere; }
.champion-crown.has-champion { background: linear-gradient(135deg,#fff0a3,#ffbf31); }
.final-stage {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: calc(100% - 8px);
  padding: clamp(8px,.85vw,14px);
  background: rgba(255,255,255,.95);
  border: 4px solid var(--red);
  border-radius: 22px 12px 23px 13px;
  box-shadow: 6px 7px 0 var(--ink);
  transform: translate(-50%,-50%);
}
.final-stage::before,.final-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--center-gap) / 2 + 4px);
  border-top: 4px solid var(--red);
}
.final-stage::before { left: calc(var(--center-gap) / -2 - 8px); }
.final-stage::after { right: calc(var(--center-gap) / -2 - 8px); }
.final-stage > span { color: var(--red-dark); font-size: 10px; font-weight: 1000; letter-spacing: .14em; }
.final-stage > h3 { margin: 3px 0 9px; font-size: clamp(16px,1.25vw,22px); }
.final-stage .match-card { border-color: var(--ink); }
.bronze-stage {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 22px;
  width: calc(100% - 8px);
  padding: clamp(7px,.7vw,12px);
  background: rgba(229,246,255,.96);
  border: 2px dashed var(--blue-dark);
  border-radius: 16px 9px 17px 10px;
  transform: translateX(-50%);
}
.bronze-stage > span { color: var(--blue-dark); font-size: 9px; font-weight: 1000; letter-spacing: .1em; }
.bronze-stage > h3 { margin: 3px 0 8px; font-size: 17px; }
.bronze-stage .match-card { padding: 9px; }
.bronze-stage .match-team { padding: 5px 0; font-size: 11px; }
.bronze-stage .match-card footer { margin-top: 5px; font-size: 9px; }
.solo-final { grid-template-columns: 0 280px 0; justify-content: center; }
.solo-final .bracket-side { display: none; }

.symmetric-bracket.compact .duel-slot > .match-card { min-height: 98px; }
.symmetric-bracket.compact .match-card footer button { width: 100%; }
.symmetric-bracket.ultra-compact .bracket-compass { font-size: 9px; }
.symmetric-bracket.ultra-compact .round-heading { padding-left: 2px; padding-right: 2px; }
.symmetric-bracket.ultra-compact .duel-slot > .match-card { min-height: 92px; }
.symmetric-bracket.ultra-compact .duel-slot .match-team { font-size: clamp(7px,.57vw,10px); }
.symmetric-bracket.ultra-compact .duel-slot .match-team span { display: none; }
.symmetric-bracket.ultra-compact .duel-slot .match-card footer span { width: 100%; }

.podium { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 22px; }
.podium > div { min-height: 120px; display: grid; place-items: center; text-align: center; padding: 15px; border: 2px solid var(--line); border-radius: 18px; background: #fff; }
.podium > div:first-child { background: #fff1ae; }
.podium span, .podium strong { display: block; }
.podium span { color: var(--muted); font-size: 12px; font-weight: 900; }
.podium strong { font-size: 20px; margin-top: 7px; }
.empty-card { padding: 55px 25px; text-align: center; color: var(--muted); }
.empty-card img { width: 150px; height: 130px; object-fit: contain; }
.empty-card h2 { color: var(--ink); margin: 5px 0 8px; }

.audience-app { min-height: 100vh; background: linear-gradient(155deg,#fff8df,#f7e8c4 48%,#dff4ff); }
.audience-header {
  min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 12px clamp(18px,4vw,65px); border-bottom: 3px solid var(--ink); background: rgba(255,248,232,.94);
}
.audience-brand { display: flex; align-items: center; gap: 18px; }
.audience-brand img { width: 190px; height: 56px; object-fit: contain; object-position: left; }
.audience-brand span, .audience-brand strong { display: block; }
.audience-brand b { color: var(--red-dark); font-size: 11px; letter-spacing: .16em; }
.audience-brand strong { font-size: 21px; }
.audience-actions { display: flex; align-items: center; gap: 10px; }
.live-dot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--red-dark); background: #fff; border-radius: 99px; font-weight: 1000; }
.live-dot i { background: var(--red); animation: pulse 1.1s infinite; }
#audienceView { max-width: 1860px; margin: 0 auto; padding: 28px clamp(16px,4vw,65px) 70px; }
.live-stage {
  position: relative; overflow: hidden; min-height: 520px; display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center;
  border: 5px solid var(--ink); border-radius: 35px 18px 38px 20px; background: #fff4c6; box-shadow: 10px 12px 0 var(--ink);
}
.live-stage::before { content:""; position:absolute; inset:0; opacity:.22; background-image:linear-gradient(rgba(75,33,10,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(75,33,10,.12) 1px,transparent 1px); background-size:34px 34px; }
.live-stage.waiting { grid-template-columns: 1fr; text-align: center; }
.stage-team, .stage-center { position: relative; z-index: 2; padding: 34px; text-align: center; }
.stage-team h2 { margin: 12px 0 4px; font-size: clamp(29px,3vw,48px); overflow-wrap: anywhere; }
.stage-team p { color: var(--muted); font-weight: 800; }
.stage-team.red { border-right: 2px dashed rgba(75,33,10,.2); }
.stage-team.blue { border-left: 2px dashed rgba(75,33,10,.2); }
.team-badge { width: 90px; height: 90px; margin: auto; display: grid; place-items:center; border:4px solid var(--ink); border-radius:50%; color:#fff; background:var(--red); font-size:34px; font-weight:1000; box-shadow:5px 6px 0 var(--ink); }
.blue .team-badge { background: var(--blue-dark); }
.stage-center small { display:block; color:var(--red-dark); font-weight:1000; letter-spacing:.15em; }
.audience-timer { font-size: clamp(80px,11vw,175px); line-height: .95; margin: 18px 0; font-weight: 1000; letter-spacing: -.08em; font-variant-numeric: tabular-nums; }
.stage-center strong { font-size:22px; }
.stage-rule { margin-top:18px; color:var(--muted); font-size:13px; }
.live-stage.final-ten { background:#ffd64f; animation: stageShake .42s infinite; }
.live-stage.final-ten .audience-timer { color:var(--red-dark); transform:scale(1.12); animation: timerBeat 1s infinite; }
.audience-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:22px; margin-top:32px; }
.audience-panel { padding:25px; background:rgba(255,255,255,.86); border:2px solid var(--line); border-radius:25px 15px 27px 17px; }
.audience-panel h2 { margin:3px 0 18px; font-size:28px; }
.mini-match { display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center; padding:14px 0; border-bottom:1px dashed var(--line); }
.mini-match .number { display:grid; place-items:center; width:45px; height:45px; border-radius:50%; background:#fff0bc; font-weight:1000; }
.mini-match strong, .mini-match small { display:block; }
.mini-match small { color:var(--muted); margin-top:3px; }
.mini-match .status { padding:7px 9px; border-radius:8px; background:#eee8dd; font-size:12px; font-weight:900; }
.mini-match .status.done { color:var(--green); background:#e8f7e4; }
.showcase-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.showcase-card { position:relative; min-height:150px; padding:18px; text-align:left; border:2px solid var(--line); border-radius:17px; background:#fff; overflow:hidden; }
.showcase-card::after { content:"▶"; position:absolute; right:14px; bottom:11px; width:38px; height:38px; display:grid; place-items:center; color:#fff; background:var(--red); border-radius:50%; }
.showcase-card.no-video::after { content:"—"; background:#c6b9a8; }
.showcase-card b, .showcase-card span { display:block; }
.showcase-card b { font-size:19px; }
.showcase-card span { color:var(--muted); margin-top:4px; }
.showcase-card small { position:absolute; left:18px; bottom:15px; color:var(--red-dark); font-weight:900; }

.arena-overlay { position:fixed; inset:0; z-index:200; overflow:auto; color:var(--ink); background:linear-gradient(155deg,#ffe89c,#fff8e8 52%,#d7f3ff); }
.arena { min-height:100vh; display:flex; flex-direction:column; }
.arena-header {
  min-height:88px;
  padding:14px clamp(17px,3vw,48px);
  display:grid;
  grid-template-columns:minmax(150px,220px) minmax(0,1fr) minmax(150px,220px);
  align-items:center;
  gap:18px;
  border-bottom:3px solid var(--ink);
  background:rgba(255,250,235,.78);
}
.arena-header img { width:190px; height:54px; object-fit:contain; object-position:left center; }
.arena-header > div { min-width:0; text-align:center; }
.arena-header small, .arena-header strong { display:block; }
.arena-header small { color:var(--red-dark); font-weight:1000; letter-spacing:.13em; }
.arena-header strong { font-size:clamp(17px,1.4vw,22px); overflow-wrap:anywhere; }
.arena-header-actions { justify-self:end; display:flex; justify-content:flex-end; gap:8px; }
.arena-header-actions button { white-space:nowrap; }
.arena-header-actions .audio { color:var(--red-dark); background:#fff5c7; }
.arena-main {
  flex:1;
  display:grid;
  grid-template-columns:minmax(250px,1fr) minmax(370px,.9fr) minmax(250px,1fr);
  align-items:stretch;
  gap:clamp(18px,2.5vw,48px);
  padding:clamp(28px,4vh,55px) clamp(20px,3vw,58px);
}
.arena-team {
  min-width:0;
  min-height:420px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(28px,3vw,52px);
  text-align:center;
  background:rgba(255,255,255,.78);
  border:4px solid var(--ink);
  border-radius:30px 17px 32px 19px;
  box-shadow:8px 9px 0 var(--ink);
}
.arena-team.red { border-top:12px solid var(--red); }
.arena-team.blue { border-top:12px solid var(--blue-dark); }
.arena-team .team-badge { width:92px; height:92px; font-size:36px; }
.arena-team.blue .team-badge { background:var(--blue-dark); }
.arena-team h2 { max-width:100%; font-size:clamp(30px,3vw,54px); line-height:1.08; margin:24px 0 9px; overflow-wrap:anywhere; }
.arena-team p { margin:0; color:var(--muted); font-size:clamp(18px,1.5vw,25px); font-weight:900; }
.arena-clock {
  min-width:0;
  align-self:center;
  padding:clamp(28px,3vw,48px) clamp(18px,2vw,36px);
  text-align:center;
  background:rgba(255,244,201,.92);
  border:4px solid var(--ink);
  border-radius:34px 19px 36px 21px;
  box-shadow:8px 9px 0 var(--ink);
  overflow:hidden;
}
.arena-clock small { font-weight:1000; color:var(--red-dark); letter-spacing:.16em; }
.arena-clock .timer { max-width:100%; font-size:clamp(105px,10vw,185px); font-weight:1000; line-height:.92; letter-spacing:-.075em; font-variant-numeric:tabular-nums; margin:22px 0 18px; white-space:nowrap; }
.arena-clock .state-label { font-size:22px; font-weight:1000; }
.arena-music-status { display:inline-flex; align-items:center; justify-content:center; min-height:32px; margin-top:10px; padding:7px 13px; color:var(--red-dark); background:rgba(255,255,255,.7); border:2px solid rgba(75,33,10,.16); border-radius:999px; font-size:12px; font-weight:1000; letter-spacing:.08em; }
.arena-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:28px; }
.arena-controls button { min-width:145px; padding:15px 18px; border:3px solid var(--ink); border-radius:13px; box-shadow:5px 6px 0 var(--ink); background:#fff; font-weight:1000; }
.arena-controls .start { color:#fff; background:var(--red); }
.arena-footer { padding:17px 40px; text-align:center; border-top:2px solid var(--line); background:rgba(255,250,235,.72); color:var(--muted); font-weight:800; }
.arena-overlay.counting .arena-clock .timer { color:var(--red-dark); animation:countPop .8s both; }
.arena-overlay.final-thirty { background:linear-gradient(150deg,#ffcf43,#fff0a8 48%,#ff9d68); }
.arena-overlay.final-thirty .arena-clock { border-color:var(--red-dark); box-shadow:8px 9px 0 var(--red-dark),0 0 45px rgba(255,75,35,.42); }
.arena-overlay.final-thirty .arena-music-status { color:#fff; background:var(--red-dark); border-color:#fff; animation:captionFlash .6s steps(2,end) infinite; }
.arena-overlay.final-ten {
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.12) 0 20px,transparent 20px 40px),
    radial-gradient(circle at 50% 45%,#ffcc45,#ee442d 55%,#7a160d);
  animation:stageShake .14s steps(2,end) infinite;
}
.arena-overlay.final-ten::after { content:""; position:fixed; z-index:210; inset:8px; pointer-events:none; border:10px solid rgba(255,255,255,.92); box-shadow:inset 0 0 95px rgba(255,20,0,.68); animation:dangerFrame .18s steps(2,end) infinite; }
.arena-overlay.final-ten .arena-clock { z-index:212; background:rgba(88,9,4,.92); border-color:#fff; box-shadow:9px 10px 0 #3c0905,0 0 70px rgba(255,255,255,.56); }
.arena-overlay.final-ten .arena-clock small,
.arena-overlay.final-ten .arena-clock .state-label { color:#fff; }
.arena-overlay.final-ten .timer.last-ten-number { color:#fff; font-size:clamp(190px,22vw,355px); line-height:.72; letter-spacing:-.08em; text-shadow:0 0 22px #fff,0 0 75px #ff321d; animation:timerBeat .45s steps(2,end) infinite; }
.arena-overlay.final-ten .timer.second-slam { animation:secondSlam .38s cubic-bezier(.2,.9,.25,1),timerBeat .45s .38s steps(2,end) infinite; }
.final-thirty-entry,.final-ten-entry { position:fixed; z-index:220; inset:88px 0 65px; visibility:hidden; opacity:0; pointer-events:none; display:grid; place-items:center; align-content:center; text-align:center; }
.final-thirty-entry { background:radial-gradient(circle,rgba(255,99,42,.52),rgba(47,7,3,.96) 65%); }
.final-ten-entry { background:repeating-linear-gradient(135deg,rgba(255,229,62,.12) 0 24px,transparent 24px 48px),radial-gradient(circle,rgba(255,205,55,.48),rgba(74,5,0,.98) 66%); }
.final-thirty-entry span,.final-ten-entry span { color:#fff; padding:9px 15px; border:3px solid #fff; font-size:20px; font-weight:1000; letter-spacing:.22em; }
.final-thirty-entry strong,.final-ten-entry strong { margin-top:14px; color:#fff; font-family:"SF Mono",ui-monospace,monospace; font-size:min(20vw,300px); line-height:.86; letter-spacing:-.1em; text-shadow:0 0 30px #fff,0 0 100px #ff321d; }
.final-thirty-entry p,.final-ten-entry p { margin:20px 0 0; color:#ffe267; font-size:19px; font-weight:1000; letter-spacing:.16em; }
.final-thirty-entry.active { visibility:visible; animation:phaseEntry 2s ease-out forwards; }
.final-ten-entry.active { visibility:visible; animation:phaseEntry 1.4s ease-out forwards; }

.modal-backdrop { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px; background:rgba(45,22,7,.72); backdrop-filter:blur(8px); }
.modal { width:min(650px,100%); max-height:90vh; overflow:auto; padding:27px; background:var(--paper); border:4px solid var(--ink); border-radius:25px 15px 27px 17px; box-shadow:9px 10px 0 var(--ink); }
.modal.wide { width:min(920px,100%); }
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.modal h2 { margin:0; font-size:30px; }
.modal-head button { border:0; background:none; font-size:27px; font-weight:1000; }
.modal-body { margin-top:20px; }
.modal-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:22px; }
.decision-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.decision-grid button { min-height:100px; border:3px solid var(--ink); border-radius:15px; background:#fff; font-size:20px; font-weight:1000; }
.decision-grid button:first-child { background:#ffe1d9; }
.decision-grid button:last-child { background:#dff3ff; }
.video-frame { width:100%; aspect-ratio:16/9; border:0; border-radius:14px; background:#22160f; }
.video-player { width:100%; max-height:65vh; border-radius:14px; background:#22160f; }
.upload-progress { margin-top:10px; color:var(--blue-dark); font-weight:900; }

@keyframes pulse { 50% { opacity:.35; transform:scale(.85); } }
@keyframes stageShake { 25%{transform:translate(2px,-1px)} 50%{transform:translate(-2px,1px)} 75%{transform:translate(1px,2px)} }
@keyframes timerBeat { 0%,78%,100%{transform:scale(1.1)} 84%{transform:scale(1.18)} 91%{transform:scale(1.1)} }
@keyframes countPop { from{transform:scale(.4);opacity:.1} 70%{transform:scale(1.18)} to{transform:scale(1);opacity:1} }
@keyframes captionFlash { 50%{opacity:.35} }
@keyframes dangerFrame { 50%{border-color:#ffe26e;box-shadow:inset 0 0 135px rgba(255,10,0,.82)} }
@keyframes secondSlam { 0%{transform:scale(1.8);filter:blur(4px)} 55%{transform:scale(.9);filter:none} 100%{transform:scale(1.12)} }
@keyframes phaseEntry { 0%{opacity:0;transform:scale(1.45)} 14%{opacity:1;transform:scale(.94)} 28%,72%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.1);visibility:hidden} }
@keyframes mascotBounce {
  0%,100% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-10px); }
}
@keyframes mascotHop {
  0%,100% { transform: rotate(5deg) translateY(0); }
  45% { transform: rotate(2deg) translateY(-15px); }
}
@keyframes gearSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .mascot-bengbeng, .mascot-tiaotiao, .orbit-one { animation: none; }
}

@media (max-width: 1000px) {
  .gate { grid-template-columns: 1fr; }
  .gate-art { min-height: 620px; border-right:0; border-bottom:5px solid var(--ink); }
  .gate-art-copy { top: 45px; left: 38px; }
  .gate-art-copy h2 { font-size: clamp(62px, 11vw, 96px); }
  .mascot-stage { left: 25%; right: 3%; bottom: 10%; height: 66%; }
  .mascot-bengbeng { width: min(58vw, 590px); }
  .mascot-tiaotiao { width: min(34vw, 315px); }
  .gate-panel { padding:48px 28px 65px; }
  .back-link { position:static; margin-bottom:22px; }
  .topbar { flex-wrap:wrap; gap:10px; }
  .topbar nav { order:3; width:100%; overflow:auto; }
  .dashboard-grid, .audience-grid, .spreadsheet-grid { grid-template-columns:1fr; }
  .tournament-cycle-card { grid-template-columns:1fr 1fr; }
  .archive-next-button { grid-column:1/-1; width:100%; }
  .draw-summary { grid-template-columns:64px 1fr; }
  .bye-team-list { grid-column:1/-1; padding:15px 0 0; border-left:0; border-top:2px dashed rgba(75,33,10,.24); }
  .arena-header { grid-template-columns:130px minmax(0,1fr) minmax(210px,auto); }
  .arena-main { grid-template-columns:1fr 1fr; }
  .arena-clock { grid-column:1/-1; grid-row:1; }
  .arena-team { grid-row:2; }
  .arena-clock .timer { font-size:120px; }
  .live-stage { grid-template-columns:1fr 1fr; }
  .stage-center { grid-column:1/-1; grid-row:1; }
  .stage-team { grid-row:2; }
  .form-row, .import-grid { grid-template-columns:1fr; }
  .team-row { grid-template-columns:45px 1fr auto; }
  .team-row > :nth-child(3), .team-row > :nth-child(4) { grid-column:2; }
  .row-actions { grid-column:3; grid-row:1/4; flex-direction:column; }
}

@media (max-width: 650px) {
  .gate-art { min-height:520px; }
  .gate-art-copy { top: 24px; left: 20px; }
  .gate-season { padding: 7px 11px; font-size: 10px; }
  .gate-art-copy h2 { margin-top: 15px; font-size: clamp(51px, 17vw, 74px); }
  .gate-art-copy h2 em { -webkit-text-stroke-width: 4px; }
  .gate-art-copy p { padding: 9px 12px; font-size: 13px; }
  .mascot-stage { left: 6%; right: -4%; bottom: 7%; height: 55%; }
  .mascot-bengbeng { width: 70vw; max-height: 70%; left: 0; }
  .mascot-tiaotiao { width: 38vw; max-height: 90%; right: 8%; }
  .mascot-speech { top: -8%; right: 12%; padding: 9px 12px; font-size: 12px; }
  .orbit-one { right: 4%; top: 25%; transform: scale(.7); }
  .orbit-two { display: none; }
  .orbit-three { left: 5%; bottom: 21%; transform: scale(.75); }
  .gate-track { bottom: 4%; height: 43px; }
  .gate-badges { left: 14px; bottom: 1%; gap: 4px; }
  .gate-badges > span { gap: 4px; padding: 5px 7px 5px 5px; font-size: 9px; }
  .gate-badges i { width: 20px; height: 20px; font-size: 7px; }
  .gate-sticker { right: 20px; bottom: 8%; min-width: 100px; padding: 8px 10px 9px; box-shadow: 4px 5px 0 var(--ink); }
  .gate-sticker strong { font-size: 27px; }
  .gate-sticker b { font-size: 8px; }
  .role-grid, .campus-panel > div { grid-template-columns:1fr; }
  .role-card { min-height:175px; }
  .topbar { padding:10px 14px; }
  .brand img { width:110px; }
  .sync-status { display:none; }
  .topbar nav button { white-space:nowrap; }
  .control-view { padding:24px 14px 60px; }
  .page-heading { align-items:flex-start; flex-direction:column; }
  .dashboard-hero { padding:24px; min-height:530px; }
  .dashboard-hero::after { width:220px; }
  .tournament-cycle-card { grid-template-columns:1fr; gap:16px; padding:19px; }
  .cycle-copy { padding:14px 0 0; border-left:0; border-top:2px dashed var(--line); }
  .archive-next-button { grid-column:auto; min-width:0; }
  .archive-section { padding:19px 14px; }
  .archive-section > header { align-items:flex-start; }
  .archive-card summary { grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:15px; }
  .archive-champion { padding-left:10px; }
  .archive-progress { padding:10px 0 0; border-left:0; border-top:1px solid var(--line); }
  .archive-toggle { justify-self:end; align-self:end; }
  .archive-detail { padding:0 12px 14px; }
  .archive-podium { grid-template-columns:1fr; }
  .archive-match-row { grid-template-columns:30px minmax(0,1fr); }
  .archive-match-row > strong { grid-column:2; justify-self:start; }
  .stat-row { display:grid; grid-template-columns:repeat(3,1fr); }
  .stat-card { min-width:0; padding:12px; }
  .stat-card strong { font-size:23px; }
  .podium { grid-template-columns:1fr; }
  .draw-summary { grid-template-columns:52px 1fr; gap:13px; padding:15px; }
  .draw-dice { width:48px; height:48px; font-size:29px; }
  .draw-copy h3 { font-size:18px; }
  .draw-copy p { font-size:12px; }
  .bracket-scroll { max-height:none; overflow:visible; }
  .audience-header { align-items:flex-start; padding:10px 14px; }
  .audience-brand img { width:120px; }
  .audience-brand strong { font-size:15px; }
  .audience-actions { flex-wrap:wrap; justify-content:flex-end; }
  .audience-actions .live-dot { display:none; }
  #audienceView { padding:17px 12px 45px; }
  .live-stage { grid-template-columns:1fr 1fr; border-width:3px; box-shadow:5px 6px 0 var(--ink); border-radius:22px 12px 24px 14px; }
  .stage-center { padding:23px 10px; }
  .stage-team { padding:20px 10px; }
  .stage-team h2 { font-size:22px; }
  .team-badge { width:65px; height:65px; font-size:24px; }
  .audience-timer { font-size:84px; }
  .stage-rule { display:none; }
  .arena-main { gap:12px; padding:22px 12px; }
  .arena-header { grid-template-columns:90px minmax(0,1fr); gap:7px; padding:10px 13px; }
  .arena-header img { width:120px; }
  .arena-header strong { font-size:14px; }
  .arena-header small { font-size:9px; letter-spacing:.04em; }
  .arena-header-actions { grid-column:1/-1; width:100%; justify-content:center; }
  .arena-header-actions button { padding:8px 7px; font-size:11px; }
  .final-thirty-entry,.final-ten-entry { inset:108px 0 55px; }
  .final-thirty-entry span,.final-ten-entry span { font-size:12px; }
  .final-thirty-entry strong,.final-ten-entry strong { font-size:27vw; }
  .final-thirty-entry p,.final-ten-entry p { padding:0 18px; font-size:11px; }
  .arena-team { min-height:250px; padding:18px 10px; border-width:3px; box-shadow:4px 5px 0 var(--ink); }
  .arena-team.red,.arena-team.blue { border-top-width:8px; }
  .arena-team .team-badge { width:72px; height:72px; font-size:28px; }
  .arena-team h2 { font-size:25px; }
  .arena-team p { font-size:15px; }
  .arena-clock { padding:23px 12px; border-width:3px; box-shadow:4px 5px 0 var(--ink); }
  .arena-clock .timer { font-size:102px; }
  .arena-controls button { min-width:125px; }
  .modal { padding:21px; }
  .decision-grid { grid-template-columns:1fr; }
  .sheet-actions { flex-direction:column; }
  .sheet-actions button { width:100%; }
}