/* Phone layouts keep the reading and action order of the desktop page. */
.mobile-field-label { display: none; }
.tournament-running,.tournament-difference { text-align: right; }
body :is(.series-history-header,.series-history-row,.series-history-totals) { min-width: 0; grid-template-columns: minmax(85px,1.3fr) repeat(var(--series-games,3),minmax(0,1fr)) repeat(6,minmax(0,1fr)); column-gap: 10px; }
body :is(.series-history-header,.series-history-row,.series-history-totals)>* { min-width: 0; overflow-wrap: anywhere; }
body .series-history-pagination { min-width: 0; }
@media (max-width: 1200px) {
    body main, body .workspace { min-width: 0; max-width: 100%; }
    body main { padding-inline: 12px; }
    body :is(main, dialog, .dialog, [role="dialog"]) :is(section, article, aside, form, fieldset) { min-width: 0; }
    body :is(main, dialog, .dialog, [role="dialog"]) :is(h1,h2,h3,h4,p,a,label,small,strong,td,th) { overflow-wrap: anywhere; }
    body main h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
    body :is(input,select,textarea) { min-width: 0; max-width: 100%; }
    body :is(dialog,.dialog) { box-sizing: border-box; max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; }
    body .modal { padding: 10px; }
    body :is(.bar,.admin-head,.head,.top,.section-title,.section-heading,.page-heading,.card-heading,.detail-heading,.analysis-heading,.league-title-row,.ball-library-heading,.ball-picker-heading) { flex-wrap: wrap; gap: 12px; }
    body :is(.bar nav,.admin-links,.tabs,.detail-actions,.history-actions,.form-actions,.billing-actions,.send-dialog-actions,.series-send-actions) { flex-wrap: wrap; gap: 8px; }
    body .bar nav { width: 100%; }
    body .bar nav a { padding-block: 8px; }
    body :is(.profile-main,.shots-main,.admin-main,.records-page,.analysis-page) { margin-block: 16px; padding: 12px; }
    body :is(.profile-card,.tool-card,.analysis-card,.record-card,.panel) { padding: 14px; }
    body :is(.profile-grid,.shots-grid,.tournament-layout,.form-grid,.pattern-layout,.ball-layout,.game-ranking-grid,.setup-grid,.join-session-card) { grid-template-columns: minmax(0,1fr); }
    body .planner-grid { grid-template-columns: minmax(0,1fr); }
    body :is(.profile-grid,.shots-grid,.tournament-layout)>* { min-width: 0; }
    body :is(.profile-save-actions,.field.wide,.form-grid .wide) { grid-column: 1/-1; }
    body :is(.bag-ball,.ball-item) { grid-template-columns: 48px minmax(0,1fr) auto; gap: 8px; }
    body :is(.bag-ball,.ball-item)>img,body .ball-placeholder { width: 48px; height: 48px; }
    body :is(.bag-ball-details,.bag-selected>*,.ball-library-choice>*,.ball-choice>*) { min-width: 0; }
    body :is(.ball-library-grid,.ball-choice-grid) { grid-template-columns: minmax(0,1fr); }
    body .bag-list { grid-template-columns: minmax(0,1fr); }
    body :is(.bag-ball-title,.bag-ball-specs) { white-space: normal; overflow-wrap: anywhere; }
    body .ball-layout .images { grid-template-columns: repeat(2,minmax(0,1fr)); }
    body .images .empty { min-width: 0; padding: 16px 6px; overflow-wrap: anywhere; }
    body :is(.ball-library-shell,.ball-picker-shell,.send-dialog form) { padding: 14px; }
    body .serial-editor { grid-template-columns: minmax(0,1fr) auto; }
    body .serial-editor input { grid-column: 1/-1; }
    body .score-head .game-ball-control strong { overflow-wrap: normal; }

    /* Wide data tables become labeled records; no information is clipped. */
    body table.mobile-record-table:not(.alternatives-table):not(.transition-map-table) { display: block; width: 100%; min-width: 0; table-layout: fixed; }
    body table.mobile-record-table:not(.alternatives-table):not(.transition-map-table) thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
    body table.mobile-record-table:not(.alternatives-table):not(.transition-map-table) tbody { display: grid; width: 100%; gap: 12px; }
    body table.mobile-record-table:not(.alternatives-table):not(.transition-map-table) tr { display: block; width: 100%; border: 1px solid #33445e; border-radius: 10px; padding: 8px; }
    body table.mobile-record-table:not(.alternatives-table):not(.transition-map-table) :is(td,th) { display: block; width: 100%; min-width: 0; white-space: normal; padding: 8px 4px; text-align: left; }
    body table.mobile-record-table:not(.alternatives-table):not(.transition-map-table) td[data-mobile-label]::before { content: attr(data-mobile-label); display: block; margin-bottom: 4px; color: #9eb1c9; font-size: .72rem; font-weight: 700; }
    body table.mobile-record-table:not(.alternatives-table):not(.transition-map-table) td :is(input,select,textarea) { width: 100%; max-width: 100%; }
    body table.mobile-record-table:not(.alternatives-table):not(.transition-map-table) td input[type="checkbox"] { width: auto; }
    body table.mobile-record-table:not(.alternatives-table):not(.transition-map-table) td button { margin: 3px 4px 3px 0; }
    body :is(.table-wrap,.series-history,.alternatives-table-wrap,.strategy-transition-table) { min-width: 0; max-width: 100%; }

    /* The ten-frame game remains a single row, including the three-ball tenth. */
    body .live-score-grid { min-width: 0; grid-template-columns: repeat(9,minmax(0,1fr)) minmax(0,1.4fr); }
    body .live-frame { min-width: 0; }
    body .live-frame-rolls span { min-width: 0; font-size: clamp(.55rem,2.3vw,.8rem); }
    body .live-frame>strong { font-size: clamp(.55rem,2.3vw,.8rem); }
    body .live-maximum { font-size: .55rem; white-space: normal; }
    body .bowler-card>summary { grid-template-columns: minmax(0,1fr) auto; padding: 8px; gap: 6px; }
    body .bowler-identity,body .bowler-identity>div { min-width: 0; flex-wrap: wrap; gap: 5px; }
    body .bowler-identity>div>strong,body .bowler-identity small { white-space: normal; }
    body .series-total { flex-wrap: wrap; max-width: 85px; justify-content: flex-end; gap: 3px; }
    body .bowler-games { padding: 5px; }
    body .game-tabs { flex-wrap: wrap; }
    body .detail-actions { justify-content: flex-start; }
    body .game-ranking-row { grid-template-columns: 32px minmax(0,1fr) auto; gap: 5px; padding: 8px; }

    /* League history reads one dated series at a time on a phone. */
    body .series-history-header { display: none; }
    body :is(.series-history-row,.series-history-totals) { min-width: 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 12px; margin-bottom: 10px; border: 1px solid #33445e; border-radius: 10px; }
    body .series-history-row time { grid-column: 1/-1; font-weight: 800; }
    body :is(.series-history-row,.series-history-totals)>* { min-width: 0; text-align: left; }
    body [data-series-label]::before { content: attr(data-series-label); display: block; color: #9eb1c9; font-size: .7rem; font-weight: 500; margin-bottom: 3px; }
    body .series-history-pagination { min-width: 0; flex-wrap: wrap; justify-content: center; }
    body .manual-series-columns { display: none; }
    body .manual-series-row { grid-template-columns: minmax(0,1fr) minmax(64px,.6fr); gap: 8px; padding-block: 12px; }
    body .manual-series-row label { grid-column: 1; }
    body .manual-series-row input { grid-column: 2; }
    body .manual-running-total { grid-column: 1; grid-row: 2; text-align: left; }
    body .manual-running-total::before { content: 'Running total: '; font-size: .7rem; }
    body .manual-plus-minus { grid-column: 2; grid-row: 2; }
    body .manual-plus-minus::before { content: '+/- 200: '; font-size: .7rem; }
    body .manual-series-ball { grid-column: 1/-1; grid-row: 3; justify-content: flex-start; }
    body .manual-series-row :is(.game-note-label,.manual-game-note) { grid-column: 1/-1; grid-row: auto; }
    body .manual-series-total { grid-template-columns: minmax(0,1fr) auto auto; }
    body .manual-series-total span { grid-column: 1; }
    body .manual-series-heading { flex-wrap: wrap; }
    body .manual-series-heading small { text-align: left; }
    body .manual-score-header { display: none; }
    body .manual-score-row { grid-template-columns: repeat(2,minmax(0,1fr))!important; gap: 10px; padding: 14px 0; }
    body .manual-score-row>strong:first-child { grid-column: 1; grid-row: 1; text-align: left; }
    body .manual-score-row .score-value { grid-column: 2; grid-row: 1; }
    body .manual-score-row .lane-assignment { grid-column: 1/-1; grid-row: 2; }
    body :is(.tournament-running,.tournament-difference) { grid-row: 3; text-align: left; }
    body .manual-score-total { grid-template-columns: minmax(0,1fr) auto auto!important; }
    body .mobile-field-label { display: block; color: #9eb1c9; font-size: .72rem; margin-bottom: 3px; }
}
@media (max-width: 600px) {
    body :is(.league-form-heading,.ball-library-heading,.ball-picker-heading,.detail-heading,.admin-head,.bar,.head,.page-heading,.section-title,.card-heading,.analysis-heading) { flex-direction: column; align-items: flex-start; }
    body .league-form-heading { gap: 10px; }
    body .league-form-heading h2 { width: 100%; }
    body :is(.league-form-heading,.card-heading,.page-heading) button { max-width: 100%; }
}
@media (max-width: 480px) {
    body :is(.contact-row,.bowling-options,.bag-add,.controls,.lane-assignment-fields) { grid-template-columns: minmax(0,1fr); }
    body .ball { grid-template-columns: repeat(2,minmax(0,1fr)); }
    body .ball>div:last-child { grid-column: 1/-1; }
    body :is(.coaching-tip,.pattern-filters) { grid-template-columns: minmax(0,1fr); }
    body .coaching-tip { gap: 6px; }
    body .coaching-tip a { white-space: normal; }
}

/* Trajectories are comparisons: retain aligned columns instead of record cards. */
@media(max-width:760px){
 body .lane-card.show-alternatives{display:flex;flex-direction:column;min-width:0}
 body .lane-card.show-alternatives .lane-wrap{width:100%;height:auto;min-height:0;padding:6px;aspect-ratio:550 / 775;max-height:70svh}
 body .lane-card.show-alternatives .lane{width:100%;height:100%;min-height:0;max-height:100%;transform:none;object-fit:contain}
 body .lane-toolbar{padding:8px;gap:6px}
 body .lane-toolbar>div{min-width:0;flex-wrap:wrap}
 body .show-alternatives .alternatives-card{padding:10px 6px;overflow:visible}
 body .alternatives-heading{margin-bottom:8px}
 body .alternatives-heading h2{font-size:1rem}
 body .alternatives-heading p{font-size:.7rem;line-height:1.35}
 body .alternatives-table-wrap{width:100%;overflow:visible}
 body .alternatives-table{width:100%;table-layout:fixed}
 body .alternatives-table :is(th,td){padding:5px 1px;text-align:center;overflow-wrap:normal;white-space:normal;font-size:clamp(10px,2.8vw,12px);font-variant-numeric:tabular-nums}
 body .alternatives-table th{font-size:9px;letter-spacing:0;line-height:1.2}
 body .alternatives-table :is(th,td):first-child{width:14%;padding-left:1px;text-align:center}
 body .alternatives-table th:nth-child(7){width:21%}
 body .alternatives-table tbody tr{height:36px;cursor:pointer}
 body .alternatives-table tbody tr:focus-visible{outline:2px solid #8edaff;outline-offset:-2px}
 body .embedded-trajectory-planner>.topbar{display:none}
 body .embedded-trajectory-planner .workspace{padding:10px 6px 16px}
 body .embedded-trajectory-planner .planner-grid{gap:10px}
 body .trajectory-planner-dialog{width:calc(100vw - 12px);max-width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);overflow:hidden}
 body .trajectory-planner-bar{flex-shrink:0;padding:6px 8px;gap:6px;font-size:.85rem}
 body .trajectory-planner-bar button{padding:6px 8px;font-size:.72rem;min-height:32px;max-width:65%;white-space:normal}
 body .trajectory-planner-status{flex-shrink:0;padding:4px 8px;font-size:.75rem;line-height:1.3}
 body .trajectory-planner-dialog iframe{display:block;min-height:0}
}

/* Keep transition phases comparable across the same six columns. */
@media(max-width:1200px){
 body .strategy-transition-table{width:100%;min-width:0;overflow:visible}
 body .strategy-transition-table .transition-map-table{width:100%;min-width:0;table-layout:fixed;border-collapse:collapse}
 body .strategy-transition-table .transition-map-table :is(th,td){padding:6px 3px;font-size:clamp(10px,2.6vw,12px);line-height:1.3;white-space:normal;overflow-wrap:anywhere;vertical-align:top}
 body .strategy-transition-table .transition-map-table thead th{font-size:9px;letter-spacing:0;line-height:1.2}
 body .transition-map-table thead th:nth-child(1){width:20%}
 body .transition-map-table thead th:nth-child(2){width:27%}
 body .transition-map-table thead th:nth-child(3){width:23%}
 body .transition-map-table thead th:nth-child(n+4){width:10%}
 body .strategy-transition-table .transition-map-table :is(th,td):nth-child(n+4){text-align:center;font-variant-numeric:tabular-nums}
 body .transition-map-table .transition-phase-button{width:100%;min-height:32px;margin:0;padding:0;font:inherit;font-weight:700;white-space:normal;overflow-wrap:anywhere}
}
@media(max-width:760px){
 body .planner-transition-map{margin-top:12px}
 body .planner-transition-map .published-strategy-section{padding:10px 6px}
 body .planner-transition-map .published-strategy-section h4{font-size:1rem;margin:0 0 8px}
}

.mobile-cross-section-lane{display:none}
@media(max-width:760px){
 body .recommendation-content{grid-template-columns:minmax(0,1fr);padding:10px;gap:10px}
 body .recommendation-content>.recommendation-pattern-graphic{display:none}
 body :is(.recommendation-cross-section,.library-cross-section){margin-top:10px;padding-top:10px}
 body :is(.recommendation-cross-section,.library-cross-section) .oil-stack-heading{gap:8px}
 body :is(.recommendation-cross-section,.library-cross-section) .oil-stack-heading h3{font-size:1rem}
 body :is(.recommendation-cross-section,.library-cross-section) .oil-stack-heading p{font-size:.7rem;line-height:1.35}
 body :is(.recommendation-cross-section,.library-cross-section) .stack-position{min-width:48px}
 body :is(.recommendation-cross-section,.library-cross-section) .stack-position strong{font-size:1.15rem}
 body :is(.recommendation-cross-section,.library-cross-section) .oil-stack-viewer{display:grid;grid-template-columns:clamp(60px,19vw,90px) minmax(0,1fr);align-items:center;gap:6px;padding:6px;margin-top:8px}
 body :is(.recommendation-cross-section,.library-cross-section) .mobile-cross-section-lane{display:block;min-width:0}
 body :is(.recommendation-cross-section,.library-cross-section) .mobile-cross-section-lane svg{width:100%;height:auto;max-height:245px}
 body :is(.recommendation-cross-section,.library-cross-section) .depth-cross-section{min-width:0;width:100%}
 body :is(.recommendation-cross-section,.library-cross-section) .depth-cross-section>svg{width:100%;height:auto;max-height:180px}
 body :is(.recommendation-cross-section,.library-cross-section) .stack-legend{gap:6px;margin-block:8px;font-size:.65rem}
 body :is(.recommendation-cross-section,.library-cross-section) .stack-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
 body :is(.recommendation-cross-section,.library-cross-section) .stack-range-scale{grid-column:1/-1;grid-row:1}
 body :is(.recommendation-cross-section,.library-cross-section) .stack-controls button{min-height:32px;padding:5px;font-size:.7rem}
 body :is(.recommendation-cross-section,.library-cross-section) .stack-controls button:first-child{grid-column:1;grid-row:2}
 body :is(.recommendation-cross-section,.library-cross-section) .stack-controls button:last-child{grid-column:2;grid-row:2}
 body :is(.recommendation-cross-section,.library-cross-section) .detached-stack-disclaimer{margin-top:12px!important;padding-top:8px;font-size:.65rem}
 body .recommendation-window footer{padding:6px 10px}
}

@media(max-width:760px){
 body .library-pattern-reference{display:none}
 body .pattern-detail-copy>.library-cross-section{margin-top:10px;padding:10px 6px}
}
/* Pair the data sheet with strategy, then align the two reference views below. */
@media(min-width:761px){
 body .oil-patterns-page .pattern-content-grid{display:grid;grid-template-columns:minmax(240px,44%) minmax(0,1fr);grid-template-rows:auto auto;align-items:stretch;gap:18px}
 body .pattern-content-grid>.literature-preview{grid-column:1;grid-row:1;min-width:0}
 body .pattern-content-grid>.pattern-detail-copy{display:contents}
 body .pattern-content-grid .pattern-strategy-overview{grid-column:2;grid-row:1;display:flex;flex-direction:column;min-height:300px;min-width:0;contain:size}
 body .pattern-content-grid .strategy-scroll-window{flex:1;min-height:0;height:auto;max-height:none}
 body .pattern-content-grid>.library-pattern-reference{grid-column:1;grid-row:2;align-self:end;margin:0;padding-top:12px}
 body .pattern-content-grid .library-cross-section{grid-column:2;grid-row:2;align-self:end;margin:0}
 body .recommendation-content{align-items:stretch}
 body .recommendation-content>.recommendation-pattern-graphic{position:static;align-self:start}
 body .recommendation-window .recommendation-strategy-panel{display:flex;min-width:0;flex-direction:column;align-self:start}
 body .recommendation-window .recommendation-strategy-scroll{height:490px;max-height:56vh;min-height:300px}
}
@media(max-width:760px){
 body :is(.recommendation-cross-section,.library-cross-section) .oil-stack-viewer{align-items:end}
}

.bowler-shoulder-guide{stroke:#111;stroke-width:1.5;stroke-dasharray:3 4;pointer-events:none}
.bowler-rotation-handle{cursor:pointer;touch-action:manipulation}
.bowler-rotation-handle circle{fill:#eef3ff;stroke:#17253a;stroke-width:1.5}
.bowler-rotation-handle text{fill:#17253a;font:bold 21px sans-serif;pointer-events:none}
.bowler-rotation-handle:focus-visible circle{stroke:#507bff;stroke-width:3}
.lane-card.show-alternatives:has(.shoulder-controls){grid-template-rows:auto auto 700px auto}
.lane-card.show-alternatives:has(.shoulder-controls) .lane-wrap,.lane-card.show-alternatives:has(.shoulder-controls) .alternatives-card{grid-row:3}
.lane-card.show-alternatives:has(.shoulder-controls) .readout{grid-row:4}
.shoulder-controls{grid-column:1/-1;grid-row:2;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 12px;border-bottom:1px solid var(--edge)}
.shoulder-controls label{font-size:.8rem;color:#b9cae2}
.shoulder-controls input{flex:1;min-width:120px;accent-color:#5b7cff}
.shoulder-controls button{padding:8px;border:1px solid #40516d;border-radius:6px;background:#233550;color:#fff;font-size:.75rem}
@media(max-width:760px){.shoulder-controls input{flex-basis:100%;width:100%}.shoulder-controls button{min-height:36px}}
button.approach-summary{width:100%;color:inherit;text-align:left;cursor:pointer}button.approach-summary:focus-visible{outline:2px solid #8edaff;outline-offset:3px}

/* Uniform scaling preserves the perpendicular shoulder/path relationship. */
body .lane-card .lane{transform:none}
.bowling-shoulder-marker{fill:#507bff;stroke:#fff;stroke-width:1}
.bowler-rotation-handle{pointer-events:all;touch-action:none;cursor:grab}
.bowler-rotation-handle:active{cursor:grabbing}
.bowler-avatar image{pointer-events:none}

/* Full-screen Flat10 recommendation on phones. */
@media(max-width:760px){
 body .oil-pattern-preview-modal{display:block;padding:0;background:#0b1422}
 body .oil-pattern-preview-window.recommendation-window{width:100vw;height:100dvh;max-height:none;border:0;border-radius:0}
 body .recommendation-window .recommendation-content{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:10px;padding:10px;overflow-x:hidden;overflow-y:auto}
 body .recommendation-window .recommendation-pattern-graphic{position:static;width:100%;padding:8px}
 body .recommendation-window .recommendation-pattern-graphic img{width:100%;height:auto;max-height:34dvh;object-fit:contain;object-position:top center}
 body .recommendation-window .recommendation-strategy-panel{display:flex;min-width:0;flex-direction:column;align-self:stretch}
 body .recommendation-window .recommendation-strategy-panel>h2{margin:2px 0 7px;font-size:20px}
 body .recommendation-window .recommendation-strategy-scroll{height:min(34dvh,360px);max-height:none;min-height:220px;padding:10px}
 body .recommendation-window .recommendation-pattern-reference{width:100%;margin:0;padding-top:8px}
 body .recommendation-window .recommendation-pattern-reference svg{width:auto;height:auto;max-width:72%;max-height:38dvh}
 body .recommendation-window .recommendation-cross-section{width:auto;margin:0;padding:10px 8px}
 body .recommendation-window footer{position:relative;z-index:2;padding:7px 10px;background:#121e30;box-shadow:0 -8px 20px rgba(0,0,0,.28)}
 body .recommendation-window footer button{width:100%;min-height:42px}
}