.card-page { max-width:1120px; }
.card-nav { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.card-panel { padding:26px; background:var(--panel); margin:8px 8px 32px; min-width:0; box-shadow:0 0 0 3px var(--gold-dark),0 0 0 7px #000,6px 10px 0 7px rgba(0,0,0,.5); }
.card-panel h2 { line-height:1.8; overflow-wrap:anywhere; }
.body-copy { font:11px/2 "Press Start 2P",monospace; color:var(--ink); }
.small-copy { font:9px/1.9 "Press Start 2P",monospace; color:var(--ink-dim); }
.eyebrow { color:var(--gold); font-size:9px; line-height:2; }
.overview { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center; }
.overall { text-align:center; min-width:150px; max-width:260px; }
/* The cap explanation wraps under the score instead of widening the column. */
.overall #capped { margin:12px 0 0; line-height:1.9; overflow-wrap:break-word; }
.overall strong { display:block; font-size:36px; color:var(--gold); text-shadow:3px 3px #000; }
.overall #letter { font-size:22px; }
.arena-button { display:inline-block; margin:10px 4px; padding:14px 16px; background:var(--red); color:var(--ink); box-shadow:0 0 0 3px #000,inset 0 -4px var(--red-dark),0 6px #000; border:0; font:10px/1.8 "Press Start 2P",monospace; text-decoration:none; cursor:pointer; max-width:100%; overflow-wrap:anywhere; }
.arena-button:hover { background:#d9534a; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.card-nav .back:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.card-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.section-scores { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:8px 8px 32px; }
.section-score { padding:20px; background:var(--velvet); border-bottom:4px solid var(--gold-dark); }
.section-score h3 { font-size:11px; color:var(--gold); font-weight:400; }
.section-score strong { font-size:22px; font-weight:400; }
.section-score p { margin-bottom:0; }
.delta { font-size:14px; color:var(--ink-dim); }
.positive { color:var(--gold); }
.negative { color:#ffaaa3; }
.fix-list { padding-left:24px; }
.fix-list li { padding:4px 0 20px 8px; }
.fix-list strong { display:block; color:var(--gold); }
.fix-list p { margin:4px 0; }
audio { width:100%; margin:10px 0; }
.transcript { padding:16px; border:2px solid var(--panel-line); }
.transcript-key { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.transcript-key span { padding:0 8px; }
.word,.evidence-play,.pause-button { font:inherit; color:inherit; background:transparent; border:0; padding:2px 3px; border-radius:0; }
button.word,button.evidence-play,.pause-button { cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:4px; }
.word:hover,.evidence-play:hover,.pause-button:hover { background:var(--velvet); }
.filler { background:#4d3414; color:#ffdb94; }
.monotone { border-bottom:3px solid #d5b9ff; }
.emphasis { font-weight:700; box-shadow:inset 0 -2px #9fe4ce; }
.pause { color:#ffaaa3; background:#461e28; }
.evidence-list { padding-left:22px; }
.evidence-list li { margin-bottom:10px; }
.claim { border-bottom:2px dotted var(--panel-line); padding:12px 0; }
.claim p { margin:4px 0; }
.claim blockquote { margin:10px 0 4px 16px; border-left:3px solid var(--gold-dark); padding-left:14px; }
.structure { display:flex; gap:8px 20px; flex-wrap:wrap; margin-bottom:16px; }
.structure span { color:var(--ink-dim); }
.factor-details { border-top:3px solid var(--panel-line); margin-top:18px; }
.factor-details summary { padding:16px 0; cursor:pointer; color:var(--gold); line-height:2; }
.metric { background:var(--bg); margin:8px 0; border-left:3px solid var(--panel-line); }
.metric[open] { border-left-color:var(--gold-dark); padding-bottom:14px; }
.metric-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; cursor:pointer; list-style:none; font:10px/1.7 "Press Start 2P",monospace; }
.metric-summary::-webkit-details-marker { display:none; }
.metric-summary::before { content:"▸"; color:var(--gold); margin-right:10px; }
.metric[open] > .metric-summary::before { content:"▾"; }
.metric-summary:hover { background:#1a1018; }
.metric-name { flex:1; min-width:0; }
.metric-chip { flex-shrink:0; color:var(--ink-dim); font-size:8px; }
.metric-chip.lost { color:#ffaaa3; }
.metric-coach { margin:0 16px 14px; padding:10px 12px; background:var(--velvet); color:var(--ink); font:10px/1.9 "Press Start 2P",monospace; }
.metric h4 { margin:0 0 10px; font:11px/1.8 "Press Start 2P",monospace; }
.metric dl { margin:0 16px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; font:9px/1.9 "Press Start 2P",monospace; }
.metric dl div { min-width:0; }
.metric dt { color:var(--ink-dim); }
.metric dd { margin:0; overflow-wrap:anywhere; }
.metric-evidence { margin:10px 16px 0; }
.metric-evidence summary { padding:4px 0; font:9px/1.9 "Press Start 2P",monospace; }
.radar-table { table-layout:fixed; }
.radar-table td,.radar-table th { overflow-wrap:anywhere; font-size:8px; }
.radar-tip { max-width:220px; }
@media(max-width:760px) { .card-columns { grid-template-columns:1fr; gap:0; } .card-panel { padding:20px 14px; } .section-scores { gap:8px; } .section-score { padding:12px 8px; } .section-score h3 { font-size:8px; } .section-score strong { font-size:18px; } .section-score .small-copy { font-size:8px; } }
@media(max-width:480px) { .overview { grid-template-columns:1fr; gap:8px; } .overall { text-align:left; } .overall strong,.overall #letter { display:inline-block; margin-right:18px; } .metric dl { grid-template-columns:1fr; } .section-scores { grid-template-columns:1fr; } .section-score { display:grid; grid-template-columns:1fr auto; align-items:center; } .section-score p { grid-column:1/-1; } .card-nav .back { font-size:8px; } }
[hidden] { display:none !important; }