@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap');

/* Köy ve Şehir Konteynırları */
.town-container, .city-container {
    position: absolute; inset: 0; margin: auto; aspect-ratio: 16/9; max-width: 100%; max-height: 100%;
}

/* Bina Etiketleri */
.town-label-text, .city-label-text {
    position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
    color: #e0d0b0; font-weight: 900; transition: 0.3s; cursor: pointer;
}

/* Perde Geçiş Butonu */
.next-act-btn { background: linear-gradient(to bottom, #ffd700, #b8860b) !important; color: #000 !important; }
/* Dark RPG Takvim Stili */
.town-calendar-text {
    position: absolute;
    top: 40px;
    right: 50px;
    color: #a89373; /* Eskitilmiş pirinç/altın rengi */
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0,0,0,0.8), 2px 2px 2px #000;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.7), transparent);
    padding: 10px 30px;
    letter-spacing: 3px;
    border-right: 3px solid #6b5c3b;
    transition: all 0.3s ease;
}

.town-master-banner {
    position: absolute;
    top: 7%; /* Takvimin biraz altında, meydanın ortasında */
    left: 20%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #a89373;
    padding: 8px 25px;
    border-radius: 4px;
    color: #a89373;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px #000;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    pointer-events: none; /* Tıklamayı engellemez */
    z-index: 100;
    animation: bannerFadeIn 0.8s ease-out;
}

@keyframes bannerFadeIn {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Başlangıç Şehri Özel Stilleri */
#building-barracks { top: 40%; left: 38.5%; transform: translate(-50%, -50%) rotate(353deg) }
#building-elder { top: 35%; left: 66%; }

/* Yazıların yeni görselde daha okunaklı olması için küçük bir gölge takviyesi */
#starter-city-screen .town-label-text {
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.5); /* Yazının arkasına hafif siyah bir şeffaflık */
    padding: 5px 15px;
    border-radius: 15px;
    border: 1px solid rgba(240, 230, 140, 0.3);
    transition: all 0.3s ease;
}

/* Fareyle üzerine gelince parlamasını artır */
#starter-city-screen .town-building:hover .town-label-text {
    background: rgba(0, 0, 0, 0.8);
    border-color: #f0e68c;
    color: #ffd700;
    transform: translate(-50%, -50%) scale(1.1);
}

.starter-city-info {
    position: absolute;
    bottom: 15%;
    width: 100%;
    text-align: center;
	z-index:999;
}

#starter-city-msg {
    background: rgba(0, 0, 0, 0.85); /* Daha koyu yaptık ki her zeminde okunsun */
    color: #f0e68c;
    padding: 15px 40px;
    border-radius: 8px;
    display: inline-block;
    font-size: 1.3rem; /* PC için biraz büyüttük */
    border: 2px solid #6b5c3b;
    box-shadow: 0 0 20px rgba(0,0,0,0.7);
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
}

/* Görev tamamlandığında tabelanın alacağı yeşil stil */
.town-label-text.task-complete {
    color: #43FF64 !important; /* Başarı Yeşili */
    border-color: #43FF64 !important;
    text-shadow: 0 0 10px rgba(67, 255, 100, 0.6), 2px 2px 0 #000 !important;
}

.event-content {
    width: 500px;
    background: linear-gradient(180deg, #1a150e 0%, #000 100%);
    border: 2px solid #6b5c3b;
    border-radius: 15px;
    padding: 25px !important;
    box-shadow: 0 0 30px rgba(0,0,0,1), 0 0 15px rgba(107, 92, 59, 0.2);
    z-index: 1000;
}

.event-choices-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.choice-details {
    display: flex;
    flex-direction: column;
    font-size: 0.85em;
    margin-top: 5px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 5px;
}

/* Sonuç ekranındaki "DEVAM ET" butonu için üst boşluk */
#event-result-area .menu-main-btn {
    margin-top: 30px;
}
.event-stats-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(107, 92, 59, 0.5);
    margin-bottom: 20px;
}

.e-stats-left {
    display: flex;
    gap: 15px;
    position: static !important; /* Absolute'u iptal eder */
}

.e-stats-right {
    position: static !important; /* Absolute'u iptal eder */
}

/* Değerlerin Choice kutusunda daha kibar durması için */
#event-screen .npc-hp-stat, 
#event-screen .npc-rage-stat, 
#event-screen .npc-gold-stat ,
#event-screen .npc-exhaust-stat{
    font-size: 1rem;
}
#cost-gold, #cost-fragments {
    display: flex;
    align-items: center;    /* İkon ve yazıyı kendi içinde dikey ortalar */
    white-space: nowrap;    /* Yazının alt satıra kaymasını engeller */
    font-size: 1.1rem;
}

.inline-icon {
    width: 50px;            /* Senin istediğin ideal ölçü */
    height: auto;
    vertical-align: middle;
    /* margin-right değerini -10 yerine 5px yapalım ki yazıya yapışmasın */
    margin-right: -5px; 
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
}

/* Gold ikonunun (FA) 50px'lik fragment ikonuyla dengelenmesi için boyutu */
#cost-gold i {
    font-size: 1.8rem;      /* Altın simgesini biraz büyüttük ki sönük kalmasın */
    margin-right: 10px;
}

.quantity-selector-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 15px 0;
}

.qty-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.2rem !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #4a3b2a, #2b2218) !important;
    border: 1px solid #7c6843 !important;
    color: #f0e68c !important;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 4px 0 #1a150e;
}

.qty-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #1a150e;
}

.qty-display {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: #43FF64;
    min-width: 60px;
    text-align: center;
    text-shadow: 2px 2px 4px #000;
}

/* --- GAZİ ÜSTAD  --- */
#veteran-skill-list {
    max-height: 300px;
    overflow-y: auto;          /* Kaydırma özelliği aktif */
    display: flex;             /* İçeriği kutu modeline sokar */
    flex-direction: column;    /* Kartları alt alta dizer */
    gap: 10px;                 /* Kartlar arası boşluk */
    padding: 10px;             /* İç kenar boşluğu */

    /* --- KAYDIRMA ÇUBUĞUNU GİZLEME KURALLARI --- */
    scrollbar-width: none;     /* Firefox */
    -ms-overflow-style: none;  /* IE / Edge */
}

/* Chrome, Safari ve Yeni Edge (Webkit) için çubuk gizleme */
#veteran-skill-list::-webkit-scrollbar {
    display: none;
}

/* --- GAZİ ÜSTAD TABLO TASARIMI --- */
.veteran-header-row {
    display: flex;
    padding: 10px 5px;
    border-bottom: 1px solid #6b5c3b;
    margin-bottom: 10px;
    font-size: 0.7rem;
    color: #a89373;
    font-weight: bold;
    text-align: center;
}

.veteran-skill-row {
    display: flex;
    align-items: center;
    padding: 8px 5px;
    background: rgba(0,0,0,0.3);
    border: 1px solid #3e3221;
    border-radius: 4px;
    margin-bottom: 5px;
    transition: background 0.2s;
}

/* SÜTUN GENİŞLİKLERİ */
.v-col-name {
    flex: 2.5; /* İsme daha fazla yer ayır */
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    min-width: 0; /* Ellipsis için şart */
}

.v-col-btn {
    flex: 1; /* Butonlar eşit genişlikte */
    display: flex;
    justify-content: center;
}

/* İsim ve İkon Ayarları */
.v-skill-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #000;
}

.v-skill-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffd700;
    font-size: 0.85rem;
}

/* Buton Ayarları */
.v-action-btn {
    width: 75px !important;
    height: 32px !important;
    font-size: 0.75rem !important;
    padding: 0 !important;
    margin: 0 !important;
}

.v-action-btn.btn-danger {
    border-color: #8b0000 !important;
}

.v-info-btn {
    color: #a89373; /* Pirinç rengi */
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s ease;
    margin-right: 5px;
    z-index: 10;
}

.v-info-btn:hover {
    color: #ffd700; /* Hoverda altın sarısı */
    transform: scale(1.2);
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}

#starter-city-msg {
    transition: all 0.3s ease;
    cursor: default;
}

/* Her şey hazır olduğunda metnin alacağı hal */
#starter-city-msg.ready-to-leave {
    cursor: pointer !important;
    border-color: #ffd700 !important;
    color: #ffd700 !important;
    background: rgba(43, 34, 24, 0.9) !important;
    /* Oyuncuya "Bana Bas" diyen hafif bir parlama animasyonu */
    animation: readyPulse 2s infinite ease-in-out;
}

#starter-city-msg.ready-to-leave:hover {
    transform: scale(1.05);
    background: rgba(93, 74, 48, 0.9) !important;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}

@keyframes readyPulse {
    0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.6); }
    100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); }
}

/* --- MOBİL UYUMLULUK --- */
@media (max-width: 768px) {
    .town-calendar-text {
        top: 1px;      /* Mobilde biraz daha yukarıya çekiyoruz */
        right: 2px;    /* Kenar boşluğunu daraltıyoruz */
        font-size: 0.7rem; /* Yazıyı mobilde küçültüyoruz ki butonlara binmesin */
        padding: 5px 15px;
        letter-spacing: 1px;
        border-right-width: 2px;
    }
	
.town-master-banner {
    position: absolute;
    top: 7%; /* Takvimin biraz altında, meydanın ortasında */
    left: 30%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #a89373;
    padding: 4px 10px;
    border-radius: 4px;
    color: #a89373;
    font-family: 'Cinzel', serif;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px #000;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    pointer-events: none; /* Tıklamayı engellemez */
    z-index: 100;
    animation: bannerFadeIn 0.8s ease-out;
}

@keyframes bannerFadeIn {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

    #starter-city-msg {
        font-size: 0.6rem;
        padding: 10px 20px;
        bottom: 80px;
    }
	
	#building-barracks { top: 40%; left: 38.5%; transform: translate(-50%, -50%) rotate(353deg) scale(0.8)}
	#building-elder { top: 35%; left: 66%; transform: scale(0.8)}
	
	.veteran-header-row {
        font-size: 0.55rem !important;
    }
    .v-col-name { flex: 1.5; } /* Mobilde ismi biraz daha daralt */
    .v-col-btn { flex: 1; }
    
    .v-skill-text { font-size: 0.7rem !important; max-width: 90px; }
    .v-action-btn { width: 60px !important; font-size: 0.65rem !important; }
	.v-info-btn {
        padding: 5px;
        font-size: 1.2rem;
    }
	
	#starter-city-msg.ready-to-leave:hover {
    transform: scale(0.7);
    background: rgba(93, 74, 48, 0.9) !important;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}
}
	
}

/* Opsiyonel: Çok küçük ekranlar için (Dikey telefonlar) */
@media (max-width: 480px) {
    .town-calendar-text {
        font-size: 0.9rem;
        top: 10px;
        right: 10px;
        letter-spacing: 0.5px;
    }
}