/* ============================================================
   VALOLOBİ - Ortak stil dosyası
   Tema renkleri her oyun sayfasında <html style="--ac:..."> ile gelir.
   ============================================================ */
:root {
  --ac: 255 70 85;
  --ac-dark: 189 57 68;
  --ac2: 0 245 212;
}

body {
  background-color: #06090e;
  color: #e2e8f0;
  background-image:
    radial-gradient(at 0% 0%, rgb(var(--ac) / 0.09) 0px, transparent 40%),
    radial-gradient(at 100% 0%, rgb(var(--ac2) / 0.05) 0px, transparent 35%),
    radial-gradient(at 50% 100%, rgba(15, 23, 42, 0.5) 0px, transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 36px 36px, 36px 36px;
}

/* Kuleler 18rem (288px) + 16px boşluk = 304px; ana içerik 1280px. Her iki yanda 304px+ yer kalan ekranlarda (>=1910px) kule, diğerlerinde kart görünür. */
@media (max-width: 1909px) {
  .side-tower-banner { display: none !important; }
  .inline-banner-cards { display: grid !important; }
}
@media (min-width: 1910px) {
  .side-tower-banner { display: flex !important; }
  .inline-banner-cards { display: none !important; }
}

/* Panelden girilen uzun çekiliş / reklam yazıları: taşma yok, gerekirse kelime içinden kırılır */
.gw-wrap {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  hyphens: auto;
}
.side-tower-banner::-webkit-scrollbar { width: 4px; }
.side-tower-banner::-webkit-scrollbar-thumb { background: rgb(var(--ac) / 0.35); border-radius: 4px; }

/* Canlı lobi güncellemesi: yeni gelen ilan kısa süre parlar */
@keyframes lobbyNewFlash {
  0%   { box-shadow: 0 0 0 0 rgb(var(--ac) / 0.0); transform: translateY(-6px); opacity: .4; }
  30%  { box-shadow: 0 0 0 3px rgb(var(--ac) / 0.55); transform: translateY(0); opacity: 1; }
  100% { box-shadow: 0 0 0 0 rgb(var(--ac) / 0.0); }
}
.lobby-new { animation: lobbyNewFlash 1.6s ease-out; }
.tower-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.tower-scroll::-webkit-scrollbar { display: none; }

.clip-angular { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.clip-tag { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }

/* ---------- Derece rozetleri (tüm oyunlar ortak palet) ---------- */
.rk-iron     { background: linear-gradient(135deg, #3f3f46, #18181b); border-color: #71717a; color: #e4e4e7; }
.rk-bronze   { background: linear-gradient(135deg, #854d0e, #451a03); border-color: #b45309; color: #fef3c7; }
.rk-silver   { background: linear-gradient(135deg, #475569, #1e293b); border-color: #94a3b8; color: #f8fafc; }
.rk-gold     { background: linear-gradient(135deg, #a16207, #713f12); border-color: #facc15; color: #fef08a; }
.rk-platinum { background: linear-gradient(135deg, #0891b2, #164e63); border-color: #22d3ee; color: #cffafe; }
.rk-blue     { background: linear-gradient(135deg, #2563eb, #1e3a8a); border-color: #93c5fd; color: #dbeafe; box-shadow: 0 0 10px rgba(59, 130, 246, 0.25); }
.rk-purple   { background: linear-gradient(135deg, #9333ea, #581c87); border-color: #d8b4fe; color: #faf5ff; box-shadow: 0 0 10px rgba(168, 85, 247, 0.25); }
.rk-green    { background: linear-gradient(135deg, #16a34a, #14532d); border-color: #4ade80; color: #dcfce7; box-shadow: 0 0 10px rgba(34, 197, 94, 0.25); }
.rk-red      { background: linear-gradient(135deg, #dc2626, #7f1d1d); border-color: #f87171; color: #fee2e2; box-shadow: 0 0 14px rgba(239, 68, 68, 0.35); }
.rk-radiant  { background: linear-gradient(135deg, #fef08a, #eab308, #ca8a04); border-color: #ffffff; color: #0f172a; font-weight: 800; box-shadow: 0 0 16px rgba(250, 204, 21, 0.5); }
.rk-level    { background: linear-gradient(135deg, rgb(var(--ac) / .35), rgb(var(--ac-dark) / .25)); border-color: rgb(var(--ac) / .7); color: #fff; }

.lobby-item { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.lobby-item:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--ac) / 0.5);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7), 0 0 20px rgb(var(--ac) / 0.15);
}

/* ---------- Portal oyun kartları ---------- */
.game-card {
  position: relative;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .25s ease;
  --c: var(--ac);
}
.game-card:hover {
  transform: translateY(-5px);
  border-color: rgb(var(--c) / .7);
  box-shadow: 0 18px 40px -14px rgb(var(--c) / .45), 0 0 0 1px rgb(var(--c) / .25) inset;
}
.game-card .gc-glow {
  position: absolute; inset: -1px; border-radius: inherit; opacity: 0; transition: opacity .3s ease; pointer-events: none;
  background: radial-gradient(420px 160px at 50% 0%, rgb(var(--c) / .22), transparent 70%);
}
.game-card:hover .gc-glow { opacity: 1; }
.game-card.is-hidden { display: none; }
.game-card img.gc-img { transition: transform .35s ease; }
.game-card:hover img.gc-img { transform: scale(1.06) rotate(-1.5deg); }

.chip-btn { transition: all .18s ease; }
.chip-btn.active {
  background: rgb(var(--ac) / .15); border-color: rgb(var(--ac) / .65); color: #fff;
  box-shadow: 0 0 14px rgb(var(--ac) / .25);
}

.fade-in-up { animation: fadeUp .45s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #080C11; }
::-webkit-scrollbar-thumb { background: #1E2A38; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--ac)); }

/* Oyun değiştirici açılır menü */
#gameSwitchPanel { max-height: 70vh; }

/* ---------- Portal hero (OYUN LOBİSİ girişi) ---------- */
.portal-hero {
  background:
    radial-gradient(900px 380px at 50% -12%, rgb(var(--ac) / .30), transparent 70%),
    radial-gradient(620px 320px at 92% 112%, rgb(var(--ac2) / .18), transparent 70%),
    radial-gradient(520px 260px at 4% 108%, rgb(var(--ac) / .14), transparent 70%),
    linear-gradient(180deg, #0e1322, #090d16);
}
.portal-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
@keyframes floatA { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes floatB { 0%,100% { translate: 0 0; } 50% { translate: 0 10px; } }
@keyframes floatC { 0%,100% { translate: 0 0; scale: 1; } 50% { translate: 0 -7px; scale: 1.04; } }
.float-a { animation: floatA 6.5s ease-in-out infinite; }
.float-b { animation: floatB 7.5s ease-in-out infinite; }
.float-c { animation: floatC 8.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .float-a, .float-b, .float-c { animation: none; } }

/* Kule reklamlar (absolute) space-y boşluğunu sonraki gerçek bölüme taşımasın */
main > .side-tower-banner + .side-tower-banner + * { margin-top: 0 !important; }

/* ---------- Oyun SEO kartı (açıklama + anahtar kelimeler) ---------- */
.seo-card { --c: var(--ac); transition: border-color .25s ease, box-shadow .25s ease; }
.seo-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, rgb(var(--c)), rgb(var(--c) / .1));
}
.seo-card:hover { border-color: rgb(var(--c) / .45); box-shadow: 0 10px 34px -14px rgb(var(--c) / .35); }
.seo-card-glow {
  position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background: radial-gradient(520px 140px at 0% 0%, rgb(var(--c) / .12), transparent 70%);
}
.seo-card ul li { transition: color .15s ease, border-color .15s ease; }
.seo-card ul li:hover { color: #fff; border-color: rgb(var(--c) / .6); }