/* Rivals — the cabinet's full-screen social and rematch transmission state. */
#rivals-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 135;
  overflow: hidden;
  background: #010403;
}

#rivals-panel.visible { display: block; }

.rivals-terminal {
  --rivals-cyan: #00efff;
  --rivals-pink: #ff1d7b;
  --rivals-yellow: #ffcf40;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  min-height: 100%;
  overflow-y: auto;
  padding: max(env(safe-area-inset-top), 18px) clamp(15px, 4vw, 58px) max(env(safe-area-inset-bottom), 18px);
  color: #f4f7f6;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.014) 3px 4px),
    linear-gradient(90deg, rgba(0,239,255,.065), transparent 28%, transparent 72%, rgba(255,29,123,.065)),
    #020706;
  box-shadow:
    inset 3px 0 var(--rivals-cyan),
    inset -3px 0 var(--rivals-pink),
    inset 0 0 64px #000;
  font-family: var(--pixel-font);
}

.rivals-terminal::before,
.rivals-terminal::after {
  content: '';
  position: fixed;
  z-index: 1;
  left: 3px;
  right: 3px;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--rivals-cyan) 0 44%, #fff 49% 51%, var(--rivals-pink) 56% 100%);
  box-shadow: 0 0 12px rgba(0,239,255,.34), 0 0 12px rgba(255,29,123,.34);
}

.rivals-terminal::before { top: 0; }
.rivals-terminal::after { bottom: 0; }

.rivals-header,
.rivals-search-deck,
.rivals-tabs,
.rivals-roster,
.rivals-footer {
  width: min(100%, 860px);
  margin-left: auto;
  margin-right: auto;
}

.rivals-header {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  padding: 4px 0 14px;
  border-bottom: 2px solid #17363b;
  box-shadow: 0 2px #250b18;
}

.rivals-crest {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 88px;
  padding: 4px;
  background: linear-gradient(90deg, rgba(0,239,255,.12), rgba(255,29,123,.12));
  border-left: 2px solid var(--rivals-cyan);
  border-right: 2px solid var(--rivals-pink);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 8px 4px);
}

.rivals-crest img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(-3px 0 5px rgba(0,239,255,.28)) drop-shadow(3px 0 5px rgba(255,29,123,.28));
}

.rivals-header .menu-kicker {
  display: block;
  margin: 0 0 7px;
  color: var(--rivals-cyan);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rivals-header h2 {
  margin: 0;
  color: #fff;
  font-family: 'Upheaval', var(--pixel-font);
  font-size: clamp(1.55rem, 4vw, 2.25rem);
  font-weight: normal;
  letter-spacing: .1em;
  line-height: .9;
  text-transform: uppercase;
  text-shadow: -2px 0 var(--rivals-cyan), 2px 0 var(--rivals-pink), 3px 3px #000;
}

#rivals-status {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 3px 7px;
  color: #9ab0b5;
  border-left: 2px solid #28545a;
  overflow-wrap: anywhere;
  font-size: 10px;
  letter-spacing: .06em;
  line-height: 1.4;
  text-align: left;
  text-transform: uppercase;
}

.rivals-search-deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-top: 12px;
  margin-bottom: 11px;
}

.rivals-search-deck label {
  grid-column: 1 / -1;
  color: #9ab0b5;
  font-size: 10px;
  letter-spacing: .1em;
}

.rivals-search-deck input {
  min-width: 0;
  height: 48px;
  padding: 0 12px;
  color: #fff;
  border: 1px solid #2a5960;
  border-left: 3px solid var(--rivals-cyan);
  border-radius: 0;
  outline: none;
  background: #030807;
  box-shadow: inset 0 -3px #0b2729;
  font: 16px var(--pixel-font);
  letter-spacing: .05em;
}

.rivals-search-deck input:focus {
  border-color: var(--rivals-cyan);
  box-shadow: inset 0 -3px var(--rivals-cyan), 0 0 12px rgba(0,239,255,.2);
}

.rivals-search-deck button,
.rivals-empty-action,
#rivals-close {
  min-height: 44px;
  padding: 0 14px;
  color: #fff;
  border: 1px solid var(--rivals-pink);
  border-radius: 0;
  outline: none;
  background: #270918;
  box-shadow: inset 0 -4px #10030a, 3px 3px #000;
  font: 11px var(--pixel-font);
  letter-spacing: .07em;
}

.rivals-search-deck button { min-height: 48px; }

.rivals-search-deck button:hover,
.rivals-search-deck button:focus-visible,
.rivals-empty-action:hover,
.rivals-empty-action:focus-visible,
#rivals-close:hover,
#rivals-close:focus-visible {
  color: #020506;
  background: var(--rivals-pink);
  box-shadow: inset 0 -4px rgba(0,0,0,.24), 0 0 14px rgba(255,29,123,.3), 3px 3px #000;
}

.rivals-search-deck button:active,
.rivals-empty-action:active,
#rivals-close:active {
  transform: translate(2px, 2px);
  box-shadow: inset 0 3px rgba(0,0,0,.3), 1px 1px #000;
}

.rivals-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #1b393e;
  background: #020807;
  box-shadow: 3px 3px #000;
}

.rivals-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 6px;
  color: #82999e;
  border: 1px solid #27454b;
  border-radius: 0;
  outline: none;
  background: #040a09;
  font: 10px var(--pixel-font);
  letter-spacing: .07em;
}

.rivals-tabs button b {
  min-width: 18px;
  padding: 3px 4px;
  color: #020706;
  background: #496166;
  font: 9px/1 var(--pixel-font);
}

.rivals-tabs button.active b { background: var(--rivals-pink); color: #fff; }

.rivals-tabs button:hover,
.rivals-tabs button:focus-visible { color: #fff; border-color: var(--rivals-cyan); }

.rivals-tabs button.active {
  color: #fff;
  border-color: var(--rivals-pink);
  background: linear-gradient(90deg, rgba(0,239,255,.13), rgba(255,29,123,.25));
  box-shadow: inset 0 -3px var(--rivals-pink);
}

.rivals-roster {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: clamp(238px, 38vh, 480px);
  border: 1px solid #214248;
  border-left: 3px solid rgba(0,239,255,.68);
  border-right: 3px solid rgba(255,29,123,.68);
  background: #020807;
  box-shadow: inset 0 0 38px rgba(0,0,0,.72), 4px 4px #000;
}

.rivals-empty-state {
  min-height: clamp(236px, 34vh, 420px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 11px;
  padding: 24px;
  text-align: center;
}

.rivals-empty-screen {
  position: relative;
  width: 92px;
  height: 64px;
  display: grid;
  place-items: center;
  color: #fff;
  border-top: 1px solid #4c6164;
  border-bottom: 1px solid #4c6164;
  border-left: 3px solid var(--rivals-cyan);
  border-right: 3px solid var(--rivals-pink);
  background: linear-gradient(90deg, rgba(0,239,255,.09), rgba(255,29,123,.09));
  box-shadow: -4px 0 rgba(0,239,255,.08), 4px 0 rgba(255,29,123,.08), inset 0 0 20px #000;
  font-size: 1.55rem;
  text-shadow: -2px 0 var(--rivals-cyan), 2px 0 var(--rivals-pink);
}

.rivals-empty-screen::before,
.rivals-empty-screen::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
}

.rivals-empty-screen::before {
  top: -5px;
  left: -5px;
  border-top: 2px solid var(--rivals-cyan);
  border-left: 2px solid var(--rivals-cyan);
}

.rivals-empty-screen::after {
  right: -5px;
  bottom: -5px;
  border-right: 2px solid var(--rivals-pink);
  border-bottom: 2px solid var(--rivals-pink);
}

.rivals-empty-screen i {
  position: absolute;
  bottom: 8px;
  width: 4px;
  height: 4px;
  background: var(--rivals-pink);
}

.rivals-empty-screen i:nth-of-type(1) { left: 31px; background: var(--rivals-cyan); }
.rivals-empty-screen i:nth-of-type(2) { left: 43px; background: #fff; }
.rivals-empty-screen i:nth-of-type(3) { left: 55px; }

.rivals-empty-state strong {
  color: #fff;
  font-size: 13px;
  letter-spacing: .1em;
}

.rivals-empty-state p {
  max-width: 340px;
  margin: 0;
  color: #9ab0b5;
  font: 12px/1.6 var(--pixel-font);
}

.rivals-empty-action {
  margin-top: 3px;
  color: #ffabd0;
  border-color: rgba(255,29,123,.72);
  background: #170710;
}

.rivals-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  margin-top: 12px;
  color: #7f969b;
  font-size: 10px;
  letter-spacing: .08em;
}

.rivals-footer small { margin-right: auto; }

#rivals-status[data-tone="error"] { color: #fff; border-color: #ff315f; background: #28050e; }
#rivals-status[data-tone="warning"] { color: var(--rivals-yellow); border-color: var(--rivals-yellow); background: #201704; }

.rivals-player-list {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 9px;
}

.rivals-search-more {
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 4px 8px 8px;
  border-top: 1px dashed rgba(0,239,255,.35);
}

.rivals-search-more .rivals-card-action {
  width: min(100%, 260px);
  min-height: 44px;
  color: #bffaff;
  border-color: rgba(0,239,255,.62);
  background: #041417;
}

.rivals-player-card {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto minmax(170px, auto);
  align-items: center;
  gap: 11px;
  min-height: 76px;
  padding: 9px 10px;
  border: 1px solid #214248;
  border-left: 3px solid var(--rivals-cyan);
  background: #040c0b;
  box-shadow: 3px 3px #000;
}

.rivals-player-card.is-friend-card {
  grid-template-columns: 48px minmax(0, 1fr) minmax(152px, auto);
}

.rivals-player-card.is-busy { opacity: .62; filter: grayscale(.3); }

.rivals-player-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid #28545a;
  background: #061211;
  box-shadow: inset 2px 0 var(--rivals-cyan), inset -2px 0 #28545a;
  font: 15px/1 'Upheaval', var(--pixel-font);
  letter-spacing: .06em;
  text-shadow: -1px 0 var(--rivals-cyan), 1px 0 var(--rivals-pink);
}

.rivals-player-identity { min-width: 0; display: grid; gap: 3px; }
.rivals-player-identity small {
  overflow: hidden;
  color: #8da6aa;
  font-size: 9px;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rivals-player-identity strong {
  overflow: hidden;
  color: #fff;
  font-size: 17px;
  letter-spacing: .03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rivals-player-identity span { color: var(--rivals-cyan); font-size: 10px; letter-spacing: .08em; }

.rivals-player-signal {
  min-width: 76px;
  padding: 7px 8px;
  color: var(--rivals-yellow);
  border: 1px solid #364b4f;
  background: #06100e;
  font-size: 9px;
  letter-spacing: .05em;
  text-align: center;
}
.rivals-player-signal[data-result="win"] { color: #7effb8; border-color: #2e7b58; }
.rivals-player-signal[data-result="loss"] { color: #ff8fb8; border-color: #7c244b; }

.rivals-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.rivals-card-action {
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid #496166;
  border-radius: 0;
  outline: none;
  color: #b2c4c7;
  background: #06100e;
  box-shadow: inset 0 -3px #010403, 2px 2px #000;
  font: 9px/1.25 var(--pixel-font);
  letter-spacing: .04em;
}
.rivals-card-action.primary,
.rivals-card-action.accept { color: #020706; border-color: var(--rivals-cyan); background: var(--rivals-cyan); }
.rivals-card-action.challenge {
  min-width: 152px;
  color: #020706;
  border-color: #7df8ff;
  background: var(--rivals-cyan);
  box-shadow: 3px 3px #12555a;
  font-family: 'Upheaval', var(--pixel-font);
  font-size: 11px;
  letter-spacing: .08em;
}
.rivals-card-action.challenge[data-challenge-state="challenge"]::after { content: ' ▶'; }
.rivals-card-action.challenge:hover,
.rivals-card-action.challenge:focus-visible {
  color: #020706;
  border-color: var(--rivals-yellow);
  background: var(--rivals-yellow);
  box-shadow: inset 0 -4px rgba(0,0,0,.28), 0 0 12px rgba(255,207,64,.34), 3px 3px #000;
}
.rivals-card-action.challenge:disabled {
  cursor: not-allowed;
  color: #7f969b;
  border: 1px solid #364b4f;
  background: #07100f;
  box-shadow: inset 0 -3px #010403, 2px 2px #000;
  opacity: 1;
}
.rivals-card-action.challenge[data-challenge-state="pending"]:disabled {
  color: var(--rivals-yellow);
  border-color: #7d6420;
  background: #171204;
}
.rivals-card-action.challenge[data-challenge-state="in_battle"]:disabled {
  color: #ff94bf;
  border-color: #772244;
  background: #180711;
}
.rivals-card-action.danger { color: #ff9bbb; border-color: #8f244e; background: #210711; }
.rivals-card-action:hover,
.rivals-card-action:focus-visible { color: #020706; border-color: #fff; background: #fff; }
.rivals-card-action:active { transform: translate(1px, 2px); box-shadow: inset 0 2px rgba(0,0,0,.35); }
.rivals-linked-state {
  padding: 7px 9px;
  color: #7effb8;
  border: 1px solid #2e7b58;
  background: #05130d;
  font-size: 9px;
  letter-spacing: .06em;
}

.rivals-empty-state.is-loading .rivals-empty-screen i { animation: rivals-scan-step 720ms steps(1, end) infinite; }
.rivals-empty-state.is-loading .rivals-empty-screen i:nth-of-type(2) { animation-delay: 120ms; }
.rivals-empty-state.is-loading .rivals-empty-screen i:nth-of-type(3) { animation-delay: 240ms; }
@keyframes rivals-scan-step { 0%, 48% { opacity: .18; } 49%, 100% { opacity: 1; } }

@media (max-width: 600px) {
  .rivals-header { grid-template-columns: 98px minmax(0, 1fr); gap: 11px; }
  .rivals-crest { width: 98px; height: 66px; }
  .rivals-header h2 { font-size: 1.55rem; }
  .rivals-player-card {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
  }
  .rivals-player-card.is-friend-card { grid-template-columns: 46px minmax(0, 1fr); }
  .rivals-player-avatar { width: 46px; height: 46px; font-size: 13px; }
  .rivals-card-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-friend-card .rivals-card-actions { display: flex; justify-content: flex-end; }
  .rivals-card-action.challenge { min-height: 44px; }
  .rivals-card-actions > :only-child { grid-column: 1 / -1; }
  .rivals-card-action { min-height: 44px; }
}

@media (max-width: 400px) {
  .rivals-terminal { padding: max(env(safe-area-inset-top), 15px) 13px max(env(safe-area-inset-bottom), 15px); }
  .rivals-header { grid-template-columns: 88px minmax(0, 1fr); }
  .rivals-crest { width: 88px; height: 60px; }
  .rivals-header h2 { font-size: 1.4rem; }
  .rivals-tabs { gap: 4px; }
  .rivals-tabs button { padding: 4px; font-size: 9px; }
  .rivals-tabs button b { min-width: 16px; padding: 3px; font-size: 8px; }
  .rivals-player-list { padding: 7px; }
  .rivals-player-signal { min-width: 68px; padding-right: 5px; padding-left: 5px; font-size: 8px; }
  .rivals-footer { align-items: flex-start; }
}

@media (max-height: 700px) {
  .rivals-terminal { padding-top: max(env(safe-area-inset-top), 12px); padding-bottom: max(env(safe-area-inset-bottom), 12px); }
  .rivals-header { padding-bottom: 9px; }
  .rivals-crest { width: 84px; height: 56px; }
  .rivals-search-deck { margin-bottom: 7px; }
  .rivals-tabs { margin-bottom: 7px; }
  .rivals-roster { min-height: 210px; }
  .rivals-empty-state { min-height: 208px; padding-top: 14px; padding-bottom: 14px; }
  .rivals-empty-screen { width: 78px; height: 52px; }
  .rivals-footer { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .rivals-search-deck button:active,
  .rivals-empty-action:active,
  #rivals-close:active,
  .rivals-card-action:active { transform: none; }
  .rivals-empty-state.is-loading .rivals-empty-screen i { animation: none; opacity: 1; }
}

/* Rival roster: identity first, one primary action, secondary controls on demand. */
.rivals-player-card.has-options { padding-right: 56px; }
.rivals-options-toggle {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0;
  color: #8da6aa;
  background: transparent;
  font: bold 25px/1 monospace;
  cursor: pointer;
}
.rivals-options-toggle:hover,
.rivals-options-toggle:focus-visible,
.rivals-options-toggle[aria-expanded="true"] {
  color: var(--rivals-cyan);
  border-color: #28545a;
  outline: 1px solid var(--rivals-cyan);
  outline-offset: -3px;
}
.rivals-player-options {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #214248;
}
.rivals-player-options[hidden] { display: none; }
.rivals-card-action.challenge:active:not(:disabled) { background: var(--rivals-pink); }
@media (max-width: 600px) {
  .rivals-player-card.has-options { padding-right: 8px; }
  .has-options .rivals-player-identity { padding-right: 40px; }
  .has-options:not(.is-friend-card) .rivals-player-identity { grid-column: 2 / -1; }
  .has-options .rivals-player-signal { grid-column: 1 / -1; justify-self: start; }
  .is-friend-card { min-height: 116px; }
  .rivals-player-options > button { flex: 1 1 100px; }
}