#everything[program]:not(#everything[program="3"]):not(#everything[program="4"]) .breaking_div {
    display: none;
}

.breaking_div .divisionName {
    text-align: center;
    font-size: 1.6em;
}

.breaking_div {
    margin-left: 10px;
    min-width: 730px;
}

.breaking_div table tr td {
    background-color: #777777;
    padding: 11px;
    border: 1px solid #a3a3a3;
    color: white;
}

.breaking_div table thead tr td {
    background-color: #454545;
}

.breaking_div table tbody tr[value="0"] td {
    background-color: #996666 !important;
}

.breaking_div table tbody tr td img {
    margin: 0;
    width: auto;
    max-width: 40px;
}

.breaking_div table tbody tr:not([totalStr="00"]) td.total {
    background-color: #669966 !important;
}

.breaking_div table tbody tr[totalStr="00"] td[value="0"][qual="1"] {
    background-color: #995555;
}

.breaking_div table tbody tr[totalStr="00"] td:not(td:first-child) {
    background-color: #996666;
}

.breaking_div table tbody tr td:first-child {
    background-color: #454545 !important;
}

.breaking_div table tbody tr:not([totalStr="00"]) td[qual="1"] {
    background-color: #559955;
}

.breaking_div table thead tr .letter {
    text-align: center;
}

.breaking_div td span.value:before {
    content: " ";
}


.breaking_but input[type="text"] {
    border-width: 0;
    background-color: white;
    color: black;
    text-align: center;
}

.breaking_div table {
    top: 10px;
    margin-bottom: 20px;
    border-collapse: collapse;
}

.breaking_div table th {
    font-weight: bold;
    padding: 5px;
    background: #efefef;
    border: 1px solid #dddddd;
}

.breaking_div table .breaking_points {
    cursor: pointer;
    text-align: center;
}

.breaking_div table .breaking_points.total {
    font-weight: bold;
}

.breaking_div table .breaking_but span {
    pointer-events: none;
}

.breaking_div table .breaking_but[qual="1"] {
    background-color: #cdf;
}

.breaking_div table td {
    /*min-width: 40px;*/
    padding: 5px;
}

.breaking_div thead tr td {
    text-align: center;
    font-weight: bold;
    min-width: 40px;
    padding: 5px;
}

.breaking_div thead tr td span {
    width: 100%;
    display: block;
    text-align: center;
}

.breaking_div tr[totalStr="00"] {
    background-color: #faa;
}

.breaking_div tr[totalStr="00"] td[qual="1"] {
    background-color: #f77;
}

.breaking_div tr[rem="0"] {
    background-color: #cdf;
}

.breaking_div tr[rem="0"] td[qual="1"] {
    background-color: #7af;
}

#buttons_menu_breaking button {
    min-width: 55px;
    min-height: 55px;
    max-width: 55px;
    max-height: 55px;
    background-color: #ffffff00;
    border-width: 0;
    margin: 0;
    padding: 0;
    margin-left: 10px;
    margin-right: 10px;
}

#buttons_menu_breaking button img {
    height: 55px;
    width: 55px;
    margin: 0;
}
/* Codex (OpenAI) | 2026-10-23 | Match the jury desk palette while retaining the upper reference table, lower attempts table and right action stack. */
body.test-shell:has(#monitor:is([program="3"], [program="4"])) #everything:is([program="3"], [program="4"]) {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 25vw, 480px);
    align-items: start;
}
/* Codex (OpenAI) | 2026-10-23 | Frame the existing breaking desk and size its two existing content columns. */
#everything:is([program="3"], [program="4"]) .breaking_div {
    grid-column: 1; grid-row: 1 / 3;
    position: relative; display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    grid-template-rows: auto auto 36px 36px auto auto;
    gap: 12px 20px; align-items: start;
    width: 100%; min-width: 0; margin: 0; padding: 16px; box-sizing: border-box;
    border: 1px solid var(--jury-border); border-radius: 5px;
    background: var(--jury-surface); color: var(--jury-text);
    box-shadow: 0 2px 5px #22324208;
}
/* Codex (OpenAI) | 2026-10-23 | Style the existing category header using the shared jury spacing. */
#everything:is([program="3"], [program="4"]) .breaking_div .param_div {
    grid-column: 1 / -1; grid-row: 1;
    position: static !important; transform: none;
    width: 100%; height: auto; min-height: 46px; padding: 0 0 10px;
    box-sizing: border-box; align-items: center; gap: 12px;
    border-bottom: 1px solid var(--jury-border);
}
/* Codex (OpenAI) | 2026-10-23 | Render the approved category-name attribute in the existing header. */
#everything:is([program="3"], [program="4"]) .breaking_div .param_div > div { display: none !important; }
#everything:is([program="3"], [program="4"]) .breaking_div .param_div::before {
    content: attr(data-division-name); font: 600 16px/1.4 Arial, sans-serif;
    color: var(--jury-text);
}
/* Codex (OpenAI) | 2026-10-24 | Explicitly keep the iScore wordmark in the dynamically built breaking header for special techniques and power breaking. */
body.test-shell #everything:is([program="3"], [program="4"]) .breaking_div .param_div::after {
    content: "";
    flex: 0 0 clamp(96px, 8vw, 132px);
    align-self: stretch;
    min-height: 24px;
    margin-left: auto;
    background: url('../../../images/iSCORE.png') right center / contain no-repeat;
    filter: invert(1);
    pointer-events: none;
}
/* Codex (OpenAI) | 2026-10-23 | Align the existing reset control and center its icon. */
#everything:is([program="3"], [program="4"]) #buttons_menu_breaking {
    grid-column: 1 / -1; grid-row: 2;
    width: 100%; height: 57px; padding-bottom: 12px; box-sizing: border-box;
    border-bottom: 1px solid var(--jury-border);
}
#everything:is([program="3"], [program="4"]) #buttons_menu_breaking button {
    position: relative; min-width: 48px; max-width: 48px; min-height: 44px; max-height: 44px;
    margin: 0 4px; padding: 0; border: 1px solid var(--jury-border);
    border-radius: 4px; background: var(--jury-muted-surface); cursor: pointer;
}
#everything:is([program="3"], [program="4"]) #buttons_menu_breaking button img {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 32px; height: 32px; margin: 0; object-fit: contain;
}
/* Codex (OpenAI) | 2026-10-23 | Style and position the existing Monitor and Chroma key controls. */
#everything:is([program="3"], [program="4"]) .breaking_div .monitorbutton {
    position: static; transform: none; width: 100%; height: 36px; box-sizing: border-box;
    border: 1px solid var(--shell-button-border, #405162); border-radius: 4px;
    background: var(--shell-button-background, #25323f); color: var(--shell-button-text, #dce9f2);
    font: 13px/34px Arial, sans-serif; text-align: center; cursor: pointer;
}
#everything:is([program="3"], [program="4"]) .breaking_div #start_monitor { grid-column: 2; grid-row: 3; }
#everything:is([program="3"], [program="4"]) .breaking_div #start_chromakey { grid-column: 2; grid-row: 4; }
/* Codex (OpenAI) | 2026-10-23 | Style the existing next-round and finish actions while preserving their script-controlled visibility. */
#everything:is([program="3"], [program="4"]) .breaking_div :is(#nextRoundButton, #finishBreakingButton) {
    grid-column: 2; grid-row: 5;
    position: static; transform: none; box-sizing: border-box;
    width: 100%; min-height: 36px; margin: 0; padding: 6px 10px;
    border: 1px solid var(--shell-accent, #00a8e0); border-radius: 4px;
    background-color: var(--shell-accent, #00a8e0); color: var(--shell-accent-button-text, #071a24);
    background-image: linear-gradient(to bottom, #ffffff20, #00000016);
    box-shadow: inset 0 1px 1px #ffffff45, inset 0 -1px 2px #00000018, 0 1px 2px #22324218;
    font: 600 14px/22px Arial, sans-serif; white-space: normal; cursor: pointer;
}
/* Codex (OpenAI) | 2026-10-23 | Use the shared light table surfaces, typography and borders. */
#everything:is([program="3"], [program="4"]) .breaking_div table {
    position: static; transform: none; top: auto; width: 100%; margin: 0;
    border-collapse: separate; border-spacing: 0;
    border: 1px solid var(--jury-border); border-radius: 4px;
    background: var(--jury-surface); color: var(--jury-text); font: 14px/1.4 Arial, sans-serif;
}
#everything:is([program="3"], [program="4"]) .breaking_div table :is(td, th) {
    position: static; width: auto; height: auto; min-width: 0;
    padding: 8px 10px; border: 0; border-right: 1px solid var(--jury-border);
    border-bottom: 1px solid var(--jury-border); background: var(--jury-surface);
    color: var(--jury-text); font: inherit; vertical-align: middle;
}
#everything:is([program="3"], [program="4"]) .breaking_div table tr > :last-child { border-right: 0; }
#everything:is([program="3"], [program="4"]) .breaking_div table tbody tr:last-child > td { border-bottom: 0; }
#everything:is([program="3"], [program="4"]) .breaking_div table tbody tr:nth-child(even) td { background: var(--jury-muted-surface); }
#everything:is([program="3"], [program="4"]) .breaking_div table tbody tr td:first-child { background: var(--jury-muted-surface) !important; }
/* Codex (OpenAI) | 2026-10-23 | Style the upper reference table using its approved class and show the starting values. */
#everything:is([program="3"], [program="4"]) .breaking_div .techniques {
    /* Codex (OpenAI) | 2026-10-23 | Keep the reference table at its content width instead of stretching across the desk. */
    grid-column: 1; grid-row: 3 / 6; width: max-content; max-width: 100%; justify-self: start;
}
#everything:is([program="3"], [program="4"]) .breaking_div .techniques td:first-child {
    width: 28px; text-align: center; font-weight: 600; color: var(--jury-muted);
}
/* Codex (OpenAI) | 2026-10-23 | Label the API starting height or board count in the reference table. */
#everything:is([program="3"], [program="4"]) .breaking_div .techniques .technique-start {
    width: 72px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
#everything[program="3"] .breaking_div .technique-start::after { content: " cm"; color: var(--jury-muted); font-size: 12px; }
#everything[program="4"] .breaking_div .technique-start::after { content: " pc"; color: var(--jury-muted); font-size: 12px; }
/* Codex (OpenAI) | 2026-10-23 | Keep additional attempt columns scrollable inside the existing participants container. */
#everything:is([program="3"], [program="4"]) .breaking_div .participantsContainer {
    grid-column: 1 / -1; grid-row: 6; min-width: 0; width: 100%;
    overflow: auto; border-radius: 4px;
}
/* Codex (OpenAI) | 2026-10-23 | Size existing participant columns and show units beside existing starting values. */
/* Codex (OpenAI) | 2026-10-23 | Grow the attempts table only to the right when new rounds are appended. */
#everything:is([program="3"], [program="4"]) .breaking_div table.participants { width: max-content; min-width: 0; }
#everything:is([program="3"], [program="4"]) .breaking_div .participants thead td {
    background: #eef4f8; color: var(--jury-muted); font-weight: 600;
    text-align: center; white-space: nowrap;
}
#everything[program="3"] .breaking_div .participants thead .value::after { content: " cm"; font-size: 12px; }
#everything[program="4"] .breaking_div .participants thead .value::after { content: " pc"; font-size: 12px; }
/* Codex (OpenAI) | 2026-10-23 | Give identity columns stable widths so extra rounds cannot move existing score columns. */
#everything:is([program="3"], [program="4"]) .breaking_div .participants :is(th, td)[fieldname="name"] {
    width: 240px; min-width: 240px; max-width: 240px; box-sizing: border-box;
    text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#everything:is([program="3"], [program="4"]) .breaking_div .participants [fieldname="ITF_ID"] {
    width: 88px; min-width: 88px; max-width: 88px; box-sizing: border-box; white-space: nowrap; font-size: 12px;
}
#everything:is([program="3"], [program="4"]) .breaking_div .participants tr > :first-child {
    width: 44px; min-width: 44px; max-width: 44px; box-sizing: border-box;
}
#everything:is([program="3"], [program="4"]) .breaking_div .participants tbody td:first-child { width: 32px; padding: 6px; text-align: center; }
#everything:is([program="3"], [program="4"]) .breaking_div .participants tbody td img { display: block; width: 28px; height: 28px; object-fit: contain; margin: auto; }
/* Codex (OpenAI) | 2026-10-23 | Keep attempts at a readable compact width; the existing container scrolls only after columns no longer fit. */
#everything:is([program="3"], [program="4"]) .breaking_div .participants :is(.breaking_points, thead td:nth-child(n+4)) {
    /* Codex (OpenAI) | 2026-10-23 | Keep each attempt column fixed as additional rounds are added. */
    width: 52px; min-width: 52px; max-width: 52px; box-sizing: border-box; padding-inline: 4px;
}
#everything:is([program="3"], [program="4"]) .breaking_div .participants thead .value { font-size: 12px; }
#everything:is([program="3"], [program="4"]) .breaking_div .participants .breaking_points {
    font: 500 18px/24px Arial, sans-serif; font-variant-numeric: tabular-nums; text-align: center;
}
/* Codex (OpenAI) | 2026-10-23 | Distinguish unset attempts and the current 0/1/2/10 breaking scores using existing attributes. */
#everything:is([program="3"], [program="4"]) .breaking_div .participants .breaking_but:not([value]) { color: #8a99a8; }
#everything:is([program="3"], [program="4"]) .breaking_div .participants .breaking_but[value="10"] { background: #dff4e4; color: #176b37; }
#everything:is([program="3"], [program="4"]) .breaking_div .participants .breaking_but[value="2"] { background: #e5f3fb; color: #17658d; }
#everything:is([program="3"], [program="4"]) .breaking_div .participants .breaking_but[value="1"] { background: #fff6e5; color: #90600b; }
#everything:is([program="3"], [program="4"]) .breaking_div .participants .breaking_but[value="0"] { background: #fff0f2; color: #b52e3b; }
/* Codex (OpenAI) | 2026-10-23 | Mark the qualifier with a slightly darker fill instead of an inset border. */
#everything:is([program="3"], [program="4"]) .breaking_div .participants .breaking_but[qual="1"] {
    background: #cfe8d5; color: #267643; box-shadow: none;
}
/* Codex (OpenAI) | 2026-10-23 | Highlight totals and failed qualification rows without changing their values. */
#everything:is([program="3"], [program="4"]) .breaking_div .participants .total {
    font-weight: 700; background-color: #e4f4fb !important; color: #126184;
    background-image: linear-gradient(to bottom, #ffffff20, #0000000e);
}
#everything:is([program="3"], [program="4"]) .breaking_div .participants tr[rem="0"] .total { background-color: #edf8ef !important; color: #267643; }
#everything:is([program="3"], [program="4"]) .breaking_div .participants tr[totalStr="00"] td { background: #fff0f2 !important; color: #9b4853; }
#everything:is([program="3"], [program="4"]) .breaking_div .participants tr[totalStr="00"] .total { color: #b52e3b; }
/* Codex (OpenAI) | 2026-10-23 | Provide hover and keyboard-focus feedback on existing controls. */
#everything:is([program="3"], [program="4"]) .breaking_div .participants .breaking_but:hover {
    background-image: linear-gradient(to bottom, #ffffff40, #00a8e012);
    outline: 1px solid var(--shell-accent, #00a8e0); outline-offset: -1px;
}
#everything:is([program="3"], [program="4"]) .breaking_div :is(button, .monitorbutton):hover { border-color: var(--shell-accent, #00a8e0); }
#everything:is([program="3"], [program="4"]) :is(button, .monitorbutton, .breaking_but):focus-visible { outline: 2px solid var(--shell-accent, #00a8e0); outline-offset: 2px; }
/* Codex (OpenAI) | 2026-10-23 | Present direct score choices and separate timer controls. */
body.test-shell #breakingDialogTimer .breaking-score-options,
body.test-shell #breakingDialogTimer .breaking-timer-control {
    display: flex; align-items: center; gap: 8px;
}
body.test-shell #breakingDialogTimer .breaking-score-options button {
    width: 64px; height: 48px; font: 700 22px/1 Arial, sans-serif;
}
body.test-shell #breakingDialogTimer .breaking-score-options button.selected {
    color: #fff; border-color: #078fbd; background: linear-gradient(#19bce8, #0798c8);
    box-shadow: inset 0 1px #ffffff70, 0 2px 4px #22324235;
}
body.test-shell #breakingDialogTimer #timerSpan {
    display: block; min-width: 112px; padding: 10px 14px; box-sizing: border-box;
    border: 1px solid #cbd6e0; border-radius: 4px; background-color: #f4f7fa; color: #223242;
    background-image: linear-gradient(to bottom, #ffffff20, #00000016);
    box-shadow: inset 0 1px 1px #ffffff45, 0 1px 2px #22324218;
    font: 700 34px/42px Arial, sans-serif; font-variant-numeric: tabular-nums; text-align: center;
}
body.test-shell #breakingDialogTimer #timerSpan.expired { color: #d92f3c; }
body.test-shell #breakingDialogTimer #timerToggle {
    min-width: 82px; height: 48px;
}
/* Codex (OpenAI) | 2026-10-23 | Keep the fight list beside the breaking desk on desktop screens. */
@media (min-width: 1181px) {
    body.test-shell:has(#monitor:is([program="3"], [program="4"])) #everything:is([program="3"], [program="4"]) #ringInfo { grid-column: 2; grid-row: 1; }
    body.test-shell:has(#monitor:is([program="3"], [program="4"])) #everything:is([program="3"], [program="4"]) .table_container_level_2 { grid-column: 2; grid-row: 2; }
}
/* Codex (OpenAI) | 2026-10-23 | Move the existing fight list below the desk on narrower screens. */
@media (max-width: 1180px) {
    body.test-shell:has(#monitor:is([program="3"], [program="4"])) #everything:is([program="3"], [program="4"]) { grid-template-columns: minmax(0, 1fr); }
    body.test-shell:has(#monitor:is([program="3"], [program="4"])) #everything:is([program="3"], [program="4"]) #ringInfo { grid-column: 1; grid-row: 3; }
    body.test-shell:has(#monitor:is([program="3"], [program="4"])) #everything:is([program="3"], [program="4"]) .table_container_level_2 { grid-column: 1; grid-row: 4; }
}
/* Codex (OpenAI) | 2026-10-23 | Reduce desk spacing and reference-table text on small screens. */
@media (max-width: 760px) {
    #everything:is([program="3"], [program="4"]) .breaking_div { grid-template-columns: minmax(0, 1fr) 140px; gap: 10px; padding: 10px; }
    #everything:is([program="3"], [program="4"]) .breaking_div .techniques td { padding: 6px; font-size: 12px; }
}
/* Codex (OpenAI) | 2026-10-23 | Compact table padding to fit more information on short screens. */
@media (max-height: 820px) {
    #everything:is([program="3"], [program="4"]) .breaking_div .techniques td { padding-block: 6px; }
    #everything:is([program="3"], [program="4"]) .breaking_div .participants thead td { padding-block: 6px; }
    #everything:is([program="3"], [program="4"]) .breaking_div .participants tbody td { padding: 4px 8px; }
    #everything:is([program="3"], [program="4"]) .breaking_div .participants tbody td:first-child { padding: 4px; }
}
