.cm-player-hud{padding:10px 12px;border:2px solid var(--cm-black,#17151f);border-radius:12px;margin:10px 0;background:var(--cm-cream,#fbf2dd);color:#17151f;font-weight:800;text-align:center}
.cm-personal,.cm-rules-brief{font-size:.88rem;line-height:1.5;text-align:center;margin:12px 0}
.cm-rules-brief{opacity:.8}
.cm-small-btn{min-height:40px;padding:8px 12px;border:2px solid currentColor;border-radius:10px;background:transparent;color:inherit;cursor:pointer;font:inherit}
#cm-time-left{display:block;text-align:right;font-weight:800;margin-bottom:5px}
#cm-pause-dialog{margin:auto;width:min(430px,calc(100% - 28px));padding:24px;background:#241f33;color:#fbf2dd;border:3px solid #ffd23f;border-radius:18px}
#cm-pause-dialog::backdrop{background:#000b}
#cm-pause-dialog button,#cm-settings{margin-top:12px}
#course,#photofinish{scroll-margin-top:70px}
#cm-q-status{min-height:3em;line-height:1.4}
@media(max-width:600px){.cm-course-top{flex-wrap:wrap;gap:8px}#cm-canvas{max-height:220px}#cm-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.cm-choice{min-width:0;overflow-wrap:anywhere;padding:12px 8px;font-size:.9rem;min-height:58px}#cm-qenonce{font-size:1.05rem}#cm-qcard{padding:12px}.cm-logo{font-size:2.2rem}}
@media(prefers-reduced-motion:reduce){.cm-choice{transition:none}}

@media(max-width:600px) and (max-height:700px){
 .cm-course-top{padding:6px 10px}.cm-course-top .ttl{font-size:.95rem}#cm-leader{font-size:.7rem}.cm-small-btn{min-height:34px;padding:5px 8px}
 #cm-canvas-wrap{padding-top:4px}#cm-canvas{max-height:130px}
 .cm-player-hud{font-size:.82rem;padding:6px;margin:6px 8px}
 #cm-qcard{margin:4px 8px 0;padding:10px}#cm-time-left{font-size:.8rem;margin-bottom:2px}
 #cm-chrono-track{height:9px;margin-bottom:6px}#cm-qtheme{margin-bottom:4px;font-size:.6rem}
 #cm-qenonce{font-size:.95rem;margin:4px 0 8px}.cm-choice{min-height:46px;font-size:.8rem;padding:8px 6px}#cm-choices{gap:8px}
 #cm-q-status{font-size:.8rem;min-height:2.4em;margin-top:6px}
}

/* Desktop: use the screen as a race dashboard rather than a narrow phone column. */
@media(min-width:1000px){
 #lobby.active{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:940px;padding:24px 24px 36px;align-items:start;flex:0 auto}
 #lobby .cm-logo{grid-column:1/-1;font-size:3.2rem;margin:8px 0 0}
 #lobby .cm-logo br{display:none}#lobby .cm-logo span{margin-left:12px}
 #lobby .cm-tagline{grid-column:1/-1;margin:0 0 6px;font-size:1.05rem}
 #lobby .cm-panel{max-width:none;margin:0;height:100%}
 #lobby .cm-panel:has(#cm-mode),#lobby .cm-panel:has(#cm-perso-grid){grid-column:1/-1}
 #lobby .cm-panel:has(#cm-mode){padding:12px 16px;display:flex;align-items:center;gap:24px}
 #lobby .cm-panel:has(#cm-mode) .cm-field-label{margin:0}#cm-mode{flex:1}
 #cm-perso-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
 #lobby .cm-perso{min-width:0;padding:10px 4px}
 #lobby .cm-personal,#lobby .cm-rules-brief,#cm-start{grid-column:1/-1;margin:0;max-width:none;width:100%}
 #lobby .cm-personal{font-weight:800}#lobby .cm-rules-brief{font-size:.82rem}
 #course.active{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(360px,1fr);grid-template-areas:'top top' 'track quiz' 'hud quiz';grid-template-rows:auto auto auto;gap:14px 24px;max-width:1320px;width:calc(100% - 48px);padding:24px 0 32px;align-items:start;align-content:start;flex:0 auto}
 #course .cm-course-top{grid-area:top;border-radius:14px;padding:14px 18px;gap:20px}
 #course .cm-course-top .ttl{font-size:1.5rem}#cm-leader{font-size:1rem;margin-left:auto}
 #cm-canvas-wrap{grid-area:track;padding:0;min-width:0}
 #cm-player-hud{grid-area:hud;margin:0;padding:14px;font-size:1rem}
 #cm-qcard{grid-area:quiz;min-width:0;margin:0;padding:22px;align-self:stretch;display:flex;flex-direction:column}
 #cm-qtheme{align-self:flex-start;font-size:.75rem}#cm-qenonce{font-size:clamp(1.15rem,1.45vw,1.5rem);line-height:1.35;margin:10px 0 22px}
 #cm-time-left{font-size:1.1rem}#cm-choices{gap:12px;margin-top:auto}
 .cm-choice{font-size:1rem;line-height:1.35;min-height:86px;padding:14px 12px;min-width:0;overflow-wrap:anywhere}
 #cm-q-status{font-size:.95rem;margin-top:18px;min-height:3em}
 #photofinish.active{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px 36px;max-width:1080px;align-items:start;align-content:start;padding:26px 24px 40px;flex:0 auto}
 #photofinish .cm-pf-title{grid-column:1/-1;margin:8px 0 16px;font-size:3rem}
 #photofinish .cm-pf-sub{grid-column:1;grid-row:2;font-size:1.25rem;margin:0}
 #cm-race-summary{grid-column:1;grid-row:3;font-size:1rem;line-height:1.7;margin:0}
 #cm-record-result{grid-column:1;grid-row:4;margin:0;padding:18px;border:2px solid var(--cm-yellow);border-radius:14px}
 #cm-replay{grid-column:1;grid-row:5;width:100%;max-width:none}#cm-settings{grid-column:1;grid-row:6;width:100%;max-width:none;margin:0}
 #cm-ranking{grid-column:2;grid-row:2/span 5;max-width:none;margin-top:0!important}
}

/* Character portraits retain the same artwork as the race. */
.cm-perso .chip { width: 80px; height: 64px; border: 0; border-radius: 12px; background: radial-gradient(ellipse at bottom, #ffd23f44, transparent 75%) !important; transition: transform .18s ease; }
.cm-perso:hover .chip, .cm-perso:focus-visible .chip { transform: translateY(-4px) rotate(-3deg); }
.cm-perso.sel .chip { filter: drop-shadow(0 3px 4px #ffd23f66); }
.cm-rank-chip { object-fit: contain; background: transparent !important; }
@media (prefers-reduced-motion: reduce) { .cm-perso .chip { transition: none; transform: none !important; } }