/* ============================================================
   PİXEL MİNECRAFT KOLEKSİYON — STYLE v2
   ============================================================ */

*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
  image-rendering: pixelated;
}

:root {
  --bg:          #07070f;
  --panel:       #0f0f1c;
  --panel2:      #141428;
  --card:        #1a1a30;
  --border:      #252540;
  --border2:     #303060;
  --gold:        #f5c518;
  --gold2:       #ffde60;
  --gold-dark:   #9a7a00;
  --green:       #4ec94e;
  --green-dark:  #2a7a2a;
  --blue:        #4a90e2;
  --purple:      #a855f7;
  --red:         #ef4444;
  --rare:        #4a90e2;
  --text:        #e2e2ff;
  --text-dim:    #7070a0;
  --text-gold:   #f5c518;
  --font:        'Press Start 2P', monospace;
  --radius:      0px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
  overflow-x: hidden;
  /* Ekrana otomatik sığdır */
  zoom: 1;
}

/* Dar ekranlarda layout küçült */
@media (max-width: 1300px) {
  body { font-size: 90%; }
}
@media (max-width: 1100px) {
  body { font-size: 80%; }
}

/* ====== YILDIZ CANVAS ====== */
#starCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ====== NAVBAR ====== */
.navbar {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  background: rgba(7,7,15,0.95);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 2px 30px rgba(245,197,24,0.25);
  backdrop-filter: blur(6px);
}
.logo { display: flex; align-items: center; gap: 8px; }
.logo-icon {
  font-size: 18px;
  display: inline-block;
  animation: logoSpin 3s ease-in-out infinite;
}
@keyframes logoSpin {
  0%,100%{transform:rotate(0deg) scale(1)}
  25%{transform:rotate(-10deg) scale(1.1)}
  75%{transform:rotate(10deg) scale(1.1)}
}
.logo-text {
  font-size: 13px; color: var(--gold);
  text-shadow: 0 0 12px var(--gold), 0 0 30px rgba(245,197,24,0.4);
  letter-spacing: 3px;
}
.nav-title {
  font-size: 9px; letter-spacing: 2px;
  color: var(--text);
  text-shadow: 0 0 10px rgba(255,255,255,0.3);
}
.nav-right { display: flex; align-items: center; gap: 10px; }
.stat-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--card);
  border: 2px solid var(--border2);
  padding: 5px 10px;
  font-size: 10px; color: var(--gold);
}
.btn-reset {
  background: var(--card); border: 2px solid var(--border2);
  color: var(--text-dim); font-size: 12px; padding: 5px 9px;
  cursor: pointer; font-family: var(--font);
  transition: all .15s;
}
.btn-reset:hover { border-color: var(--red); color: var(--red); }

/* ====== LAYOUT ====== */
.layout {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 260px 1fr 280px;
  gap: 14px;
  padding: 14px;
  max-width: 1280px;
  margin: 0 auto;
  min-height: calc(100vh - 56px);
}

/* ====== PANEL ====== */
.panel {
  background: var(--panel);
  border: 3px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.panel::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 23px, rgba(255,255,255,0.012) 24px
  );
  pointer-events: none;
}
.panel-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 8px; color: var(--gold);
  padding: 8px 10px;
  background: rgba(245,197,24,0.07);
  border: 2px solid var(--gold-dark);
  letter-spacing: 2px;
  text-shadow: 0 0 8px var(--gold);
}
.ph-icon { font-size: 12px; }

/* ====== SOL PANEL ====== */
.filter-row { display: flex; gap: 6px; }
.filter-btn {
  flex: 1; font-family: var(--font); font-size: 6px;
  padding: 6px 4px; background: var(--card);
  border: 2px solid var(--border2); color: var(--text-dim);
  cursor: pointer; letter-spacing: 1px;
  transition: all .15s;
}
.filter-btn.active, .filter-btn:hover {
  border-color: var(--gold); color: var(--gold);
  background: rgba(245,197,24,0.08);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  flex: 1;
}
.c-slot {
  aspect-ratio: 1;
  background: var(--card);
  border: 3px solid var(--border);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .12s, transform .12s, box-shadow .12s;
  overflow: hidden;
}
.c-slot:hover { transform: scale(1.06); }
.c-slot.owned  { border-color: var(--green); box-shadow: 0 0 10px rgba(78,201,78,0.35); }
.c-slot.owned:hover { border-color: var(--gold); box-shadow: 0 0 18px rgba(245,197,24,0.5); }
.c-slot.missing .q-mark { font-size: 22px; color: var(--border2); }

.c-slot img {
  width: 88%; height: 88%;
  object-fit: contain;
  image-rendering: pixelated;
  transition: filter .2s;
}
.c-slot.owned img { filter: none; }

.slot-badge {
  position: absolute; top: 2px; left: 2px;
  font-size: 6px; padding: 2px 4px;
  font-family: var(--font);
}
.slot-badge.new-b  { background: var(--red);   color: #fff; animation: blinkBadge .7s infinite; }
.slot-badge.dupe-b { background: var(--blue);  color: #fff; }
@keyframes blinkBadge { 0%,100%{opacity:1} 50%{opacity:.3} }

.slot-count {
  position: absolute; bottom: 2px; right: 3px;
  font-size: 6px; color: var(--gold);
  background: rgba(0,0,0,.75); padding: 1px 3px;
}
.slot-rarity-dot {
  position: absolute; top: 2px; right: 2px;
  width: 6px; height: 6px;
}

/* Progress */
.progress-section { display: flex; flex-direction: column; gap: 5px; }
.progress-label {
  display: flex; justify-content: space-between;
  font-size: 7px; color: var(--text-dim);
}
.progress-track {
  height: 10px; background: #0a0a18;
  border: 2px solid var(--border2); overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-dark), var(--green));
  transition: width .6s ease;
}
.progress-pct { font-size: 7px; color: var(--green); text-align: right; }

/* ====== ORTA PANEL ====== */
.panel-center { align-items: center; }

/* Paket alanı */
.pack-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }

.pack-frame {
  position: relative;
  width: 200px; height: 200px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pack-frame:hover .pack-glow-ring { opacity: 1; transform: scale(1.15); }
.pack-frame:hover .pack-img { transform: scale(1.05) rotate(-2deg); }
.pack-frame:hover .pack-click-hint { opacity: 1; }
.pack-frame:active .pack-img { transform: scale(0.97); }

.pack-glow-ring {
  position: absolute; inset: -15px;
  border: 3px solid var(--gold);
  border-radius: 0;
  opacity: .3;
  transition: opacity .25s, transform .25s;
  animation: ringPulse 2s ease-in-out infinite;
}
@keyframes ringPulse {
  0%,100%{box-shadow:0 0 15px rgba(245,197,24,0.3)}
  50%{box-shadow:0 0 40px rgba(245,197,24,0.7)}
}

.pack-img {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  transition: transform .2s;
  /* Büyük görsel (2000x4000) için: üstten doğru kırp veya cover */
  object-position: center top;
  filter: drop-shadow(0 0 20px rgba(245,197,24,0.5));
  animation: packFloat 3s ease-in-out infinite;
}
@keyframes packFloat {
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

.pack-fallback {
  display: none;
  flex-direction: column; align-items: center;
  gap: 10px; width: 100%; height: 100%;
  justify-content: center;
}
.pf-box {
  width: 120px; height: 120px;
  background: #4a2800;
  border: 6px solid #8B4513;
  box-shadow: inset 4px 4px 0 #8B6040, inset -4px -4px 0 #2a1000;
  display: flex; flex-direction: column;
  overflow: hidden; position: relative;
}
.pf-stripe { height: 28px; background: repeating-linear-gradient(90deg,#c09000 0,#c09000 12px,#f5c518 12px,#f5c518 24px); }
.pf-center { flex:1; display:flex; align-items:center; justify-content:center; font-size:32px; }
.pf-label { font-size: 7px; color: var(--gold); letter-spacing: 2px; }

.pack-click-hint {
  position: absolute; bottom: -24px;
  font-size: 7px; color: var(--gold);
  opacity: 0; transition: opacity .2s;
  animation: hintBlink 1s ease-in-out infinite;
}
@keyframes hintBlink { 0%,100%{opacity:1} 50%{opacity:.4} }

.pack-particles { position: absolute; inset: 0; pointer-events: none; }

/* Paket info card */
.pack-info-card {
  background: var(--card);
  border: 2px solid var(--border2);
  padding: 12px; width: 100%;
  display: flex; flex-direction: column; gap: 8px;
}
.pic-name { font-size: 10px; color: var(--gold); }
.pic-meta { display: flex; align-items: center; gap: 10px; }
.rarity-tag {
  font-size: 6px; padding: 3px 7px; border: 2px solid;
  font-family: var(--font);
}
.rarity-tag.common  { color: #aaa;          border-color: #aaa; }
.rarity-tag.rare    { color: var(--rare);   border-color: var(--rare); }
.rarity-tag.epic    { color: var(--purple); border-color: var(--purple); }
.rarity-tag.legend  { color: var(--gold);   border-color: var(--gold); }
.pic-cards { font-size: 7px; color: var(--text-dim); }
.pic-desc { font-size: 7px; color: var(--text-dim); line-height: 1.8; }

.drop-table { border-top: 2px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.dt-title { font-size: 6px; color: var(--text-dim); letter-spacing: 2px; margin-bottom: 2px; }
.dt-row { display: flex; align-items: center; gap: 7px; font-size: 7px; color: var(--text-dim); }
.dt-dot { width: 8px; height: 8px; flex-shrink: 0; }
.dt-pct { margin-left: auto; color: var(--text); }

/* Cooldown */
.cd-section { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.cd-top { display: flex; justify-content: space-between; align-items: center; }
.cd-label { font-size: 7px; color: var(--text-dim); }
.cd-time  { font-size: 8px; color: var(--green); text-shadow: 0 0 8px var(--green); }
.cd-track {
  height: 14px; background: #050510;
  border: 2px solid var(--border2); position: relative; overflow: hidden;
}
.cd-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-dark), var(--green));
  transition: width 1s linear;
}
.cd-scanline {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg, transparent 0, transparent 8px, rgba(255,255,255,0.04) 9px
  );
  pointer-events: none;
}

/* Aç butonu */
.btn-open {
  position: relative; width: 100%;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
  border: none; border-top: 4px solid #88ee88; border-left: 4px solid #88ee88;
  border-right: 4px solid #1a4a1a; border-bottom: 4px solid #1a4a1a;
  cursor: pointer; overflow: hidden;
  transition: all .1s;
}
.btn-open:hover:not(:disabled) { background: linear-gradient(180deg,#7de07d,var(--green)); }
.btn-open:active:not(:disabled) {
  transform: translateY(2px);
  border-top-color: #1a4a1a; border-left-color: #1a4a1a;
  border-right-color: #88ee88; border-bottom-color: #88ee88;
}
.btn-open:disabled {
  background: linear-gradient(180deg,#333,#222);
  border-color: #444; cursor: not-allowed;
}
.btn-label {
  display: block; padding: 14px 0;
  font-family: var(--font); font-size: 11px; color: #fff;
  letter-spacing: 2px; text-shadow: 2px 2px 0 rgba(0,0,0,.6);
  position: relative; z-index: 1;
}
.btn-glow {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 60%);
  pointer-events: none;
}

/* Son açılan */
.recent-section { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.rs-title { font-size: 7px; color: var(--text-dim); letter-spacing: 2px; }
.rs-cards { display: flex; gap: 6px; flex-wrap: wrap; }
.rs-card {
  width: 44px; height: 44px;
  border: 2px solid var(--border2);
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
  cursor: pointer; transition: border-color .12s;
}
.rs-card:hover { border-color: var(--gold); }
.rs-card img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.rs-dot { position: absolute; bottom: 1px; right: 1px; width: 6px; height: 6px; }

/* ====== SAĞ PANEL ====== */
.showcase-box {
  background: var(--card);
  border: 3px solid var(--border2);
  min-height: 190px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.showcase-box::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(74,144,226,.1) 0%, transparent 70%);
  pointer-events: none;
}
.showcase-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.se-icon { font-size: 32px; opacity: .4; }
.se-text { font-size: 7px; color: var(--text-dim); }
.showcase-img {
  width: 100%; height: 190px;
  object-fit: contain; object-position: center top;
  image-rendering: pixelated;
  animation: charFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 0 16px rgba(74,144,226,.6));
}
@keyframes charFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.showcase-bg-text {
  position: absolute; font-size: 48px; opacity: .04;
  font-family: var(--font); pointer-events: none;
  letter-spacing: -5px; white-space: nowrap;
}

/* Karakter kart bilgisi */
.char-card {
  background: var(--card);
  border: 2px solid var(--border2);
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.cc-name { font-size: 10px; color: var(--gold); text-shadow: 0 0 8px var(--gold); }
.cc-rarity { font-size: 7px; padding: 3px 0; }
.cc-desc { font-size: 7px; color: var(--text-dim); line-height: 1.8; }
.cc-stats { display: flex; gap: 10px; border-top: 2px solid var(--border); padding-top: 8px; }
.cc-stat { flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.cs-label { font-size: 6px; color: var(--text-dim); }
.cs-val   { font-size: 9px; color: var(--gold); }

/* İstatistik paneli */
.stats-panel { display: flex; flex-direction: column; gap: 10px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-box {
  background: var(--card);
  border: 2px solid var(--border2);
  padding: 10px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.sb-num { 
  font-size: 14px; color: var(--gold); 
  min-height: 20px;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
.sb-lbl { font-size: 6px; color: var(--text-dim); letter-spacing: 1px; }


/* ====== PİXEL ART SEMBOLLER ====== */
/* box-shadow grid: her piksel 3px, sol-üst köşe ::before */

.px-symbol {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.px-symbol::before {
  content: "";
  display: block;
  position: absolute;
  width: 3px; height: 3px;
  top: 0; left: 0;
}
/* Büyük versiyon (modal fallback) */
.px-symbol-lg { transform: scale(2); transform-origin: top left; }

/* ── Kafatası — Necronvo ─────────────────── */
.px-skull::before {
  background: #ccc;
  box-shadow:
    3px 0 #ccc,6px 0 #ccc,9px 0 #ccc,12px 0 #ccc,
    0 3px #ccc,3px 3px #fff,6px 3px #fff,9px 3px #fff,12px 3px #fff,15px 3px #ccc,
    0 6px #ccc,3px 6px #fff,6px 6px #111,9px 6px #fff,12px 6px #111,15px 6px #ccc,
    0 9px #ccc,3px 9px #fff,6px 9px #fff,9px 9px #fff,12px 9px #fff,15px 9px #ccc,
    3px 12px #ccc,6px 12px #fff,9px 12px #ccc,12px 12px #fff,
    3px 15px #ccc,6px 15px #ccc,9px 15px #ccc,12px 15px #ccc;
}

/* ── Ay — Erdemoon ───────────────────────── */
.px-moon::before {
  background: #f5c518;
  box-shadow:
    6px 0 #f5c518,9px 0 #f5c518,
    3px 3px #f5c518,12px 3px #f5c518,
    0 6px #f5c518,
    0 9px #f5c518,
    3px 12px #f5c518,12px 12px #f5c518,
    6px 15px #f5c518,9px 15px #f5c518;
}

/* ── Taç — TheMurat ──────────────────────── */
.px-crown::before {
  background: #f5c518;
  box-shadow:
    0 0 #f5c518,9px 0 #f5c518,18px 0 #f5c518,
    0 3px #f5c518,3px 3px #f5c518,6px 3px #ffde60,9px 3px #f5c518,12px 3px #ffde60,15px 3px #f5c518,18px 3px #f5c518,
    0 6px #f5c518,3px 6px #f5c518,6px 6px #f5c518,9px 6px #f5c518,12px 6px #f5c518,15px 6px #f5c518,18px 6px #f5c518,
    0 9px #f5c518,3px 9px #f5c518,6px 9px #f5c518,9px 9px #f5c518,12px 9px #f5c518,15px 9px #f5c518,18px 9px #f5c518,
    0 12px #9a7a00,3px 12px #9a7a00,6px 12px #9a7a00,9px 12px #9a7a00,12px 12px #9a7a00,15px 12px #9a7a00,18px 12px #9a7a00;
}

/* ── Şimşek — Berkay İnan ────────────────── */
.px-bolt::before {
  background: #4a90e2;
  box-shadow:
    9px 0 #4a90e2,12px 0 #4a90e2,
    6px 3px #4a90e2,9px 3px #4a90e2,
    3px 6px #4a90e2,6px 6px #4a90e2,9px 6px #4a90e2,12px 6px #4a90e2,
    3px 9px #4a90e2,6px 9px #4a90e2,9px 9px #4a90e2,
    6px 12px #4a90e2,
    3px 15px #4a90e2,6px 15px #4a90e2,
    0 18px #4a90e2,3px 18px #4a90e2;
}

/* ── Slime Küpü — MaviSlime ──────────────── */
.px-slime::before {
  background: #4a90e2;
  box-shadow:
    3px 0 #4a90e2,6px 0 #4a90e2,9px 0 #4a90e2,12px 0 #4a90e2,
    0 3px #4a90e2,3px 3px #7ab8f5,6px 3px #7ab8f5,9px 3px #4a90e2,12px 3px #4a90e2,15px 3px #4a90e2,
    0 6px #4a90e2,3px 6px #fff,6px 6px #4a90e2,9px 6px #fff,12px 6px #4a90e2,15px 6px #4a90e2,
    0 9px #4a90e2,3px 9px #4a90e2,6px 9px #4a90e2,9px 9px #4a90e2,12px 9px #4a90e2,15px 9px #4a90e2,
    0 12px #4a90e2,3px 12px #4a90e2,6px 12px #4a90e2,9px 12px #4a90e2,12px 12px #4a90e2,15px 12px #4a90e2,
    3px 15px #2a60b2,6px 15px #2a60b2,9px 15px #2a60b2,12px 15px #2a60b2;
}

/* ── Göz — Herobrine ─────────────────────── */
.px-eye::before {
  background: #fff;
  box-shadow:
    3px 0 #fff,6px 0 #fff,9px 0 #fff,12px 0 #fff,
    0 3px #fff,3px 3px #fff,6px 3px #a855f7,9px 3px #a855f7,12px 3px #fff,15px 3px #fff,
    0 6px #fff,3px 6px #a855f7,6px 6px #111,9px 6px #a855f7,12px 6px #a855f7,15px 6px #fff,
    0 9px #fff,3px 9px #fff,6px 9px #a855f7,9px 9px #a855f7,12px 9px #fff,15px 9px #fff,
    3px 12px #fff,6px 12px #fff,9px 12px #fff,12px 12px #fff;
}

/* ── Kazma — Yusufte ─────────────────────── */
.px-pickaxe::before {
  background: #a855f7;
  box-shadow:
    12px 0 #a855f7,15px 0 #a855f7,18px 0 #a855f7,
    9px 3px #a855f7,12px 3px #d4aaff,15px 3px #a855f7,
    6px 6px #a855f7,9px 6px #d4aaff,12px 6px #a855f7,
    3px 9px #a855f7,6px 9px #d4aaff,
    0 12px #a855f7,3px 12px #d4aaff,
    0 15px #a855f7;
}

/* ── Maske — Dream ───────────────────────── */
.px-mask::before {
  background: #a855f7;
  box-shadow:
    3px 0 #a855f7,6px 0 #a855f7,9px 0 #a855f7,12px 0 #a855f7,
    0 3px #a855f7,3px 3px #fff,6px 3px #111,9px 3px #fff,12px 3px #111,15px 3px #a855f7,
    0 6px #a855f7,3px 6px #fff,6px 6px #fff,9px 6px #fff,12px 6px #fff,15px 6px #a855f7,
    0 9px #a855f7,3px 9px #fff,6px 9px #a855f7,9px 9px #a855f7,12px 9px #fff,15px 9px #a855f7,
    3px 12px #a855f7,6px 12px #fff,9px 12px #fff,12px 12px #a855f7,
    3px 15px #a855f7,6px 15px #a855f7,9px 15px #a855f7,12px 15px #a855f7;
}

/* ── İnşaat — Ersin Çakı ─────────────────── */
.px-wrench::before {
  background: #a855f7;
  box-shadow:
    0 0 #a855f7,3px 0 #a855f7,6px 0 #d4aaff,
    0 3px #d4aaff,3px 3px #a855f7,
    3px 6px #a855f7,6px 6px #a855f7,9px 6px #d4aaff,
    6px 9px #d4aaff,9px 9px #a855f7,
    9px 12px #a855f7,12px 12px #d4aaff,
    12px 15px #d4aaff,15px 15px #a855f7,
    15px 18px #a855f7,18px 18px #a855f7;
}

/* ── Kılıç — Technoblade ─────────────────── */
.px-sword::before {
  background: #eee;
  box-shadow:
    15px 0 #eee,
    12px 3px #eee,15px 3px #aaa,
    9px 6px #eee,12px 6px #aaa,
    6px 9px #eee,9px 9px #aaa,
    3px 12px #f5c518,6px 12px #eee,
    0 15px #f5c518,3px 15px #9a7a00,6px 15px #f5c518,
    0 18px #9a7a00,3px 18px #f5c518;
}

/* ── Başarı özel sembolleri ──────────────── */
.px-pack::before { /* Paket kutusu */
  background: #4ec94e;
  box-shadow:
    3px 0 #4ec94e,6px 0 #4ec94e,9px 0 #4ec94e,12px 0 #4ec94e,
    0 3px #4ec94e,3px 3px #7ae87a,6px 3px #fff,9px 3px #7ae87a,12px 3px #4ec94e,15px 3px #4ec94e,
    0 6px #4ec94e,3px 6px #4ec94e,6px 6px #fff,9px 6px #4ec94e,12px 6px #4ec94e,15px 6px #4ec94e,
    0 9px #4ec94e,3px 9px #4ec94e,6px 9px #4ec94e,9px 9px #4ec94e,12px 9px #4ec94e,15px 9px #4ec94e,
    0 12px #4ec94e,3px 12px #4ec94e,6px 12px #4ec94e,9px 12px #4ec94e,12px 12px #4ec94e,15px 12px #4ec94e,
    3px 15px #2a7a2a,6px 15px #2a7a2a,9px 15px #2a7a2a,12px 15px #2a7a2a;
}
.px-box::before { /* Sandık */
  background: #4a90e2;
  box-shadow:
    0 0 #4a90e2,3px 0 #4a90e2,6px 0 #4a90e2,9px 0 #4a90e2,12px 0 #4a90e2,15px 0 #4a90e2,
    0 3px #4a90e2,15px 3px #4a90e2,
    0 6px #4a90e2,3px 6px #7ab8f5,6px 6px #7ab8f5,9px 6px #7ab8f5,12px 6px #7ab8f5,15px 6px #4a90e2,
    0 9px #4a90e2,15px 9px #4a90e2,
    0 12px #4a90e2,3px 12px #4a90e2,6px 12px #4a90e2,9px 12px #4a90e2,12px 12px #4a90e2,15px 12px #4a90e2;
}
.px-chest::before { /* Büyük sandık */
  background: #9a7a00;
  box-shadow:
    0 0 #9a7a00,3px 0 #9a7a00,6px 0 #9a7a00,9px 0 #9a7a00,12px 0 #9a7a00,15px 0 #9a7a00,18px 0 #9a7a00,
    0 3px #9a7a00,3px 3px #f5c518,6px 3px #f5c518,9px 3px #f5c518,12px 3px #f5c518,15px 3px #f5c518,18px 3px #9a7a00,
    0 6px #9a7a00,6px 6px #9a7a00,9px 6px #ffde60,12px 6px #9a7a00,18px 6px #9a7a00,
    0 9px #9a7a00,3px 9px #f5c518,6px 9px #f5c518,9px 9px #f5c518,12px 9px #f5c518,15px 9px #f5c518,18px 9px #9a7a00,
    0 12px #9a7a00,3px 12px #9a7a00,6px 12px #9a7a00,9px 12px #9a7a00,12px 12px #9a7a00,15px 12px #9a7a00,18px 12px #9a7a00;
}
.px-card::before { /* Kart */
  background: #e2e2ff;
  box-shadow:
    3px 0 #e2e2ff,6px 0 #e2e2ff,9px 0 #e2e2ff,
    0 3px #e2e2ff,3px 3px #a855f7,6px 3px #a855f7,9px 3px #e2e2ff,12px 3px #e2e2ff,
    0 6px #e2e2ff,3px 6px #e2e2ff,6px 6px #e2e2ff,9px 6px #e2e2ff,12px 6px #e2e2ff,
    0 9px #e2e2ff,3px 9px #e2e2ff,6px 9px #e2e2ff,9px 9px #e2e2ff,12px 9px #e2e2ff,
    0 12px #e2e2ff,3px 12px #7070a0,6px 12px #7070a0,9px 12px #7070a0,12px 12px #e2e2ff,
    3px 15px #e2e2ff,6px 15px #e2e2ff,9px 15px #e2e2ff;
}
.px-gem::before { /* Elmas */
  background: #4a90e2;
  box-shadow:
    3px 0 #4a90e2,6px 0 #4a90e2,9px 0 #4a90e2,
    0 3px #4a90e2,3px 3px #7ab8f5,6px 3px #fff,9px 3px #7ab8f5,12px 3px #4a90e2,
    0 6px #4a90e2,3px 6px #4a90e2,6px 6px #7ab8f5,9px 6px #4a90e2,12px 6px #4a90e2,
    3px 9px #4a90e2,6px 9px #4a90e2,9px 9px #4a90e2,
    6px 12px #4a90e2;
}
.px-orb::before { /* Büyü küresi */
  background: #a855f7;
  box-shadow:
    3px 0 #a855f7,6px 0 #a855f7,9px 0 #a855f7,
    0 3px #a855f7,3px 3px #d4aaff,6px 3px #fff,9px 3px #d4aaff,12px 3px #a855f7,
    0 6px #a855f7,3px 6px #d4aaff,6px 6px #a855f7,9px 6px #a855f7,12px 6px #a855f7,
    0 9px #a855f7,3px 9px #a855f7,6px 9px #a855f7,9px 9px #a855f7,12px 9px #a855f7,
    3px 12px #a855f7,6px 12px #a855f7,9px 12px #a855f7,
    6px 15px #a855f7;
}
.px-trophy::before { /* Kupa */
  background: #f5c518;
  box-shadow:
    3px 0 #f5c518,6px 0 #f5c518,9px 0 #f5c518,12px 0 #f5c518,
    0 3px #f5c518,3px 3px #ffde60,6px 3px #ffde60,9px 3px #ffde60,12px 3px #ffde60,15px 3px #f5c518,
    0 6px #f5c518,3px 6px #f5c518,6px 6px #f5c518,9px 6px #f5c518,12px 6px #f5c518,15px 6px #f5c518,
    3px 9px #f5c518,6px 9px #f5c518,9px 9px #f5c518,12px 9px #f5c518,
    6px 12px #f5c518,9px 12px #f5c518,
    3px 15px #9a7a00,6px 15px #9a7a00,9px 15px #9a7a00,12px 15px #9a7a00,
    0 18px #f5c518,3px 18px #f5c518,6px 18px #f5c518,9px 18px #f5c518,12px 18px #f5c518,15px 18px #f5c518;
}
.px-star::before { /* Yıldız */
  background: #f5c518;
  box-shadow:
    6px 0 #f5c518,
    3px 3px #f5c518,6px 3px #ffde60,9px 3px #f5c518,
    0 6px #f5c518,3px 6px #ffde60,6px 6px #fff,9px 6px #ffde60,12px 6px #f5c518,
    3px 9px #f5c518,6px 9px #ffde60,9px 9px #f5c518,
    0 12px #f5c518,12px 12px #f5c518,
    3px 15px #f5c518,9px 15px #f5c518;
}
.px-lock::before { /* Kilit */
  background: #555;
  box-shadow:
    3px 0 #555,6px 0 #555,9px 0 #555,
    0 3px #555,12px 3px #555,
    0 6px #555,12px 6px #555,
    0 9px #555,3px 9px #555,6px 9px #555,9px 9px #555,12px 9px #555,
    0 12px #555,3px 12px #888,6px 12px #fff,9px 12px #888,12px 12px #555,
    0 15px #555,3px 15px #555,6px 15px #555,9px 15px #555,12px 15px #555;
}

/* ====== BAŞARILAR ====== */
.achievement-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px 0;
  max-height: 260px;
  overflow-y: auto;
}
.ach-box {
  padding: 8px 6px;
  border: 2px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; cursor: default; transition: border-color .2s;
  text-align: center;
}
.ach-earned { border-color: var(--gold); background: rgba(245,197,24,.07); }
.ach-locked { opacity: .5; }
.ach-icon { font-size: 18px; }
.ach-name { font-size: 5px; color: var(--text); line-height: 1.4; }
.ach-desc { font-size: 4px; color: var(--text-dim); line-height: 1.4; }

/* Başarı toast (ayrı stil, sağ alt köşe) */
.ach-toast {
  position: fixed; bottom: 80px; right: 20px; z-index: 999;
  background: var(--panel);
  border: 3px solid var(--gold);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 0 30px rgba(245,197,24,.4);
  transform: translateX(120%);
  transition: transform .4s cubic-bezier(.175,.885,.32,1.275);
  max-width: 280px;
}
.ach-toast.show { transform: translateX(0); }
.at-icon { width: 32px; height: 32px; display:flex; align-items:center; justify-content:center; }
.at-sym { transform: scale(1.3); transform-origin: center; }
.at-title { font-size: 6px; color: var(--gold); margin-bottom: 3px; }
.at-name  { font-size: 8px; color: var(--text); margin-bottom: 2px; }
.at-desc  { font-size: 6px; color: var(--text-dim); }
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(5px);
  padding: 12px;
  overflow-y: auto;
}
.modal-box {
  background: var(--panel);
  border: 4px solid var(--gold);
  padding: 24px 20px;
  width: 95%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  box-shadow: 0 0 80px rgba(245,197,24,.35);
  animation: modalPop .35s cubic-bezier(.175,.885,.32,1.275);
  position: relative;
}
@keyframes modalPop {
  from{transform:scale(.6) translateY(30px);opacity:0}
  to{transform:scale(1) translateY(0);opacity:1}
}

/* X kapat butonu */
.modal-close-btn {
  position: absolute; top: 10px; right: 10px;
  background: transparent;
  border: 2px solid var(--border2);
  color: var(--text-dim);
  font-size: 10px; width: 28px; height: 28px;
  cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.modal-close-btn:hover { border-color: var(--red); color: var(--red); }

.modal-header { display: flex; align-items: center; gap: 12px; }
.mh-stars { font-size: 12px; color: var(--gold); opacity: .6; }
.mh-title {
  font-size: 11px; color: var(--gold);
  text-shadow: 0 0 15px var(--gold);
  animation: titlePulse 1.5s ease-in-out infinite alternate;
  letter-spacing: 2px; text-align: center;
}
@keyframes titlePulse {
  from{text-shadow:0 0 15px var(--gold)}
  to{text-shadow:0 0 35px var(--gold),0 0 70px rgba(245,197,24,.4)}
}
.modal-cards { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; width: 100%; }

/* Reveal kart */
.rev-card {
  width: 180px;
  max-width: 90vw;
  background: var(--card);
  border: 4px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 12px; gap: 10px;
  opacity: 0; transform: scale(0) rotateY(90deg);
  transition: opacity .45s, transform .45s cubic-bezier(.175,.885,.32,1.275);
  position: relative; overflow: hidden;
}
.rev-card.rev-show { opacity: 1; transform: scale(1) rotateY(0deg); }
.rev-card.rev-new  { border-color: var(--gold); box-shadow: 0 0 25px rgba(245,197,24,.55); }
.rev-card.rev-dupe { border-color: var(--blue);  box-shadow: 0 0 12px rgba(74,144,226,.3); }
.rev-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 55%);
  pointer-events: none;
}
.rev-img {
  width: 110px; height: 110px;
  object-fit: contain;
  /* 2000x4000 görsel için üstten göster */
  object-position: center top;
  image-rendering: pixelated;
  animation: revFloat 2.5s ease-in-out infinite;
}
@keyframes revFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.rev-name { font-size: 7px; color: var(--text); text-align: center; line-height: 1.5; }
.rev-badge {
  font-size: 6px; padding: 3px 8px; border: 2px solid;
  font-family: var(--font);
}
.rev-badge.b-new  { color: var(--gold);   border-color: var(--gold);   background: rgba(245,197,24,.1); }
.rev-badge.b-dupe { color: var(--blue);   border-color: var(--blue);   background: rgba(74,144,226,.1); }
.rev-rarity { font-size: 6px; }

.modal-summary {
  font-size: 8px; color: var(--text-dim);
  background: var(--card); border: 2px solid var(--border2);
  padding: 8px 16px;
}
#summaryNew { color: var(--gold); }

.btn-collect {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: #000; border: none;
  border-top: 4px solid var(--gold2); border-left: 4px solid var(--gold2);
  border-right: 4px solid #4a3a00; border-bottom: 4px solid #4a3a00;
  padding: 12px 28px;
  font-family: var(--font); font-size: 9px; cursor: pointer;
  letter-spacing: 1px; text-shadow: none;
  transition: .1s;
  animation: collectPulse 1.5s ease-in-out infinite;
}
@keyframes collectPulse {
  0%,100%{box-shadow:0 0 12px rgba(245,197,24,.4)}
  50%{box-shadow:0 0 28px rgba(245,197,24,.9)}
}
.btn-collect:hover { background: linear-gradient(180deg,var(--gold2),var(--gold)); }
.btn-collect:active { transform: translateY(2px); }

/* ====== KONFETİ ====== */
#konfeti { position: fixed; inset: 0; pointer-events: none; z-index: 600; }
.kf-piece {
  position: absolute;
  width: 8px; height: 8px;
  animation: kfFall linear forwards;
}
@keyframes kfFall {
  0%  { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
  100%{ transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ====== TOAST ====== */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--panel2);
  border: 3px solid var(--gold);
  color: var(--text); font-family: var(--font); font-size: 8px;
  padding: 11px 18px; z-index: 1000;
  opacity: 0; transition: opacity .28s, transform .28s;
  pointer-events: none; letter-spacing: 1px;
  box-shadow: 0 0 24px rgba(245,197,24,.3);
  max-width: 380px; text-align: center; line-height: 1.8;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ====== SPARKLES ====== */
.sparkle {
  position: fixed; pointer-events: none; z-index: 700;
  animation: sparkleOut .9s ease-out forwards;
}
@keyframes sparkleOut {
  0%  { opacity: 1; transform: translate(0,0) scale(1.2); }
  100%{ opacity: 0; transform: translate(var(--sdx),var(--sdy)) scale(0); }
}

/* ====== RESPONSIVE ====== */
@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr; }
  .nav-title { display: none; }
  .pack-frame { width: 160px; height: 160px; }
}

/* ====== TURNSTILE GİRİŞ EKRANI ====== */
.ts-gate {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s;
}
.ts-box {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  background: var(--panel);
  border: 4px solid var(--gold);
  padding: 40px 32px;
  box-shadow: 0 0 60px rgba(245,197,24,.3);
  animation: modalPop .4s cubic-bezier(.175,.885,.32,1.275);
}
.ts-logo {
  font-size: 40px;
}
.ts-title {
  font-size: 11px; color: var(--gold);
  text-align: center; line-height: 2;
  text-shadow: 0 0 20px var(--gold);
}
.ts-sub {
  font-size: 7px; color: var(--text-dim);
  letter-spacing: 1px;
}
.ts-status {
  font-size: 7px; min-height: 16px;
  letter-spacing: 1px; text-align: center;
}