/* Gamer DB Arcade — ortak HUD ve kartlar. Oyunlar kendi sahnesini çizer, bu dosya çerçeveyi verir. */
:root {
  --gdb-ink: #2b1d0e;
  --gdb-paper: rgba(255,255,255,.82);
  --gdb-accent: #ff7a1a;
  --gdb-accent-ink: #fff;
  --gdb-radius: 14px;
  --gdb-safe-top: env(safe-area-inset-top, 0px);
  --gdb-safe-bottom: env(safe-area-inset-bottom, 0px);
}
html, body { margin: 0; height: 100%; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
body { font-family: -apple-system, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif; color: var(--gdb-ink); background: #d9b98c; }
canvas { display: block; }

#gdb-hud {
  position: fixed; left: 0; right: 0; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: calc(var(--gdb-safe-top) + 8px) 10px 8px;
  pointer-events: none;
}
#gdb-hud > * { pointer-events: auto; }
#gdb-hud .gdb-mid { flex: 1; display: flex; justify-content: center; gap: 6px; font-weight: 600; font-size: 13px; min-width: 0; }
#gdb-hud .gdb-mid span { white-space: nowrap; background: var(--gdb-paper); padding: 5px 9px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
#gdb-hud .gdb-mid b { font-weight: 800; }
#gdb-hud .gdb-right { display: flex; gap: 5px; }
#gdb-hud .gdb-left { display: flex; gap: 5px; }

.gdb-btn {
  appearance: none; border: 0; cursor: pointer;
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--gdb-paper); color: var(--gdb-ink);
  font-size: 18px; line-height: 36px; text-align: center; padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.14), inset 0 -2px 0 rgba(0,0,0,.08);
  transition: transform .08s;
}
.gdb-btn:active { transform: translateY(1px) scale(.97); }
.gdb-btn.gdb-back { font-size: 24px; font-weight: 700; }
.gdb-btn.gdb-primary { width: auto; padding: 0 26px; height: 50px; line-height: 50px; border-radius: 999px; background: var(--gdb-accent); color: var(--gdb-accent-ink); font-size: 18px; font-weight: 800; }

.gdb-win, .gdb-adbox {
  position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: rgba(30,18,6,.45); opacity: 0; transition: opacity .25s;
}
.gdb-win.on, .gdb-adbox { opacity: 1; }
.gdb-win-in, .gdb-adbox-in {
  background: #fff8ee; border-radius: 22px; padding: 28px 30px; text-align: center; min-width: 240px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35); transform: translateY(10px); transition: transform .25s;
}
.gdb-win.on .gdb-win-in { transform: none; }
.gdb-win-in h2 { margin: 0 0 6px; font-size: 26px; }
.gdb-win-in p { margin: 0 0 18px; opacity: .7; font-weight: 600; }
.gdb-adbox-in b { display: block; font-size: 40px; margin-top: 8px; }

.gdb-howto .gdb-win-in { max-width: 320px; text-align: left; }
.gdb-howto h2 { text-align: center; }
.gdb-howto .gdb-goal { opacity: .85; font-weight: 600; margin-bottom: 12px; }
.gdb-howto ol { margin: 0 0 18px; padding-left: 20px; line-height: 1.45; }
.gdb-howto .gdb-primary { display: block; margin: 0 auto; }
.gdb-btn.gdb-help { font-weight: 900; font-size: 18px; }
.gdb-howto .gdb-row { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; font-weight: 700; }
.gdb-win-in .gdb-final { font-weight: 700; margin: 0 0 8px; }

.gdb-btn.gdb-hint { position: relative; }
.gdb-joker-sayi { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; line-height: 18px; border-radius: 9px; background: var(--gdb-accent); color: #fff; font-size: 11px; font-weight: 800; font-style: normal; padding: 0 4px; }
.gdb-reklam { position: fixed; inset: 0; z-index: 30; background: #000; display: flex; flex-direction: column; }
.gdb-reklam-ust { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--gdb-safe-top) + 10px) 12px 8px; }
.gdb-sayac { color: #fff; font-weight: 800; background: rgba(255,255,255,.15); padding: 6px 12px; border-radius: 999px; min-width: 36px; text-align: center; }
.gdb-kapat[disabled] { opacity: .35; }
.gdb-reklam-medya { flex: 1; display: flex; align-items: center; justify-content: center; }
.gdb-reklam-medya img, .gdb-reklam-medya video { max-width: 100%; max-height: 100%; object-fit: contain; }
.gdb-toast { position: fixed; left: 50%; bottom: calc(var(--gdb-safe-bottom) + 28px); transform: translate(-50%, 20px); opacity: 0; z-index: 40; background: rgba(30,18,6,.9); color: #fff; font-weight: 700; padding: 10px 16px; border-radius: 999px; transition: all .3s; pointer-events: none; }
.gdb-toast.on { opacity: 1; transform: translate(-50%, 0); }