body { background-color: #1a2530; font-family: sans-serif; color: white; margin: 0; padding: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; }
h1, h2 { text-align: center; margin: 5px 0; }
.hidden { display: none !important; }

/* МЕНЮ */
#mode-select, #menu { display: flex; flex-direction: column; align-items: center; background-color: #34495e; padding: 30px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); z-index: 200; }
.mode-buttons { display: flex; gap: 20px; margin-top: 20px; }
.character-select { display: flex; gap: 15px; }
.char-card { background: #ecf0f1; border: 4px solid #bdc3c7; border-radius: 10px; padding: 15px; width: 160px; text-align: center; cursor: pointer; transition: 0.2s; color: #333; }
.char-card:hover { transform: translateY(-3px); border-color: #f1c40f; }
.char-card p { margin: 5px 0; font-size: 0.75rem; font-weight: bold; }

/* ПРЕВЬЮ В МЕНЮ */
.zhuzh-preview { width: 50px; height: 50px; border-radius: 50%; margin: 0 auto 10px auto; position: relative; }
.zhuzh-preview.wild { background-color: #e67e22; } .zhuzh-preview.marsh { background-color: #fff; border: 1px solid #ccc; }
.zhuzh-preview.smoke { background-color: #95a5a6; width: 60px; height: 45px; margin-top: 5px; }
.zhuzh-preview.jiji { background-color: #1a1a1a; width: 55px; height: 55px; margin-top: -5px; }
.zhuzh-preview.coffeebara { background-color: #8d6e63; border-radius: 40% 40% 45% 45%; }
.ear-p { width: 14px; height: 14px; position: absolute; top: -4px; border-radius: 3px; transform: rotate(45deg); z-index: -1; }
.wild .ear-p { background-color: #e67e22; } .marsh .ear-p { background-color: #fff; border: 1px solid #ccc; }
.smoke .ear-p { background-color: #95a5a6; } .jiji .ear-p { background-color: #1a1a1a; }
.ear-p.left { left: 8px; } .ear-p.right { right: 8px; }
.eye-p { width: 12px; height: 12px; border-radius: 50%; position: absolute; top: 16px; display: flex; justify-content: center; align-items: center; }
.eye-p.left { left: 10px; } .eye-p.right { right: 10px; }
.het-y { background-color: #3498db; } .het-b { background-color: #f1c40f; }
.wild .eye-p, .smoke .eye-p { background-color: #f1c40f; } .jiji .eye-p { background-color: #f1c40f; width: 18px; height: 18px; top: 14px; }
.jiji .eye-p.left { left: 6px; } .jiji .eye-p.right { right: 6px; }
.pupil-p { width: 5px; height: 8px; background-color: black; border-radius: 50%; } .jiji .pupil-p { width: 8px; height: 12px; }
.capy-ear-p { width: 12px; height: 12px; background-color: #5d4037; position: absolute; top: -2px; border-radius: 50%; z-index: -1; }
.capy-ear-p.left { left: 4px; } .capy-ear-p.right { right: 4px; }
.capy-eye-p { width: 6px; height: 6px; background-color: #2c1e16; position: absolute; top: 20px; border-radius: 50%; }
.capy-eye-p.left { left: 10px; } .capy-eye-p.right { right: 10px; }
.capy-snout-p { width: 18px; height: 12px; background-color: #5d4037; position: absolute; top: 26px; left: 16px; border-radius: 40%; }

/* ИНТЕРФЕЙС И ПОЛЕ */
#game-area { width: 100vw; height: 100vh; display: flex; flex-direction: column; }
#ui-header { width: 100%; height: 70px; background-color: #2c3e50; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; box-sizing: border-box; border-bottom: 4px solid #ecf0f1; z-index: 100; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
#score-text, #ammo-counter { margin: 0; font-size: 28px; }
#camera-view { width: 100%; flex-grow: 1; position: relative; overflow: hidden; background-color: #000; }
#game-board { position: absolute; top: 0; left: 0; background-color: #1a2530; transition: transform 0.1s linear; transform-origin: top left; }

/* КЛЕТКИ ПОЛЯ, БЛОКИ, ВОДА */
.dirt { width: 40px; height: 40px; background-color: #8d6e63; border: 1px solid #795548; box-sizing: border-box; position: absolute; z-index: 1; }
.wall { width: 40px; height: 40px; background-color: #7f8c8d; border: 2px solid #546e7a; box-sizing: border-box; position: absolute; border-radius: 4px; z-index: 2; }
.dirt-bg { width: 40px; height: 40px; background-color: #2c1e16; position: absolute; z-index: 0; border: 1px solid rgba(0,0,0,0.1); }
.rock { width: 36px; height: 36px; background-color: #95a5a6; border: 2px solid #7f8c8d; position: absolute; z-index: 6; box-sizing: border-box; border-radius: 8px; transition: top 0.1s linear, left 0.1s linear; box-shadow: inset -5px -5px 10px rgba(0,0,0,0.5); }
.water { width: 40px; height: 40px; background-color: rgba(52, 152, 219, 0.7); position: absolute; z-index: 5; transition: top 0.1s linear, left 0.1s linear; box-shadow: inset 0 0 10px rgba(255,255,255,0.3); border-radius: 4px; }
.steam { width: 40px; height: 40px; background-color: rgba(236, 240, 241, 0.8); position: absolute; z-index: 12; border-radius: 50%; animation: flash-attack 0.5s ease-out; }

/* ПЕРСОНАЖИ В ИГРЕ */
.player-char { width: 36px; height: 36px; border-radius: 50%; position: absolute; z-index: 10; margin: 2px; transition: filter 0.3s, left 0.1s linear, top 0.1s linear; }
.is-wild { background-color: #e67e22; } .is-marsh { background-color: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.7); }
.is-smoke { background-color: #95a5a6; width: 40px; height: 30px; margin-top: 5px; } .is-jiji { background-color: #1a1a1a; width: 40px; height: 40px; margin: 0px; z-index: 11; border-radius: 40% 40% 45% 45%; }
.is-coffeebara { background-color: #8d6e63; width: 36px; height: 36px; border-radius: 40% 40% 45% 45%; }
.phantom { opacity: 0.7; z-index: 9; filter: drop-shadow(0 0 5px #b8860b); } .phantom .eye { background-color: #b8860b !important; box-shadow: 0 0 5px #b8860b; }
.immortal-phantom { filter: drop-shadow(0 0 15px #fff) drop-shadow(0 0 30px #f1c40f) !important; animation: pulse-berry 0.4s infinite alternate; }

/* Элементы лиц в игре */
.capy-ear { width: 10px; height: 10px; background-color: #5d4037; position: absolute; top: -2px; border-radius: 50%; z-index: -1; } .capy-ear.left { left: 4px; } .capy-ear.right { right: 4px; }
.capy-eye { width: 5px; height: 5px; background-color: #2c1e16; position: absolute; top: 12px; border-radius: 50%; } .capy-eye.left { left: 6px; } .capy-eye.right { right: 6px; }
.capy-snout { width: 16px; height: 10px; background-color: #5d4037; position: absolute; top: 18px; left: 10px; border-radius: 40%; }
.ear { width: 12px; height: 12px; position: absolute; top: -2px; z-index: -1; border-radius: 3px; transform: rotate(45deg); }
.is-wild .ear { background-color: #e67e22; } .is-marsh .ear { background-color: #fff; } .is-smoke .ear { background-color: #95a5a6; } .is-jiji .ear { background-color: #1a1a1a; }
.ear.left { left: 4px; } .ear.right { right: 4px; }
.eye { width: 10px; height: 10px; border-radius: 50%; position: absolute; top: 10px; display: flex; justify-content: center; align-items: center; transition: 0.2s; }
.eye.left { left: 6px; } .eye.right { right: 6px; } .is-jiji .eye { background-color: #f1c40f; width: 14px; height: 14px; } .is-jiji .eye.left { left: 4px; } .is-jiji .eye.right { right: 4px; }
.pupil { width: 4px; height: 6px; background-color: black; border-radius: 50%; } .is-jiji .pupil { width: 6px; height: 10px; }
.is-wild .eye { background-color: #f1c40f; } .is-marsh .eye.left { background-color: #3498db; } .is-marsh .eye.right { background-color: #f1c40f; } .is-smoke .eye { background-color: #f1c40f; }
.nose { width: 6px; height: 4px; background-color: #ff9ff3; border-radius: 50%; position: absolute; top: 18px; left: 15px; } .mouth { width: 8px; height: 4px; border-bottom: 2px solid #555; border-radius: 50%; position: absolute; top: 22px; left: 14px; }
.is-jiji .mouth { border-bottom: 2px solid #7f8c8d; } .whisker { width: 12px; height: 1px; background-color: #555; position: absolute; } .whisker.left { left: -8px; } .whisker.right { right: -8px; }
.whisker.top { top: 20px; } .whisker.bottom { top: 24px; } .whisker.left.top { transform: rotate(-15deg); } .whisker.left.bottom { transform: rotate(15deg); } .whisker.right.top { transform: rotate(15deg); } .whisker.right.bottom { transform: rotate(-15deg); }

/* ПРЕДМЕТЫ И ОБЪЕКТЫ */
.candy { width: 16px; height: 16px; background-color: #e74c3c; border-radius: 50%; position: absolute; z-index: 5; margin: 12px; }
.candy::before, .candy::after { content: ''; position: absolute; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; top: 2px; }
.candy::before { border-right: 8px solid #e74c3c; left: -6px; } .candy::after { border-left: 8px solid #e74c3c; right: -6px; }
.pepper { width: 16px; height: 16px; background-color: #27ae60; border-radius: 50% 0 50% 50%; position: absolute; z-index: 5; margin: 12px; transform: rotate(45deg); box-shadow: inset -2px -2px 5px rgba(0,0,0,0.3); }
.pepper::after { content: ''; position: absolute; width: 4px; height: 8px; background-color: #2ecc71; top: -4px; right: -4px; border-radius: 2px; }
.coffee-cup { width: 16px; height: 20px; background-color: #ecf0f1; border-radius: 2px 2px 6px 6px; position: absolute; z-index: 5; margin: 10px 12px; border-top: 4px solid #3e2723; box-shadow: 2px 2px 4px rgba(0,0,0,0.4); }

.pillow { width: 36px; height: 36px; background-color: #e056fd; border-radius: 8px; position: absolute; z-index: 4; box-shadow: 0 0 10px #be2edd; transition: 0.3s; margin: 2px; }
.pillow.lit { background-color: #f6e58d; box-shadow: 0 0 20px #f9ca24, 0 0 40px #f0932b; animation: pulse-berry 1s infinite alternate; }
.portal { width: 36px; height: 36px; background: radial-gradient(circle, #f1c40f, #e67e22); border-radius: 50%; position: absolute; z-index: 4; margin: 2px; box-shadow: 0 0 20px #f1c40f; animation: pulse-berry 1s infinite alternate; }
.portal.blue-portal { background: radial-gradient(circle, #3498db, #2980b9, #2c3e50); box-shadow: 0 0 20px #3498db; }
.golden-berry { width: 36px; height: 36px; background: radial-gradient(circle, #f1c40f, #f39c12); border-radius: 50%; position: absolute; z-index: 5; margin: 2px; box-shadow: 0 0 20px #f1c40f, 0 0 40px #f39c12; animation: pulse-berry 1s infinite alternate; }

/* ЭФФЕКТЫ И СПОСОБНОСТИ */
.boom { position: absolute; background: radial-gradient(circle, #e67e22, transparent); width: 80px; height: 80px; transform: translate(-20px, -20px); z-index: 35; border-radius: 50%; animation: flash-attack 0.3s ease-out forwards; }
.mega-boom { position: absolute; background: radial-gradient(circle, #e74c3c, transparent); z-index: 35; border-radius: 50%; animation: flash-attack 0.4s ease-out forwards; }
.blue-boom { position: absolute; background: radial-gradient(circle, #3498db, transparent); width: 120px; height: 120px; transform: translate(-40px, -40px); z-index: 35; border-radius: 50%; animation: flash-attack 0.3s ease-out forwards; }
.smoke-cloud { width: 40px; height: 40px; background-color: rgba(189, 195, 199, 0.7); position: absolute; z-index: 25; border-radius: 10px; animation: pulse-berry 2s infinite alternate; }
.poison-cloud { width: 40px; height: 40px; background-color: rgba(155, 89, 182, 0.8); position: absolute; z-index: 25; border-radius: 10px; animation: flash-attack 0.5s ease-out; }
.laser-beam { position: absolute; background-color: #f1c40f; z-index: 30; box-shadow: 0 0 15px #f39c12; transition: opacity 0.2s; border-radius: 5px; }

.invisible-mode { opacity: 0.35; filter: blur(1.5px); box-shadow: 0 0 20px rgba(52, 152, 219, 0.7); }
@keyframes ghost-flicker { 0%, 100% { opacity: 0.35; filter: blur(1.5px); } 50% { opacity: 0.9; filter: blur(0px); box-shadow: 0 0 30px rgba(231, 76, 60, 0.9); } }
.flickering { animation: ghost-flicker 0.33s infinite; }
@keyframes invuln-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; filter: grayscale(100%) brightness(2); } }
.invulnerable { animation: invuln-blink 0.2s infinite; }
@keyframes heal-glow { 0%, 100% { box-shadow: 0 0 0px #2ecc71; background-color: transparent; } 50% { box-shadow: 0 0 30px 10px #2ecc71; background-color: #fff; } }
.healing { animation: heal-glow 0.6s ease-out; border-radius: 50%; }
@keyframes flash-blue-eye { 0% { background-color: #3498db; box-shadow: 0 0 0px #3498db; } 50% { background-color: #fff; box-shadow: 0 0 40px 15px #3498db; } 100% { background-color: #3498db; box-shadow: 0 0 0px #3498db; } }
.eye-flash { animation: flash-blue-eye 0.5s ease-out; }
.coffee-aura { box-shadow: 0 0 25px 10px rgba(241, 196, 15, 0.8) !important; animation: coffee-shake 0.3s infinite; }
@keyframes coffee-shake { 0% { transform: translate(0, 0); } 50% { transform: translate(1px, -1px); } 100% { transform: translate(0, 0); } }
.underground { background-color: transparent !important; box-shadow: none !important; transform: translateY(10px); }
.underground::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-color: #5d4037; border-radius: 50% 50% 0 0; box-shadow: 0 -2px 5px rgba(0,0,0,0.5); }
.underground .eye, .underground .nose, .underground .mouth, .underground .whisker, .underground .ear, .underground .capy-ear, .underground .capy-eye, .underground .capy-snout { display: none; }

.bite-effect { position: absolute; width: 60px; height: 60px; z-index: 100; pointer-events: none; }
.bite-effect::before, .bite-effect::after { content: ''; position: absolute; width: 100%; height: 30px; background-image: linear-gradient(to bottom, transparent, #fff); border-top: 4px solid #fff; border-radius: 50% 50% 0 0; filter: drop-shadow(0 0 10px #e74c3c); animation: chomp-top 0.4s ease-in forwards; left:0; top:-10px; }
.bite-effect::after { background-image: linear-gradient(to top, transparent, #fff); border-top: none; border-bottom: 4px solid #fff; border-radius: 0 0 50% 50%; top: 40px; animation: chomp-bot 0.4s ease-in forwards; }
@keyframes chomp-top { 0% { transform: translateY(-40px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(0px); opacity: 0; } }
@keyframes chomp-bot { 0% { transform: translateY(40px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(0px); opacity: 0; } }
.player-biting { animation: player-lunge 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; z-index: 100 !important; }
@keyframes player-lunge { 0% { transform: scale(1); } 50% { transform: scale(1.4); filter: drop-shadow(0 0 20px #e74c3c) brightness(1.5); } 100% { transform: scale(1); } }

/* ВРАГИ */
.rabbit { width: 32px; height: 32px; background-color: #d35400; border-radius: 50%; position: absolute; z-index: 9; transition: 0.3s linear, left 0.1s linear, top 0.1s linear; margin: 4px; }
.rabbit::before, .rabbit::after { content: ''; position: absolute; width: 8px; height: 16px; background-color: #d35400; top: -10px; border-radius: 4px; }
.rabbit::before { left: 4px; } .rabbit::after { right: 4px; }
.rabbit.black { background-color: #c0392b; box-shadow: 0 0 10px rgba(192, 57, 43, 0.8); display: flex; justify-content: center; align-items: center; gap: 4px; }
.rabbit.black::before, .rabbit.black::after { background-color: #c0392b; }
.rabbit.black .r-eye { width: 6px; height: 6px; background-color: #f1c40f; border-radius: 50%; box-shadow: 0 0 5px #f1c40f; z-index: 10; margin-top: -10px; }
.rabbit.blue { background-color: #2980b9; box-shadow: 0 0 10px rgba(41, 128, 185, 0.8); display: flex; justify-content: center; align-items: center; gap: 4px; }
.rabbit.blue::before, .rabbit.blue::after { background-color: #2980b9; } 
.rabbit.blue .r-eye { width: 6px; height: 6px; background-color: #00ffff; border-radius: 50%; box-shadow: 0 0 5px #00ffff; z-index: 10; margin-top: -10px; }
.rabbit.dark-green { background-color: #1e824c; box-shadow: 0 0 10px rgba(30, 130, 76, 0.8); display: flex; justify-content: center; align-items: center; gap: 4px; }
.rabbit.dark-green::before, .rabbit.dark-green::after { background-color: #1e824c; }

/* ЗМЕИ */
.snake-head { width: 36px; height: 36px; background-color: #2ecc71; border-radius: 12px 12px 4px 4px; position: absolute; z-index: 10; transition: left 0.1s linear, top 0.1s linear, transform 0.1s linear; display:flex; justify-content:center; align-items:flex-start; margin: 2px; box-shadow: inset 0 0 8px rgba(0,0,0,0.2);}
.snake-head::before, .snake-head::after { content: ''; width: 6px; height: 6px; background: #000; border-radius: 50%; margin-top: 6px; box-shadow: 0 0 2px #fff; }
.snake-head::before { margin-right: 4px; }
.snake-tail { width: 28px; height: 28px; background-color: #27ae60; border-radius: 50%; position: absolute; z-index: 9; transition: left 0.1s linear, top 0.1s linear; margin: 6px; box-shadow: inset 0 0 10px rgba(0,0,0,0.4); }
.great-snake-head { width: 50px; height: 50px; background-color: #1abc9c; border-radius: 12px; position: absolute; z-index: 20; transition: left 0.1s linear, top 0.1s linear; box-shadow: 0 0 15px #1abc9c; }
.great-snake-head::before, .great-snake-head::after { content: ''; position: absolute; width: 10px; height: 10px; background: #fff; border-radius: 50%; top: 10px; box-shadow: inset 0 0 5px #000; }
.great-snake-head::before { left: 10px; } .great-snake-head::after { right: 10px; }
.great-snake-body { width: 40px; height: 40px; background-color: #16a085; border-radius: 50%; position: absolute; z-index: 19; transition: left 0.1s linear, top 0.1s linear; margin: 5px; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }

/* БОСС АРЕНА И ДИАЛОГИ */
#dialog-box { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.85); border: 3px solid #27ae60; padding: 25px; color: white; z-index: 2000; text-align: center; border-radius: 15px; font-size: 24px; font-family: sans-serif; text-shadow: 1px 1px 2px #000; }
#boss-title-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.6); font-size: 80px; color: #f1c40f; text-shadow: 0 0 20px #fff, 0 0 50px #e67e22; font-family: serif; font-weight: bold; letter-spacing: 5px; white-space: nowrap; z-index: 1000; opacity: 0; pointer-events: none; transition: all 1.5s cubic-bezier(0.1, 0.8, 0.2, 1); }
#boss-title-card.show-title { opacity: 1; transform: translate(-50%, -50%) scale(1); letter-spacing: 15px; }
#boss-ui { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 150; width: 400px; background: rgba(0,0,0,0.7); padding: 10px; border-radius: 10px; border: 2px solid #f1c40f; }
#boss-ui h2 { margin: 0 0 10px 0; color: #f1c40f; text-shadow: 0 0 10px #f39c12; font-family: serif; }
#boss-hp-bar { width: 100%; height: 20px; background-color: #333; border-radius: 10px; overflow: hidden; border: 2px solid #fff; }
#boss-hp-fill { width: 100%; height: 100%; background-color: #e74c3c; transition: width 0.3s ease-out; }
.boss-rabbit { width: 40px; height: 40px; background-color: #f1c40f; border-radius: 50%; position: absolute; z-index: 11; margin: 0; box-shadow: 0 0 20px #f1c40f; transition: left 0.1s, top 0.1s; display: flex; justify-content: center; align-items: center; gap: 6px; }
.boss-rabbit::before, .boss-rabbit::after { content: ''; position: absolute; width: 10px; height: 20px; background-color: #f1c40f; top: -14px; border-radius: 5px; box-shadow: 0 0 10px #f1c40f; }
.boss-rabbit::before { left: 6px; } .boss-rabbit::after { right: 6px; }
.boss-rabbit .r-eye { width: 8px; height: 8px; background-color: #fff; border-radius: 50%; box-shadow: 0 0 5px #fff; z-index: 12; margin-top: -10px; }
.boss-stunned { filter: grayscale(50%); animation: shake-stun 0.1s infinite; }
@keyframes shake-stun { 0% { transform: translateX(-2px); } 100% { transform: translateX(2px); } }

.warning-beam, .warning-aoe, .warning-tp { position: absolute; background-color: rgba(241, 196, 15, 0.3); border: 2px dashed #f1c40f; box-sizing: border-box; z-index: 4; }
.warning-tp { border-radius: 50%; background-color: rgba(155, 89, 182, 0.4); border-color: #9b59b6; }
.golden-beam, .golden-boom { position: absolute; background-color: #f1c40f; z-index: 12; box-shadow: 0 0 20px #fff; opacity: 0; animation: flash-attack 0.3s ease-out; }
.golden-boom { border-radius: 10px; }
.warning-blue { position: absolute; background-color: rgba(41, 128, 185, 0.3); border: 2px dashed #00ffff; box-sizing: border-box; z-index: 4; }

@keyframes flash-attack { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes pulse-berry { from { transform: scale(1); } to { transform: scale(1.3); } }