/* 共通部品はcomponents.css、配色・フォーム・通知・タブはアカウント画面の既存CSSを使用する。 */
.record-page { color-scheme: dark; line-height: 1.65; --app-input: var(--panel-strong); --app-text: var(--text); --app-border: var(--line); }
.record-main { max-width: 1120px; padding-top: 12px; }
.record-toolbar, .panel-head, .history-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.record-toolbar { max-width: 680px; margin-inline: auto; margin-bottom: 12px; flex-wrap: wrap; }
.record-tabs { display: flex; gap: 4px; align-self: stretch; }
.record-tab { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); padding: 10px 20px; font: inherit; font-weight: 700; cursor: pointer; }
.record-tab.is-active { color: var(--gold-light); border-bottom-color: var(--gold); }
.record-toolbar { border-bottom: 1px solid var(--line); }
.record-tools { margin-left: auto; }
#toggle-settings, #reset-input { width: 40px; height: 40px; padding: 8px; flex: none; }
.record-page .muted, .record-page .optional { color: var(--muted); }
.muted { font-size: 13px; }
.panel-head { margin: 18px 0; }
.panel-head h2 { margin: 0; font-size: 20px; }
.panel-head p { margin: 3px 0 0; }
.record-section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.record-section h3 { margin: 0 0 8px; }
.record-page fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.record-page legend { font-size: 13px; font-weight: 650; margin-bottom: 12px; }
.record-page label { font-size: 13px; font-weight: 600; }
#match-form :is(label, .field-label, .record-section h3) { font-size: 12px; font-weight: 600; line-height: 1.5; }
#match-form .record-section h3 { margin-bottom: 6px; }
.record-page input, .record-page select, .record-page textarea { font: inherit; }
/* 共通の中サイズの角丸を使い、配色・操作感も既存部品に揃える。 */
.record-page :is(.record-main, .record-dialog) :is(.btn, .filter-select, .cr-input, textarea) { border-radius: var(--radius-md); }
/* 確認用の標準幅。設定・メモ・編集だけ内容に応じて後段で広げる。 */
.record-dialog { max-width: 440px; }
.record-page .filter-select, .record-page .cr-input { display: block; width: 100%; min-width: 0; margin-top: 6px; }
.record-page textarea { color: var(--text); background: var(--panel-strong); resize: vertical; }
.record-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.record-page :disabled { cursor: not-allowed; opacity: .65; }
.match-sides { display: grid; gap: 12px; }
.side-card { padding: 0; border: 0; }
.deck-fields { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; }
.record-page .deck-fields .filter-select { margin: 0; height: 44px; }
.class-trigger { width: 100%; height: 44px; padding: 0; font-size: 11px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.class-trigger img { width: 26px; height: 26px; object-fit: contain; pointer-events: none; }
.class-trigger, .class-choice, .class-center { -webkit-tap-highlight-color: transparent; }
.optional { font-size: 11px; font-weight: 400; }
.class-wheel { position: absolute; width: 280px; height: 280px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.class-wheel .class-choice { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; transform: none; box-shadow: none; }
.class-choice svg { width: 100%; height: 100%; pointer-events: none; }
.class-choice path { fill: var(--panel-strong); stroke: rgba(var(--gold-rgb), .4); stroke-width: 1.5px; }
/* 下地と混ぜた不透明色にし、選択・ドラッグ中も背景の文字を透かさない。 */
.class-choice.active path { fill: color-mix(in srgb, var(--gold) 20%, var(--panel-strong)); }
.class-choice.is-pointed path, :root:not([data-button-modality="pointer"]) .class-choice:focus-visible path { fill: color-mix(in srgb, var(--gold) 32%, var(--panel-strong)); stroke: var(--gold-light); stroke-width: 3px; }
.class-choice img { position: absolute; width: 32px; height: 32px; transform: translate(-50%, -50%); object-fit: contain; pointer-events: none; }
.class-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 88px; height: 88px; border-radius: 50%; border: 1px solid rgba(var(--gold-rgb), .4); color: var(--text); background: var(--panel-strong); cursor: pointer; font-size: 12px; padding: 4px; }
:root:not([data-button-modality="pointer"]) .record-page .class-center:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.going-buttons { display: flex; gap: 10px; margin: 0; }
.going-buttons .btn { flex: 1; height: 44px; }
.going-buttons .btn, .result-actions .btn { font-size: 16px; }
.going-buttons .btn.is-active { border-color: var(--gold); background: rgba(var(--gold-rgb), .18); color: var(--gold-light); }
.going-buttons.is-missing .btn, .class-trigger.is-missing, .record-page #match-time.is-missing { border-color: #d68484; box-shadow: 0 0 0 1px rgba(214, 132, 132, .25); }
.turn-card { padding: 16px 0 0; border: 0; }
.settings-grid { margin: 14px 0; font-size: 12px; }
.settings-grid p { margin-top: 0; }
.setting-options { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-bottom: 14px; }
.setting-options label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: normal; }
.match-mode-field { display: block; margin-bottom: 12px; }
.record-page #match-mode { font-size: 13px; }
[data-detail="rating"], [data-detail="opponentRating"], .play-time-field { margin-top: 14px; }
.rating-side { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; }
.rating-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 10px; }
.point-field { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; }
.point-field > label { grid-column: 1 / -1; }
.point-field > .rating-type { grid-column: 1 / -1; }
.record-page .rating-row .rating-type { width: 100%; max-width: 100%; height: 28px; margin: 0 0 4px; padding: 0 24px 0 6px; font-size: 14px; }
.rating-companion:has(> .rating-type:not([hidden])) { display: grid; }
.rating-row .cr-input { padding-inline: 8px; }
.rating-row :is(.cr-input, .filter-select) { box-sizing: border-box; height: 40px; }
.rating-companion { min-width: 0; }
.rating-unavailable .companion-name { opacity: .4; }
.rating-clear-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rating-clear-actions .btn { font-size: 12px; padding: 6px 10px; }
.play-time-controls { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.record-page .play-time-controls .cr-input { box-sizing: border-box; width: 196px; max-width: 100%; height: 40px; padding-inline: 8px; font-size: 14px; font-variant-numeric: tabular-nums; text-align: left; }
.record-page .play-time-controls .check-row { margin: 6px 0 0; font-size: 12px; line-height: 1.4; white-space: nowrap; flex: none; }
.time-auto-short { display: none; }
.notes-field { display: grid; gap: 4px; margin-top: 12px; min-width: 0; }
.record-page .notes-field textarea { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; height: 44px; margin: 0; line-height: 1.4; overflow-y: hidden; resize: none; }
.record-page #match-notes:focus-visible { outline: none; border-color: rgba(var(--gold-rgb), .65); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .2); }
.rank-choice { margin-top: 16px; max-width: 500px; }
.result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; gap: 6px 10px; }
.result-actions .field-label { grid-column: 1 / -1; }
.result-actions .btn { flex: 1; height: 48px; }
#input-panel, #history-panel, #analysis-panel, #notice-home { max-width: 680px; margin: 0 auto; }
.record-page .deck-fields select, .record-page .rating-row input, .record-page textarea { font-size: 16px; }
.record-footnote { margin-top: 18px; color: var(--muted); font-size: 12px; }
.history-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.history-filters > label:last-child { grid-column: 1 / -1; }
.history-filters label { min-width: 0; font-size: 12px; }
.history-filters .choice-trigger { min-width: 0; height: 42px; }
.history-heading { margin: 18px 0 14px; }
.history-heading h2 { font-size: 18px; }
.history-tools, .history-actions { display: flex; gap: 4px; align-items: center; flex: none; }
.record-page .history-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 7px; flex: none; }
.history-actions { gap: 0; }
.record-page .history-actions .history-icon-button { width: 24px; padding: 3px; }
.history-actions .history-icon-button svg { width: 16px; height: 16px; flex: none; }
.history-actions .history-icon-button { background-color: transparent; border-color: transparent; }
.history-count { margin-top: 12px; text-align: right; font-size: 11px; }
.history-matchup > .history-format-icon { flex: none; width: 18px; height: 18px; }
.history-format-icon { display: inline-flex; align-items: center; justify-content: center; object-fit: contain; }
.history-row { padding: 0; border-bottom: 1px solid var(--line); }
.history-row-head { display: flex; align-items: center; gap: 2px; padding-inline: 3px 0; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.record-page .history-row-toggle { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px 0; color: var(--text); font: inherit; text-align: left; text-decoration: none; background-color: transparent; border: 0; cursor: pointer; }
.result-badge { width: 48px; flex: none; font: 700 20px/1.2 Georgia, "Times New Roman", serif; letter-spacing: -.04em; text-align: left; color: var(--muted); }
.result-badge.win { color: var(--gold-light); text-shadow: 0 1px 1px #000, 0 0 8px rgba(var(--gold-rgb), .25); }
.match-description { flex: 1; min-width: 0; }
.history-matchup { display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; }
.history-vs { color: var(--muted); font-size: 10px; font-weight: 400; flex: none; }
.history-deck { display: inline-flex; gap: 4px; align-items: center; min-width: 0; max-width: calc((100% - 24px) / 2); }
.history-deck img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.history-deck > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-format { display: inline-flex; align-items: center; gap: 4px; }
.history-format .choice-icon { width: 18px; height: 18px; }
.history-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.5; }
.history-meta-item, .history-rating-value { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.history-rating-value { flex-wrap: wrap; }
.history-rating-value img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.history-meta .history-rating-value img { width: 18px; height: 18px; }
.history-rating-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.history-detail-side h4 { margin: 0 0 10px; font-size: 12px; font-weight: 600; }
.history-detail-side .history-detail-grid { grid-template-columns: minmax(0, 1fr); }
.history-detail { overflow: hidden; font-size: 12px; }
.history-detail-content { margin-top: 0; padding: 14px 4px 6px; border-top: 1px solid var(--line); display: flow-root; }
.history-scroll-stable { overflow-anchor: none; scroll-behavior: auto !important; }
.history-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin: 0; }
.history-detail-grid dt { color: var(--muted); font-size: 11px; }
.history-detail-grid dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.history-detail-note { margin-top: 14px; }
.private-note { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 0; }
#history-note-dialog { max-width: 520px; }
.more-button { display: flex; margin: 22px auto; min-width: 180px; }
.empty-state { padding: 32px 0; color: var(--muted); }
.empty-state p { font-size: 13px; }
.delete-matchup { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.delete-matchup .history-matchup { flex: 1; min-width: 0; }
.class-dialog { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; color: var(--text); }
.class-dialog::backdrop { background: rgba(0, 0, 0, .48); }
.class-dialog { --panel-strong: var(--popup-surface); }
.record-modal-open { overflow: hidden !important; }
.record-page [hidden] { display: none !important; }
@media (max-width: 480px) {
  .panel-head { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
  .record-tab { padding-inline: 12px; }
  .history-matchup { gap: 4px; }
  .record-page .history-row-toggle { gap: 6px; }
  .result-badge { width: 40px; font-size: 18px; }
}
.record-page .account-form { max-width: none; }
.record-page .account-message, .record-page .account-callout { margin: 14px 0; }
/* 通知のデッキ概要だけがページ固有。枠・時間・入退場はtoast.css/toast.jsに集約する。 */
.svwb-toast .history-matchup { font-size: 12px; color: inherit; gap: 4px; }
.svwb-toast .history-deck img { width: 16px; height: 16px; }
.settings-dialog { max-width: 460px; }
.settings-dialog .panel-head { margin-top: 0; }
#history-filter-dialog .panel-head { flex-wrap: nowrap; gap: 6px; }
#history-filter-title { font-size: 16px; }
.dialog-head-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.record-dialog > .panel-head { margin-top: 0; flex-wrap: nowrap; align-items: center; }
.settings-grid .panel-head { margin: 16px 0 6px; }
.setting-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.setting-options label { padding: 8px; border-radius: var(--radius-md); }
.rating-settings { grid-column: 1 / -1; margin: 4px 0; padding: 0; border: 0; min-width: 0; }
.rating-settings legend { padding: 0 8px; font-weight: 700; }
.rating-settings label:has(input:disabled) { opacity: .4; cursor: default; }
.choice-trigger { cursor: pointer; text-align: left; padding: 0 24px 0 0; position: relative; overflow: hidden; }
.choice-trigger::after { content: "⌄"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.choice-trigger:has(.thumb) { padding-right: 0; }
.choice-trigger:has(.thumb)::after { display: none; }
.choice-trigger .archetype-mini-cell { width: 100%; height: 100%; }
.hold-picker-trigger { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.choice-dialog { position: fixed; inset: auto; margin: 0; padding: 0; max-width: none; border: 0; border-radius: var(--radius-md); overflow: auto; overscroll-behavior: contain; color: var(--text); background: var(--panel-strong); box-shadow: var(--lift-shadow); }
.choice-dialog::backdrop { background: rgba(0, 0, 0, .48); }
.choice-dialog::backdrop {
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    var(--choice-left) var(--choice-top), var(--choice-right) var(--choice-top),
    var(--choice-right) var(--choice-bottom), var(--choice-left) var(--choice-bottom), var(--choice-left) var(--choice-top));
}
.record-tools { display: flex; gap: 8px; align-items: center; }
/* アイコン欄の最小高が内側をはみ出さないよう、共通部品に全高を渡して中央に揃える。 */
#format-control #match-format-trigger { width: 40px; height: 40px; margin: 0; padding: 0; }
#format-control #match-format-trigger .info { padding: 0; justify-content: center; }
#format-control #match-format-trigger .name, #format-control #match-format-trigger::after { display: none; }
#format-control #match-format-trigger .choice-icon { width: 24px; height: 24px; }
#edit-format-holder { display: flex; justify-content: flex-end; margin-bottom: 12px; }
#edit-format-holder > span { display: none; }
.input-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(68px, .6fr) 32px; align-items: start; gap: 16px; margin-top: 20px; padding: 18px 0; border-block: 1px solid var(--line); }
.input-summary-scope { min-width: 0; margin-top: 8px; font-size: 12px; line-height: 1.4; }
.input-summary-record { min-width: 0; text-align: center; }
.input-summary-label { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; margin-bottom: 6px; overflow-wrap: anywhere; }
.summary-deck { display: inline-flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; vertical-align: middle; }
.summary-deck img { width: 16px; height: 16px; object-fit: contain; flex: none; }
.summary-deck span { min-width: 0; overflow-wrap: anywhere; }
.input-summary strong { display: block; font-size: 28px; line-height: 1.2; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
#input-summary-value > span { display: inline-block; }
.input-summary small { font-size: 12px; font-weight: 600; margin-left: 2px; letter-spacing: 0; }
.input-summary-rate { text-align: center; border-left: 1px solid var(--line); }
#input-summary-rate { color: var(--text); }
.input-summary.is-unavailable #input-summary-value { font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--muted); }
.record-page #cycle-summary { width: 32px; height: 32px; padding: 6px; border-radius: 50%; align-self: center; }
#cycle-summary svg { width: 16px; height: 16px; }
@media (max-width: 480px) { .input-summary { column-gap: 10px; } .input-summary strong { font-size: 24px; } .input-summary small { font-size: 11px; } }
.record-page .missing-pulse { animation: missing-pulse .4s ease-in-out 3; }
@keyframes missing-pulse { 50% { background-color: rgba(214, 132, 132, .35); box-shadow: 0 0 0 2px #d68484; } }
@media (prefers-reduced-motion: reduce) { .record-page .missing-pulse { animation: none; outline: 2px solid #d68484; } }
@media (max-width: 360px) { .record-toolbar, .record-tools { gap: 4px; } .record-tab { padding-inline: 10px; } }
@media (max-width: 480px) {
  #toggle-settings, #reset-input, #record-tools #match-format-trigger { width: 32px; height: 32px; }
  #toggle-settings, #reset-input { padding: 5px; }
  #record-tools { gap: 4px; }
}
.choice-options { display: grid; }
.choice-options .choice-option { width: 100%; height: 48px; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.choice-options .choice-option:last-child { border-bottom: 0; }
.choice-options .choice-option:is([aria-pressed="true"], .is-pointed) { background: rgba(var(--gold-rgb), .18); box-shadow: inset 3px 0 var(--gold); }
.choice-option .archetype-mini-cell { width: 100%; }
.record-page .archetype-mini-cell { --arch-thumb-w: 45%; }
.record-page .archetype-mini-cell.without-thumb .info { width: 100%; max-width: 100%; }
.choice-icon { width: 22px; height: 22px; object-fit: contain; flex: none; }
.record-page .archetype-mini-cell .name { font-size: 14px; }
.record-page .account-callout p { margin: 6px 0 10px; }
.record-page .form-actions { align-items: center; }
.record-dialog { width: calc(100% - 32px); max-height: calc(100dvh - 32px); overflow: auto; color: var(--text); }
.record-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.edit-dialog { max-width: 728px; }
.edit-dialog .panel-head { margin-top: 0; flex-wrap: nowrap; align-items: center; }
.edit-dialog .panel-head h2 { font-size: 20px; }
.edit-dialog .panel-head .btn { flex-shrink: 0; }
.record-page #cancel-edit { width: 32px; height: 32px; padding: 6px; }
.edit-dialog .rating-row { gap: 8px; }
.edit-dialog .rating-row .choice-trigger { padding-inline: 0 16px; }
.edit-dialog .rating-row .choice-trigger .info { padding-inline: 4px; gap: 4px; width: 100%; max-width: 100%; }
.edit-dialog .rating-row .choice-trigger .name { font-size: 12px; white-space: nowrap; }
.edit-dialog .rating-row .choice-icon { width: 18px; height: 18px; }
.edit-dialog .play-time-controls { flex-wrap: nowrap; gap: 6px; }
.record-page .edit-dialog .play-time-controls .cr-input { width: 186px; font-size: 13px; padding-inline: 6px; flex: none; }
.record-page .edit-dialog .play-time-controls .check-row { gap: 4px; font-size: 11px; }
.edit-dialog .time-auto-full { display: none; }
.edit-dialog .time-auto-short { display: inline; }
@media (max-width: 480px) { .record-page .edit-dialog { padding: 12px; } }
.edit-dialog #edit-actions { margin-top: 18px; }
@media (max-width: 480px) and (max-height: 700px) {
  .record-main { padding-top: 8px; }
  .record-toolbar { margin-bottom: 8px; }
  .match-sides { gap: 8px; }
  .side-card { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 8px; align-items: center; }
  #match-form .side-card h3 { margin: 0; }
  .side-card .deck-fields { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
  .side-card .class-trigger { padding: 0 6px; font-size: 12px; gap: 4px; }
  .side-card .class-trigger img { width: 22px; height: 22px; }
  .side-card .field-hint { grid-column: 2; margin: 0; }
  .turn-card { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 8px; align-items: center; padding-top: 10px; }
  #match-form .turn-card h3 { margin: 0; }
  .notes-field { grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 8px; }
  .input-summary { margin-top: 12px; padding: 8px 0; }
  .result-actions { grid-template-columns: 28px repeat(2, minmax(0, 1fr)); column-gap: 8px; margin-top: 10px; }
  .result-actions .field-label { grid-column: auto; }
}
/* 見出しを省く場合も自分・相手の区別と読み上げ用の項目名を残す。 */
#match-form.hide-input-headings .side-card { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: center; }
#match-form.hide-input-headings .side-card h3 { margin: 0; }
#match-form.hide-input-headings .deck-fields { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
#match-form.hide-input-headings :is(.turn-card, .notes-field) { display: block; }
#match-form.hide-input-headings .result-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#match-form.hide-input-headings :is([data-detail="rating"], [data-detail="opponentRating"]):not([hidden]) { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; align-items: center; }
#match-form.hide-input-headings .rating-side { margin: 0; align-self: start; min-height: 40px; display: flex; align-items: center; }
#match-form.hide-input-headings .rating-row :is(.cr-input, .filter-select) { margin-top: 0; }
#match-form.hide-input-headings .point-field { grid-template-columns: minmax(0, 1fr); gap: 0; }
#match-form.hide-input-headings .rank-choice { grid-column: 2; }
@media (max-width: 600px) {
  #match-form.hide-input-headings .rating-row { grid-template-columns: minmax(0, 1fr) 64px; gap: 8px; }
  #match-form.hide-input-headings .rating-row.single-rating-field,
  #match-form.hide-input-headings .rating-row.has-rating-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #match-form.hide-input-headings .rating-row .choice-trigger { padding-right: 0; }
  #match-form.hide-input-headings .rating-row .choice-trigger::after { display: none; }
  #match-form.hide-input-headings .rating-row .choice-trigger .info { justify-content: center; padding-inline: 4px; width: 100%; max-width: 100%; }
  #match-form.hide-input-headings .rating-row .choice-trigger .name { font-size: 12px; }
  #match-form.hide-input-headings .rating-row .choice-trigger:has(img) .name { display: none; }
}