/* Bizim Mahalle: dikey (9:16) yayına göre; ölçüler ekran yüksekliğine (vh) bağlı. */
:root {
  --gold: #ffc94a;
  --panel: #0b0d14cc;
  --brand: linear-gradient(120deg, #a98bff 0%, #6c7dff 50%, #38d5f5 100%);
}
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; font-family: "Outfit", system-ui, sans-serif; color: #fff; background: #9fd3f2; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; filter: saturate(1.08) contrast(1.04); }
/* kenarlarda hafif karartma: göz ortadaki eve gitsin, görüntü daha sinematik dursun */
.vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 48%, transparent 55%, rgba(12, 16, 30, 0.38) 100%); }
.hud, .tags { position: fixed; inset: 0; pointer-events: none; }

/* profil fotoğrafı; yoksa adın baş harfi */
.av { position: relative; flex: none; display: inline-grid; place-items: center; width: 2.6vh; height: 2.6vh; border-radius: 50%; overflow: hidden; background: var(--brand); font-size: 1.3vh; font-weight: 900; color: #fff; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* evlerin üstündeki isim etiketleri */
.tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 0.5vh; padding: 0.3vh; border-radius: 1.5vh; background: #0b0d14d9; font-size: 1.35vh; font-weight: 800; white-space: nowrap; transform: translate(-50%, -100%); will-change: transform; }
.tag .info { display: flex; flex-direction: column; gap: 0.15vh; line-height: 1.15; }
.tag .row { display: flex; align-items: center; gap: 0.5vh; }
.tag .goal { font-size: 1.1vh; font-weight: 700; color: #ffffffcc; }
/* sağda büyük seviye rakamı (kullanıcı isteği: "1. seviye" yazısı yerine iri sayı) */
.tag .lv { display: grid; place-items: center; align-self: stretch; min-width: 3.4vh; margin-left: 0.3vh; padding: 0 0.5vh; border-radius: 1.1vh; background: linear-gradient(180deg, #4aa8ff, #1e6fe0); color: #fff; font-size: 2.4vh; font-weight: 900; line-height: 1; text-shadow: 0 0.15vh 0.3vh #0006; }
/* ilerleme çubuğu: adın altında kalın ve parlak (önce 0,3vh ince çizgiydi, görünmüyordu) */
.tag .bar { position: relative; display: block; min-width: 10vh; height: 0.75vh; margin-top: 0.25vh; border-radius: 0.4vh; background: #ffffff24; box-shadow: inset 0 0 0 0.1vh #ffffff1f; overflow: hidden; }
.tag .bar i { display: block; height: 100%; border-radius: 0.4vh; background: linear-gradient(90deg, #1e90ff, #38d5f5 70%, #8ff0ff); box-shadow: 0 0 0.8vh #38d5f5aa; transition: width 0.5s ease-out; }
.tag .bar.max i { background: linear-gradient(90deg, #f5b301, #ffd95e); box-shadow: 0 0 0.8vh #ffd95eaa; }
.tag.l5 .lv, .tag.l6 .lv, .tag.l7 .lv { background: linear-gradient(180deg, #8a97ff, #5a63e6); }
.tag.l8 .lv, .tag.l9 .lv { background: linear-gradient(180deg, #c3a6ff, #8a5cf0); }
.tag.l10 .lv, .tag.l11 .lv { background: linear-gradient(180deg, #ffe07a, #f5b301); color: #2a1600; text-shadow: none; }
/* saray (en üst seviye): altın rakamın çevresinde parıltı */
.tag.l11 .lv { box-shadow: 0 0 1.2vh #ffd95e, inset 0 0 0 0.15vh #fff8; }
/* yazlık (sahil) etiketi: turkuaz rakam, kum rengi çerçeve; şehir evinde yazlığa ilerleme çubuğu turkuaz */
.tag.yaz { box-shadow: 0 0 0 0.2vh #f3d9a4; }
.tag.yaz .lv { background: linear-gradient(180deg, #4fe3d2, #0fa3a3); }
.tag .bar.yaz i { background: linear-gradient(90deg, #0fa3a3, #4fe3d2 70%, #b9fff4); box-shadow: 0 0 0.8vh #4fe3d2aa; }
.ladder li.yaz { color: #bff7ef; }
/* ada evleri: altın kenar, mor-altın rakam */
.tag.ada { box-shadow: 0 0 0 0.25vh #ffd36b; }
.tag.ada .lv { background: linear-gradient(180deg, #ffe08a, #c8871a); }
.ladder li.ada { color: #ffe6a6; }
/* tekne etiketi: lacivert kenar, deniz mavisi rakam */
.tag.boat { box-shadow: 0 0 0 0.2vh #7cc4ff; }
.tag.boat .lv { background: linear-gradient(180deg, #7cc4ff, #1d6fd8); }
.ladder li.yaz .n { background: none; font-size: 1.3vh; }
.tag.muhtar { box-shadow: 0 0 0 0.25vh var(--gold); }
.tag.muhtar::before { content: "👑"; position: absolute; left: 50%; top: -1.9vh; transform: translateX(-50%); font-size: 1.7vh; }
.tag.pulse { animation: tagpulse 0.6s ease-out; }
@keyframes tagpulse { 40% { transform: translate(-50%, -100%) scale(1.25); } }

/* üst bilgi */
.top { position: absolute; left: 0; right: 0; top: 1.4vh; display: flex; flex-direction: column; align-items: center; gap: 0.7vh; }
.title { padding: 0.7vh 2vh; border-radius: 3vh; background: linear-gradient(120deg, #ff8a3d, #ff4f6d); font-size: 2.6vh; font-weight: 900; letter-spacing: 0.03em; box-shadow: 0 1vh 3vh #0005; }
.title span { margin-left: 0.6vh; padding: 0.1vh 1vh; border-radius: 2vh; background: #0004; font-size: 1.9vh; }
.title span::before { content: "🏠 "; }
.muhtar { display: flex; align-items: center; gap: 0.9vh; padding: 0.5vh 1.6vh 0.5vh 0.5vh; border-radius: 3vh; background: var(--panel); border: 0.25vh solid var(--gold); }
.muhtar .av { width: 3.6vh; height: 3.6vh; font-size: 1.8vh; }
.muhtar small { display: block; font-size: 1.1vh; font-weight: 900; letter-spacing: 0.08em; color: var(--gold); }
.muhtar b { font-size: 1.9vh; }
.muhtar.new { animation: newmuhtar 1.2s ease-out; }
@keyframes newmuhtar { 30% { transform: scale(1.25); box-shadow: 0 0 4vh var(--gold); } }
.join { padding: 0.4vh 1.4vh; border-radius: 2vh; background: #0b0d14aa; font-size: 1.5vh; font-weight: 700; }
.join b { color: var(--gold); }

/* sağ üst: en büyük evler */
.panel { position: absolute; padding: 0.9vh; border-radius: 1.8vh; background: var(--panel); border: 0.25vh solid #ffffff1f; }
.panel h4 { margin: 0 0 0.6vh; padding: 0 0.4vh; font-size: 1.35vh; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold); }
.panel ol { margin: 0; padding: 0; list-style: none; }
.panel li { display: flex; align-items: center; gap: 0.6vh; padding: 0.3vh 0.4vh; font-size: 1.5vh; font-weight: 800; }
.panel li .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel li .amt { color: var(--gold); font-size: 1.2vh; white-space: nowrap; }
.panel li.empty { color: #ffffffb3; font-weight: 600; font-size: 1.3vh; }
.board { right: 1.4vh; top: 17vh; width: 21vh; }
/* sağda tablonun altında seviye listesi: hangi ev kaç jetonda */
.ladder { right: 1.4vh; top: 42vh; width: 21vh; }
.ladder li { padding: 0.1vh 0.4vh; font-size: 1.3vh; }
.ladder li .amt { font-size: 1.15vh; }
.ladder li .n { display: grid; place-items: center; width: 1.75vh; height: 1.75vh; border-radius: 0.9vh; background: #ffffff26; font-size: 1.05vh; }

/* sol: son olaylar */
/* olay listesi sol altta, hediye rehberinin üstünde (sağ üstteki tabloyla çakışmasın) */
.feed { position: absolute; left: 1.4vh; bottom: 31vh; display: flex; flex-direction: column; gap: 0.5vh; max-width: 27vh; transition: opacity 0.3s; }
.board, .ladder { transition: opacity 0.3s; }
.hud.banner-on .feed, .hud.banner-on .board, .hud.banner-on .ladder { opacity: 0; }
.feed div { display: flex; align-items: center; gap: 0.7vh; padding: 0.4vh 1.2vh 0.4vh 0.4vh; border-radius: 2.4vh; background: var(--panel); font-size: 1.45vh; font-weight: 700; animation: feedin 0.3s ease-out; }
.feed div b { color: var(--gold); }
.feed div.old { opacity: 0.55; }
@keyframes feedin { from { opacity: 0; transform: translateX(-3vh); } }

/* alt: hangi hediye ne yapar (AI sunucunun altyazısının üstünde) */
.guide { position: absolute; left: 50%; bottom: 22vh; transform: translateX(-50%); display: flex; gap: 0.4vh; max-width: 97vw; }
.guide div { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; width: min(6.4vh, calc((97vw - (var(--n, 8) - 1) * 0.4vh) / var(--n, 8))); flex: none; padding: 0.5vh 0.3vh; border-radius: 1.4vh; background: var(--panel); border: 0.2vh solid #ffffff1f; text-align: center; }
.guide img { width: 3.6vh; height: 3.6vh; object-fit: contain; }
.guide i { font-style: normal; font-size: 2.8vh; line-height: 3.6vh; }
.guide span { font-size: min(1.15vh, 2.2vw); font-weight: 800; line-height: 1.15; }
/* 3D bağlam düşünce kısa uyarı (sayfa kendini yeniden açar) */
.recover { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 20; padding: 1.4vh 2.4vh; border-radius: 2vh; background: #1a1f2ecc; color: #fff; font: 800 2.2vh "Outfit", system-ui, sans-serif; }
.guide div.flash { animation: flash 0.6s ease-out; }
@keyframes flash { 40% { transform: scale(1.18); border-color: var(--gold); box-shadow: 0 0 3vh var(--gold); } }

/* seviye atlama ve muhtarlık duyurusu */
.banner { position: absolute; left: 50%; top: 29%; transform: translate(-50%, -50%); z-index: 5; display: flex; flex-direction: column; align-items: center; width: 92%; text-align: center; animation: banner 4s ease-out forwards; }
.bpic .av { width: 13vh; height: 13vh; font-size: 6vh; border: 0.6vh solid #fff; box-shadow: 0 0 5vh #ffc94a, 0 1.4vh 3vh #0008; }
.banner b { margin-top: 1.2vh; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 4.6vh; font-weight: 900; color: var(--gold); -webkit-text-stroke: 0.7vh #000; paint-order: stroke fill; }
.banner > span { margin-top: 0.6vh; padding: 0.6vh 2.6vh; border-radius: 3vh; background: linear-gradient(120deg, #ff8a3d, #ff4f6d); font-size: 3vh; font-weight: 900; box-shadow: 0 1vh 4vh #ff4f6d88; }
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  10% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  18% { transform: translate(-50%, -50%) scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(0.95); }
}

/* bekçinin konuşma balonu */
.bubble { position: absolute; left: 0; top: 0; max-width: 26vh; padding: 0.8vh 1.3vh; border-radius: 1.6vh; background: #fff; color: #1a1f2e; font-size: 1.6vh; font-weight: 800; transform: translate(-50%, -100%); box-shadow: 0 0.6vh 2vh #0004; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -1vh; transform: translateX(-50%); border: 1vh solid transparent; border-bottom: 0; border-top-color: #fff; }

.credit { position: absolute; left: 1vh; right: 1vh; bottom: 0.5vh; font-size: 0.95vh; line-height: 1.25; font-weight: 600; text-align: right; color: #ffffffcc; text-shadow: 0 0.1vh 0.3vh #0009; }

.demo { position: fixed; left: 50%; bottom: 1.2vh; transform: translateX(-50%); z-index: 9; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: 96%; pointer-events: auto; }
.demo button { padding: 7px 10px; border: 0; border-radius: 10px; background: #fff; color: #111; font: 800 12px "Outfit", system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 8px #0004; }
.demo button.on { background: #6c7dff; color: #fff; }