/* MLBB Caster Desk */
:root {
  --ink: #EEF2FA;
  --muted: #A9B4CC;
  --gold: #D8B565;
  --gold-hi: #F0D58E;
  --gold-pale: #F6E7BE;
  --gold-dim: #5C4C2A;
  --blue: #2E8BFF;
  --blue-text: #8EC2FF;
  --red: #E5484D;
  --red-text: #FF9EA1;
  --navy: #0B1636;
  --display: Teko, "Arial Narrow", sans-serif;
  --body: "Saira Semi Condensed", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: #050B1C; color: var(--ink); font-family: var(--body); }
button { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible, [contenteditable]:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
a { color: var(--gold); }
a:hover { color: var(--gold-hi); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; margin: 0; }

.page {
  min-height: 100vh;
  padding: 24px 20px 32px;
  background:
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.5) 100%),
    repeating-linear-gradient(60deg, rgba(216,181,101,.035) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(-60deg, rgba(216,181,101,.035) 0 1px, transparent 1px 36px),
    radial-gradient(ellipse 55% 45% at 0% 35%, rgba(46,139,255,.26), transparent 70%),
    radial-gradient(ellipse 55% 45% at 100% 35%, rgba(229,72,77,.24), transparent 70%),
    radial-gradient(ellipse 50% 30% at 50% 0%, rgba(216,181,101,.12), transparent 70%),
    linear-gradient(180deg, #0C1838 0%, #050B1C 100%);
  background-attachment: fixed;
}
.wrap { max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

/* chamfers */
.ch-l { clip-path: polygon(var(--c, 12px) 0, 100% 0, 100% calc(100% - var(--c, 12px)), calc(100% - var(--c, 12px)) 100%, 0 100%, 0 var(--c, 12px)); }
.ch-r { clip-path: polygon(0 0, calc(100% - var(--c, 12px)) 0, 100% var(--c, 12px), 100% 100%, var(--c, 12px) 100%, 0 calc(100% - var(--c, 12px))); }

/* header */
.top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; align-items: start; }
.team-head { display: flex; flex-direction: column; gap: 12px; }
.team-head.red { align-items: flex-end; }
.team-name {
  margin: 0; font-family: var(--display); font-weight: 600; font-size: 46px; line-height: .9;
  letter-spacing: .03em; text-transform: uppercase; -webkit-background-clip: text; background-clip: text;
  color: transparent; cursor: text; min-width: 3ch;
}
.team-name.blue { background-image: linear-gradient(180deg, #E4F0FF 0%, #7DB8FF 55%, #2E6FD0 100%); filter: drop-shadow(0 0 18px rgba(46,139,255,.45)); }
.team-name.red { background-image: linear-gradient(180deg, #FFE6E7 0%, #FF8589 55%, #C9343A 100%); filter: drop-shadow(0 0 18px rgba(229,72,77,.45)); text-align: right; }
.bans-row { display: flex; gap: 8px; align-items: center; }
.bans-row.reverse { flex-direction: row-reverse; }
.bans { display: flex; gap: 6px; }
.bans-row.reverse .bans { flex-direction: row-reverse; }

.ban {
  --c: 8px; position: relative; width: 48px; height: 48px; padding: 1px; border: 0; cursor: pointer;
  background: linear-gradient(160deg, #8A7442, #2A2414 60%, #5C4C2A);
}
.ban-in { --c: 8px; position: relative; display: block; width: 100%; height: 100%; background: #0B1328; overflow: hidden; }
.ban-in img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.55); display: block; }
.ban-in .slash { position: absolute; inset: 0; background: linear-gradient(135deg, transparent 47%, var(--red) 47%, var(--red) 53%, transparent 53%); }
.red .ban-in .slash { background: linear-gradient(45deg, transparent 47%, var(--red) 47%, var(--red) 53%, transparent 53%); }
.ban.empty { background: linear-gradient(160deg, #3A4466, #1A2240); }
.ban.empty .ban-in { display: flex; align-items: center; justify-content: center; color: #59648A; font-family: var(--display); font-size: 22px; }
.ban.target { background: linear-gradient(160deg, #FFF3C9, var(--gold) 50%, #8A6A2E); animation: pulse-gold 1.4s ease-in-out infinite; }
.ban.target .ban-in { color: var(--gold-hi); }

.center-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.game-label { font-size: 14px; color: #B9A77A; cursor: text; padding: 0 6px; }
.phase-row { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.rule-l, .rule-r { flex: 0 1 70px; height: 1px; }
.rule-l { background: linear-gradient(90deg, transparent, var(--gold)); }
.rule-r { background: linear-gradient(270deg, transparent, var(--gold)); }
.diamond { width: 7px; height: 7px; background: var(--gold-hi); transform: rotate(45deg); flex: none; }
.phase-frame, .phase-mid, .phase { clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%); }
.phase-frame { padding: 2px; background: linear-gradient(90deg, #6E5A2E, #F6E3A8 50%, #6E5A2E); filter: drop-shadow(0 0 14px rgba(216,181,101,.35)); }
.phase-mid { padding: 1px; background: #0A1430; }
.phase {
  min-width: 230px; padding: 7px 44px 5px; font-family: var(--display); font-weight: 600; font-size: 32px; line-height: 1.05;
  letter-spacing: .04em; text-transform: uppercase; color: var(--gold-pale);
  background: radial-gradient(ellipse 80% 120% at 50% 100%, rgba(216,181,101,.22), transparent 70%), linear-gradient(180deg, #16295A, #0A1430);
}
.phase.blue { color: var(--blue-text); }
.phase.red { color: var(--red-text); }
.head-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.link-btn {
  min-height: 40px; padding: 0 12px; background: transparent; border: 0; color: var(--gold); cursor: pointer;
  font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(216,181,101,.5); text-underline-offset: 5px;
}
.link-btn:hover { color: var(--gold-hi); }
/* Game started: no more drafting, so the pool and per-slot clear buttons go away. */
.live .pool-rim, .live .slot-clear { display: none !important; } /* beats the hover rule that shows × */
.link-btn:disabled { color: #5F6984; cursor: default; text-decoration-color: transparent; }

.divider { display: flex; align-items: center; gap: 12px; }
.divider .line { flex: 1; height: 1px; }
.divider .line.blue { background: linear-gradient(90deg, rgba(46,139,255,.6), rgba(216,181,101,.6) 50%, transparent); }
.divider .line.red { background: linear-gradient(270deg, rgba(229,72,77,.6), rgba(216,181,101,.6) 50%, transparent); }
.dia-o, .dia-f { width: 9px; height: 9px; transform: rotate(45deg); flex: none; }
.dia-o { border: 1px solid var(--gold); }
.dia-f { background: var(--gold); }

/* board */
.board { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.picks { flex: 1 1 280px; max-width: 330px; display: flex; flex-direction: column; gap: 10px; }
.middle { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.slot-wrap { position: relative; filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); }
.slot-wrap.sel { filter: drop-shadow(0 0 16px rgba(216,181,101,.45)); }
.slot { --c: 12px; display: block; width: 100%; padding: 1.5px; border: 0; cursor: pointer; text-align: left; }
.blue .slot { background: linear-gradient(135deg, #7DB8FF, #22427E 40%, #5C4C2A 80%, #8A7442); }
.red .slot { background: linear-gradient(225deg, #FF8589, #6E2230 40%, #5C4C2A 80%, #8A7442); text-align: right; }
.slot-wrap.sel .slot { padding: 2px; background: linear-gradient(135deg, #FFF3C9, var(--gold) 35%, #7A5F2A 65%, #F3D88F); }
.slot-in {
  --c: 11px; min-height: 108px; padding: 10px; display: flex; align-items: center; gap: 14px;
  background: radial-gradient(120% 150% at 0% 50%, rgba(46,139,255,.32), transparent 62%), linear-gradient(180deg, #15265A, #0A1330);
}
.red .slot-in { flex-direction: row-reverse; background: radial-gradient(120% 150% at 100% 50%, rgba(229,72,77,.32), transparent 62%), linear-gradient(180deg, #15265A, #0A1330); }
.blue .slot-wrap.sel .slot-in { background: radial-gradient(80% 60% at 50% 0%, rgba(240,213,142,.18), transparent 70%), radial-gradient(120% 150% at 0% 50%, rgba(46,139,255,.6), transparent 62%), linear-gradient(180deg, #15265A, #0A1330); }
.red .slot-wrap.sel .slot-in { background: radial-gradient(80% 60% at 50% 0%, rgba(240,213,142,.18), transparent 70%), radial-gradient(120% 150% at 100% 50%, rgba(229,72,77,.6), transparent 62%), linear-gradient(180deg, #15265A, #0A1330); }
.slot:hover .slot-in { filter: brightness(1.12); }
.p-rim { --c: 10px; padding: 2px; flex: none; background: linear-gradient(160deg, #F6E3A8, #8A7442 45%, #3A3020 70%, #D8B565); }
.p-rim img, .p-rim .p-empty { --c: 9px; width: 84px; height: 84px; display: block; object-fit: cover; }
.p-empty { display: flex !important; align-items: center; justify-content: center; font-family: var(--display); font-size: 44px; background: #111A33; color: #59648A; }
.slot-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.red .slot-text { align-items: flex-end; }
.slot-label { font-size: 13px; font-weight: 600; color: var(--blue-text); }
.red .slot-label { color: var(--red-text); }
.key { margin-left: 8px; padding: 0 5px; border: 1px solid currentColor; border-radius: 3px; font: inherit; font-size: 11px; opacity: .6; }
.slot-name {
  font-family: var(--display); font-weight: 600; font-size: 38px; line-height: .95; letter-spacing: .01em; white-space: nowrap;
  text-transform: uppercase; -webkit-background-clip: text; background-clip: text; color: transparent;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #E3EBF9 55%, #A3B4D3 100%); max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.red .slot-name { background-image: linear-gradient(180deg, #FFFFFF 0%, #F6E8EA 55%, #D3A8AC 100%); }
.slot-role { font-size: 14px; color: var(--muted); }
.slot-wrap.empty .slot-name { background-image: none; color: #59648A; }
.slot-wrap.target .slot { background: linear-gradient(135deg, #FFF3C9, var(--gold) 50%, #8A6A2E); }
.slot-wrap.target .slot-in { animation: pulse-inner 1.6s ease-in-out infinite; }
.blue .slot-wrap.target .slot-name { color: var(--blue-text); }
.red .slot-wrap.target .slot-name { color: var(--red-text); }
.slot-clear {
  position: absolute; top: 8px; width: 28px; height: 28px; display: none; align-items: center; justify-content: center;
  background: rgba(5,11,28,.85); border: 1px solid var(--gold-dim); color: var(--muted); cursor: pointer; padding: 0;
}
.blue .slot-clear { right: 10px; }
.red .slot-clear { left: 10px; }
.slot-wrap:not(.empty):hover .slot-clear, .slot-clear:focus-visible { display: flex; }
.slot-clear:hover { color: var(--red-text); border-color: var(--red); }

@keyframes pulse-gold { 0%, 100% { filter: drop-shadow(0 0 0 rgba(216,181,101,0)); } 50% { filter: drop-shadow(0 0 10px rgba(216,181,101,.8)); } }
@keyframes pulse-inner { 0%, 100% { box-shadow: inset 0 0 0 rgba(216,181,101,0); } 50% { box-shadow: inset 0 0 36px rgba(216,181,101,.35); } }

/* hero panel */
.hero-shadow { filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }
.hero-rim, .hero-panel { clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 20px); }
.hero-rim { padding: 1.5px; background: linear-gradient(180deg, #F6E3A8 0%, #B4924A 18%, #4A3D22 55%, #2A2414 100%); }
.hero-panel {
  min-height: 380px; padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 20px;
  background: radial-gradient(70% 55% at 50% 0%, rgba(216,181,101,.16), transparent 70%), linear-gradient(180deg, #15295A 0%, #0B1636 45%, #080F26 100%);
}
.hero-head { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; }
.hero-portrait { --c: 14px; padding: 2px; flex: none; background: linear-gradient(160deg, #FFF3C9, var(--gold) 40%, #6E5A2E 70%, #F3D88F); filter: drop-shadow(0 0 18px rgba(216,181,101,.35)); }
.hero-portrait img { --c: 13px; width: 112px; height: 112px; display: block; object-fit: cover; }
.hero-titles { display: flex; flex-direction: column; gap: 4px; }
.hero-where { font-size: 15px; font-weight: 600; color: var(--muted); }
.hero-where.blue { color: var(--blue-text); }
.hero-where.red { color: var(--red-text); }
.hero-name {
  margin: 0; font-family: var(--display); font-weight: 600; font-size: 88px; line-height: .85; letter-spacing: .04em; text-transform: uppercase;
  background-image: linear-gradient(180deg, #FFF8DE 0%, #F3D88F 45%, #B88F44 80%, #E9C977 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.45)) drop-shadow(0 0 24px rgba(216,181,101,.25));
}
.hero-line { font-size: 16px; color: #B9C3D8; }
.orn { display: flex; align-items: center; gap: 10px; }
.orn span:first-child, .orn span:last-child { flex: 1; height: 1px; }
.orn span:first-child { background: linear-gradient(90deg, transparent, rgba(216,181,101,.6)); }
.orn span:last-child { background: linear-gradient(270deg, transparent, rgba(216,181,101,.6)); }
.orn .diamond { background: var(--gold); }
.skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 12px; }
.skill {
  display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; padding: 16px;
  background: linear-gradient(180deg, rgba(23,40,82,.75), rgba(7,14,34,.75)); border: 1px solid rgba(216,181,101,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.skill-icon-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hex { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.skill-rim { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #F6E3A8, #8A7442 50%, #D8B565); }
.skill.ult .skill-rim { background: linear-gradient(160deg, #FFF3C9, var(--gold) 45%, #8A6A2E); }
.skill-rim img, .skill-rim .hex-empty { width: 64px; height: 64px; display: block; object-fit: cover; background: #141F3D; }
.skill-key { font-size: 12px; font-weight: 700; color: #B9A77A; }
.skill.ult .skill-key { color: #F3D88F; }
.skill h3 { margin: 0; font-size: 18px; font-weight: 700; color: #F4F6FB; }
.skill-cd { font-size: 13px; font-weight: 600; color: var(--gold); }
.skill-body { display: flex; flex-direction: column; gap: 6px; }
.skill p { margin: 0; font-size: 14px; line-height: 1.55; color: #CDD5E5; white-space: pre-line; }
.hero-empty { margin: auto; text-align: center; color: var(--muted); font-size: 16px; max-width: 40ch; line-height: 1.5; }
.hero-empty strong { display: block; font-family: var(--display); font-weight: 600; font-size: 40px; color: var(--gold-pale); letter-spacing: .03em; text-transform: uppercase; }

/* pool */
.pool-rim { padding: 1px; background: linear-gradient(180deg, #8A7442, #2A2414 40%, #1A2440); }
.pool { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: linear-gradient(180deg, rgba(14,28,62,.96), rgba(7,13,32,.96)); }
.pool-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.role-tabs { display: flex; flex-wrap: wrap; gap: 2px; }
.role-tab {
  min-height: 44px; padding: 0 14px; background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); cursor: pointer; font-size: 15px; font-weight: 600;
}
.role-tab[aria-pressed="true"] { color: var(--gold-pale); border-bottom-color: #E9C977; background: linear-gradient(180deg, transparent 40%, rgba(216,181,101,.16)); }
.search { flex: 0 1 280px; }
.search input {
  width: 100%; min-height: 44px; padding: 0 14px; background: rgba(5,11,28,.8); border: 1px solid var(--gold-dim);
  color: var(--ink); font: inherit; font-size: 15px;
}
.search input:focus { border-color: var(--gold-hi); }
.pool-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 12px;
  max-height: 520px; overflow-y: auto; padding: 4px 6px 4px 2px; scrollbar-color: var(--gold-dim) transparent;
}
.tile { display: flex; flex-direction: column; gap: 6px; padding: 0; background: transparent; border: 0; cursor: pointer; color: var(--ink); }
.tile-rim { --c: 9px; display: block; padding: 1.5px; background: linear-gradient(160deg, #8A7442, #2E3A5E 50%, #5C4C2A); }
.tile-img { --c: 8px; position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #111A33; }
.tile-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-img .ov { position: absolute; inset: 0; }
.tile-name { font-size: 13px; font-weight: 500; line-height: 1.15; text-align: center; }
.tile:hover .tile-img img { filter: brightness(1.15); }
.tile.blue .tile-rim { background: linear-gradient(160deg, #7DB8FF, #1F4A92); }
.tile.blue .ov { background: linear-gradient(0deg, rgba(46,139,255,.55), transparent 45%); }
.tile.red .tile-rim { background: linear-gradient(160deg, #FF8589, #7A1F28); }
.tile.red .ov { background: linear-gradient(0deg, rgba(229,72,77,.55), transparent 45%); }
.tile.banned { color: #6F7891; }
.tile.banned .tile-rim { background: linear-gradient(160deg, #2A3046, #151A2C); }
.tile.banned img { filter: grayscale(1) brightness(.45); }
.tile.banned .ov { background: linear-gradient(135deg, transparent 48%, rgba(229,72,77,.95) 48%, rgba(229,72,77,.95) 52%, transparent 52%); }
.tile.sel { filter: drop-shadow(0 0 10px rgba(216,181,101,.5)); }
.tile.sel .tile-rim { padding: 2px; background: linear-gradient(160deg, #FFF3C9, var(--gold) 45%, #8A6A2E); }
.credit { margin: 0; font-size: 13px; color: #8D97AE; text-align: center; }

/* ---------- game start: side glow + intro ---------- */
.wrap { position: relative; z-index: 1; }
/* Team-coloured light slides in from each edge on game start, then slowly pulses in and out from that side. */
.glow {
  position: fixed; top: 0; bottom: 0; width: 45vw; z-index: 0; pointer-events: none;
  opacity: 0; transform: translateX(calc(var(--dir) * -100%));
  transition: opacity 1.4s ease, transform 1.8s cubic-bezier(.2,.8,.2,1);
}
.glow.left { left: 0; --dir: 1; --c: 46,139,255; }
.glow.right { right: 0; --dir: -1; --c: 229,72,77; }
.live .glow { opacity: 1; transform: none; }
.glow i {
  position: absolute; top: var(--y); height: var(--h); width: 70vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--c),.55), rgba(var(--c),.22) 50%, rgba(var(--c),0));
  animation: glow-wave var(--t) ease-in-out infinite alternate; will-change: transform, opacity;
}
.glow.left i { left: -40vw; }
.glow.right i { right: -40vw; }
.glow i:nth-child(1) { --y: -12vh; --h: 70vh; --t: 7s; }
.glow i:nth-child(2) { --y: 28vh; --h: 60vh; --t: 9s; animation-delay: -3s; }
.glow i:nth-child(3) { --y: 58vh; --h: 66vh; --t: 8s; animation-delay: -5s; }
@keyframes glow-wave {
  from { transform: translateX(calc(var(--dir) * -6vw)) scaleY(.9); opacity: .55; }
  to { transform: translateX(calc(var(--dir) * 5vw)) scaleY(1.1); opacity: 1; }
}

.intro {
  position: fixed; inset: 0; z-index: 50; display: none; pointer-events: none;
  grid-template-columns: 1fr auto 1fr; align-content: center; align-items: center; column-gap: 3vw; row-gap: 8px;
}
.intro.play { display: grid; animation: intro-bg 2.6s ease forwards; }
.intro-team { font: 600 clamp(36px, 7vw, 120px)/.9 var(--display); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.intro-team.blue { justify-self: end; color: var(--blue-text); text-shadow: 0 0 40px rgba(46,139,255,.8); animation: intro-left 2.6s cubic-bezier(.2,.8,.2,1) both; }
.intro-team.red { justify-self: start; color: var(--red-text); text-shadow: 0 0 40px rgba(229,72,77,.8); animation: intro-right 2.6s cubic-bezier(.2,.8,.2,1) both; }
.intro-vs { font: 600 clamp(28px, 4vw, 64px)/1 var(--display); color: var(--gold-hi); text-shadow: 0 0 30px rgba(216,181,101,.9); animation: intro-pop 2.6s ease both; }
.intro-sub { grid-column: 1 / -1; justify-self: center; font-weight: 700; font-size: clamp(14px, 1.6vw, 22px); letter-spacing: .5em; text-transform: uppercase; color: var(--gold-pale); animation: intro-pop 2.6s ease .15s both; }
@keyframes intro-bg { 0% { background: rgba(5,11,28,0); } 12%, 75% { background: rgba(5,11,28,.88); } 100% { background: rgba(5,11,28,0); } }
@keyframes intro-left { 0% { transform: translateX(-70vw); opacity: 0; } 22%, 75% { transform: none; opacity: 1; } 100% { transform: translateX(-6vw); opacity: 0; } }
@keyframes intro-right { 0% { transform: translateX(70vw); opacity: 0; } 22%, 75% { transform: none; opacity: 1; } 100% { transform: translateX(6vw); opacity: 0; } }
@keyframes intro-pop { 0%, 15% { transform: scale(2.4); opacity: 0; } 28%, 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }

/* ---------- help dialog ---------- */
.help {
  width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 24px 28px;
  background: linear-gradient(180deg, #13214A, #0B1636); color: var(--ink);
  border: 1px solid var(--gold-dim); border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.help::backdrop { background: rgba(5,11,28,.75); }
.help-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.help h2 { margin: 0; font: 600 40px/1 var(--display); text-transform: uppercase; color: var(--gold-hi); letter-spacing: .03em; }
.help h3 { margin: 22px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); }
.help p, .help li, .help dd { font-size: 15px; line-height: 1.55; color: #CDD5E5; }
.help p { margin: 0 0 8px; }
.help ul { margin: 0 0 18px; padding-left: 20px; }
.help strong { color: var(--ink); }
.help-keys { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; align-items: baseline; }
.help-keys dt { white-space: nowrap; color: var(--muted); }
.help-keys dd { margin: 0; }
.help kbd {
  display: inline-block; min-width: 26px; padding: 2px 7px; text-align: center;
  font: 600 13px/1.4 var(--body); color: var(--gold-pale);
  background: #0A1430; border: 1px solid var(--gold-dim); border-bottom-width: 2px; border-radius: 4px;
}
@media (max-width: 520px) {
  .help { padding: 18px 16px; }
  .help-keys { grid-template-columns: 1fr; gap: 2px; }
  .help-keys dd { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ban.target, .slot-wrap.target .slot-in { animation: none; }
  .glow i { animation: none; } /* still glow, no pulsing */
  .glow { transition: opacity 1.4s ease; transform: none; }
  .intro.play { display: none; }
}
@media (max-width: 700px) {
  .picks { max-width: none; }
  .hero-name { font-size: 64px; }
  .team-name { font-size: 38px; }
}