/* =====================================================================
   Pofuduk Kutu — r6.css (R6) 14 mekân kartı, mekân merkezi, seçici, kilit, eşya gösterimi
   ===================================================================== */

/* ---------- Ana sayfa: 14 mekân kartı (kaydırılabilir ızgara; tek ekrana sıkıştırılmaz) ---------- */
.world-cards.r6-places {
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 44vw), 1fr));
  grid-auto-rows: auto;
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 6px 6px 18px;
  scrollbar-width: thin;
}
#home .r5-places { display: none !important; }          /* ana sayfa zaten Mekânlarım */
.place-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 0 0 8px; border: 5px solid var(--ink); border-radius: var(--rad-l); background: #fff;
  box-shadow: 0 6px 0 var(--ink); overflow: clip; cursor: pointer; text-align: center; font: inherit; color: var(--ink);
  transition: transform var(--dur-fast);
}
.place-card:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.place-card.is-sel { outline: 5px solid #FFD23F; outline-offset: 2px; }
.place-card .pc-art { position: relative; display: block; aspect-ratio: 4 / 3; border-bottom: 4px solid var(--ink); overflow: hidden; }
.place-card .pc-art svg { width: 100%; height: 100%; display: block; }
.place-card.is-locked .pc-art svg { filter: saturate(.55) brightness(1.04); }   /* kilitli ama görsel anlaşılır */
.place-card .pc-lock { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; background: #fff; border: 3px solid var(--ink); border-radius: 50%; padding: 3px; }
.place-card .pc-lock svg { width: 100%; height: 100%; filter: none; }
.place-card .pc-name { font-size: clamp(15px, 2.3vmin, 20px); font-weight: 900; line-height: 1.1; padding: 2px 6px 0; }
.place-card .pc-items, .place-card .pc-state { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 14px; font-weight: 900; }
.place-card .pc-items svg, .place-card .pc-state svg { width: 22px; height: 22px; flex: none; }
.place-card .pc-state.open b { color: #2F9E52; }
.place-card .pc-bar, .r6-lock .pc-bar { display: inline-block; width: 56px; height: 12px; border: 3px solid var(--ink); border-radius: 8px; background: #fff; overflow: hidden; }
.place-card .pc-bar > i, .r6-lock .pc-bar > i { display: block; height: 100%; background: #FFD23F; }
.place-card.is-ready { animation: aJelly 1.8s ease-in-out infinite; }
.place-card.is-ready .pc-state b { color: #E0457B; }

/* ---------- Mekân merkezi: açılma ilerlemesi ---------- */
.w-grid > .r6-prog { grid-column: 1 / -1; }
.r6-prog { display: flex; align-items: center; gap: 10px; background: #fff; border: 4px solid var(--ink); border-radius: 22px; padding: 6px 12px; box-shadow: 0 4px 0 var(--ink); margin-bottom: 8px; flex-wrap: wrap; }
.r6-prog > svg { width: 38px; height: 38px; flex: none; }
.r6-prog .r6p-txt { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.r6-prog .r6p-txt b { font-size: 17px; }
.r6-prog .r6p-txt small { font-size: 13px; font-weight: 800; opacity: .85; }
.r6-prog .r6p-bar { flex: 1; min-width: 90px; height: 16px; border: 3px solid var(--ink); border-radius: 10px; background: #F4F0FF; overflow: hidden; }
.r6-prog .r6p-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #FFD23F, #FF9A3C); }
.r6-prog.open .r6p-bar > i { background: linear-gradient(90deg, #8BE39A, #46C674); }
.r6-prog.ready { animation: aJelly 1.6s ease-in-out infinite; }
.r6-prog .r6-open { min-height: 48px; padding: 4px 18px; }
.world .w-btn.locked { opacity: .78; }

/* ---------- Mekân seçici (mekânsız ödül) ---------- */
.r6-pick .r6k-card { position: relative; background: #fff; border: 5px solid var(--ink); border-radius: 28px; padding: 18px; max-width: min(94vw, 900px); max-height: 88vh; overflow-y: auto; box-shadow: 0 8px 0 rgba(91, 58, 110, .25); }
.r6-pick h2 { margin: 0 0 12px; font-size: clamp(18px, 3vmin, 26px); }
.r6-pick .r6k-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.r6-pick .r6k-pl { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border: 4px solid var(--ink); border-radius: 18px; background: #FFF8E6; font: inherit; font-weight: 900; color: var(--ink); cursor: pointer; }
.r6-pick .r6k-pl.open { background: #E7FBEA; }
.r6-pick .r6k-pl span { width: 52px; height: 52px; }
.r6-pick .r6k-pl span .ic { width: 100%; height: 100%; }
.r6-pick .r6k-x { position: absolute; top: 8px; right: 8px; }

/* ---------- Kilitli mekân penceresi ---------- */
.r6-lock .r6l-art { position: relative; width: min(320px, 70vw); margin: 0 auto 8px; border: 4px solid var(--ink); border-radius: 18px; overflow: hidden; }
.r6-lock .r6l-art svg { width: 100%; height: auto; display: block; filter: saturate(.6); }
.r6-lock .r6l-art .pc-lock { position: absolute; right: 8px; top: 8px; width: 46px; height: 46px; background: #fff; border: 3px solid var(--ink); border-radius: 50%; padding: 4px; }
.r6-lock .r6l-art .pc-lock svg { filter: none; }
.r6-lock .r6l-prog { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 900; font-size: 20px; }
.r6-lock .r6l-prog svg { width: 34px; height: 34px; }
.r6-lock .r6l-prog .pc-bar { width: 140px; height: 18px; }
.r6-lock .r6l-how { font-weight: 800; opacity: .85; }

/* ---------- Kutu gösteriminde eşya ---------- */
.r6-item-art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.r6-item-art svg, .r6-item-art .item-svg { width: 78%; height: 78%; max-height: 100%; overflow: visible; filter: drop-shadow(0 6px 0 rgba(91, 58, 110, .18)); }
.card-art .r6-item-art svg { width: 70%; height: 70%; }
.pcol-parent { margin-left: auto; }
.pcol-parent svg { width: 26px; height: 26px; }
#oldFigBtn { margin-top: 8px; }

@media (max-width: 600px) {
  .world-cards.r6-places { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .place-card .pc-name { font-size: 15px; }
}
#worldScreen.r6-hub .w-prog svg { width: 22px; height: 22px; flex: none; }
#worldScreen.r6-hub .w-prog { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 600px) {
  #worldScreen.r6-hub .w-icon { display: none; }
  #worldScreen.r6-hub .w-title { min-width: 0; gap: 6px; }
  #worldScreen.r6-hub .w-title h2 { white-space: nowrap; font-size: 19px; }
  #worldScreen.r6-hub .w-prog { font-size: 12px; padding: 2px 6px; }
  #worldScreen.r6-hub .w-prog svg { width: 16px; height: 16px; }
  body[data-screen="world"] .pofi { display: none; }          /* telefonda maskot alt düğmeyi örtmesin */
}

/* ---------- Kazanılmamış raf eşyası: gri siluet + kilit (sürüklenmez) ---------- */
.src-locked { position: absolute; transform: translate(-50%, -100%); cursor: not-allowed; touch-action: none; }
.src-locked .item-svg { width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; filter: grayscale(1) brightness(1.35); opacity: .38; }
.src-locked .src-lk { position: absolute; right: -8%; top: -10%; width: min(46%, calc(var(--u) * 34)); aspect-ratio: 1; min-width: 18px; background: #fff; border: 2px solid var(--ink, #5B3A6E); border-radius: 50%; padding: 2px; box-shadow: 0 2px 0 rgba(91, 58, 110, .3); }
.src-locked .src-lk svg { width: 100%; height: 100%; display: block; }
.src-locked.nope { animation: r6nope .35s ease-in-out; }
@keyframes r6nope { 0%, 100% { margin-left: 0; } 25% { margin-left: -6px; } 75% { margin-left: 6px; } }
/* Ana sayfa: alttaki figürler kaydırılabilir mekân kartlarının üstüne binmesin */
#home .home-parade { margin-top: 6px; }
#home .world-cards.r6-places { padding-bottom: 8px; }
/* Kısa ekran (telefon yatay): kartlar tek seferde tam görünecek kadar alçak */
@media (max-height: 520px) {
  #home .home-parade { display: none; }
  .world-cards.r6-places { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .place-card { gap: 2px; padding-bottom: 5px; border-width: 4px; box-shadow: 0 4px 0 var(--ink); }
  .place-card .pc-art { aspect-ratio: 2 / 1; border-bottom-width: 3px; }
  .place-card .pc-name { font-size: 14px; }
  .place-card .pc-items, .place-card .pc-state { font-size: 12px; }
  .place-card .pc-items svg, .place-card .pc-state svg { width: 18px; height: 18px; }
  .place-card .pc-lock { width: 30px; height: 30px; }
}