:root {
    --bg-color: #2c3e50;
    --main-color: #e67e22;
    --active-border: 4px solid var(--main-color);
    --gap-size: 5px;
    /* متغیر جدید برای کنترل زمان انیمیشن از JS */
    --char-transition-time: 0.5s;
}

body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    color: #333;
    user-select: none;
    padding: 10px;
    box-sizing: border-box;
}

.game-layout {
    display: flex;
    gap: 20px;
    background: #bdc3c7;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 1000px;
    box-sizing: border-box;
}

#grid-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

#grid {
    display: grid;
    gap: var(--gap-size);
    background: #7f8c8d;
    padding: 5px;
    border-radius: 8px;
    border: 4px solid #555;
    direction: ltr;
    grid-template-columns: repeat(var(--grid-cols, 5), 1fr);
}

.cell {
    width: auto;
    aspect-ratio: 1 / 1;
    background-color: #eee;
    border-radius: 15%;
    position: relative;
    box-sizing: border-box;
}

.cell.wall { background: repeating-linear-gradient(45deg, #555, #555 5px, #444 5px, #444 10px); border: none; }
.cell.goal { background-color: #3498db; border: 3px solid white; }
.cell.goal.lit {
    background-color: #f1c40f;
    box-shadow: 0 0 15px #f1c40f;
    border-color: #e67e22;
}

.cell.teleport { border: 2px dashed rgba(255,255,255,0.5); }
.teleport-inner {
    width: 60%; height: 60%; border-radius: 50%;
    margin: 20%; opacity: 0.7;
    animation: pulse 1.5s infinite;
}

/* Character Base Styles */
#character {
    position: absolute;
    z-index: 100;
    pointer-events: none;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.5));
    transform-origin: center center;
    padding: 4px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Character SVG Base */
#character svg {
    width: 100%;
    height: 100%;
    display: block;
    /* این خط باعث می‌شود چرخش اصلی کاراکتر نرم باشد */
    transition: transform var(--char-transition-time) ease;
}

/* --- انیمیشن‌های جدید برای کاراکترها --- */

/* Forward Movement */
.animate-forward-tank { animation: forwardTank var(--char-transition-time) ease; }
@keyframes forwardTank {
    0% { transform: scaleX(1) scaleY(1); }
    50% { transform: scaleX(1.1) scaleY(0.9); }
    100% { transform: scaleX(1) scaleY(1); }
}

.animate-forward-rabbit { animation: forwardRabbit var(--char-transition-time) ease; }
@keyframes forwardRabbit {
    0% { transform: translateY(0) scaleY(1); }
    50% { transform: translateY(-10px) scaleY(1.1); } /* Jump up */
    100% { transform: translateY(0) scaleY(1); }
}

/* Turn Animation (Rabbit specific) */
.animate-turn-rabbit { animation: turnRabbit var(--char-transition-time) ease; }
@keyframes turnRabbit {
    0% { transform: scaleX(1) scaleY(1); }
    25% { transform: scaleX(0.8) scaleY(1.2); } /* Squash */
    75% { transform: scaleX(1.2) scaleY(0.8); } /* Stretch */
    100% { transform: scaleX(1) scaleY(1); }
}

/* Bump Animation */
.animate-bump { animation: bumpAnim var(--char-transition-time) ease-out; }
@keyframes bumpAnim {
    0% { transform: translateX(var(--bump-x, 0)) translateY(var(--bump-y, 0)) scale(1); }
    50% { transform: translateX(var(--bump-x, 0)) translateY(var(--bump-y, 0)) scale(0.9); }
    100% { transform: translateX(0) translateY(0) scale(1); }
}

/* Light/Interact Animation */
.animate-lit { animation: litAnim var(--char-transition-time) ease; }
@keyframes litAnim {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Teleport Animation */
.animate-teleport-out { animation: teleportOut var(--char-transition-time) ease-in forwards; }
@keyframes teleportOut {
    0% { opacity: 1; transform: scale(1) rotate(0deg); }
    100% { opacity: 0; transform: scale(0) rotate(180deg); }
}
.animate-teleport-in { animation: teleportIn var(--char-transition-time) ease-out forwards; }
@keyframes teleportIn {
    0% { opacity: 0; transform: scale(0) rotate(-180deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}


/* General Layout and Controls (Unchanged) */
.controls {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width: 768px) {
    .game-layout { flex-direction: column; align-items: center; padding: 10px; }
    #grid-container { max-width: 100%; }
    .controls { width: 100%; }
}

.cmd-palette { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; background: #aeb6bf; padding: 8px; border-radius: 8px; }
.btn { flex: 1; min-width: 40px; height: 45px; font-size: 1.2rem; border: none; border-radius: 8px; cursor: pointer; color: black; font-weight: bold; box-shadow: 0 3px 0 rgba(0,0,0,0.2); transition: transform 0.1s; }
.btn:active { transform: translateY(3px); box-shadow: none; }
.btn-basic { background: #eee; }
.btn-func { max-width: 45px; background: #eee; font-size: 0.9rem;color: white }

#programs-container { overflow-y: auto; padding-right: 5px; max-height: 450px; }
.program-box { background: white; padding: 8px; border-radius: 8px; border: 2px solid #ccc; margin-bottom: 8px; }
.program-box.active { border: var(--active-border); }
.program-header { display: flex; justify-content: space-between; align-items: center; font-weight: bold; padding-bottom: 5px; cursor: pointer; font-size: 0.9rem; }

.cmd-list { display: flex; flex-wrap: wrap; align-content: flex-start; min-height: 35px; border-top: 1px dashed #ccc; padding-top: 5px; }

.cmd-item { width: 30px; height: 30px; margin: 2px; display: flex; align-items: center; justify-content: center; background: #ecf0f1; border-radius: 5px; font-weight: bold; font-size: 16px; cursor: pointer; border: 1px solid #ccc; }
.cmd-item:hover { background: #ffcccc; }
.cmd-placeholder { width: 30px; height: 30px; margin: 2px; background: #f0f0f0; border: 2px dashed #bdc3c7; border-radius: 5px; box-sizing: border-box; }

.turn-cmd { font-size: 20px; }
.active-exec { border: 2px solid red; background: #ffdddd; transform: scale(1.1); z-index: 10; }

.action-row { display: flex; gap: 8px; margin-bottom: 5px; justify-content: center; width: 100%; }
.act-btn { padding: 10px; border: none; border-radius: 8px; color: white; font-weight: bold; cursor: pointer; flex:1; box-shadow: 0 4px 0 rgba(0,0,0,0.2); }
.act-btn:active { transform: translateY(4px); box-shadow: none; }
.run-btn { background: #27ae60; }
.stop-btn { background: #e74c3c; }
.clear-btn { background: #c0392b; }
.speed-btn { background: #34495e; color: #f1c40f; }

.skin-selector-container { display: flex; justify-content: center; margin-bottom: 5px; }
.skin-selector { padding: 8px; border-radius: 8px; border: 2px solid #e67e22; background: white; font-family: inherit; font-weight: bold; cursor: pointer; width: 100%; text-align: center; }

#status-msg { text-align: center; font-weight: bold; height: 20px; margin-top: 5px; font-size: 0.9rem; }

.progress-bar-container {
    width: 100%; margin-bottom: 10px;
    background: #bdc3c7; padding: 10px; border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); display: flex;
    justify-content: space-between; align-items: center;
    direction: rtl; box-sizing: border-box;
}
.level-indicator {
    display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
    flex-grow: 1; justify-content: flex-start; padding-bottom: 5px;
}
.level-item {
    width: 28px; height: 28px; border-radius: 50%;
    background-color: #7f8c8d; color: white; display: flex;
    align-items: center; justify-content: center; font-weight: bold;
    font-size: 0.8rem; position: relative; transition: all 0.3s ease;
    flex-shrink: 0;
}
.level-item.completed { background-color: #27ae60; cursor: pointer; }
.level-item.current { background-color: #e67e22; border: 2px solid #f1c40f; transform: scale(1.1); box-shadow: 0 0 10px #f1c40f; }
.level-item.locked { background-color: #555; opacity: 0.5; cursor: not-allowed; }

.modal { display: none; position: fixed; z-index: 200; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(5px); }
.modal-content { background-color: #ecf0f1; margin: 20% auto; padding: 20px; border: 5px solid #e67e22; border-radius: 15px; width: 85%; max-width: 350px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.5); color: #2c3e50; animation: dropin 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.close-button { color: #aaa; float: left; font-size: 28px; font-weight: bold; cursor: pointer; }
@keyframes pulse { 0% {transform: scale(0.8);} 50% {transform: scale(1.1);} 100% {transform: scale(0.8);} }
@keyframes dropin { from { transform: translateY(-100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* --- استایل‌های خانه‌های شرطی --- */
.cell.cond-red { background-color: #e74c3c; opacity: 0.5; border: 3px solid #c0392b; }
.cell.cond-green { background-color: lightgreen; opacity: 0.5; border: 3px solid #1abc9c; }
.cell.cond-yellow { background-color: yellow; opacity: 0.5; border: 3px solid #f39c12; }

/* حالت فعال: رنگ پررنگ‌تر و روشن‌تر */
.cell.cond-active {
    opacity: 1;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); /* افکت نور ملایم */
    /*animation: pulse 1s infinite alternate; !* انیمیشن چشمک‌زن *!*/
}

/* برای دستورات شرطی جدید در پالت */
.btn-cond {
    background: #7f8c8d; /* خاکستری پیش‌فرض */
    border: 2px solid #555;
    font-size: 1.2rem;
    padding: 2px; /* برای جا شدن متن */
    line-height: 1;
    text-align: center;
    max-width: 45px;
}
.btn-cond-L { color: white; }
/* انیمیشن چشمک زدن (Blink) */
@keyframes character-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* اعمال رنگ چشمک‌زن و رنگ پایه به کاراکتر */
#character.blink-red { animation: character-blink 0.5s infinite alternate; }
#character.blink-green { animation: character-blink 0.5s infinite alternate; }
#character.blink-yellow { animation: character-blink 0.5s infinite alternate; }

/* تغییر رنگ بدنه کاراکتر (Rabbit Body / Tank Body) */
.char-svg.char-red .char-body,
.char-svg.char-red .char-ear {
    fill: #e74c3c !important; /* قرمز */
    stroke: #c0392b !important;
}

.char-svg.char-green .char-body,
.char-svg.char-green .char-ear {
    fill: #2ecc71 !important; /* سبز */
    stroke: #1abc9c !important;
}

.char-svg.char-yellow .char-body,
.char-svg.char-yellow .char-ear {
    fill: #f1c40f !important; /* زرد */
    stroke: #f39c12 !important;
}



.char-svg.char-red .char-body-main {
    fill: #e74c3c !important; /* قرمز */
    stroke: #c0392b !important;
}

.char-svg.char-green .char-body-main {
    fill: lightgreen !important; /* سبز */
    stroke: #1abc9c !important;
}

.char-svg.char-yellow .char-body-main {
    fill: #f1c40f !important; /* زرد */
    stroke: #f39c12 !important;
}
.cmd-item.cmd-locked {
    background-color: #bdc3c7 !important; /* رنگ خاکستری تیره */
    color: #555 !important;
    border-color: #7f8c8d !important;
    cursor: not-allowed !important; /* نشانگر موس ممنوع */
    box-shadow: none !important;
}

/* برای دستورات شرطی قفل شده */
.cmd-item.cmd-locked span {
    opacity: 0.7;
}
/* --- استایل دهی نوار نام کاربری --- */
.user-info-bar {
    text-align: right;
    padding: 10px 20px;
    font-size: 1.1em;
    background-color: #f7f7f7;
    border-bottom: 1px solid #eee;
    color: #333;
    border-radius: 20px;
    margin: 2px;
}

#currentUsernameDisplay {
    font-weight: bold;
    color: var(--main-color, #e67e22); /* رنگ اصلی برنامه */
    margin-right: 5px;
}