/* Professional Mobile First CSS */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }
body { background-color: #1e1e2e; width: 100vw; height: 100vh; overflow: hidden; position: relative; color: #fff; }

/* Glassmorphism Utilities - Janela Colorida e Transparente */
.glass-panel-full { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, #2f3542 0%, #1e1e2e 100%); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.glass-panel { background: linear-gradient(135deg, rgba(255, 105, 180, 0.3), rgba(156, 39, 176, 0.3)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 2px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); border-radius: 20px; }

/* TELA INICIAL */
.start-content { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.game-title { font-family: 'Outfit', sans-serif; font-size: 60px; font-weight: 900; background: linear-gradient(135deg, #ff4757, #ff6b81); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0px 10px 20px rgba(255, 71, 87, 0.3); animation: float 3s ease-in-out infinite; }
.start-characters { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: -20px; height: 250px; }
#start-nicolly { height: 250px; z-index: 2; mix-blend-mode: multiply; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5)) contrast(1.1); }
#start-scott { height: 120px; z-index: 3; margin-bottom: 20px; margin-left: -40px; mix-blend-mode: multiply; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5)) contrast(1.1); }

.spin-anim { animation: spin 5s linear infinite; }
@keyframes spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Botões Profissionais */
.pro-btn { background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%); color: white; border: none; padding: 15px 40px; font-size: 18px; font-weight: 800; border-radius: 50px; box-shadow: 0 10px 20px rgba(255, 71, 87, 0.3); cursor: pointer; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); letter-spacing: 1px; text-transform: uppercase; }
.pro-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 15px 25px rgba(255, 71, 87, 0.4); }
.pro-btn:active { transform: translateY(2px) scale(0.95); }
.pro-btn.small-btn { padding: 10px 20px; font-size: 14px; margin-top: 10px; }
.pro-btn.outline { background: transparent; border: 2px solid #ff4757; color: #ff4757; box-shadow: none; }
.pro-btn.outline:hover { background: rgba(255, 71, 87, 0.1); }

/* JOGO */
#game-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
#room-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('assets/cenario.png'); background-size: cover; background-position: center bottom; z-index: 1; }

.draggable { position: absolute; z-index: 10; cursor: grab; transition: transform 0.1s ease-out; filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.5)); user-select: none; touch-action: none; transform-origin: bottom center; }
.draggable img { pointer-events: none; display: block; mix-blend-mode: multiply; filter: contrast(1.1); }

/* Animações de Movimento */
.idle-anim img { animation: idle 2s ease-in-out infinite; }
@keyframes idle { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.95) translateY(5px); } }

.walk-anim img { animation: walk 0.3s ease-in-out infinite alternate; }
@keyframes walk { 0% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } }

#nicolly img { height: 280px; }
#scott img { height: 120px; }
#food img { height: 60px; }
#toy img { height: 60px; }

.draggable:active { cursor: grabbing; transform: scale(1.05) translateY(-10px); z-index: 100 !important; filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.6)); }

/* Emoji Bubble */
.emoji-bubble { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.9); color: #000; border-radius: 20px; padding: 5px 10px; font-size: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 200; pointer-events: none;}
@keyframes pop { 0% { transform: translateX(-50%) scale(0); } 100% { transform: translateX(-50%) scale(1); } }

/* UI Dashboard */
.ui-panel { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); padding: 20px; z-index: 50; width: 95%; max-width: 400px; text-align: center;}
.pro-title { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 800; margin-bottom: 15px; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,0.5);}

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left;}
.stat-card { background: rgba(0, 0, 0, 0.3); border-radius: 12px; padding: 10px; border: 1px solid rgba(255,255,255,0.05); }
.stat-card h3 { font-size: 14px; margin-bottom: 8px; color: #ff6b81; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 4px; }
.stat-row { font-size: 12px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; color: #ced6e0; }
.stat-row strong { color: #fff; font-family: monospace; font-size: 13px; }

.bar-bg { width: 60px; background: rgba(0,0,0,0.5); height: 8px; border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; transition: width 0.3s ease, background 0.3s; }

/* Modal de Quests */
.glass-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); z-index: 300; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.glass-modal.show { opacity: 1; pointer-events: all; }
.modal-content { background: rgba(47, 53, 66, 0.95); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 30px; text-align: center; max-width: 300px; box-shadow: 0 15px 35px rgba(0,0,0,0.4); transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.glass-modal.show .modal-content { transform: scale(1); }
.modal-content h2 { color: #ffeb3b; font-family: 'Outfit'; font-size: 24px; margin-bottom: 10px; }
.modal-content p { font-size: 15px; color: #dfe4ea; margin-bottom: 20px; line-height: 1.5; }

/* PARTICLES */
.particle { position: absolute; pointer-events: none; border-radius: 50%; z-index: 999; animation: fadeout 1s forwards ease-out; }
@keyframes fadeout { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2) translateY(-80px); opacity: 0; } }

/* DESKTOP */
@media (min-width: 768px) {
    .game-title { font-size: 100px; }
    .start-characters { height: 400px; }
    #start-nicolly { height: 400px; }
    #start-scott { height: 200px; margin-left: -60px; }
    #nicolly img { height: 450px; }
    #scott img { height: 200px; }
    #food img { height: 80px; }
    #toy img { height: 80px; }
    .ui-panel { max-width: 500px; padding: 25px; }
    .pro-title { font-size: 24px; }
    .stat-card { padding: 15px; }
    .stat-card h3 { font-size: 16px; }
    .stat-row { font-size: 14px; margin-bottom: 8px; }
    .stat-row strong { font-size: 15px; }
    .bar-bg { width: 100px; height: 10px; }
}