/* Host setup presentation only; independent of competition geometry. */
.settings-overlay, .setup-overlay {
    --setup-text: #e3eaf5;
    --setup-muted: #aebbd0;
    --setup-border: #495970;
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    background: #0009;
    color: var(--setup-text);
}
.settings-overlay { align-items: stretch; justify-content: flex-end; }
.setup-overlay { align-items: center; justify-content: center; padding: 24px; }
.settings-panel, .setup-panel {
    background: radial-gradient(ellipse at 45% 0, #1b2433, #0c1119 75%);
    border: 1px solid var(--setup-border);
    box-shadow: inset 0 1px 1px #ffffff0d, 0 8px 28px #0008;
}
.settings-panel { width: min(640px, 100%); height: 100%; padding: 24px; overflow-y: auto; }
.setup-panel {
    width: min(100%, 800px);
    max-height: calc(100dvh - 48px);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.settings-header, .setup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid #344154;
}
.settings-header { flex-wrap: wrap; margin-bottom: 20px; }
.setup-header { padding: 18px 24px; margin: 0; flex-shrink: 0; }
.settings-header h2, .setup-header h2 {
    font-family: 'Roboto Condensed', 'Noto Sans TC', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}
.settings-panel button, .settings-panel #manual-btn, .setup-panel button, .court-field {
    min-height: 48px;
    border: 1px solid var(--setup-border);
    border-radius: 8px;
    background: linear-gradient(145deg, #19222f, #0c1119);
    color: var(--setup-text);
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 10px 14px;
    box-shadow: inset 0 1px 2px #fff1, 0 2px 4px #0004;
    transition: border-color .15s, background .15s;
}
.settings-panel :is(button, #manual-btn):hover:not(:disabled), .setup-panel button:hover:not(:disabled) {
    background: linear-gradient(145deg, #273449, #111925);
    border-color: #b1c4df;
}
.settings-panel :is(button, a, input):focus-visible, .setup-panel :is(button, a):focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.settings-panel button:disabled, .setup-panel button:disabled { opacity: .4; cursor: not-allowed; }
.settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
.settings-form > * { min-width: 0; margin: 0; }
.settings-format-row, .settings-footer { grid-column: 1 / -1; }
.settings-form label { display: block; margin-bottom: 8px; color: var(--setup-muted); font-size: .875rem; font-weight: 600; }
.settings-form .settings-segment { display: flex; gap: 4px; padding: 4px; background: #080e17; border: 1px solid #344154; border-radius: 10px; }
.settings-segment button { flex: 1; padding-inline: 8px; box-shadow: none; border-color: transparent; background: transparent; }
.settings-segment .bg-blue-600, .settings-panel .setup-primary, .setup-panel .setup-footer .setup-primary {
    background: linear-gradient(145deg, #34445c, #202d40);
    border-color: #8495ae;
    color: #f6f8ff;
}
.settings-form .settings-duration { display: flex; align-items: stretch; height: 48px; gap: 6px; background: transparent; }
.settings-duration button { width: 48px; flex: 0 0 48px; padding: 0; font-size: 1.5rem; }
.settings-duration > div { display: grid; place-items: center; flex: 1; background: #080e17; border: 1px solid #344154; border-radius: 8px; font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.court-field { display: block; width: 100%; background: #080e17; font-variant-numeric: tabular-nums; box-shadow: none; }
#court-note { margin-top: 6px; color: var(--setup-muted); font-size: .8125rem; }
#settings-lock-note { color: var(--setup-muted); padding-bottom: 16px; font-size: .875rem; }
.settings-footer { border-top: 1px solid #344154; padding-top: 18px; display: flex; justify-content: flex-end; }
.settings-panel #settings-done-btn { width: auto; min-width: 144px; margin: 0; }
.setup-scroll { overflow-y: auto; min-height: 0; padding: 24px; }
.judge-setup-content, .display-setup-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.judge-join-instructions { display: flex; flex-direction: column; align-items: center; text-align: center; }
.setup-qr { padding: 12px; background: white; width: fit-content; max-width: 100%; border-radius: 4px; }
.setup-qr :is(canvas, img) { max-width: 100%; height: auto; }
.judge-join-instructions p { margin-top: 12px; color: var(--setup-muted); font-size: .875rem; }
#judge-status-text { color: var(--setup-muted); font-size: .875rem; min-height: 2.5em; }
#judge-setup-progress { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
#judge-roster-list { margin-top: 12px; }
#judge-roster-list > * + * { margin-top: 0; }
.judge-roster-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #344154; padding: 10px 0; min-height: 68px; }
.judge-roster-label { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 4px 10px; font-size: .9375rem; font-weight: 600; }
.judge-roster-label::before { content: ''; grid-row: 1 / 3; width: 10px; height: 10px; border: 1.5px solid #8591a2; border-radius: 50%; background: transparent; }
.judge-roster-label.is-joined::before { background: #58bb87; border-color: #58bb87; }
.judge-roster-label small { grid-column: 2; color: var(--setup-muted); font-size: .8125rem; font-weight: 400; }
.setup-panel .judge-remove { color: #d1a1aa; border-color: #82505a; background: linear-gradient(140deg, #2d1922, #171019); font-size: .8125rem; padding-inline: 12px; }
.setup-primary { margin-top: 16px; width: 100%; font-weight: 700; }
.setup-footer { padding: 16px 24px; border-top: 1px solid #344154; display: flex; gap: 12px; justify-content: flex-end; flex-shrink: 0; }
.setup-footer .setup-primary { margin: 0; width: auto; min-width: 160px; }
.display-local-methods { border-right: 1px solid #344154; padding-right: 28px; }
.display-join-method { padding-block: 20px; border-bottom: 1px solid #344154; }
.display-join-method:first-child { padding-top: 0; }
.display-join-method:last-child { padding-bottom: 0; border-bottom: 0; }
.display-join-method h3 { font-size: .9375rem; font-weight: 700; margin-bottom: 14px; }
.display-join-method p { color: var(--setup-muted); font-size: .875rem; margin-bottom: 12px; }
.tv-page-link { text-decoration: underline; text-underline-offset: 4px; }
.display-pin { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 16px; }
.display-pin span { color: var(--setup-muted); font-size: .8125rem; }
.display-pin strong { font-size: 3rem; letter-spacing: .15em; font-variant-numeric: tabular-nums; }
.display-qr-method { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0; border: 0; }
.display-qr-method p { margin: 14px 0 0; }
#display-qrcode-box :is(canvas, img) { width: 256px; height: 256px; }
/* Fit the actual layout; overflow is retained as a fallback for browser zoom. */
@media (min-width: 768px) and (min-height: 500px) and (orientation: landscape) {
    .settings-panel { padding: 24px; }
    .settings-form { align-content: start; }
    #round-duration-row { grid-area: 2 / 1; }
    #break-duration-row { grid-area: 2 / 2; }
    #judge-count-row { grid-area: 3 / 1; }
    .settings-court { grid-area: 3 / 2; }
}
@media (max-width: 767px), (max-height: 499px), (orientation: portrait) {
    .settings-panel { width: 100%; padding: 20px; }
    .settings-form { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .setup-overlay { padding: 0; }
    .setup-panel { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
    .judge-setup-content, .display-setup-content { display: flex; flex-direction: column; gap: 20px; }
    .setup-header, .setup-scroll, .setup-footer { padding: 16px; }
    .display-local-methods { border: 0; padding-right: 0; }
    .display-qr-method { align-items: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .settings-panel :is(button, #manual-btn), .setup-panel button { transition: none; }
}
.settings-overlay.hidden, .setup-overlay.hidden, .settings-panel [hidden] { display: none; }

/* M2A: competition-only touch policy. Editable/copyable content keeps native behavior. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.app-container { min-height: 0; overflow: hidden; }
:is(#scoreboard-view, #referee-view, .settings-overlay, .setup-overlay, dialog) :is(button, summary),
.settings-overlay #manual-btn, .settings-overlay #language-options a,
:is(.scoreboard-side, #phone-competitors, .rotate-state, .setup-qr) {
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
:is(#scoreboard-view, #referee-view, .settings-overlay, .setup-overlay, dialog) :is(button, summary) *,
:is(.scoreboard-side, #phone-competitors, .setup-qr) :is(img, svg) {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}
:is(#scoreboard-view, #referee-view, .settings-overlay, .setup-overlay, dialog) :is(input, textarea, select),
.tv-page-link, .display-pin {
    user-select: text;
    -webkit-user-select: text;
    -webkit-touch-callout: default;
}
.phone-content, .settings-form, .setup-scroll, dialog { overscroll-behavior: contain; }
.settings-phone-only { display: none; }
#referee-rotate { z-index: 110; }
#referee-view[data-rotate="true"] #judge-scoring-surface { visibility: hidden; }

html[data-device="phone"] :is(#scoreboard-view, #referee-view) {
    padding: 0;
    min-height: 0;
    overflow: hidden;
}
html[data-device="phone"] #referee-view {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
html[data-device="phone"] :is(input, select, textarea):not([type="hidden"]) { font-size: 16px; }
html[data-device="phone"] #phone-host {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    gap: 8px;
    height: 100%;
    background: radial-gradient(ellipse at 50% 0, #253044, #0d1119 85%);
}
#phone-host .phone-heading { display: flex; align-items: center; gap: 8px; min-height: 48px; }
#phone-host #phone-match-summary { flex: 1; min-width: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e3eaf5; }
#phone-host .phone-state-row { margin: 0; justify-content: flex-start; flex-wrap: nowrap; gap: 6px; font-size: 14px; line-height: 20px; }
#phone-host #phone-timer { font-size: clamp(26px, 7.5vw, 32px); flex: none; font-weight: 800; }
#phone-host #phone-state { min-width: 0; font-size: 13px; color: #bdc9dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#phone-host .phone-metadata { display: flex; justify-content: space-between; gap: 6px; color: #aebbd0; }
#phone-host .phone-metadata:has(> [hidden]):not(:has(> :not([hidden]))) { display: none; }
#phone-host .phone-content { display: grid; min-height: 0; overflow: hidden; }
#phone-host #phone-competitors { gap: 8px; min-height: 0; height: 100%; }
#phone-host #phone-competitors section { --phone-score-size: clamp(84px, 17dvh, 160px); padding: clamp(8px, 1.6dvh, 16px) 8px 8px; display: grid; grid-template-rows: auto 24px auto minmax(0, 1fr) auto; min-height: 0; text-align: center; border: 1px solid #ffffff30; border-radius: 12px; }
#phone-host .phone-red { background: radial-gradient(ellipse at 50% 30%, #a61e32, #580e1d); }
#phone-host .phone-blue { background: radial-gradient(ellipse at 50% 30%, #135aa9, #102c58); }
#phone-host .phone-side-label { grid-row: 1; display: block; font-size: 12px; letter-spacing: .08em; }
#phone-host #phone-competitors strong { grid-row: 2; display: block; height: 24px; line-height: 24px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#phone-host .phone-round-wins { grid-row: 3; display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 4px; height: 24px; }
#phone-host .phone-round-wins[hidden] { display: none; }
#phone-host .phone-win-dot { width: 16px; height: 16px; border: 2px solid #e4ebf7aa; border-radius: 50%; background: #0002; }
#phone-host .phone-win-dot.won { background: #ffcf38; border-color: #ffcf38; }
#phone-host .phone-score-region { grid-row: 4; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
#phone-host .phone-score-main { container-type: size; min-height: 0; display: grid; place-items: center; }
#phone-host .phone-score-main > output { display: block; font-size: min(var(--phone-score-size), 90cqh); line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.04em; text-shadow: 0 3px 12px #0005; }
#phone-host .phone-score-main > output[data-digits="2"] { font-size: min(var(--phone-score-size), 80cqw, 90cqh); }
#phone-host .phone-score-main > output[data-digits="3"] { font-size: min(84px, 56cqw, 90cqh); }
#phone-host .phone-score-main > output[data-digits="4"] { font-size: min(64px, 42cqw, 90cqh); }
#phone-host .phone-point-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 6px 0 8px; }
#phone-host .phone-point-stat { display: grid; grid-template-rows: 22px 22px; justify-items: center; align-items: center; min-width: 0; border-right: 1px solid #ffffff20; }
#phone-host .phone-point-stat:last-child { border: 0; }
#phone-host .phone-stat-icon { display: block; width: 20px; height: 22px; }
#phone-host .phone-point-stat > output { font-size: clamp(14px, 4.4vw, 18px); line-height: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
#phone-host #phone-format, #phone-host #phone-readiness { margin: 0; font-size: 11px; line-height: 18px; white-space: nowrap; }
#phone-host #phone-winner { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#phone-host #phone-superiority { gap: 8px; }
#phone-host #phone-superiority button { min-height: 48px; font-size: 16px; }
#phone-host #phone-archive-status:empty { display: none; }
#phone-host .phone-exceptions { display: grid; gap: 6px; max-height: 30dvh; overflow-y: auto; }
#phone-host .phone-exceptions:not(:has(> :not([hidden]):not(:empty))) { display: none; }
#phone-host #phone-archive-status { margin: 0; }
#phone-host footer { gap: 8px; }
#phone-host #phone-primary { min-height: 52px; font-size: 20px; background: #274a36; border-color: #74aa8b; }
#phone-host .phone-panel-adjustments { grid-row: 5; display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid #ffffff30; }
.phone-stepper { display: grid; grid-template-columns: minmax(0,1fr) 48px 48px; gap: 4px; align-items: center; }
.phone-stepper > span { font-size: 12px; font-weight: 700; }
#phone-host .phone-stepper button { width: 48px; height: 48px; padding: 0; font-size: 26px; background: #10151dbb; border-color: #ffffff60; border-radius: 8px; }
#phone-host #phone-pre-management { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
#phone-host #phone-pre-management button { min-height: 48px; font-size: 13px; padding: 4px; }
#phone-host .phone-overflow-menu { bottom: auto; top: calc(100% + 8px); }
#phone-host #phone-overflow summary { width: 48px; min-height: 48px; padding: 4px; display: grid; place-items: center; }

/* Reserve one warning line instead of covering Court/Match with the shared banner. */
html[data-device="phone"] .app-container:has(> #connection-status:not([hidden])) #scoreboard-view[data-layout="phone"] > #phone-host {
    padding-top: calc(max(10px, env(safe-area-inset-top)) + 34px);
}
html[data-device="phone"] .app-container:has(#scoreboard-view[data-layout="phone"]:not(.hidden)) > #connection-status {
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    transform: none;
    margin: 0;
    padding: 4px 8px;
    line-height: 20px;
    text-align: center;
}

/* Density changes the panel interior, never the interaction targets. */
@media (max-height: 599px) {
    html[data-device="phone"] #phone-host { gap: 6px; padding-block: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-bottom)); }
    #phone-host #phone-competitors section { padding-top: 6px; padding-inline: 6px; }
    #phone-host #phone-competitors section { --phone-score-size: 80px; }
    #phone-host .phone-point-stats { padding-block: 4px; }
    #phone-host .phone-panel-adjustments { padding-top: 4px; gap: 4px; }
    #phone-host footer { gap: 6px; }
    #phone-host .phone-stepper > span { font-size: 11px; }
}

/* Keep the same editable controls/actions, presented in Setup on Phone only. */
html[data-device="phone"] .settings-panel {
    height: 100dvh;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
html[data-device="phone"] .settings-header { flex: none; padding-bottom: 8px; margin-bottom: 8px; gap: 6px; }
html[data-device="phone"] .settings-header h2 { font-size: 20px; }
html[data-device="phone"] .settings-header :is(button, #manual-btn) { min-height: 44px; padding: 8px; font-size: 14px; }
html[data-device="phone"] #manual-btn svg { display: none; }
html[data-device="phone"] .settings-form { flex: 1; min-height: 0; overflow-y: auto; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 8px; align-content: start; }
html[data-device="phone"] .settings-phone-only { display: block; }
html[data-device="phone"] .settings-phone-names { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; grid-column: 1 / -1; order: -5; }
html[data-device="phone"] .settings-court { order: -3; grid-column: 1 / -1; }
html[data-device="phone"] .settings-format-row { order: -2; }
html[data-device="phone"] .settings-form label { font-size: 13px; margin-bottom: 4px; }
html[data-device="phone"] .settings-form input:not([type="hidden"]) { width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid #495970; border-radius: 6px; background: #080e17; font-size: 16px; }
html[data-device="phone"] .settings-segment { padding: 2px; }
html[data-device="phone"] .settings-segment button { min-height: 44px; padding: 6px; font-size: 14px; }
html[data-device="phone"] .settings-duration { gap: 4px; }
html[data-device="phone"] .settings-duration button { flex-basis: 44px; width: 44px; min-height: 48px; }
html[data-device="phone"] .settings-duration > div { min-width: 0; font-size: 16px; }
html[data-device="phone"] #court-note { font-size: 11px; margin-top: 2px; }
html[data-device="phone"] #settings-lock-note { flex: none; padding-bottom: 8px; }
html[data-device="phone"] .settings-footer { position: sticky; bottom: 0; z-index: 2; padding-top: 8px; background: #0c1119; }
html[data-device="phone"] #settings-done-btn { width: 100%; min-height: 48px; }
html[data-device="phone"] :is(.setup-header, .setup-footer) { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
html[data-device="phone"] .setup-header { padding-top: max(16px, env(safe-area-inset-top)); }
html[data-device="phone"] .setup-footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }

/* M2C: direct Match editing stays within the existing identity header. */
#scoreboard-view .main-match-number {
    appearance: textfield; -moz-appearance: textfield;
    box-sizing: content-box; min-width: 1ch; max-width: 17ch;
    border: 0; border-bottom: 1px dashed #91a5bf;
    border-radius: 0; padding: 0 2px; background: transparent;
    color: inherit; font: inherit; font-variant-numeric: tabular-nums;
}
#scoreboard-view .main-match-number::-webkit-inner-spin-button,
#scoreboard-view .main-match-number::-webkit-outer-spin-button { appearance: none; margin: 0; }
#scoreboard-view .main-match-number:read-only { border-bottom-color: transparent; }
#scoreboard-view .main-match-number:focus { outline: 2px solid #ffdf58; outline-offset: 2px; }
/* External Judge alone gives every available row to the shared scoring surface. */
#referee-view[data-role="judge"] {
    height: 100dvh; box-sizing: border-box; overflow: hidden;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#referee-view[data-role="judge"] #referee-host-controls { display: none; }
.pure-judge-error {
    position: absolute; inset: 0 0 auto; z-index: 105;
    padding: 16px; background: #171719ed; color: white; text-align: center;
}