*{box-sizing:border-box}
:root{--bg:#0f1115;--fg:#e6e6e6;--muted:#b0b0b0;--accent:#7ee787;--card:#171922;--card2:#1d2030;--line:#2a2d3a;--goal:#52d273;--save:#5da9e9;--miss:#f87070}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
#app{max-width:980px;margin:0 auto;padding:20px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
h1{margin:0;font-weight:700;letter-spacing:.2px}
.badge{font-size:.7em;padding:.25em .5em;border:1px solid var(--line);border-radius:6px;color:var(--muted);margin-left:.5rem}
.controls{display:flex;gap:12px;align-items:center;color:var(--muted)}
.controls input[type="number"]{width:110px;background:var(--card);border:1px solid var(--line);color:var(--fg);padding:6px;border-radius:6px}
.controls label{display:flex;gap:6px;align-items:center}
.controls button{background:var(--card2);border:1px solid var(--line);color:var(--fg);padding:8px 12px;border-radius:8px;cursor:pointer}
.controls button:hover{border-color:#3a3e52}
.hidden{display:none}
.scoreline{display:flex;gap:10px;align-items:center;justify-content:center;font-size:24px;margin:8px 0 6px}
.matchup{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0}
.card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:14px;padding:14px;min-height:190px}
.card h3{margin:0 0 6px;font-size:18px}
.meta{color:var(--muted);font-size:13px;margin-bottom:8px}
.stats{display:grid;gap:6px}
.stat{display:grid;grid-template-columns:90px 1fr;gap:8px;align-items:center}
.bar{height:8px;background:#24283b;border-radius:6px;overflow:hidden}
.fill{height:100%;background:var(--accent);width:50%}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.badge2{font-size:.75rem;padding:2px 6px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.option{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer}
.option:hover{border-color:#3a3e52}
.option .title{font-weight:600;margin-bottom:6px}
.option .hints{color:var(--muted);font-size:12px}
.prompt{min-height:24px;margin-top:8px;color:var(--muted)}
.outcome{margin-top:10px;font-weight:700}
.outcome.goal{color:var(--goal)}
.outcome.save{color:var(--save)}
.outcome.miss{color:var(--miss)}
#announcement{min-height:28px;text-align:center;margin-top:6px;color:var(--muted)}
footer{margin-top:18px;color:var(--muted)}
/* --- Guardrails for stable layout --- */
#stage { display: flex; flex-direction: column; gap: 12px; }

#cards { display: flex; gap: 12px; align-items: flex-start; }
#leftCard, #rightCard { flex: 1 1 0; min-width: 260px; }

#options { display: flex; gap: 12px; flex-wrap: wrap; }
.option { flex: 1 1 240px; min-width: 220px; }

#announcement, #prompt { min-height: 1.8em; }

.hidden { display: none !important; }

/* Make text readable on mobile */
@media (max-width: 480px){
  #leftCard, #rightCard { min-width: 200px; }
  .option { min-width: 180px; }
}

/* layout guardrails */
#stage { display:flex; flex-direction:column; gap:12px; }
#cards { display:flex; gap:12px; align-items:flex-start; }
#leftCard, #rightCard { flex:1 1 0; min-width:260px; }
#options { display:flex; gap:12px; flex-wrap:wrap; }
.option { flex:1 1 240px; min-width:220px; }
#announcement, #prompt { min-height:1.8em; }
.hidden { display:none !important; }

/* mini card strip for lineup reveal */
#revealStrip { display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 0; }
.card.mini { width:200px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,0.04); }
.card.mini .card-title { font-weight:700; margin-bottom:6px; }
.card.mini .bars .bar { display:flex; align-items:center; gap:6px; margin:4px 0; }
.card.mini .bars .g { flex:1; height:6px; background:#1f2330; border-radius:6px; overflow:hidden; }
.card.mini .bars .v { height:100%; background:#8bf18f; }