*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;overflow:hidden;background:linear-gradient(135deg,#e8f4fc 0,#b8c3e1 50%,#9bb5d9 100%);font-family:'Segoe UI',sans-serif}.game-container{height:100vh;padding:12px 16px;overflow-y:auto}.main-layout{display:flex;gap:16px;max-width:1100px;margin:0 auto;height:100%}.center-column{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-width:0}.stats-bar{width:100%;z-index:1}.stat-item{margin-bottom:10px;width:200px}.stat-item span{font-size:14px;display:block;margin-bottom:4px}.progress{height:12px;border-radius:6px;background:rgba(255,255,255,.4)}.progress-bar{border-radius:6px;transition:width .5s ease}.portrait-column{display:flex;flex-direction:column;align-items:center}.animal-portrait{position:fixed;left:0;top:0;width:100vw;height:100vh;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#87ceeb 0,#b0e0f6 40%,#98d8aa 100%);box-shadow:0 8px 32px rgba(78,115,223,.25),inset 0 0 60px rgba(255,255,255,.3)}.animal-portrait.bg-forest{background:linear-gradient(160deg,#1b3a1b 0,#2d5016 40%,#3e2723 100%);box-shadow:0 8px 32px rgba(46,125,50,.35),inset 0 0 60px rgba(76,175,80,.2)}.animal-portrait.bg-undersea{background:linear-gradient(160deg,#001a33 0,#036 40%,#004d80 100%);box-shadow:0 8px 32px rgba(0,77,128,.35),inset 0 0 60px rgba(0,191,255,.15)}.portrait-bg-motion{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.5) 0,transparent 40%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.3) 0,transparent 35%);animation:bgShift 8s ease-in-out infinite alternate}@keyframes bgShift{0%{transform:translate(0,0) scale(1);opacity:.8}100%{transform:translate(-8px,6px) scale(1.05);opacity:1}}.animal-portrait::before{content:'';position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,rgba(124,179,66,.35),transparent);pointer-events:none;z-index:0}.animal-portrait.bg-forest::before{background:linear-gradient(to top,rgba(76,175,80,.45),transparent)}.animal-portrait.bg-undersea::before{background:linear-gradient(to top,rgba(210,180,140,.3),transparent)}#animal-portrait canvas{position:fixed;inset:0;width:100vw!important;height:100vh!important;z-index:0}.mood-indicator{font-size:20px;font-weight:700}.day-counter{font-size:14px;opacity:.8}.diamond-counter,.food-counter{font-size:14px;opacity:.9}.diamond-counter{color:#4a6cf7;font-weight:600}.resource-row{display:flex;gap:16px;margin-top:4px}.food-warning{margin-bottom:0}.pet-info-card{position:absolute;background:rgba(255,255,255,.75);bottom:10px;left:35%;text-align:center;min-width:220px}.card{background:rgba(255,255,255,.75)}.action-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:12px}.action-btn{font-weight:600;transition:transform .2s}.action-btn:active{transform:scale(.95)}.action-btn:disabled{opacity:.5;transform:none}#radar-chart{max-width:150px!important;max-height:150px!important}.online-panel{width:220px;flex-shrink:0;background:rgba(255,255,255,.75);border-radius:16px;padding:12px;box-shadow:0 4px 20px rgba(0,0,0,.08);backdrop-filter:blur(8px);max-height:calc(100vh - 24px);overflow-y:auto;z-index:1}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:4px}.panel-header h3{font-size:15px;font-weight:700;color:#333}.connection-badge{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600}.connection-badge.online{background:#d4edda;color:#155724}.connection-badge.offline{background:#f8d7da;color:#721c24}.online-list{list-style:none;padding:0;margin:0}.online-list li{padding:8px 10px;margin-bottom:6px;border-radius:10px;background:rgba(255,255,255,.6);font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:6px}.online-list li.online-empty{justify-content:center;color:#888;font-style:italic;background:0 0}.player-info{display:flex;flex-direction:column;gap:2px;min-width:0}.player-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-pet{font-size:11px;color:#666;text-transform:capitalize}.player-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.fight-btn{font-size:11px;padding:2px 8px;border:none;border-radius:8px;background:#e74c3c;color:#fff;cursor:pointer;font-weight:600;flex-shrink:0}.fight-btn:hover{background:#c0392b}.fight-btn:disabled{background:#ccc;cursor:not-allowed}#battle-camera{position:absolute;inset:0;width:100%;height:100%}#battle-camera canvas{width:100%!important;height:100%!important}.battle-arena{position:absolute;width:100%;height:100%;left:0;top:0;z-index:999;background:linear-gradient(135deg,#1a1a2e 0,#16213e 50%,#0f3460 100%);border-radius:20px;padding:16px;margin-bottom:8px;box-shadow:0 8px 40px rgba(0,0,0,.4);color:#fff}.battle-ui{position:relative;z-index:10;pointer-events:none}.battle-header{text-align:center;font-size:22px;font-weight:800;letter-spacing:2px;margin-bottom:12px;color:gold;text-shadow:0 0 15px rgba(255,215,0,.6)}.battle-pets{position:absolute;top:10vh;left:0;width:100%;transform:translateY(-30%);display:flex;align-items:center;justify-content:center;gap:8px;z-index:10;pointer-events:none}.battle-side{flex:1;text-align:center;padding:10px}.battle-name{font-size:16px;font-weight:600;margin-bottom:8px;text-shadow:0 0 8px rgba(0,0,0,.5)}.battle-hp-bar{height:12px;background:rgba(255,255,255,.2);border-radius:6px;margin:8px auto;overflow:hidden;max-width:200px}.battle-hp-fill{height:100%;background:linear-gradient(90deg,#2ecc71,#27ae60);border-radius:6px;transition:width .4s ease;width:100%}.battle-hp-fill.enemy{background:linear-gradient(90deg,#e74c3c,#c0392b)}.battle-vs{font-size:32px;font-weight:900;color:gold;text-shadow:0 0 25px rgba(255,215,0,.8);padding:0 20px}.battle-log{position:absolute;bottom:20px;left:0;width:100%;font-size:14px;text-align:center;min-height:24px;color:#a8d8ff;z-index:10;pointer-events:none}.battle-log .win{color:gold;font-weight:700;font-size:16px}@media (max-width:768px){.main-layout{flex-direction:column}.online-panel{max-height:140px;position:absolute;left:10px;top:14vh}.stats-bar{position:absolute;left:0}}