.timed-gauge{border:2px solid #8c9a91;border-radius:12px;padding:14px;margin:12px 0;background:#fff;color:#14261e}
.timed-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.timed-heading b{font-size:1.05rem}.timed-heading strong{font-size:1.45rem}.timed-heading small{display:inline-block;font-size:.7rem;background:#e6eee9;color:#203c2d;padding:3px 6px;border-radius:5px;margin-left:5px}
.timed-gauge p{margin:8px 0}.timed-label{font-weight:800}.timed-track{position:relative;height:24px;border:2px solid #34483c;border-radius:7px;background:#e9eeeb;overflow:visible;margin-top:12px}
:root{--rating-red:#ef3340;--rating-yellow:#f2c437;--rating-green:#20cc64}
.timed-fill{display:block;height:100%;border-radius:4px;background:var(--timed-color,#66766b)}.timed-gauge[style]{border-color:#536c5e}
.timed-mean{position:absolute;left:50%;top:-4px;bottom:-4px;border-left:2px dashed #1c3025}.timed-marker{position:absolute;width:7px;top:-5px;bottom:-5px;border:1px solid #14261e;background:var(--timed-color,#14261e);box-shadow:0 0 0 2px #fff;transform:translateX(-50%);border-radius:1px}.timed-scale{display:flex;justify-content:space-between;font-size:.78rem;font-weight:700;margin-top:8px}.timed-status{display:block;margin-top:8px;font-weight:700}.timed-empty{background:#eef1ef;padding:10px;border:1px dashed #6e7f72;border-radius:6px}.timed-comparison{font-size:.9rem}.timed-overview{padding:16px;border:2px solid #184b32;border-radius:12px;background:#f2f8f3;margin:16px 0;color:#14261e}.timed-overview>small{display:block;margin-top:10px}.timed-overview button{background:#155b37;color:#fff;font-weight:800;min-height:48px}.timed-overview button:disabled{background:#d9e2db;color:#354b3c}.timed-overview summary{font-weight:700;padding:10px 0}.timed-overview details{margin-top:12px}.timed-observations-title{margin-top:22px}.timed-gauge small{line-height:1.5}
@media(max-width:480px){.timed-gauge{padding:12px}.timed-heading b{font-size:1rem}.timed-heading strong{font-size:1.25rem}.timed-scale{font-size:.75rem}}
/* One red / yellow / green palette for automatic gauges and coach observations. */
.segmented-bar .level-1,.attribute-fill.rating-1,.rating-row .rating-1,.skill-chip.rating-1{background:var(--rating-red)}
.segmented-bar .level-2,.attribute-fill.rating-2,.rating-row .rating-2,.skill-chip.rating-2{background:var(--rating-yellow)}
.segmented-bar .level-3,.attribute-fill.rating-3,.rating-row .rating-3,.skill-chip.rating-3{background:var(--rating-green)}
.rating-row button[class*="rating-"],.rating-row .skill-chip,.skill-chip[class*="rating-"]{color:#111;font-weight:750}
.rating-row button[aria-pressed="true"]{outline:3px solid #14261e;outline-offset:3px}

.timed-scale span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;border:1px solid #34483c;background:var(--rating-yellow)}.timed-scale span:first-child::before{background:var(--rating-red)}.timed-scale span:last-child::before{background:var(--rating-green)}

/* Overview first; the hidden face takes no space and has no keyboard stops. */
.flip-player-card{container-type:inline-size;overflow-wrap:anywhere}
.flip-player-card [hidden]{display:none!important}
.flip-player-card small{letter-spacing:0}
.flip-player-card .player-card-head{gap:14px;align-items:center;flex-wrap:nowrap}
.flip-player-card .player-card-head>div:last-child{min-width:0}
.flip-player-card .ovr-badge{font-size:32px;min-width:72px;padding:12px}
.flip-player-card .player-card-head h3{font-size:18px}
.flip-player-card .player-card-head p{font-size:14px;margin:2px 0}
.flip-player-card .player-state{font-size:12px;padding:3px 8px}
.flip-player-card .card-mode{margin:14px 0 10px;gap:6px}
.flip-player-card .card-mode button{min-height:44px;padding:8px;font-size:14px;margin:0}
.card-flip-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;border-bottom:1px solid #648875;padding-bottom:10px}
.card-flip-toolbar>b{font-size:14px}
.flip-player-card .card-flip-button{min-height:44px;background:#f4f8ed;border:2px solid #dce8db;color:#123c2d;font-size:14px;font-weight:750;padding:8px 12px;width:auto;margin:0}
.flip-player-card button:focus-visible{outline:3px solid #f2c437;outline-offset:3px}
.attribute-face{animation:attribute-flip-in .22s ease-out;transform-origin:center}
.attribute-face h4{font-size:14px;margin:14px 0 8px}
.timed-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.timed-quick{background:#f4f8f4;color:#14261e;border-radius:8px;padding:10px 12px;min-width:0}
.quick-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px}
.quick-heading span{font-variant-numeric:tabular-nums;white-space:nowrap}
.timed-quick .timed-track{height:14px;margin-top:9px;border-width:1px;border-radius:4px}
.timed-quick .timed-marker{top:-3px;bottom:-3px;width:5px;box-shadow:0 0 0 1px #fff}
.timed-quick .timed-mean{top:-3px;bottom:-3px}
.quick-scale{margin:8px 0 0;color:#f6faf7;font-size:12px}
.quick-scale span::before{border-color:#d4e5d8}
.quick-baseline{font-size:12px;color:#e0ece4;margin:4px 0 0}
.quick-unrated{font-size:12px;margin:5px 0 0;line-height:1.35}
.observation-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
.observation-quick{min-width:0}
.observation-quick .segmented-bar{margin-top:5px;gap:4px}
.observation-quick .segmented-bar i{height:9px}
.observation-quick small{display:block;font-size:12px;color:#e0ece4;margin-top:2px}
.observation-description{font-size:14px;color:#e0ece4;margin:8px 0}
.attribute-details .timed-gauge{margin:10px 0}
.flip-player-card .card-flip-return{width:100%;margin-top:12px}
@container(max-width:490px){.timed-quick-grid{grid-template-columns:1fr;gap:7px}.timed-quick{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:10px;padding:10px}.timed-quick .quick-heading{font-size:12px}.timed-quick .timed-track{margin-top:0}.timed-quick .quick-unrated{margin:0}.card-flip-toolbar{align-items:flex-start}.observation-quick-grid{gap:8px 12px}}
@container(max-width:285px){.flip-player-card .player-card-head{gap:8px}.flip-player-card .ovr-badge{min-width:56px;padding:9px;font-size:28px}.quick-heading{font-size:12px;gap:4px}.card-flip-toolbar>b{font-size:13px}}
@keyframes attribute-flip-in{from{opacity:.3;transform:perspective(900px) rotateY(-18deg)}to{opacity:1;transform:perspective(900px) rotateY(0)}}
@media(prefers-reduced-motion:reduce){.attribute-face{animation:none}}

.grid:has(.flip-player-card){align-items:start}