/* "Nasıl oynanır" penceresi: Okey, poker ve para kuralları. Ana sayfa teması (home.css) değişkenlerini kullanır. */

.rules-btn { margin-left: auto; margin-right: 10px; white-space: nowrap; }
.rules-btn .short { display: none; }
/* Masadayken üst çubuk sıkışık: kurallar masa menüsünden / sayfa altından, davet lobiden açılır */
body.table-active .topbar .rules-btn, body.table-active .topbar #refBtn { display: none; }
@media (max-width: 720px) { .rules-btn .long { display: none; } .rules-btn .short { display: inline; } .rules-btn { margin-right: 6px; } }

.foot-link { padding: 0; border: 0; background: none; color: var(--h-muted, #8d9fa5); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot-link:hover { color: var(--h-text, #e8edeb); }
.foot-link:focus-visible { outline: 2px solid var(--h-ivory, #f1e9d4); outline-offset: 3px; border-radius: 3px; }

body.rules-open { overflow: hidden; }
.modal .modal-body.rules-body {
  display: flex; flex-direction: column; width: min(860px, calc(100vw - 24px)); height: min(820px, calc(100dvh - 24px)); max-height: none; padding: 0; overflow: hidden;
}
.rules-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 12px; flex: none; }
.rules-head h2 { margin: 0; }
.rules-close { flex: none; }
.rules-tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--h-line, #22333a); flex: none; overflow-x: auto; scrollbar-width: none; }
.rules-tabs::-webkit-scrollbar { display: none; }
.rules-tabs button {
  position: relative; flex: none; padding: 10px 14px 12px; border: 0; background: none; color: var(--h-muted, #8d9fa5);
  font: 600 14px/1 var(--h-sans, system-ui); cursor: pointer; white-space: nowrap;
}
.rules-tabs button:hover { color: var(--h-text, #e8edeb); }
.rules-tabs button[aria-selected="true"] { color: var(--h-ivory, #f1e9d4); }
.rules-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--h-ivory, #f1e9d4); border-radius: 2px; }
.rules-tabs button:focus-visible { outline: 2px solid var(--h-ivory, #f1e9d4); outline-offset: -2px; border-radius: 6px; }

.rules-content { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 22px 28px; font: 15px/1.65 var(--h-sans, system-ui); color: var(--h-text, #e8edeb); overscroll-behavior: contain; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .rules-content { scroll-behavior: auto; } }
.rules-content:focus { outline: none; }
.rules-content p { margin: 0 0 10px; color: #cbd6d3; }
.rules-content h3 { margin: 0 0 10px; font: 650 18px/1.3 var(--h-sans, system-ui); color: #f4f1e8; scroll-margin-top: 12px; }
.rules-content h4 { margin: 14px 0 6px; font: 650 14.5px/1.3 var(--h-sans, system-ui); color: var(--h-ivory, #f1e9d4); }
.rules-content ul, .rules-content ol { margin: 0 0 10px; padding-left: 22px; color: #cbd6d3; }
.rules-content li { margin: 0 0 6px; padding-left: 2px; }
.rules-content li::marker { color: var(--h-faint, #647a81); }

.r-sec, .r-mode { padding: 20px 0; border-top: 1px solid var(--h-line, #22333a); }
.r-toc + .r-sec, .r-toc + .r-mode, .r-sec:first-child, .r-mode:first-child, .r-note + .r-mode { border-top: 0; }
.r-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--h-line, #22333a); border-radius: 10px; background: var(--h-bg, #0d1417); }
.r-toc span { color: var(--h-faint, #647a81); font-size: 13px; margin-right: 4px; }
.r-toc a { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--h-line-2, #2f444c); color: var(--h-text, #e8edeb); font-size: 13px; text-decoration: none; }
.r-toc a:hover { background: var(--h-raised, #18242a); }
.r-toc a:focus-visible { outline: 2px solid var(--h-ivory, #f1e9d4); outline-offset: 2px; }

.r-note { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--h-line-2, #2f444c); border-radius: 10px; background: var(--h-raised, #18242a); color: #cbd6d3; font-size: 14px; line-height: 1.55; }
.r-note.warn { border-color: rgba(229, 115, 107, .45); background: rgba(229, 115, 107, .08); }
.r-note.info { border-color: rgba(120, 207, 152, .35); background: rgba(120, 207, 152, .07); }

.r-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 6px 0 10px; }
.r-grid > div { padding: 14px; border: 1px solid var(--h-line, #22333a); border-radius: 10px; background: var(--h-bg, #0d1417); }
.r-grid h4 { margin-top: 0; }
@media (max-width: 640px) { .r-grid { grid-template-columns: minmax(0, 1fr); } }

/* Taş örnekleri */
.rt-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 8px 0; }
.rt-tiles { display: inline-flex; gap: 4px; }
.rt-label { color: var(--h-muted, #8d9fa5); font-size: 13px; }
.rtile {
  display: inline-grid; place-items: center; width: 30px; height: 40px; border-radius: 5px; border: 1px solid #b9ab86; border-bottom-width: 3px;
  background: linear-gradient(#fbf6e6, #ece1c3); font: 800 16px/1 var(--h-sans, system-ui); font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.rt-s { color: #c98700; } .rt-m { color: #1f63b8; } .rt-k { color: #1a1d1f; } .rt-r { color: #c4272e; }
.rt-ok { color: #c4272e; font-size: 13px; border-color: #c4272e; }
.rt-fake { color: #1a1d1f; font-size: 18px; border-style: dashed; }

/* Kart örnekleri */
.rc-row { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.rcard {
  display: inline-grid; place-items: center; min-width: 34px; height: 46px; padding: 0 4px; border-radius: 5px; border: 1px solid #c9c2ad; background: #fbfaf5;
  color: #1a1d1f; font: 800 15px/1 var(--h-sans, system-ui); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); white-space: nowrap;
}
.rcard.red { color: #c4272e; }

.r-ranks { list-style: none; margin: 0 0 10px; padding: 0; }
.r-rank { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 12px 0; border-top: 1px solid var(--h-line, #22333a); }
.r-ranks .r-rank:first-child { border-top: 0; }
.r-rank-n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--h-line-2, #2f444c); color: var(--h-ivory, #f1e9d4); font: 700 13px/1 var(--h-sans, system-ui); font-variant-numeric: tabular-nums; }
.r-rank b { display: block; color: #f4f1e8; }
.r-rank div > span { display: block; color: var(--h-muted, #8d9fa5); font-size: 14px; }

@media (max-width: 520px) {
  .modal .modal-body.rules-body { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .rules-head { padding: 14px 16px 10px; }
  .rules-tabs { padding: 0 8px; }
  .rules-content { padding: 6px 16px 24px; font-size: 14.5px; }
  .rtile { width: 27px; height: 36px; font-size: 15px; }
  .rcard { min-width: 31px; height: 42px; font-size: 14px; }
}