/* Bilim Merdiveni — defter stiline uyumlu bilgi yarışması. Sınıflar "bm-" önekli. */
.bm [hidden] { display: none !important; }
/* Oyun sayfasının içerik sütunu diğer oyunlarda 560px; soru kartı + merdiven için genişlet. */
.gp-main:has(.bm) { max-width: 1040px; }
.bm { container-type: inline-size; }
.bm-main { min-width: 0; container-type: inline-size; }
.bm { font-family: var(--nb-font, "Bricolage Grotesque", system-ui, sans-serif); color: var(--nb-ink, #1b1b1b); }
.bm-tabs { display: flex; gap: 8px; margin: 0 0 18px; flex-wrap: wrap; }
.bm-tabs button { font: inherit; font-weight: 800; font-size: 15px; padding: 9px 16px; border: 2.5px solid var(--nb-ink, #1b1b1b); border-radius: 10px; background: #fff; cursor: pointer; color: inherit; }
.bm-tabs button.on { background: var(--nb-ink, #1b1b1b); color: #fff; }
.bm-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 22px; align-items: start; }
.bm-card { background: #fff; border: 2.5px solid var(--nb-ink, #1b1b1b); border-radius: 14px; box-shadow: 5px 5px 0 var(--nb-ink, #1b1b1b); padding: 22px; }
.bm .pill { font-family: inherit; font-weight: 800; font-size: 15px; padding: 10px 18px; cursor: pointer; }
.bm .pill:disabled { opacity: .45; cursor: default; box-shadow: none; transform: none; }

/* giriş / bitiş */
.bm-intro h2, .bm-end h2 { font-weight: 800; font-size: 28px; letter-spacing: -.03em; margin: 0 0 10px; }
.bm-intro p, .bm-end p { color: var(--nb-ink-2, #3d3d3d); line-height: 1.5; margin: 0 0 12px; }
.bm-intro ul { margin: 0 0 18px; padding-left: 20px; line-height: 1.7; }
.bm-end { text-align: center; }
.bm-tagline { display: inline-block; background: var(--nb-ink, #1b1b1b); color: var(--nb-paper, #fbf7ee); font-size: 12px; padding: 3px 10px; border-radius: 4px; transform: rotate(-1.5deg); margin-bottom: 12px; }
.bm-big { font-weight: 800; font-size: clamp(48px, 10vw, 72px); letter-spacing: -.04em; line-height: 1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.bm-unit { font-weight: 600; color: var(--nb-muted, #6b665c); }
.bm-cells { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 18px 0; }
.bm-cells span { width: 40px; height: 40px; border: 2px solid var(--nb-ink, #1b1b1b); border-radius: 6px; display: grid; place-items: center; font-weight: 800; background: #fff; }
.bm-cells span.on { background: #8fd694; }
.bm-cells span.x { background: #ff8c8c; }
.bm-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* soru */
.bm-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.bm-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.bm-cat, .bm-lv { border: 2px solid var(--nb-ink, #1b1b1b); border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 600; background: var(--nb-cream, #fff8e1); }
.bm-lv.l1 { background: #d7f2e9; } .bm-lv.l2 { background: #ffe9a8; } .bm-lv.l3 { background: #ffc69a; } .bm-lv.l4 { background: #ff9e9e; }
.bm-timer { position: relative; height: 16px; border: 2px solid var(--nb-ink, #1b1b1b); background: #fff; border-radius: 8px; overflow: hidden; margin-bottom: 18px; }
.bm-timer i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--nb-mint, #57c4ad); border-right: 2px solid var(--nb-ink, #1b1b1b); transition: width .25s linear; }
.bm-timer.low i { background: #ff8c69; }
.bm-timer.off i { border-right: 0; }
.bm-timer span { position: absolute; right: 8px; top: -1px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bm-q { font-weight: 800; font-size: clamp(20px, 3vw, 26px); letter-spacing: -.02em; line-height: 1.25; margin: 0 0 18px; text-wrap: balance; }
.bm-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bm-ans { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; min-height: 62px; background: #fff; border: 2.5px solid var(--nb-ink, #1b1b1b); border-radius: 12px; box-shadow: 3px 3px 0 var(--nb-ink, #1b1b1b); cursor: pointer; font: inherit; font-size: 16px; color: inherit; line-height: 1.3; transition: transform .12s, box-shadow .12s, background .2s; }
.bm-ans:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--nb-ink, #1b1b1b); background: var(--nb-cream, #fff8e1); }
.bm-ans .k { flex: none; width: 32px; height: 32px; border: 2px solid var(--nb-ink, #1b1b1b); border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--nb-paper, #fbf7ee); }
.bm-ans { min-width: 0; }
.bm-ans .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bm-ans .poll { flex: none; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
/* Seçili şık, fare üstündeyken de belirgin kalsın (hover kuralından daha özgül). */
.bm-ans.sel, .bm-ans.sel:hover:not(:disabled) { background: var(--nb-yellow, #ffd23f); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--nb-ink, #1b1b1b); }
.bm-ans.sel .k { background: var(--nb-ink, #1b1b1b); color: #fff; }
.bm-ans.ok { background: #8fd694; }
.bm-ans.bad { background: #ff8c8c; }
.bm-ans.gone { visibility: hidden; }
.bm-ans:disabled { cursor: default; }
.bm-actions, .bm-next { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.bm-fb { margin-top: 18px; padding: 14px 16px; border: 2px dashed var(--nb-ink, #1b1b1b); border-radius: 12px; background: var(--nb-cream, #fff8e1); line-height: 1.5; }
.bm-fb b { display: block; font-weight: 800; font-size: 17px; margin-bottom: 4px; }
.bm-helps { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 2px dashed var(--nb-line-2, #c9d6ec); }
.bm .bm-help { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; padding: 8px 12px; }
.bm-help svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* merdiven: periyodik tablo hücreleri */
.bm-ladder h3 { margin: 0 0 8px; font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.bm-ladder { display: flex; flex-direction: column; gap: 6px; }
.bm-el { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 5px 10px 5px 6px; background: #fff; border: 2px solid var(--nb-ink, #1b1b1b); border-radius: 8px; font-variant-numeric: tabular-nums; transition: transform .2s; }
.bm-el .sym { position: relative; height: 38px; border: 2px solid var(--nb-ink, #1b1b1b); border-radius: 5px; display: grid; place-items: center; font-weight: 800; font-size: 17px; background: var(--nb-paper, #fbf7ee); }
.bm-el .sym small { position: absolute; top: 1px; left: 3px; font-size: 9px; font-weight: 600; }
.bm-el .nm { font-size: 13px; color: var(--nb-muted, #6b665c); }
.bm-el .pt { font-weight: 800; font-size: 14px; }
.bm-el.safe .sym { background: var(--nb-mint, #57c4ad); }
.bm-el.safe .nm::after { content: " · güvenli"; color: var(--nb-ink, #1b1b1b); font-weight: 700; }
.bm-el.done { background: #8fd694; }
.bm-el.done .nm, .bm-el.cur .nm { color: var(--nb-ink, #1b1b1b); }
.bm-el.cur { background: var(--nb-yellow, #ffd23f); transform: translateX(-6px); box-shadow: 3px 3px 0 var(--nb-ink, #1b1b1b); }
.bm-el.miss { background: #ff8c8c; }

.bm-modal { position: fixed; inset: 0; z-index: 70; background: rgba(27, 27, 27, .45); display: grid; place-items: center; padding: 16px; font-family: var(--nb-font, "Bricolage Grotesque", system-ui, sans-serif); }
.bm-modal .bm-card { max-width: 420px; width: 100%; }
.bm-modal h3 { margin: 0 0 8px; font-weight: 800; font-size: 22px; }
.bm-modal p { margin: 0 0 16px; line-height: 1.5; }
.bm-modal .bm-row { justify-content: flex-end; }
.bm-modal .pill { font-family: inherit; font-weight: 800; padding: 10px 18px; cursor: pointer; }

/* Dar alan (telefon ya da geniş sütun verilmeyen tema): merdiven üstte yatay şerit */
@container (max-width: 760px) {
  .bm-wrap { grid-template-columns: minmax(0, 1fr); }
  .bm-ladder { order: -1; flex-direction: row-reverse; justify-content: flex-end; overflow-x: auto; padding: 4px 4px 10px; scrollbar-width: thin; }
  .bm-ladder h3 { display: none; }
  .bm-el { flex: none; width: 62px; grid-template-columns: 1fr; text-align: center; gap: 2px; padding: 4px; }
  .bm-el .nm { display: none; }
  .bm-el .pt { font-size: 11px; }
  .bm-el.cur { transform: translateY(-3px); }
}
/* Soru kartı darsa şıklar alt alta */
@container (max-width: 520px) {
  .bm-answers { grid-template-columns: minmax(0, 1fr); }
  .bm-ans { min-height: 52px; font-size: 15px; }
}
@media (max-width: 540px) {
  .bm-card { padding: 16px; }
}

/* 10 oyun: üç sütunlu düzende son kart tek kalmasın */
@media (min-width: 901px) {
  .hub-grid > .hub-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; flex-direction: row; }
  .hub-grid > .hub-card:last-child:nth-child(3n + 1) .art { width: 38%; height: auto; min-height: 150px; flex: none; }
}
@media (min-width: 761px) {
  .tiles > .tile:last-child:nth-child(3n + 1) { grid-column: 1 / -1; flex-direction: row; }
  .tiles > .tile:last-child:nth-child(3n + 1) .art { width: 33%; height: auto; min-height: 110px; flex: none; }
}