.halaliRules { max-width: 900px; margin: auto; padding: 12px; }
.halaliRules table { border-collapse: collapse; width: 100%; min-width: 740px; }
.halaliRules td, .halaliRules th { padding: 6px; border: 1px solid #a99e7b; }
.halaliRules img { width: 48px; min-width: 48px; max-width: none; height: 48px; object-fit: contain; vertical-align: middle; }
.halaliRules .tableScroll { overflow-x: auto; }

/* Stack each figure's properties when the rules container is narrow. */
.halaliRules { box-sizing: border-box; min-width: 0; container: halali-rules / inline-size; }
@container halali-rules (max-width: 739px) {
    .halaliRules table { min-width: 0; }
    .halaliRules table, .halaliRules tbody { display: block; }
    .halaliRules thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .halaliRules tr { display: block; margin-bottom: 12px; border: 1px solid #a99e7b; border-radius: 6px; overflow: hidden; }
    .halaliRules td { display: grid; grid-template-columns: 45% minmax(0, 1fr); align-items: center; gap: 4px; border: 0; border-bottom: 1px solid #e4dfd0; }
    .halaliRules td:first-child { display: block; background: #f1ead7; }
    .halaliRules td:last-child { border-bottom: 0; }
    .halaliRules td[data-label]::before { content: attr(data-label); font-weight: bold; overflow-wrap: anywhere; }
}