/* web/css/matchflow.css - Competitive Matchflow UI */
/* Strictly <= 200 lines, <= 100 chars per line. */

.btn { transition: all 0.15s ease; }
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: scale(0.96); }

.matchflow-box {
  margin: 0.5rem 0; padding: 0.75rem; background: rgba(245, 242, 235, 0.95);
  border: 1px solid var(--brush-border); border-radius: 12px; text-align: center;
}
.flow-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.5rem; padding-bottom: 0.4rem;
  border-bottom: 1px dashed var(--brush-border);
}
.flow-score-badge { font-family: var(--font-serif); font-size: 0.95rem; font-weight: 900; }
.flow-subtext {
  font-size: 0.76rem; font-weight: 700; color: var(--sumi-faded); margin: 0.35rem 0;
}
.flow-subtext.turn-active { color: var(--hanko-red); font-size: 0.82rem; }

/* Character Selection */
.flow-char-picker { display: flex; flex-direction: column; gap: 0.4rem; }
.char-vs-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.4rem 0.6rem; background: #fff; border: 1px solid var(--brush-border);
  border-radius: 8px;
}
.char-slot { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; }
.char-slot img {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--hanko-red);
  object-fit: cover; background: #eee;
}
.flow-vs-pill {
  font-family: var(--font-serif); font-weight: 900; font-size: 0.78rem;
  color: var(--hanko-red); background: var(--hanko-dim); padding: 2px 8px;
  border-radius: 12px;
}
.fighter-search-input {
  width: 100%; padding: 6px 10px; font-size: 0.8rem; border: 1px solid var(--brush-border);
  border-radius: 6px; background: #fff; color: var(--sumi-ink); outline: none;
}
.fighter-search-input:focus { border-color: var(--accent-gold); }
.char-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 5px; max-height: 180px; overflow-y: auto; padding: 6px;
  background: #fff; border: 1px solid var(--brush-border); border-radius: 8px;
}
.char-thumb {
  width: 42px; height: 42px; padding: 2px; border: 2px solid transparent;
  border-radius: 6px; cursor: pointer; background: #f7f4ee;
  transition: transform 0.1s ease, border-color 0.1s ease;
}
.char-thumb:hover { transform: scale(1.08); border-color: var(--accent-gold); }
.char-thumb:active { transform: scale(0.95); }
.char-thumb.selected { border-color: var(--hanko-red); background: var(--hanko-dim); }
.char-thumb img { width: 100%; height: 100%; object-fit: contain; }
.btn-lock-action {
  min-height: 44px; background: var(--hanko-red); color: #fff; font-weight: 800;
  font-size: 0.88rem; border: none; border-radius: 8px; cursor: pointer;
}
.lock-status-notice {
  padding: 0.6rem; background: #e8f5e9; border: 1px solid #4caf50;
  border-radius: 8px; color: #2e7d32; font-weight: 800; font-size: 0.8rem;
}

/* Stage Striking & Banning */
.strike-rule-badge {
  font-size: 0.72rem; font-weight: 800; color: var(--accent-gold);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.stage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 0.4rem 0; }
.stage-card {
  position: relative; height: 72px; border-radius: 6px; overflow: hidden;
  border: 2px solid var(--brush-border); cursor: pointer; background-size: cover;
  background-position: center; display: flex; flex-direction: column;
  justify-content: space-between;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.stage-card:hover { transform: scale(1.02); border-color: var(--accent-gold); }
.stage-card:active { transform: scale(0.98); }
.stage-type-tag {
  align-self: flex-start; margin: 3px 5px; font-size: 0.58rem; font-weight: 900;
  background: rgba(22, 21, 20, 0.75); color: #fff; padding: 1px 4px; border-radius: 3px;
}
.stage-name-tag {
  background: rgba(22, 21, 20, 0.85); color: #fff; font-size: 0.68rem; font-weight: 800;
  padding: 3px 5px; text-align: left; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.stage-card.banned { opacity: 0.35; filter: grayscale(1); cursor: not-allowed; }
.stage-card.banned::after {
  content: "✕ STRUCK"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(184, 51, 36, 0.7); color: #fff;
  font-size: 0.82rem; font-weight: 900; letter-spacing: 1px;
}
.stage-card.active-stage { height: 92px; border-color: var(--accent-gold); margin: 0.4rem 0; }

/* Active Game & Matchup */
.game-active-banner {
  padding: 0.7rem; background: #fff; border: 1px solid var(--brush-border); border-radius: 8px;
}
.active-headline { font-weight: 900; font-size: 0.92rem; }
.active-matchup-row {
  display: flex; justify-content: space-around; align-items: center; margin: 0.4rem 0;
}
.mini-combatant {
  display: flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 800;
}
.mini-combatant img { width: 28px; height: 28px; border-radius: 50%; background: #eee; }
.vs-mini {
  font-weight: 900; font-size: 0.72rem; color: var(--hanko-red); background: var(--hanko-dim);
  padding: 1px 6px; border-radius: 10px;
}
.winner-prompt {
  font-size: 0.76rem; font-weight: 800; color: var(--sumi-faded); margin-top: 0.4rem;
}
.winner-btn-group { display: flex; gap: 6px; justify-content: center; margin-top: 0.4rem; }
.flow-winner {
  flex: 1; min-height: 48px; font-size: 0.84rem; font-weight: 800; border-radius: 8px;
  border: 1px solid var(--brush-border); background: #fff; color: var(--sumi-ink); cursor: pointer;
}
.flow-winner:hover { background: #f0ece1; }
.flow-winner:active { transform: scale(0.96); }
.flow-winner.you { border-color: #2e7d32; color: #2e7d32; }
.flow-winner.you:hover { background: #e8f5e9; }

/* Consensus Box */
.consensus-box {
  padding: 0.8rem; background: #fff; border: 2px solid var(--accent-gold); border-radius: 8px;
}
.consensus-actions { display: flex; gap: 8px; margin-top: 0.6rem; }
.flow-confirm {
  flex: 1; min-height: 44px; font-size: 0.85rem; font-weight: 800; background: #2e7d32;
  color: #fff; border: none; border-radius: 6px; cursor: pointer;
}
.flow-confirm:hover { background: #1b5e20; }
.flow-dispute {
  flex: 1; min-height: 44px; font-size: 0.85rem; font-weight: 800; background: transparent;
  color: var(--hanko-red); border: 1px solid var(--hanko-red); border-radius: 6px; cursor: pointer;
}
.flow-dispute:hover { background: var(--hanko-dim); }

/* Set Complete Banner */
.set-winner-box.victory { border-color: #2e7d32; }
.set-winner-box.defeat { border-color: var(--hanko-red); }
.set-winner-title { font-size: 1.25rem; font-weight: 900; }
.set-winner-box.victory .set-winner-title { color: #2e7d32; }
.set-winner-box.defeat .set-winner-title { color: var(--hanko-red); }
.set-final-score {
  font-family: var(--font-serif); font-size: 1.1rem; font-weight: 900; margin: 0.4rem 0;
}
.btn-reset-flow {
  min-height: 44px; padding: 0 1rem; margin-top: 0.6rem; background: var(--sumi-ink);
  color: #fff; font-weight: 800; font-size: 0.84rem; border: none; border-radius: 8px;
  cursor: pointer;
}

/* Home / Dojo Idle Card Link Button */
.main-fighter-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0.6rem 0; padding: 0.45rem 0.8rem; background: #fff;
  border: 1px solid var(--brush-border); border-radius: 20px; font-size: 0.82rem;
}
.main-fighter-img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.btn-matchflow-link {
  width: 100%; min-height: 46px; font-size: 0.88rem; font-weight: 800;
  background: var(--washi-card); color: var(--sumi-ink); border: 1.5px solid var(--accent-gold);
  border-radius: 8px; cursor: pointer; margin-top: 0.5rem;
}
.btn-matchflow-link:hover { background: #ece5d6; border-color: var(--hanko-red); }