/* Game pages deliberately use a wider canvas so the complete scorecard is visible. */
.stats-panel{width:min(1460px,calc(100% - 24px));max-width:none;}
.game-heading{margin-bottom:18px;}

.game-summary-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 auto 22px;}
.game-summary-card>div{background:#071f3d;border:2px solid #ffc43d;border-radius:10px;color:#fff;padding:14px;text-align:center;}
.game-summary-card strong{display:block;color:#ffc43d;font:900 1.45rem Arial,sans-serif;margin-top:4px;}
.summary-label{font:800 .72rem Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;}

.scorecard-card{padding:10px 10px 14px;}
.scorecard-scroll{overflow-x:visible;padding-bottom:0;}
.scorecard{display:grid;grid-template-columns:repeat(9,minmax(0,1fr)) minmax(0,1.35fr) 114px;width:100%;min-width:0;border-left:1px solid #9da7b3;border-top:1px solid #9da7b3;background:#fff;}
.score-frame{appearance:none;position:relative;display:grid;grid-template-rows:16px 36px 48px 90px;min-height:190px;padding:0;border:0;border-right:1px solid #9da7b3;border-bottom:1px solid #9da7b3;background:#fff;color:#071f3d;cursor:pointer;font-family:Arial,sans-serif;}
.score-frame:hover,.score-frame:focus,.score-frame.selected-frame{outline:3px solid #ffc43d;outline-offset:-3px;z-index:2;}
.frame-number{display:block;border-bottom:1px solid #b6bec8;color:#586575;font:700 10px/16px Arial,sans-serif;text-align:center;}
.ball-marks{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;border-bottom:1px solid #b6bec8;font:500 16px Arial,sans-serif;}
.ball-mark{display:flex;align-items:center;justify-content:center;min-width:0;border-left:1px solid #b6bec8;}
.ball-mark:first-child{border-left:0;}
.split-mark{display:inline-flex;width:22px;height:22px;border:1.5px solid #333;border-radius:50%;align-items:center;justify-content:center;line-height:1;}
.running-total{display:flex;align-items:center;justify-content:center;font:500 22px Arial,sans-serif;}
.frame-pin-rack{display:flex;align-items:center;justify-content:center;min-height:90px;padding:2px;border-top:1px solid #e0e4e9;}

.pin-rack{position:relative;display:block;width:150px;height:112px;margin:10px auto 2px;}
.pin-rack-compact{width:108px;height:82px;margin:0 auto;}
.rack-pin{position:absolute;left:var(--pin-x);top:var(--pin-y);display:block;width:24px;height:48px;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));}
.pin-rack-compact .rack-pin{width:16px;height:32px;}
.rack-pin.pin-down{opacity:.32;filter:none;}
.rack-pin.pin-blank{opacity:.78;}
.ball-pin-display{margin:14px 0 4px;padding:12px;border:1px solid #c9d1dc;border-radius:9px;background:#fff;text-align:center;}
.ball-pin-display>strong{display:block;color:#526171;font:800 .76rem Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em;}

.final-score-box{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;padding-top:11px;border-right:1px solid #9da7b3;border-bottom:1px solid #9da7b3;background:#eef2f6;color:#071f3d;}
.final-score-label{font:900 11px Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.final-score-box strong{font:900 48px/1 Arial,sans-serif;}
.scorecard-help{margin:14px 0 0;color:#4d5a68;font-size:.95rem;text-align:center;}

.frame-detail-panel{background:#fff;color:#071f3d;border:4px solid #ffc43d;border-radius:14px;padding:20px;margin:0 auto 24px;box-shadow:0 8px 22px rgba(0,0,0,.3);}
.frame-detail-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px;}
.frame-detail-heading h2{margin:0;color:#b51d22;font:900 2rem Arial,sans-serif;}
.frame-result-badge{background:#071f3d;color:#ffc43d;border-radius:999px;padding:8px 14px;font:800 .8rem Arial,sans-serif;text-transform:uppercase;}
.ball-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.ball-detail-card{border:2px solid #c9d1dc;border-radius:10px;padding:16px;background:#f7f9fc;}
.ball-detail-card h3{margin:0;text-align:center;font:900 1.2rem Arial,sans-serif;}
.ball-big-mark{margin:10px 0;text-align:center;color:#b51d22;font:900 2.4rem Arial,sans-serif;}
.ball-detail-card dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:0;}
.ball-detail-card dt{font-weight:800;}.ball-detail-card dd{margin:0;text-align:right;}
.ball-flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.ball-flags span{background:#ffc43d;color:#071f3d;border-radius:999px;padding:5px 9px;font:800 .72rem Arial,sans-serif;}
.game-back-row{text-align:center;}

.game-data-card,.game-specs-card{background:#fff;color:#071f3d;border:4px solid #ffc43d;border-radius:14px;padding:18px 22px;margin:0 auto 22px;}
.game-data-card h2,.game-specs-card h2{margin:0 0 14px;color:#b51d22;font:900 1.75rem Arial,sans-serif;text-align:left;}
.game-data-list{margin:0;}
.game-data-list>div{display:grid;grid-template-columns:125px 1fr;gap:12px;padding:7px 0;border-bottom:1px solid #d8dee7;}
.game-data-list>div:last-child{border-bottom:0;}
.game-data-list dt{font:800 .9rem Arial,sans-serif;}.game-data-list dd{margin:0;font:700 .95rem Arial,sans-serif;}
.challenge-row dd{color:#b51d22;}
.game-specs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.spec-row{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;background:#f5f7fa;border:2px solid #c8d1dd;border-radius:10px;padding:13px 15px;}
.spec-row span{font:800 .9rem Arial,sans-serif;}
.spec-row strong{color:#b51d22;font:900 1.55rem Arial,sans-serif;}
.spec-row small{grid-column:1/-1;color:#556274;font:700 .78rem Arial,sans-serif;}

@media(max-width:760px){.game-summary-card,.ball-detail-grid,.game-specs-grid{grid-template-columns:1fr;}.frame-detail-heading{align-items:flex-start;flex-direction:column;}.scorecard-scroll{overflow-x:auto;}.scorecard{min-width:1020px;}}

/* Series details page */
.series-heading{text-align:center}.series-heading p{font-weight:800}.series-game-block{margin:0 auto 24px}.series-game-block>h2{margin:0 0 8px;color:#ffc43d;text-align:center;font:900 1.55rem Arial,sans-serif}.series-score-frame{cursor:default}.series-score-frame:hover,.series-score-frame:focus{outline:none}.series-specs-card{background:#fff;color:#071f3d;border:4px solid #ffc43d;border-radius:14px;padding:20px;margin:0 auto 24px}.series-specs-card h2{margin:0 0 18px;color:#b51d22;text-align:center;font:900 1.8rem Arial,sans-serif}.series-spec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.series-spec{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:12px;background:#f5f7fa;border:2px solid #c8d1dd;border-radius:12px;padding:14px}.series-spec span{display:block;font:800 .9rem Arial,sans-serif}.series-spec strong{display:block;color:#b51d22;font:900 1.65rem Arial,sans-serif}.series-spec small{display:block;color:#556274;font:700 .76rem Arial,sans-serif}.series-donut{--value:0;position:relative;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:conic-gradient(#b51d22 calc(var(--value)*1%),#dce2ea 0)}.series-donut:before{content:"";position:absolute;width:54px;height:54px;border-radius:50%;background:#fff}.series-donut span{position:relative;z-index:1;color:#071f3d;font:900 .83rem Arial,sans-serif}.series-game-block .scorecard-card{margin-bottom:0}
@media(max-width:900px){.series-spec-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.series-spec-grid{grid-template-columns:1fr}}


/* Series specs — stronger selectors prevent general span rules from breaking charts. */
.series-specs-card {
    background:#fff;
    color:#071f3d;
    border:4px solid #ffc43d;
    border-radius:14px;
    padding:22px;
    margin:0 auto 24px;
}
.series-specs-card > h2 {
    margin:0 0 18px;
    color:#b51d22;
    text-align:center;
    font:900 1.9rem Arial,sans-serif;
}
.series-specs-card .series-spec-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.series-specs-card .series-spec-grid > .series-spec {
    display:grid;
    grid-template-columns:86px minmax(0,1fr);
    align-items:center;
    gap:14px;
    min-height:112px;
    background:#f5f7fa;
    border:2px solid #c8d1dd;
    border-radius:12px;
    padding:14px;
}
.series-specs-card .series-chart {
    display:flex;
    align-items:center;
    justify-content:center;
}
.series-specs-card .series-donut {
    --value:0;
    position:relative;
    display:grid;
    place-items:center;
    width:76px;
    height:76px;
    min-width:76px;
    border-radius:50%;
    background:conic-gradient(#b51d22 calc(var(--value) * 1%),#dce2ea 0);
}
.series-specs-card .series-donut::before {
    content:"";
    position:absolute;
    inset:11px;
    border-radius:50%;
    background:#fff;
}
.series-specs-card .series-donut > span {
    position:relative;
    z-index:1;
    display:block;
    color:#071f3d;
    font:900 .83rem Arial,sans-serif;
}
.series-specs-card .series-spec > div:last-child > span {
    display:block;
    color:#071f3d;
    font:800 .9rem Arial,sans-serif;
}
.series-specs-card .series-spec > div:last-child > strong {
    display:block;
    margin:2px 0;
    color:#b51d22;
    font:900 1.65rem Arial,sans-serif;
}
.series-specs-card .series-spec > div:last-child > small {
    display:block;
    color:#556274;
    font:700 .76rem Arial,sans-serif;
    line-height:1.25;
}
@media(max-width:900px){
    .series-specs-card .series-spec-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:620px){
    .series-specs-card .series-spec-grid{grid-template-columns:1fr;}
}

/* Series polish: timeline, larger donuts, and category cues */
.series-timeline-card{background:#fff;color:#071f3d;border:4px solid #ffc43d;border-radius:14px;padding:18px 22px;margin:0 auto 24px}.series-timeline-card h2{margin:0 0 14px;color:#b51d22;text-align:center;font:900 1.65rem Arial,sans-serif}.series-timeline{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}.timeline-game{min-width:145px;background:#071f3d;border:2px solid #ffc43d;border-radius:12px;padding:12px 18px;text-align:center;color:#fff}.timeline-game-link{display:block;text-decoration:none;cursor:pointer;transition:transform .15s ease,background-color .15s ease}.timeline-game-link:hover,.timeline-game-link:focus{background:#123660;transform:translateY(-2px);outline:3px solid rgba(255,196,61,.45);outline-offset:2px}.timeline-game-link:visited{color:#fff}.timeline-game span{display:block;font:800 .78rem Arial,sans-serif;text-transform:uppercase;letter-spacing:.05em}.timeline-game strong{display:block;margin-top:3px;color:#ffc43d;font:900 2rem Arial,sans-serif}.timeline-arrow{color:#b51d22;font:900 2rem Arial,sans-serif}
.series-specs-card .series-donut{width:88px;height:88px;min-width:88px}.series-specs-card .series-donut::before{inset:13px}.series-specs-card .series-donut>span{font-size:.95rem}.series-specs-card .series-spec-grid>.series-spec{grid-template-columns:98px minmax(0,1fr);min-height:126px}.spec-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:7px;border-radius:50%;background:#071f3d;color:#fff;font:900 .82rem Arial,sans-serif;vertical-align:middle}.series-donut-strike{background:conic-gradient(#d99b00 calc(var(--value)*1%),#dce2ea 0)!important}.series-donut-opportunity{background:conic-gradient(#315f9a calc(var(--value)*1%),#dce2ea 0)!important}.series-donut-spare{background:conic-gradient(#1d7a4a calc(var(--value)*1%),#dce2ea 0)!important}.series-donut-split{background:conic-gradient(#b51d22 calc(var(--value)*1%),#dce2ea 0)!important}.series-donut-splitmade{background:conic-gradient(#7a3f98 calc(var(--value)*1%),#dce2ea 0)!important}.series-donut-open{background:conic-gradient(#596574 calc(var(--value)*1%),#dce2ea 0)!important}
@media(max-width:620px){.timeline-arrow{transform:rotate(90deg)}.series-timeline{flex-direction:column}.timeline-game{width:100%}}
.pin-leave-number{display:flex;align-items:center;justify-content:center;width:88px;height:88px;min-width:88px;border-radius:50%;background:#071f3d;color:#ffc43d;font:900 1.35rem Arial,sans-serif;}

.data-heading-with-analysis{display:flex!important;align-items:center;justify-content:center;gap:10px}.analyze-heading-link{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:6px;text-decoration:none!important}.analyze-heading-link img{display:block;width:34px;height:34px;object-fit:contain}.analyze-heading-link:hover,.analyze-heading-link:focus{transform:scale(1.08);filter:brightness(1.12)}
.game-analysis-card{background:#fff;color:#071f3d;border:4px solid #ffc43d;border-radius:14px;padding:22px;margin:0 auto 24px;box-shadow:0 8px 22px rgba(0,0,0,.25)}.game-analysis-card>h2{margin:0 0 8px;color:#b51620;text-align:center;font:900 2rem Arial,sans-serif}.analysis-intro{max-width:900px;margin:0 auto 18px;color:#526171;text-align:center;font:700 .92rem/1.5 Arial,sans-serif}.analysis-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.analysis-metric-grid>div{padding:14px;border:2px solid #c8d1dd;border-radius:10px;background:#f5f7fa;text-align:center}.analysis-metric-grid span,.analysis-metric-grid small{display:block}.analysis-metric-grid span{font:800 .78rem Arial,sans-serif;text-transform:uppercase}.analysis-metric-grid strong{display:block;margin:4px 0;color:#b51620;font:900 1.65rem Arial,sans-serif}.analysis-metric-grid small{color:#596574;font:700 .75rem Arial,sans-serif}.analysis-insight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.analysis-chart-card{min-width:0;padding:18px;border:2px solid #c8d1dd;border-radius:12px;background:#f8fafc}.analysis-chart-card h3,.what-if-card h3{margin:0 0 6px;color:#071f3d;font:900 1.25rem Arial,sans-serif}.analysis-chart-card p{margin:0 0 10px;font:700 .88rem/1.45 Arial,sans-serif}.analysis-chart-wrap{position:relative;height:280px}.what-if-card{margin-top:18px;padding:18px;border:2px solid #ffc43d;border-radius:12px;background:#fff8e5}.what-if-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}.what-if-heading p{margin:0;color:#526171;font:700 .86rem/1.4 Arial,sans-serif}.what-if-score{min-width:135px;padding:10px 14px;border-radius:9px;background:#071f3d;color:#fff;text-align:center}.what-if-score span{display:block;font:800 .7rem Arial,sans-serif;text-transform:uppercase}.what-if-score strong{display:block;color:#ffc43d;font:900 1.85rem Arial,sans-serif}.what-if-frames{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.what-if-frames fieldset{min-width:0;margin:0;padding:9px;border:1px solid #9fb5c5;border-radius:8px;background:#fff}.what-if-frames legend{padding:0 4px;color:#071f3d;font:900 .78rem Arial,sans-serif}.what-if-frames label{display:grid;grid-template-columns:1fr 48px;align-items:center;gap:5px;margin:5px 0;font:700 .72rem Arial,sans-serif}.what-if-roll{width:48px!important;padding:6px!important;border:1px solid #aeb9c6;border-radius:5px;text-align:center}.what-if-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}.what-if-footer span{font:800 .82rem Arial,sans-serif}.what-if-error{color:#a5141b}.series-history-chart{margin-top:16px}@media(max-width:1000px){.analysis-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.what-if-frames{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.analysis-insight-grid{grid-template-columns:1fr}.what-if-heading{align-items:flex-start;flex-direction:column}.what-if-score{width:100%}}@media(max-width:480px){.analysis-metric-grid,.what-if-frames{grid-template-columns:1fr}.analysis-chart-wrap{height:240px}}


/* Frame detail shows the recorded pin mask after every imported ball. */
.ball-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
@media(max-width:900px){.ball-detail-grid{grid-template-columns:1fr}}