/* How Bot Contests Work: widget canvas sizes, the streams figure and the pitfall grid. */
#widget-arena-loop canvas { height: 370px; }
#widget-arena-boss canvas, #widget-arena-rating canvas { height: 320px; }

/* The streams diagram is drawn at phone scale; cap it so its text stays a sensible size on desktop. */
#fig-arena-streams svg { max-width: 520px; margin: 0 auto; }

/* Command output and input frames shown as text: smaller margins inside a worked example. */
.ai-example .bot-tree { margin: .6rem 0; }

.pitfall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; margin: 1.2rem 0; }
.pitfall { display: flex; flex-direction: column; gap: .25rem; padding: .75rem .9rem; border-left: 3px solid var(--tut-danger); border-radius: 0 8px 8px 0; background: var(--tut-surface); }
.pitfall strong { color: var(--tut-text); font-size: .9rem; }
.pitfall span { color: var(--tut-soft); font-size: .82rem; line-height: 1.45; }

/* The limits table is three short columns: let it fit a phone instead of scrolling
   (bot-tutorial.css gives series tables a 520 px minimum for long player names). */
#arena-limits > .ai-table { min-width: 0; }

@media (max-width: 600px) {
  #widget-arena-loop canvas { height: 450px; }
  #widget-arena-boss canvas, #widget-arena-rating canvas { height: 560px; }
  .pitfall-grid { grid-template-columns: 1fr; }
}