:root {
  --bg: #07060a;
  --ink: #fff8f2;
  --muted: #c9b7a4;
  --red: #e23b2f;
  --gold: #e6b34a;
  --line: rgba(255, 248, 242, 0.16);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: #050308;
  color: var(--ink);
  font-family: "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; }
.kicker {
  margin: 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--gold);
}
kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 1px 6px;
  margin-right: 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 12px;
}

.hood-app, .stage-wrap { height: 100%; position: relative; }
#arena { display: block; width: 100%; height: 100%; touch-action: none; }

.mm {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.mm-glow {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 3, 8, 0.82) 0%, rgba(5, 3, 8, 0.35) 38%, transparent 58%),
    radial-gradient(900px 520px at 78% 40%, rgba(226, 59, 47, 0.22), transparent 58%),
    radial-gradient(120% 80% at 50% 120%, #000 0%, transparent 55%);
}

.mm-brand, .mm-title, .mm-list, .mm-note, .mm-hints { pointer-events: auto; }

.mm-brand {
  position: absolute;
  top: 22px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mm-brand strong { display: block; font-size: 18px; letter-spacing: 0.04em; }
.mark {
  width: 14px;
  height: 14px;
  background: var(--red);
  box-shadow: 5px 5px 0 var(--gold);
  flex: 0 0 auto;
}

.mm-title {
  position: absolute;
  top: 18px;
  right: 36px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(52px, 9vw, 108px);
  letter-spacing: -0.03em;
  text-shadow: 0 8px 0 rgba(0, 0, 0, 0.35), 0 0 40px rgba(226, 59, 47, 0.25);
}

.mm-list {
  position: absolute;
  left: 0;
  top: 26%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: min(380px, 40vw);
  padding: 12px 28px 12px 48px;
}
.mm-item {
  position: relative;
  display: block;
  padding: 10px 18px 10px 22px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: clamp(18px, 2.2vw, 26px);
  color: rgba(255, 248, 242, 0.62);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.mm-item:hover,
.mm-item.on {
  color: #fff;
  background: linear-gradient(90deg, rgba(226, 59, 47, 0.55), rgba(226, 59, 47, 0.05) 70%, transparent);
}
.mm-item.on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  background: #fff;
  box-shadow: 0 0 12px var(--red);
}

/* Weekly cup clock, straight under the brand. Hidden whenever the challenge
   server is not answering, so the menu never shows a dead counter. */
.mm-cup {
  position: absolute;
  top: 78px;
  left: 28px;
  pointer-events: auto;
}
.mm-cup[hidden] { display: none; }
.cup-clock {
  margin: 2px 0 0;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.cup-sub {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.mm-cup.live .cup-clock { color: var(--gold); }

.mm-tag {
  margin-left: 12px;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gold);
  vertical-align: middle;
}
.mm-tag[hidden] { display: none; }

.mm-note {
  position: absolute;
  left: 48px;
  bottom: 72px;
  max-width: 42ch;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
  text-shadow: 0 1px 0 #000;
}

.mm-hints {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 28px;
  background: rgba(0, 0, 0, 0.42);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 800px) {
  .mm-title { right: 16px; font-size: 42px; }
  .mm-list { left: 0; top: 22%; padding-left: 16px; }
  .mm-note { left: 16px; bottom: 88px; }
}