/* web/css/queue.css - Esports VS Dual-Faceoff & Matchmaking Styling */
/* Strictly <= 200 lines, <= 100 chars per line. */

.btn-mock {
  min-height: 44px; min-width: 60px; background: transparent;
  color: var(--sumi-faded); border: 1px solid var(--brush-border);
  border-radius: 4px; font-size: 0.76rem; font-weight: 700;
  padding: 0.35rem 0.65rem; cursor: pointer; transition: all 0.15s ease;
}
.btn-mock:hover {
  color: var(--hanko-red);
  border-color: var(--hanko-red);
  background: var(--hanko-dim);
}
.btn-mock:active { transform: scale(0.94); }

.btn-sim {
  min-height: 44px; min-width: 220px; color: var(--sumi-ink);
  background: rgba(201, 168, 92, 0.09); border: 1px dashed var(--accent-gold);
  border-radius: 6px; font-size: 0.82rem; font-weight: 700;
  padding: 0.6rem 1.2rem; cursor: pointer; transition: all 0.15s ease;
}
.btn-sim:hover {
  background: rgba(201, 168, 92, 0.22);
  border-color: var(--hanko-red);
}
.btn-sim:active { transform: scale(0.97); }

/* --- ESPORTS DUAL FACEOFF SCREEN --- */
.matched-panel {
  display: none;
  flex-direction: column;
  padding: 1.2rem 1rem;
  text-align: center;
  border: 2px solid var(--hanko-red);
  border-radius: 12px;
  background: #fdfbf7;
  box-shadow: 0 10px 36px rgba(184, 51, 36, 0.18), 0 2px 10px rgba(0, 0, 0, 0.06);
  animation: vsSlamIn 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.matched-panel.active { display: flex; }

.vs-ruleset-banner {
  font-size: 0.74rem; font-weight: 900; letter-spacing: 1.2px;
  color: var(--hanko-red); text-transform: uppercase;
  margin-bottom: 0.85rem; padding: 0.3rem 0.5rem;
  background: var(--hanko-dim); border-radius: 4px;
}

.vs-duel-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.vs-fighter {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.75rem 0.35rem; border-radius: 10px;
  background: #ebe4d5; border: 2px solid #cfc5b5;
}
.vs-fighter.player-you { border-color: var(--hanko-red); background: #fbf0ee; }
.vs-fighter.player-opp { border-color: var(--accent-gold); background: #f9f5ec; }

.vs-side-label {
  font-size: 0.66rem; font-weight: 900; letter-spacing: 1px;
  margin-bottom: 0.3rem; text-transform: uppercase;
}
.player-you .vs-side-label { color: var(--hanko-red); }
.player-opp .vs-side-label { color: #94722a; }

.vs-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--brush-border); object-fit: cover;
  margin-bottom: 0.3rem;
}

.vs-fighter-name {
  font-family: var(--font-serif);
  font-size: 1rem; font-weight: 800; color: var(--sumi-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 105px;
}

.vs-fighter-rank {
  font-size: 0.68rem; margin-top: 0.3rem; padding: 0.12rem 0.35rem;
}

.vs-emblem-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.vs-crest {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2.5px solid var(--hanko-red); background: #fff; color: #b83324;
  font-family: -apple-system, sans-serif; font-size: 1rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 16px rgba(184, 51, 36, 0.45);
  will-change: transform; transform: translateZ(0);
  animation: crestPulse 1.8s ease-in-out infinite;
}

.vs-probe-box {
  display: flex; align-items: center; justify-content: center;
  gap: 0.45rem; font-size: 0.74rem; font-weight: 600;
  color: var(--sumi-ink); background: rgba(46, 125, 50, 0.09);
  border: 1px solid rgba(46, 125, 50, 0.3); border-radius: 6px;
  padding: 0.45rem 0.7rem; margin-bottom: 1rem;
}

.probe-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2e7d32; box-shadow: 0 0 8px #2e7d32;
}
.probe-dot.warn { background: #e65100; box-shadow: 0 0 8px #e65100; }
.probe-dot.bad { background: #b83324; box-shadow: 0 0 8px #b83324; }
.vs-probe-box.warn { background: rgba(230, 81, 0, 0.08); border-color: rgba(230, 81, 0, 0.3); }
.vs-probe-box.bad { background: rgba(184, 51, 36, 0.08); border-color: rgba(184, 51, 36, 0.3); }

.btn-ready-action {
  width: 100%; min-height: 48px; font-size: 1.05rem; font-weight: 900;
  letter-spacing: 0.8px; background: var(--hanko-red); color: #fff;
  border: none; border-radius: 8px; cursor: pointer;
  margin-bottom: 0.5rem; box-shadow: 0 4px 14px rgba(184, 51, 36, 0.3);
  transition: all 0.15s ease;
}
.btn-ready-action:hover {
  background: #a0281b; box-shadow: 0 6px 18px rgba(184, 51, 36, 0.4);
}
.btn-ready-action:active { transform: scale(0.97); }

.btn-decline-action {
  width: 100%; min-height: 44px; font-size: 0.9rem; font-weight: 700;
  background: transparent; color: var(--sumi-faded);
  border: 1px solid var(--brush-border); border-radius: 8px;
  cursor: pointer; transition: all 0.15s ease;
}
.btn-decline-action:hover {
  color: #a0281b; border-color: #a0281b; background: rgba(184, 51, 36, 0.05);
}
.btn-decline-action:active { transform: scale(0.97); }

/* --- MATCH ARENA STYLING --- */
.arena-card {
  padding: 1.25rem 1rem; border: 2px solid var(--sumi-ink);
  border-radius: 12px; background: var(--washi-bg);
}
.arena-cred-box {
  display: flex; gap: 0.75rem; justify-content: center; margin: 1rem 0;
}
.arena-field {
  flex: 1; padding: 0.6rem 0.5rem; background: #fff;
  border: 1px solid var(--brush-border); border-radius: 8px;
}
.arena-field-lbl {
  font-size: 0.68rem; font-weight: 800; color: var(--sumi-faded);
}
.arena-field-val {
  font-family: monospace; font-size: 1.35rem; font-weight: 900;
  color: var(--hanko-red); letter-spacing: 2px;
}
.arena-stage-item {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  padding: 0.2rem 0.5rem; margin: 0.15rem; background: #e3dcce;
  border-radius: 4px; border: 1px solid var(--brush-border);
}

@keyframes vsSlamIn {
  0% { transform: scale(0.85); opacity: 0; }
  70% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes crestPulse {
  0%, 100% { transform: scale3d(1, 1, 1); }
  50% { transform: scale3d(1.08, 1.08, 1); }
}