/* ═══════════════════════════════════════════
   REKABET ORIGINALS
   ═══════════════════════════════════════════ */
.og-page { padding-top: 24px; }
.og-title h1 { font-family: var(--italic); font-style: italic; font-weight: 900; font-size: 44px; letter-spacing: -.01em; }
.og-title h1 span { color: #7cc4ff; }
.og-title p { color: var(--text-2); font-size: 14.5px; margin-top: 4px; }

.og-tab.active { color: var(--sky); background: rgba(59, 130, 246, .14); }

.og-balance { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 10px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line-2); }
.og-balance b { font-size: 14px; font-variant-numeric: tabular-nums; }
.og-balance button { width: 28px; height: 28px; border-radius: 6px; background: var(--surface-2); color: var(--sky); }
.og-demo { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; padding: 3px 6px; border-radius: 4px; color: #3b2a00; background: linear-gradient(135deg, #fde68a, #d4a017); }

.og-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.og-panel { padding: 20px; display: flex; flex-direction: column; gap: 16px; background: var(--bg-2); border-right: 1px solid var(--line); }
.og-field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.og-input { display: flex; align-items: center; height: 44px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-2); padding-left: 12px; overflow: hidden; }
.og-input span { color: var(--text-3); margin-right: 6px; }
.og-input input, .og-input select { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: #fff; font: inherit; font-size: 15px; font-weight: 700; }
.og-input select option { background: var(--surface); }
.og-input button { height: 100%; padding: 0 14px; border-left: 1px solid var(--line-2); font-weight: 800; color: var(--text-2); }
.og-input button:hover { background: var(--surface-2); color: #fff; }
.og-opts { display: none; flex-direction: column; gap: 12px; }
.og-opts.show { display: flex; }
.og-opts input[type=range] { width: 100%; accent-color: var(--blue-2); }
.og-stats { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); }
.og-stats b { color: #fff; }
.og-hint { font-size: 13px; color: var(--text-3); line-height: 1.5; }
.og-play { height: 52px; border-radius: 12px; font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(180deg, var(--blue-2), var(--blue)); box-shadow: 0 10px 24px -8px rgba(37, 99, 235, .8); transition: filter .2s, transform .15s; }
.og-play:hover { filter: brightness(1.1); }
.og-play:active { transform: scale(.98); }
.og-play.cashout { background: linear-gradient(180deg, #34d399, #059669); box-shadow: 0 10px 24px -8px rgba(5, 150, 105, .8); }
.og-play:disabled { opacity: .55; cursor: not-allowed; }
.og-msg { min-height: 20px; font-size: 13.5px; font-weight: 700; text-align: center; }
.og-msg.win { color: #34d399; }
.og-msg.lose { color: #f87171; }

.og-stage { position: relative; min-height: 520px; background: radial-gradient(80% 80% at 50% 30%, #0e2257, #071330 70%); }
.og-game { display: none; position: absolute; inset: 0; padding: 24px; }
.og-game.show { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.og-history { position: absolute; top: 16px; right: 16px; display: flex; gap: 6px; }
.og-history span { padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 800; background: rgba(255, 255, 255, .06); }
.og-history .w { color: #34d399; } .og-history .l { color: #f87171; }

/* Crash */
#crashCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.crash-mult { position: relative; font-family: var(--italic); font-style: italic; font-weight: 900; font-size: 88px; text-shadow: 0 8px 30px rgba(59, 130, 246, .6); font-variant-numeric: tabular-nums; }
.crash-mult.bust { color: #f87171; text-shadow: 0 8px 30px rgba(248, 113, 113, .5); }
.crash-mult.cashed { color: #34d399; }

/* Mines */
.mines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: min(440px, 100%); }
.mine-cell { aspect-ratio: 1; border-radius: 12px; background: linear-gradient(180deg, #1c3a85, #132a66); border: 1px solid rgba(96, 165, 250, .25); box-shadow: 0 4px 0 #0a1a45; font-size: 34px; display: grid; place-items: center; transition: transform .12s, background .2s; }
.mine-cell:hover:not(:disabled) { transform: translateY(-2px); background: linear-gradient(180deg, #2450b0, #183680); }
.mine-cell.gem { background: radial-gradient(circle, #1e6b5a, #0d3b33); border-color: #34d399; }
.mine-cell.bomb { background: radial-gradient(circle, #7f1d1d, #3b0d0d); border-color: #f87171; }
.mine-cell.dim { opacity: .45; }
.mines-info { margin-top: 18px; color: var(--text-2); font-size: 14px; }
.mines-info b { color: #fff; }

/* Dice */
.dice-result { font-family: var(--italic); font-style: italic; font-weight: 900; font-size: 84px; font-variant-numeric: tabular-nums; margin-bottom: 30px; }
.dice-result.win { color: #34d399; } .dice-result.lose { color: #f87171; }
.dice-bar { position: relative; width: min(620px, 100%); height: 16px; border-radius: 10px; background: #7f1d1d; overflow: visible; }
.dice-win { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px 0 0 10px; background: linear-gradient(90deg, #059669, #34d399); }
.dice-marker { position: absolute; top: -14px; width: 4px; height: 44px; border-radius: 2px; background: #fff; box-shadow: 0 0 12px #fff; transform: translateX(-2px); transition: left .5s cubic-bezier(.2, .8, .2, 1); left: 50%; }
.dice-scale { display: flex; justify-content: space-between; width: min(620px, 100%); margin-top: 12px; font-size: 12px; color: var(--text-3); }

/* Plinko */
#plinkoCanvas { width: min(560px, 100%); aspect-ratio: 560 / 440; }
.plinko-slots { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; width: calc(min(560px, 100%) * 13 / 14); margin-top: 2px; }
.plinko-slots span { padding: 6px 0; border-radius: 6px; text-align: center; font-size: 11.5px; font-weight: 800; color: #071330; transition: transform .2s; }
.plinko-slots span.hit { transform: translateY(6px); filter: brightness(1.3); }

/* Provably fair */
.og-fair { padding: 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.og-fair h3 { font-size: 17px; margin-bottom: 6px; }
.og-fair > p { font-size: 13px; color: var(--text-2); line-height: 1.55; max-width: 900px; }
.fair-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0; }
.fair-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.fair-grid input { height: 40px; padding: 0 12px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line-2); color: #fff; font: 12.5px/1 ui-monospace, Consolas, monospace; outline: 0; }

/* Ana sayfa: Originals şeridi */
.originals-row .track { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
.og-card { position: relative; height: 170px; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; isolation: isolate; border: 1px solid rgba(96, 165, 250, .3); transition: transform .25s, box-shadow .25s; }
.og-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -12px rgba(37, 99, 235, .7); }
.og-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 16px); }
.og-card .og-ico { position: absolute; right: 14px; top: 10px; font-size: 92px; opacity: .9; }
.og-card .og-ico svg { stroke-width: 1.3; }
.og-card b { font-family: var(--italic); font-style: italic; font-weight: 900; font-size: 30px; line-height: 1; }
.og-card small { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .75); margin-top: 4px; }
.og-card .og-badge { position: absolute; left: 14px; top: 14px; font-size: 10px; font-weight: 800; letter-spacing: .12em; padding: 4px 8px; border-radius: 6px; background: rgba(255, 255, 255, .14); }

@media (max-width: 900px) {
  .og-wrap { grid-template-columns: 1fr; }
  .og-panel { border-right: 0; border-bottom: 1px solid var(--line); order: 2; }
  .og-stage { min-height: 400px; }
  .crash-mult { font-size: 60px; }
  .dice-result { font-size: 60px; }
  .fair-grid { grid-template-columns: 1fr; }
  .og-balance .og-demo { display: none; }
  .originals-row .track { grid-auto-columns: 62%; }
}