/* duel screen styles — robot picker, the versus scoreboard, the robot's answer. Colours from tokens.css only. */
.du-pick { margin-top: 4px; }
.du-bot { border-left: 10px solid var(--green); }
.du-bot-starter { border-left-color: var(--blue); } .du-bot-allstar { border-left-color: var(--grape); }
.du-bot-t { flex: 1; min-width: 0; display: block; }
.du-meter { display: block; }
.du-bot-starter .du-meter i { background: var(--blue); } .du-bot-allstar .du-meter i { background: var(--grape); }
.du-skill { margin-top: 2px; }
.du-go-arrow { width: 34px; height: 34px; flex: 0 0 34px; color: var(--red); display: block; }
.du-go-arrow svg { width: 100%; height: 100%; }
html[data-grade="1"] .du-bot { min-height: 112px; }
.du-rec { margin-top: -6px; }
.du-vs .side { transition: transform 0.2s; }
.du-vs .side.you { border-color: var(--red); }
.du-who { min-width: 0; }
.du-vs .side b { font-variant-numeric: tabular-nums; }
html[data-grade="1"] .du-vs .side b { font-size: 2.2rem; }
.du-pop { animation: du-pop 0.5s cubic-bezier(.3,1.8,.5,1); }
@keyframes du-pop { 40% { transform: scale(1.12); box-shadow: 0 0 0 4px var(--yellow); } }
.du-round { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 900; font-size: 0.95rem; color: var(--wood-line); }
.du-worth { background: var(--navy-soft); border: 2px solid var(--navy-line); border-radius: var(--r-pill); padding: 2px 12px; color: var(--chalk); white-space: nowrap; }
.du-worth.du-carry { background: var(--orange); border-color: var(--orange-deep); color: var(--navy-deep); }
.du-feed { display: flex; flex-direction: column; gap: 2px; min-height: 0; margin: 10px 0 0; background: var(--shade); border-radius: var(--r-md); padding: 8px 12px; font-size: 1.1rem; }   /* readable on the wood floor */
.du-feed:empty { margin: 0; }
.du-botsay { color: var(--blue); }
.du-line { color: var(--yellow); }
.du-av-bot svg { transition: transform 0.2s; }
.du-bot-hit svg { animation: du-hit 0.7s cubic-bezier(.3,1.6,.5,1); }
.du-bot-miss svg { animation: du-miss 0.6s ease-in-out; }
.du-bot-wait svg { opacity: 0.6; }
@keyframes du-hit { 40% { transform: translateY(-12px) scale(1.12); } }
@keyframes du-miss { 20% { transform: rotate(-12deg); } 50% { transform: rotate(10deg); } 80% { transform: rotate(-6deg); } }
.du-after { margin-top: 12px; min-height: 8px; }
.du-next { text-align: center; font-weight: 800; color: var(--wood-line); margin: 0; }
.du-between { background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: 20px 16px; text-align: center; box-shadow: 0 7px 0 var(--wood-deep); }
.du-bw-name { font-weight: 900; color: var(--ink-soft); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.95rem; }
.du-bw-score { display: flex; justify-content: center; align-items: baseline; gap: 14px; margin: 6px 0; }
.du-bw-score b { font-size: 3rem; font-weight: 900; color: var(--red); font-variant-numeric: tabular-nums; }
.du-bw-score b + span + b { color: var(--blue-deep); }
.du-bw-score span { font-weight: 900; color: var(--ink-soft); }
.du-bw-who { font-size: 1.4rem; font-weight: 900; }
.du-bw-sub { margin: 8px 0 0; font-weight: 800; color: var(--ink-soft); }
.du-banking { font-weight: 800; color: var(--ink-soft); margin: 8px 0; }
@media (prefers-reduced-motion: reduce) { .du-bot-hit svg, .du-bot-miss svg, .du-pop { animation: none !important; } }
.du-stage .qc-pic { min-height: 0; margin-bottom: 6px; }
.du-stage .qc-pic svg { max-height: 96px; }
/* the kid's name is never cut off in the duel either: it wraps onto two short lines (1st grader, round 10: "Happy Ball …") */
.versus .side .du-who span { white-space: normal; line-height: 1.15; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }