/* =========================================================
   Правила (светлая секция)
   ========================================================= */
.rules { padding: var(--section) 0; }
.rules__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rule { padding: 28px 30px; background: #fbf8f0; border: 1px solid rgba(154, 116, 40, .22); }
.rule h3 { margin: 0 0 8px; font: 700 24px/1.2 var(--display); letter-spacing: .03em; color: var(--emerald); }
.rule p { margin: 0; font-size: 15.5px; color: var(--muted); }
.rule { position: relative; }
.rule--table { grid-row: span 3; display: flex; flex-direction: column; }
.rule--table .people { flex: 1; }
.rule--gold { background: var(--forest); border-color: var(--gold-soft); }
.rule--gold h3 { color: var(--gold-hi); }
.rule--gold p { max-width: calc(100% - 100px); color: var(--muted-l); }
.timer { position: absolute; right: 24px; bottom: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--gold); background: conic-gradient(rgba(212, 174, 98, .25) 0 60deg, transparent 60deg); }
.timer span { font: 600 30px/1 var(--display); color: var(--gold-hi); }
.timer small { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-l); }
.hourglass { position: absolute; right: 28px; bottom: 24px; width: 30px; height: 46px; border-top: 2px solid #b88a3d; border-bottom: 2px solid #b88a3d; }
.hourglass::before, .hourglass::after { content: ""; position: absolute; left: 3px; right: 3px; height: 21px; border: 1.5px solid #b88a3d; }
.hourglass::before { top: 0; border-top: 0; border-radius: 0 0 50% 50%; }
.hourglass::after { bottom: 0; border-bottom: 0; border-radius: 50% 50% 0 0; }
.hourglass span { position: absolute; left: 50%; bottom: 3px; width: 14px; height: 8px; margin-left: -7px; border-radius: 7px 7px 0 0; background: var(--gold); }
.rule:has(.hourglass) p { padding-right: 50px; }
.people { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 16px; }
.people th, .people td { padding: 12px 0; border-top: 1px solid rgba(23, 35, 29, .1); }
.people th { font-weight: 600; text-align: left; color: var(--text); }
.people td { text-align: right; font: 700 20px/1 var(--display); color: var(--gold-dark); }

@media (max-width: 760px) {
  .rules__grid { grid-template-columns: 1fr; }
  .rule--table { grid-row: auto; }
  .rule { padding: 22px 20px; }
  .rule--gold p { max-width: none; }
  .timer { position: static; margin-top: 14px; }
  .hourglass { display: none; }
  .rule:has(.hourglass) p { padding-right: 0; }
}