:root {
    --bg-color: #f4f7fb;
    --surface-color: #ffffff;
    --primary: #1cb0f6;
    --primary-shadow: #1899d6;
    --success: #58cc02;
    --success-shadow: #58a700;
    --danger: #ff4b4b;
    --danger-shadow: #cc0000;
    --text-main: #4b4b4b;
    --text-muted: #afafaf;
    --golden: #ffc800;
    --box-bg: #e5e5e5;
    --key-shadow: #d2d2d2;
}

* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; font-family: 'Vazirmatn', sans-serif; touch-action: manipulation; }

html, body {
    margin: 0; padding: 0; 
    background-color: var(--bg-color); 
    color: var(--text-main);
    height: 100%; 
    overflow: hidden; 
}

.app-container {
    width: 100%; max-width: 500px; 
    height: 100%;
    position: relative; margin: 0 auto;
    display: flex; flex-direction: column;
}

/* مدیریت صفحات */
.screen {
    display: none; flex-direction: column; 
    height: 100%; padding: 15px; 
    animation: fadeIn 0.3s ease;
    overflow-y: auto; 
}
.screen.active { display: flex; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* ================= منوی اصلی ================= */
.menu-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.game-logo { font-size: 70px; margin-bottom: 10px; }
.game-title { font-size: 26px; font-weight: 900; margin-bottom: 10px; }
.welcome-text { font-size: 15px; margin-bottom: 25px; color: var(--text-muted); }

.user-stats-box { display: flex; justify-content: center; gap: 15px; width: 100%; max-width: 300px; margin-bottom: 30px; }
.stat-item { background: var(--surface-color); padding: 12px; border-radius: 15px; flex: 1; border: 2px solid #ddd; }
.stat-label { font-size: 13px; color: #888; font-weight: bold; }
.stat-value { font-size: 16px; font-weight: 900; display: block; margin-top: 5px; color: var(--golden); }

.menu-buttons { display: flex; flex-direction: column; gap: 15px; width: 100%; max-width: 300px; }
button { font-family: 'Vazirmatn'; font-size: 16px; font-weight: bold; padding: 14px; border-radius: 15px; border: none; cursor: pointer; transition: transform 0.1s; }
.btn-primary { background: var(--success); color: white; box-shadow: 0 5px 0 var(--success-shadow); }
.btn-primary:active { transform: translateY(5px); box-shadow: none; }
.btn-secondary { background: var(--primary); color: white; box-shadow: 0 5px 0 var(--primary-shadow); }

.credit-footer { text-align: center; font-size: 12px; color: #aaa; padding: 15px 0; border-top: 2px dashed #ddd; margin-top: auto; }

/* ================= داخل بازی ================= */
.header { display: flex; justify-content: space-between; align-items: center; background: var(--surface-color); padding: 12px 15px; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); flex-shrink: 0; }
.btn-back { background: transparent; border: 2px solid #ccc; color: var(--text-main); padding: 6px 12px; border-radius: 10px; font-size: 13px; box-shadow: none; width: auto;}
.coins { font-weight: bold; color: var(--golden); font-size: 16px; background: #fff5e6; padding: 6px 12px; border-radius: 12px; }

/* گرافیک آدمک */
.hangman-board { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-height: 180px; }
.drawing-area { width: 140px; height: 160px; position: relative; }
.wood-base { position: absolute; bottom: 0; left: 0; width: 110px; height: 6px; background: #8b5a2b; border-radius: 5px; }
.wood-pole { position: absolute; bottom: 0; left: 20px; width: 6px; height: 150px; background: #8b5a2b; border-radius: 5px; }
.wood-top { position: absolute; top: 10px; left: 20px; width: 75px; height: 6px; background: #8b5a2b; border-radius: 5px; }
.rope { position: absolute; top: 10px; left: 85px; width: 3px; height: 20px; background: #c29f6d; }

.part { background: var(--text-main); position: absolute; transform: scale(0); opacity: 0; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.part.show { transform: scale(1); opacity: 1; }

.head { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--text-main); background: var(--bg-color); top: 25px; left: 70px; display: flex; justify-content: center; align-items: center; font-size: 20px; transition: all 0.3s; } 
.head.dead { background: #ffcccc; border-color: var(--danger); box-shadow: 0 0 10px var(--danger); }
.body { width: 4px; height: 35px; top: 57px; left: 85px; }
.arm-l { width: 4px; height: 25px; top: 62px; left: 73px; transform: rotate(45deg); transform-origin: top; }
.arm-l.show { transform: rotate(45deg) scale(1); }
.arm-r { width: 4px; height: 25px; top: 62px; left: 95px; transform: rotate(-45deg); transform-origin: top; }
.arm-r.show { transform: rotate(-45deg) scale(1); }
.leg-l { width: 4px; height: 30px; top: 89px; left: 77px; transform: rotate(30deg); transform-origin: top; }
.leg-l.show { transform: rotate(30deg) scale(1); }
.leg-r { width: 4px; height: 30px; top: 89px; left: 93px; transform: rotate(-30deg); transform-origin: top; }
.leg-r.show { transform: rotate(-30deg) scale(1); }

@keyframes shake { 0%, 100% { transform: translateX(0); } 25%, 75% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
.shake { animation: shake 0.3s ease-in-out; }

.category-hint { margin-top: 10px; background: #e3f2fd; padding: 8px 15px; border-radius: 12px; font-size: 13px; font-weight: bold; color: #1565c0; text-align: center; }

/* کلمات و کیبورد (LTR برای زبان انگلیسی) */
.word-display { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 10px 0; direction: ltr; flex-shrink: 0;}
.letter-box { width: 36px; height: 44px; background: var(--box-bg); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-family: Arial, sans-serif; font-weight: bold; color: var(--text-main); }
.letter-box.filled { background: var(--primary); color: white; box-shadow: 0 4px 0 var(--primary-shadow); animation: popIn 0.3s ease; }

.keyboard { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding-bottom: 5px; direction: ltr; flex-shrink: 0;}
.key { width: calc(14% - 5px); min-height: 42px; background: var(--surface-color); border: none; border-radius: 8px; color: var(--text-main); font-size: 17px; font-family: Arial, sans-serif; font-weight: bold; box-shadow: 0 4px 0 var(--key-shadow); padding: 0; }
.key.correct { background: var(--success); box-shadow: 0 4px 0 var(--success-shadow); color: white; pointer-events: none; }
.key.wrong { background: var(--danger); box-shadow: 0 4px 0 var(--danger-shadow); color: white; opacity: 0.6; pointer-events: none; }

.hint-btn { width: 100%; padding: 12px; background: var(--golden); color: #fff; border-radius: 12px; font-size: 14px; box-shadow: 0 4px 0 #d4a600; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }

/* پاپ‌آپ پایان بازی */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; backdrop-filter: blur(3px); }
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal-box { background: var(--surface-color); padding: 30px 25px; border-radius: 20px; text-align: center; width: 85%; max-width: 320px; transform: scale(0.8); transition: transform 0.3s ease; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.modal-overlay.active .modal-box { transform: scale(1); }
.modal-title { font-size: 24px; margin-bottom: 10px; font-weight: bold; }
.modal-desc { font-size: 15px; color: var(--text-main); margin-bottom: 25px; line-height: 1.6; }
.modal-btn { width: 100%; padding: 14px; color: #fff; border-radius: 15px; }

@keyframes popIn { 0% { transform: scale(0.8); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }