/* ============================================================
   DerinGames — Sampiyonlar seridi (ana sayfa) + Liderlik sayfasi
   home.css degiskenlerini kullanir, neon.css'ten SONRA yuklenir.
   ============================================================ */

/* ── Ana sayfa: sampiyonlar seridi ───────────────────────── */

.hallSection { padding: 14px 0 8px }

/* ── Arcade tabelasi ──
   Serit, kenarlarinda yanip sonen ampuller olan bir kabin tabelasi
   gibi duruyor. Ampuller iki katmandan olusuyor: tek sayili delikler
   bir katmanda, cift sayililar digerinde. Iki katmanin OPACITY'si
   donusumlu degisiyor — animasyon yalnizca opacity uzerinde oldugu
   icin GPU'da compose ediliyor, yeniden boyama yapmiyor. */
.hallMarquee {
  position: relative;
  padding: 17px 14px 15px;
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,140,0,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 40px rgba(255,120,0,.06), 0 18px 40px rgba(0,0,0,.28);
  overflow: hidden;
}

.hallBulbs {
  position: absolute; left: 14px; right: 14px; height: 8px;
  pointer-events: none;
}
.hallBulbsTop { top: 7px }
.hallBulbsBottom { bottom: 7px }

.hallBulbs::before,
.hallBulbs::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 5px 50%, #ffd98a 0 3.2px, transparent 4.2px);
  background-size: 24px 100%;
  filter: drop-shadow(0 0 5px rgba(255,180,60,.9));
  will-change: opacity;
}
/* ikinci katman yarim adim kaydirilmis: yan yana ampuller sirayla yanar */
.hallBulbs::after { background-position: 12px 0 }

.hallBulbs::before { animation: hallBulbA 1.2s steps(1, end) infinite }
.hallBulbs::after  { animation: hallBulbB 1.2s steps(1, end) infinite }
.hallBulbsBottom::before { animation-name: hallBulbB }
.hallBulbsBottom::after  { animation-name: hallBulbA }

@keyframes hallBulbA { 0%, 49% { opacity: 1 }   50%, 100% { opacity: .26 } }
@keyframes hallBulbB { 0%, 49% { opacity: .26 } 50%, 100% { opacity: 1 } }

.hallHead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; margin-bottom: 10px; flex-wrap: wrap;
}
.hallHeadTitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: .3px;
  display: flex; align-items: center; gap: 8px;
  color: #fff5e6;
  /* Bozuk neon tabela titremesi. Tek ve kucuk bir element uzerinde;
     boyanan alan basligin kutusu kadar. */
  animation: hallNeon 7s linear infinite;
}
@keyframes hallNeon {
  0%, 100% { text-shadow: 0 0 10px rgba(255,170,60,.75), 0 0 26px rgba(255,120,0,.45) }
  41%      { text-shadow: 0 0 10px rgba(255,170,60,.75), 0 0 26px rgba(255,120,0,.45) }
  42%      { text-shadow: 0 0 3px  rgba(255,170,60,.25) }
  43%      { text-shadow: 0 0 12px rgba(255,190,90,.9),  0 0 30px rgba(255,120,0,.5) }
  45%      { text-shadow: 0 0 3px  rgba(255,170,60,.2) }
  46%      { text-shadow: 0 0 10px rgba(255,170,60,.75), 0 0 26px rgba(255,120,0,.45) }
  78%      { text-shadow: 0 0 10px rgba(255,170,60,.75), 0 0 26px rgba(255,120,0,.45) }
  79%      { text-shadow: 0 0 2px  rgba(255,170,60,.15) }
  80%      { text-shadow: 0 0 12px rgba(255,190,90,.9),  0 0 30px rgba(255,120,0,.5) }
}
.hallHeadText { font-size: 12.5px; color: var(--muted); margin-top: 2px }

/* Canli ozet — sayilar hall.js tarafindan gercek veriden yazilir. */
.hallStat {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 7px; font-size: 13px; color: var(--muted);
}
.hallStat strong { color: var(--text); font-weight: 800 }
.hallStatSep { opacity: .35 }
.hallStatHot { color: #ff9a3c }
.hallStatHot strong { color: #ffb45c }

.hallHeadLink {
  color: var(--neon-accent, var(--accent)); text-decoration: none;
  font-weight: 600; font-size: 14px; white-space: nowrap;
  border: 1px solid rgba(var(--neon-accent-rgb, 0,198,255), .35);
  border-radius: 999px; padding: 7px 14px;
  transition: background .2s, border-color .2s;
}
.hallHeadLink:hover { background: rgba(var(--neon-accent-rgb, 0,198,255), .12) }

/* Yatay kaydirilan serit. Kart sayisi oyun sayisi kadar (18'e kadar)
   oldugu icin grid yerine kaydirma: dikeyde yer kaplamiyor. */
.hallStrip {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--neon-accent-rgb, 0,198,255), .45) transparent;
}
.hallStrip::-webkit-scrollbar { height: 8px }
.hallStrip::-webkit-scrollbar-thumb {
  background: rgba(var(--neon-accent-rgb, 0,198,255), .45); border-radius: 999px;
}

.hallCard {
  position: relative; flex: 0 0 auto; width: 188px; scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; color: var(--text);
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
}
.hallCard:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--neon-accent-rgb, 0,198,255), .55);
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
}
.hallCardMine { border-color: rgba(255,179,0,.55) }

/* Gorsel + uzerindeki sampiyon adi. Karti saran ilk baglanti. */
.hallCardTop {
  position: relative; display: block; height: 88px;
  border-radius: 15px 15px 0 0; overflow: hidden; text-decoration: none;
}
.hallCardImg { width: 100%; height: 100%; object-fit: cover; display: block }
.hallCardShade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,8,15,0) 30%, rgba(4,8,15,.82) 100%);
}
.hallCardWinner {
  position: absolute; left: 10px; right: 10px; bottom: 8px;
  display: flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: 14px; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}
.hallWinnerName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.hallMedal { font-size: 16px; flex: 0 0 auto }

.hallHotBadge {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 900; letter-spacing: .8px; color: #fff;
  padding: 3px 8px 3px 6px; border-radius: 999px;
  background: linear-gradient(135deg, #ff4d00, #ffb300);
  box-shadow: 0 2px 10px rgba(255,90,0,.55);
}
.hallMineBadge {
  position: absolute; top: 8px; right: 8px;
  font-size: 9.5px; font-weight: 900; letter-spacing: .8px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255,179,0,.9); color: #2e1c00;
}

/* Kartlarin bir kisminda fark cubugu var, bir kisminda yok; serit flex
   oldugu icin hepsi ayni boya uzuyor — dugmeler alt hizada kalsin. */
.hallCardBody { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; flex: 1 }
.hallBeatBtn { margin-top: auto }
.hallCardGame {
  font-size: 11.5px; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hallCardScoreRow {
  display: flex; align-items: baseline; gap: 6px; min-height: 21px; overflow: hidden;
}
.hallScoreLabel {
  font-size: 10.5px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.hallCardScore {
  font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700;
  color: var(--neon-accent, var(--accent));
  margin-left: auto; white-space: nowrap; flex: 0 0 auto;
}
/* Bicimli uzun skor: etiket yerine tam skor gosterilir. */
.hallScoreLong .hallScoreLabel { display: none }
.hallScoreLong .hallCardScore { font-size: 15px; margin-left: 0 }

/* Kisisel rekorun rekora oranı — yalnizca o oyunu oynamis kullanicida. */
.hallGapRow { margin-top: -2px }
.hallGapBar {
  height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.09);
}
.hallGapBar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ff8a00, #ffd166);
}
.hallGapText {
  display: flex; align-items: center; gap: 5px;
  margin-top: 4px; font-size: 11px; color: var(--muted);
}
.hallGapText strong { color: var(--text); font-weight: 700 }
.hallGapPct { margin-left: auto; color: #ffb45c; font-weight: 700 }
.hallGapCrown {
  font-size: 11.5px; font-weight: 700; color: #ffb300;
  background: rgba(255,179,0,.1); border: 1px solid rgba(255,179,0,.28);
  border-radius: 8px; padding: 4px 8px; text-align: center;
}

/* Asil eylem: liderlik tablosuna degil, DOGRUDAN oyuna gonderir. */
.hallBeatBtn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 10px; border-radius: 10px; text-decoration: none;
  font-size: 12.5px; font-weight: 800; letter-spacing: .2px;
  color: #fff; background: linear-gradient(135deg, #ff4d00, #ff8a00);
  box-shadow: 0 4px 14px rgba(255,90,0,.28);
  transition: filter .18s, transform .12s, box-shadow .18s;
}
.hallBeatBtn:hover { filter: brightness(1.12); box-shadow: 0 6px 20px rgba(255,90,0,.45) }
.hallBeatBtn:active { transform: scale(.97) }

/* ── Alev ──
   Sadece son 7 gunde rekoru kirilan kartlar yanar (su an 3 kart).
   Animasyonlar yalnizca opacity/transform uzerinde: GPU'da compose
   edilir, kaydirma sirasinda yeniden boyama yapmaz. */
.hallHot { border-color: rgba(255,120,0,.5) }
.hallEmber {
  /* .hallCardTop overflow:hidden ile kirpiyor — alevin yalnizca ust
     kismi gorunuyor, gorselin dibinden yukselirmis gibi duruyor. */
  position: absolute; left: -14%; right: -14%; bottom: -26px; height: 82px;
  pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse 46% 60% at 30% 100%, rgba(255,90,0,.85), transparent 70%),
    radial-gradient(ellipse 42% 70% at 62% 100%, rgba(255,170,0,.75), transparent 70%),
    radial-gradient(ellipse 60% 55% at 50% 100%, rgba(255,60,0,.6),  transparent 72%);
  filter: blur(9px);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  animation: hallEmberFlicker 2.4s ease-in-out infinite;
}
.hallCard:nth-child(even) .hallEmber { animation-duration: 3.1s; animation-delay: -1.2s }
.hallCard:nth-child(3n)   .hallEmber { animation-duration: 2.7s; animation-delay: -.6s }

@keyframes hallEmberFlicker {
  0%, 100% { opacity: .72; transform: scaleY(1)    scaleX(1) }
  25%      { opacity: .95; transform: scaleY(1.14) scaleX(.96) }
  50%      { opacity: .62; transform: scaleY(.92)  scaleX(1.04) }
  75%      { opacity: .88; transform: scaleY(1.08) scaleX(.98) }
}

/* Alev yalnizca SICAK rozetinde ve ozet satirinda oynuyor: 18 dugmenin
   hepsinde oynatmak surekli calisan animasyon sayisini gereksiz yere
   dorte katliyordu ve sicak kartlarin one cikmasini da zayiflatiyordu. */
.hallFlame { display: inline-block; transform-origin: 50% 90% }
.hallHotBadge .hallFlame,
.hallStatHot .hallFlame { animation: hallFlameDance 1.6s ease-in-out infinite }
@keyframes hallFlameDance {
  0%, 100% { transform: scale(1)    rotate(-3deg) }
  30%      { transform: scale(1.16) rotate(3deg) }
  60%      { transform: scale(.94)  rotate(-2deg) }
}

/* Liderin karti: yavas nabiz atan altin halka. */
.hallCardLead::after {
  content: ''; position: absolute; inset: -1px; border-radius: 16px;
  border: 1px solid rgba(255,190,80,.75); pointer-events: none;
  box-shadow: 0 0 16px rgba(255,170,50,.5);
  will-change: opacity;
  animation: hallLeadPulse 2.2s ease-in-out infinite;
}
@keyframes hallLeadPulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .hallEmber, .hallFlame, .hallHeadTitle, .hallPageTitle,
  .hallBulbs::before, .hallBulbs::after, .hallCardLead::after { animation: none }
  .hallEmber { opacity: .75 }
  .hallBulbs::after { opacity: .5 }
  .hallCard, .hallBeatBtn { transition: none }
}

/* ── Liderlik sayfasi ────────────────────────────────────── */

.hallPage { padding: 40px 0 60px }

/* Sayfa basligi da tabela icinde — ana sayfadaki seritle ayni dil. */
.hallPageMarquee { text-align: center; padding: 30px 20px 28px; margin-bottom: 24px }
.hallPageTitle {
  font-family: 'Space Grotesk', sans-serif; font-size: 34px; font-weight: 700;
  color: #fff5e6; margin-bottom: 8px;
  animation: hallNeon 7s linear infinite;
}
.hallPageMarqueeText { color: rgba(255,225,190,.72); font-size: 15px }
.hallPageText { color: var(--muted); font-size: 14.5px; margin-bottom: 22px; max-width: 700px }

.hallPeriods { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px }
.hallPeriodBtn {
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; transition: all .18s;
}
.hallPeriodBtn:hover { color: var(--text); border-color: rgba(255,255,255,.25) }
.hallPeriodBtn.active {
  background: rgba(var(--neon-accent-rgb, 0,198,255), .16);
  border-color: rgba(var(--neon-accent-rgb, 0,198,255), .5);
  color: var(--neon-accent, var(--accent));
}

.hallGameTabs {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 18px;
  scrollbar-width: thin;
}
.hallTab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13.5px;
  font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .18s;
}
.hallTab:hover { color: var(--text) }
.hallTab.active {
  background: rgba(var(--neon-accent-rgb, 0,198,255), .16);
  border-color: rgba(var(--neon-accent-rgb, 0,198,255), .5);
  color: var(--neon-accent, var(--accent));
}
.hallTabCount {
  font-size: 11px; font-weight: 800; opacity: .75;
  background: rgba(255,255,255,.08); border-radius: 999px; padding: 1px 6px;
}

.hallBoard {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
}

/* Sampiyon vitrini */
.hallBoardHead {
  display: flex; align-items: center; gap: 16px; margin-bottom: 18px;
  padding: 14px; border-radius: 16px;
  background: linear-gradient(120deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--border);
}
.hallBoardHead.hallHot {
  border-color: rgba(255,120,0,.45);
  background: linear-gradient(120deg, rgba(255,110,0,.12), rgba(255,255,255,.02));
}
.hallBoardImgWrap {
  position: relative; flex: 0 0 auto; width: 132px; height: 88px;
  border-radius: 12px; overflow: hidden;
}
.hallBoardImg { width: 100%; height: 100%; object-fit: cover; display: block }
.hallBoardInfo { min-width: 0 }
.hallBoardTitle { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700 }
.hallBoardKing {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px;
}
.hallBoardKingName { font-size: 17px; font-weight: 800 }
.hallBoardKingScore {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  color: var(--neon-accent, var(--accent));
}
.hallBoardHead .hallHotBadge { position: static }
.hallBoardMeta { color: var(--muted); font-size: 13px; margin-top: 6px }
.hallBoardBeat { margin-left: auto; flex: 0 0 auto; padding: 11px 20px; font-size: 14px }

/* Son 7 gunde girilen skorlar tabloda da isaretli */
.hallRowHot .hallCell { background: rgba(255,120,0,.09) }
.hallTabHot { border-color: rgba(255,140,0,.45) }

.hallMine {
  background: rgba(var(--neon-accent-rgb, 0,198,255), .08);
  border: 1px solid rgba(var(--neon-accent-rgb, 0,198,255), .25);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px;
}
.hallMuted { color: var(--muted) }

.hallTableWrap { overflow-x: auto }
.hallTable { width: 100%; border-collapse: collapse; font-size: 15px }
.hallTable th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); font-weight: 700; padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.hallCell { padding: 10px; border-bottom: 1px solid rgba(255,255,255,.05) }
.hallCellRank { width: 76px; font-weight: 800; white-space: nowrap }
.hallCellScore { font-family: 'Space Grotesk', sans-serif; font-weight: 700; white-space: nowrap }
.hallCellDate { color: var(--muted); font-size: 13px; white-space: nowrap; width: 78px }
.hallTable tbody tr:last-child .hallCell { border-bottom: none }

.hallRank1 .hallCell { background: rgba(255,179,0,.08) }
.hallRank2 .hallCell { background: rgba(255,255,255,.05) }
.hallRank3 .hallCell { background: rgba(205,127,50,.08) }
.hallRowMine .hallCell { background: rgba(var(--neon-accent-rgb, 0,198,255), .12) }

.hallInfo { color: var(--muted); padding: 24px 4px; text-align: center; font-size: 15px }

/* ── Yukleme iskeleti ──
   Amaci: veri gelmeden once yeri tutmak, boylece kartlar gelince
   sayfanin geri kalani asagi ziplamiyor (olculen sicrama: 226px).
   Parlaklik dalgasi transform ile kayiyor — compose edilir. */
.hallSkel { pointer-events: none }
.hallSkelBox, .hallSkelLine, .hallSkelBtn {
  position: relative; display: block; overflow: hidden;
  background: rgba(255,255,255,.07); border-radius: 6px;
}
.hallSkelBox { width: 100%; height: 100%; border-radius: 0 }
.hallSkelLine { height: 11px }
.hallSkelBtn { height: 31px; border-radius: 10px; margin-top: auto }

.hallSkelBox::after, .hallSkelLine::after, .hallSkelBtn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.11), transparent);
  transform: translateX(-100%);
  will-change: transform;
  animation: hallSkelSweep 1.35s ease-in-out infinite;
}
@keyframes hallSkelSweep { to { transform: translateX(100%) } }

.hallSkelRow {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 10px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.hallBoardHead.hallSkel { align-items: stretch }

@media (prefers-reduced-motion: reduce) {
  .hallSkelBox::after, .hallSkelLine::after, .hallSkelBtn::after { animation: none }
}

@media (max-width: 640px) {
  .hallCard { width: 168px }
  .hallCardTop { height: 80px }
  .hallCardScore { font-size: 16px }
  .hallHeadTitle { font-size: 18px }
  .hallPageTitle { font-size: 26px }
  .hallBoard { padding: 14px }
  .hallBoardImg { width: 72px; height: 50px }
  .hallPlayBtn { padding: 8px 14px; font-size: 13px }
  .hallTable { font-size: 14px }
  .hallCellDate { display: none }
  .hallTable th:nth-child(4) { display: none }
}