@font-face{font-family:'Gotham';src:url('fonts/GothamBook.ttf') format('truetype');font-weight:normal;font-style:normal}
@font-face{font-family:'Gotham';src:url('fonts/GothamItalic.ttf') format('truetype');font-weight:normal;font-style:italic}

@keyframes projectileThrow{0%{transform:translate(-50%,-50%) rotate(var(--angle)) translate(0,0);opacity:1}90%{transform:translate(-50%,-50%) rotate(var(--angle)) translate(var(--dist),0);opacity:1}100%{transform:translate(-50%,-50%) rotate(var(--angle)) translate(var(--dist),0);opacity:0}}
@keyframes aggressiveSword{0%{transform:translate(-50%,-50%) rotate(var(--angle)) translate(0,0) scale(1);opacity:1}50%{transform:translate(-50%,-50%) rotate(var(--angle)) translate(calc(var(--dist)*0.5),0) scale(1.5);opacity:1}90%{transform:translate(-50%,-50%) rotate(var(--angle)) translate(var(--dist),0) scale(1);opacity:1}100%{transform:translate(-50%,-50%) rotate(var(--angle)) translate(var(--dist),0);opacity:0}}
@keyframes greenHeal{0%{opacity:0;box-shadow:0 0 0 green}50%{opacity:0.5;box-shadow:0 0 20px green}100%{opacity:0;box-shadow:0 0 0 green}}
@keyframes reflectAttack{0%{transform:translate(-50%,-50%) rotate(calc(var(--angle)+180deg)) translate(0,0);opacity:1}90%{transform:translate(-50%,-50%) rotate(calc(var(--angle)+180deg)) translate(var(--dist),0);opacity:1}100%{transform:translate(-50%,-50%) rotate(calc(var(--angle)+180deg)) translate(var(--dist),0);opacity:0}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes damageFloat{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-30px);opacity:0}}
@keyframes expGain{0%{transform:translateY(0) scale(1);opacity:1}66%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-20px) scale(1);opacity:0}}
@keyframes modalFadeIn{from{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes modalPop{0%{transform:scale(0.9)}70%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes tremble{0%,100%{transform:rotate(0deg)}25%{transform:rotate(1deg)}75%{transform:rotate(-1deg)}}
@keyframes dodgeAnimation{0%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-5px)}100%{transform:translateX(0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.7}}
@keyframes popReward{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes battleShake{0%,100%{transform:translate(0,0)}25%{transform:translate(2px,1px)}50%{transform:translate(-1px,-2px)}75%{transform:translate(1px,-1px)}}
@keyframes stab{0%{transform:rotate(0deg);filter:drop-shadow(0 0 10px rgba(0,255,159,0.5))}20%{transform:rotate(-90deg);filter:drop-shadow(0 0 20px rgba(0,255,159,1))}40%{transform:rotate(0deg);filter:drop-shadow(0 0 10px rgba(0,255,159,0.5))}100%{transform:rotate(0deg);filter:drop-shadow(0 0 10px rgba(0,255,159,0.5))}}
@keyframes loadProgress{0%{width:0}100%{width:100%}}
@keyframes swordSlash{0%{transform:rotate(0deg);opacity:1;filter:drop-shadow(0 0 10px rgba(0,255,159,0.5))}50%{transform:rotate(-180deg);filter:drop-shadow(0 0 30px rgba(0,255,159,1))}100%{transform:rotate(-360deg);opacity:0;filter:drop-shadow(0 0 50px rgba(0,255,159,1))}}
@keyframes fadeInText{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}

:root{
    --cell-size:52px;
    --visible-cells:9;
    --primary-color:#0a192f;
    --secondary-color:#132f4c;
    --accent-color:#64ffda;
    --text-color:#ccd6f6;
    --success-color:#00ff9f;
    --error-color:#ff6b6b;
    --warning-color:#ffd166;
    --info-color:#4dabf7;
    --background-dark:#001e3c;
    --border-color:rgba(100,255,218,0.2);
    --shadow-soft:0 4px 15px rgba(0,0,0,0.3);
    --shadow-hover:0 6px 20px rgba(100,255,218,0.2);
    --left-panel-width:60px;
    --spacing-xs:clamp(2px,0.5vw,4px);
    --spacing-small:clamp(4px,1vw,6px);
    --spacing-medium:clamp(6px,1.5vw,8px);
    --spacing-large:clamp(8px,2vw,10px);
    --font-xs:clamp(8px,2vw,10px);
    --font-small:clamp(10px,2.5vw,12px);
    --font-medium:clamp(12px,3vw,14px);
    --font-large:clamp(14px,3.5vw,16px);
    --radius-small:4px;
    --radius-medium:6px;
    --radius-large:8px;
    --transition-fast:0.2s ease;
    --transition-medium:0.3s ease;
    --transition-slow:0.5s ease-in-out
}

html,body{height:100%;margin:0;padding:0;overflow:hidden;background:var(--primary-color);color:var(--text-color);font-family:'Gotham',sans-serif;font-size:14px;box-sizing:border-box}
.screen-wrapper{display:flex;flex-direction:row;width:100vw;height:100vh;background:var(--background-dark);visibility:hidden;opacity:0;transition:opacity var(--transition-slow);border-radius:16px;box-shadow:var(--shadow-soft)}
.screen-wrapper.visible{visibility:visible;opacity:1}
.screen{width:calc(75vw - 16px - var(--left-panel-width));height:100%;display:flex;flex-direction:column;background:var(--secondary-color);padding:var(--spacing-large);padding-bottom:80px;box-sizing:border-box;overflow:hidden;border-radius:16px;box-shadow:var(--shadow-soft);margin-left:var(--left-panel-width);position:relative}
header{display:flex;align-items:center;justify-content:flex-start;padding:var(--spacing-large);gap:var(--spacing-large);background:linear-gradient(to bottom,var(--secondary-color),darken(var(--secondary-color),10%));border-radius:16px 16px 0 0;box-shadow:0 2px 10px rgba(0,0,0,0.3)}
.health-bar .progress-fill{background:linear-gradient(to right,#00ff9f,#00b894)}
.mana-bar .progress-fill{background:linear-gradient(to right,#4dabf7,#0984e3)}
.stamina-bar .progress-fill{background:linear-gradient(to right,#ffd166,#d4a017)}
.health-bar,.mana-bar,.stamina-bar{display:flex;align-items:center;gap:var(--spacing-small);font-size:var(--font-small);color:var(--accent-color)}
.progress-bar{width:clamp(80px,20vw,100px);height:8px;background:darken(var(--secondary-color),10%);border-radius:var(--radius-small);overflow:hidden;position:relative;box-shadow:inset 0 1px 3px rgba(0,0,0,0.5)}
.progress-fill,.bonus-fill{height:100%;transition:width var(--transition-medium);box-shadow:0 0 5px rgba(100,255,218,0.3)}
.stamina-info{display:flex;align-items:center;gap:var(--spacing-small);width:auto;margin-top:0;flex-wrap:nowrap}
#staminaToAdd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:clamp(60px,15vw,80px);font-size:var(--font-small)}
#lastStaminaUpdateLine,#lastStaminaUpdateLine strong,#lastStaminaUpdateLine span{font-size:var(--font-small)}
.btn--stamina-update{padding:var(--spacing-small) var(--spacing-medium);font-size:var(--font-small);border-radius:var(--radius-medium);background:var(--secondary-color);color:var(--accent-color);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0;box-shadow:var(--shadow-soft)}
.btn--stamina-update:hover{background:lighten(var(--secondary-color),5%);transform:scale(1.05);color:var(--text-color);box-shadow:var(--shadow-hover)}
.btn--stamina-update.blink{animation:blink 2s infinite ease-in-out}
#lastStaminaUpdateLine{font-size:var(--font-small);display:flex;align-items:center;gap:var(--spacing-small)}
.content{flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;width:calc(var(--visible-cells)*var(--cell-size));height:calc(var(--visible-cells)*var(--cell-size));margin:auto;overflow:hidden;margin-top:var(--spacing-large);margin-bottom:80px;border-radius:16px;background:darken(var(--secondary-color),5%);box-shadow:var(--shadow-soft);z-index:60}

.timer-container{
    position:absolute;
    bottom:-100px !important;
    left:50%;
    transform:translateX(-50%);
    z-index:1000;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    background:rgba(0,0,0,0.85);
    border-radius:12px;
    border:1.5px solid rgba(100,255,218,0.4);
    width:max-content;
    max-width:240px;
    box-shadow:0 6px 18px rgba(0,0,0,0.7);
    backdrop-filter:blur(5px);
    font-family:'Gotham',sans-serif
}
.map-cell.hunting .timer-container{display:block}

.timer-text{
    font-size:20px !important;
    color:var(--accent-color);
    background:rgba(0,0,0,0.9);
    padding:8px 18px;
    border-radius:10px;
    box-shadow:0 0 12px rgba(100,255,218,0.4);
    min-width:160px;
    text-align:center;
    font-weight:bold;
    letter-spacing:1px
}
.skill-type{
    font-size:13px !important;
    padding:4px 12px !important;
    background:rgba(0,0,0,0.8);
    border-radius:8px;
    color:#64ffda;
    font-weight:bold
}
.skill-progress-bar{
    width:130px !important;
    height:11px !important;
    background:#222;
    border-radius:8px;
    overflow:hidden;
    box-shadow:inset 0 2px 5px rgba(0,0,0,0.6)
}
.skill-progress-fill{
    height:100%;
    background:linear-gradient(to right,#FFD700,#FFA500);
    transition:width 0.5s ease
}
.skill-level{
    font-size:13px !important;
    color:#fff;
    font-weight:bold
}
.skill-percentage{
    font-size:10px !important;
    color:#fff;
    text-shadow:1px 1px 2px #000;
    font-weight:bold
}
@media (max-width:767px){
    .timer-container{bottom:-90px !important;padding:8px 12px;gap:8px;max-width:210px}
    .timer-text{font-size:18px !important;min-width:140px;padding:6px 14px}
    .skill-type{font-size:12px !important}
    .skill-progress-bar{width:110px !important;height:10px !important}
    .skill-level{font-size:12px !important}
    .skill-percentage{font-size:9px !important}
}

.hunt-map{display:grid;grid-template-columns:repeat(100,var(--cell-size));grid-template-rows:repeat(100,var(--cell-size));gap:0;width:max-content;height:max-content;padding:0;position:absolute;top:0;left:0;transition:transform var(--transition-slow);will-change:transform;cursor:grab}
.hunt-map.grabbing{cursor:grabbing}
.map-cell{position:relative;width:var(--cell-size);height:var(--cell-size);background-repeat:no-repeat;background-size:cover;background-position:center;cursor:default;transition:background-color var(--transition-fast),box-shadow var(--transition-fast);overflow:visible;margin:0;padding:0;box-sizing:border-box}
.map-cell:hover{background-color:rgba(100,255,218,0.1);box-shadow:0 0 10px rgba(100,255,218,0.3)}
.map-cell[data-blocked="true"],.map-cell[data-blocked="true"]:hover{cursor:default}
.map-cell[data-hunt]{background-repeat:no-repeat;background-size:cover;background-position:center;cursor:pointer;transition:background-color var(--transition-fast);overflow:visible}
.cell-player{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:var(--cell-size);height:var(--cell-size);z-index:10;object-fit:contain}
#player{position:absolute;z-index:10;width:calc(var(--cell-size)*1.8)!important;height:calc(var(--cell-size)*1.8)!important;object-fit:contain;pointer-events:none;transition:transform var(--transition-slow);will-change:transform;display:none}
.cell-attack{position:absolute;z-index:15;width:clamp(25px,8vw,35px);height:clamp(25px,8vw,35px);background-size:contain;background-repeat:no-repeat;opacity:1}
.map-cell.hunting{animation:battleShake 0.5s infinite}
.map-cell.hunting .cell-creature{bottom:0;left:50%;transform:translateX(-50%);width:calc(var(--cell-size)*1.8);height:calc(var(--cell-size)*1.8);object-fit:contain;z-index:16}
.cell-creature{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:calc(var(--cell-size)*1.8);height:calc(var(--cell-size)*1.8);object-fit:contain;z-index:15;pointer-events:none}
.cell-object{position:absolute;top:0;left:50%;transform:translateX(-50%);width:auto;height:auto;object-fit:none;z-index:9;pointer-events:none;background-size:auto;background-repeat:no-repeat;background-position:center}
.cell-object.small-image{width:var(--cell-size);height:var(--cell-size);object-fit:contain}
.cell-creature-name{position:absolute;left:calc(50% - (var(--cell-size)*0.9) - clamp(25px,6vw,30px));top:50%;transform:translateY(-50%) rotate(-90deg);font-size:var(--font-small);font-family:'Gotham',sans-serif;font-weight:500;text-align:center;background:rgba(0,0,0,0.7);padding:var(--spacing-small) var(--spacing-medium);border-radius:var(--radius-medium);white-space:nowrap;max-width:calc(var(--cell-size)*1.2);overflow:hidden;text-overflow:ellipsis;z-index:17;pointer-events:none;color:#ffffff;box-shadow:var(--shadow-soft)}
.mmorpg-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(50px,12vw,60px);height:clamp(50px,12vw,60px);padding:var(--spacing-medium);margin:var(--spacing-medium);background:var(--secondary-color);border-radius:var(--radius-large);text-align:center;cursor:pointer;transition:all var(--transition-medium);font-family:'Gotham',sans-serif;font-size:var(--font-small);color:var(--accent-color);box-shadow:var(--shadow-soft);pointer-events:auto!important}
.mmorpg-button img{width:clamp(25px,6vw,30px);height:clamp(25px,6vw,30px);margin-bottom:var(--spacing-small);object-fit:contain}
.mmorpg-button:hover{background:lighten(var(--secondary-color),5%);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.mmorpg-button:active{transform:translateY(0);box-shadow:var(--shadow-soft)}
.mmorpg-button span{display:block;font-size:var(--font-large);margin-bottom:4px}
#installAppButton{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:linear-gradient(135deg,#4dabf7,#0984e3)}
#installAppButton:hover{background:linear-gradient(135deg,#0984e3,#4dabf7);transform:translateY(-2px)}
#installAppButton span:first-child{font-size:clamp(18px,4.5vw,22px)}
#installAppButton span:last-child{font-size:clamp(12px,3vw,14px);font-weight:500}
.logout{display:flex;flex-direction:column;gap:var(--spacing-medium);justify-content:start;align-items:center;position:fixed;top:80px;left:0;height:auto;overflow-y:visible;padding:0;background:transparent;width:var(--left-panel-width);transition:transform var(--transition-medium);z-index:200}
.logout.minimized{transform:translateX(-100%)}
.logout-toggle{position:fixed;top:60px;left:0;background:var(--secondary-color);color:var(--accent-color);border-radius:0 var(--radius-medium) var(--radius-medium) 0;padding:8px 4px;cursor:pointer;z-index:201;font-size:18px;display:block;box-shadow:2px 0 5px rgba(0,0,0,0.3);transition:left var(--transition-medium)}
.logout-toggle:hover{background:lighten(var(--secondary-color),5%);transform:scale(1.05)}
.logout::-webkit-scrollbar{width:5px}
.logout::-webkit-scrollbar-thumb{background:var(--accent-color);border-radius:3px}
.alert{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.9);color:var(--accent-color);padding:clamp(12px,3vw,15px);border-radius:10px;text-align:center;transition:opacity 0.4s ease-in-out,transform 0.4s ease-in-out;opacity:0;z-index:999;font-size:var(--font-large);font-weight:500;max-width:90%;min-width:clamp(250px,65vw,300px);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-medium);box-shadow:var(--shadow-soft)}
.alert.show{opacity:1;transform:translate(-50%,-50%)}
.custom-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:none;z-index:1000;animation:modalFadeIn 0.4s ease-out}
.custom-modal .modal-content{width:clamp(320px,90vw,420px);height:auto;min-height:clamp(280px,65vh,340px);text-align:center;background:var(--secondary-color);color:var(--accent-color);padding:clamp(15px,3.5vw,20px);border-radius:16px;display:flex;flex-direction:column;justify-content:space-between;animation:modalPop 0.3s ease-out;font-size:var(--font-medium);position:relative;overflow-x:hidden;word-break:break-word;box-shadow:var(--shadow-soft)}
.custom-modal .modal-content h2{margin:0 0 var(--spacing-large);font-size:clamp(16px,4vw,18px);color:var(--accent-color)}
.custom-modal .fixed-content{flex-grow:1;overflow:hidden;text-align:center;padding:clamp(10px,2.5vw,12px) var(--spacing-medium)}
.custom-modal .fixed-content p{font-size:var(--font-large);color:#bbb;margin:var(--spacing-large) 0}
.custom-modal .close-button{background:var(--secondary-color);color:var(--accent-color);padding:var(--spacing-medium) clamp(12px,3vw,15px);border-radius:var(--radius-medium);cursor:pointer;font-size:clamp(13px,3.2vw,15px);margin-top:var(--spacing-large);transition:all var(--transition-fast);align-self:flex-end;box-shadow:var(--shadow-soft)}
.custom-modal .close-button:hover{background:lighten(var(--secondary-color),5%);transform:scale(1.05);color:var(--text-color);box-shadow:var(--shadow-hover)}
.custom-modal .modal-button{background:none;border:none;cursor:pointer;transition:transform var(--transition-fast)}
#creatureModal .modal-button#huntButton{align-self:flex-end;margin:0 var(--spacing-large) var(--spacing-large) 0;background:var(--secondary-color);color:var(--accent-color);padding:var(--spacing-medium) clamp(12px,3vw,15px);border-radius:var(--radius-medium);cursor:pointer;font-size:var(--font-large);font-family:'Gotham',sans-serif;transition:all var(--transition-fast);box-shadow:var(--shadow-soft)}
#creatureModal .modal-button#huntButton:hover{background:lighten(var(--secondary-color),5%);color:var(--text-color);transform:scale(1.05);box-shadow:var(--shadow-hover)}
#creatureModal .modal-content{width:clamp(300px,80vw,380px);max-height:90vh;min-height:auto;padding:clamp(10px,2.5vw,12px);display:flex;flex-direction:column}
#creatureModal .fixed-content{display:flex;flex-direction:column;gap:var(--spacing-small);padding:var(--spacing-medium);overflow-y:auto}
#creatureModal .button-container{display:flex;justify-content:flex-end;gap:var(--spacing-medium);margin-top:var(--spacing-medium)}
#creatureModal .modal-button#huntButton,#creatureModal .close-button{margin:0;padding:var(--spacing-medium) clamp(12px,3vw,15px);font-size:var(--font-large);border-radius:var(--radius-medium);background:var(--secondary-color);color:var(--accent-color);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-soft)}
#creatureModal .modal-button#huntButton:hover,#creatureModal .close-button:hover{background:lighten(var(--secondary-color),5%);color:var(--text-color);transform:scale(1.05);box-shadow:var(--shadow-hover)}
#creatureModal .fixed-content p{font-size:var(--font-medium);color:var(--text-color);margin:0;padding:var(--spacing-small) var(--spacing-medium);background:rgba(0,0,0,0.5);border-left:3px solid var(--accent-color);border-radius:var(--radius-medium);line-height:1.3;display:flex;justify-content:space-between;align-items:center}
#creatureModal .fixed-content p strong{color:var(--accent-color);font-weight:500;margin-right:clamp(10px,2.5vw,12px)}
#creatureModal .active-hunters-section{margin:var(--spacing-medium) 0;padding:var(--spacing-medium);background:rgba(0,0,0,0.3);border-radius:var(--radius-large)}
#creatureModal .active-hunters-section h3{font-size:clamp(16px,4vw,18px);color:var(--accent-color);margin:0 0 var(--spacing-medium);font-weight:500;text-align:center}
#creatureModal .hunter-list{display:flex;flex-direction:column;gap:var(--spacing-medium);max-height:clamp(120px,30vh,180px);overflow-y:auto}
#creatureModal .hunter-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-large);background:rgba(255,255,255,0.05);border-radius:var(--radius-medium);font-size:clamp(13px,3.2vw,15px);color:var(--text-color);border-left:3px solid var(--success-color);transition:transform var(--transition-fast)}
#creatureModal .hunter-item span:first-child{font-weight:500;color:var(--accent-color);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#creatureModal .hunter-item span:last-child{color:var(--success-color);font-weight:500;min-width:90px;text-align:right}
.custom-modal .loot-item{position:relative;width:clamp(35px,9vw,45px);height:clamp(35px,9vw,45px);background:rgba(255,255,255,0.05);border-radius:var(--radius-medium);display:flex;align-items:center;justify-content:center;transition:transform var(--transition-fast)}
.custom-modal .loot-item:hover{transform:scale(1.05);background:rgba(255,255,255,0.1)}
.custom-modal .loot-item img{width:100%;height:100%;object-fit:contain;border-radius:var(--radius-medium)}
.custom-modal .loot-item .quantity{position:absolute;bottom:2px;right:2px;background:rgba(0,0,0,0.7);color:var(--accent-color);font-size:clamp(9px,2vw,11px);font-weight:500;padding:2px 4px;border-radius:3px}
.custom-modal .centered-image{display:block;margin:0 auto;width:clamp(50px,13vw,65px);height:auto;transition:transform var(--transition-fast);border-radius:var(--radius-medium)}
.custom-modal .centered-image:hover{transform:scale(1.05)}
.tremble-image{animation:tremble 0.3s infinite}
.custom-modal .duration-button{background:var(--secondary-color);color:var(--accent-color);padding:var(--spacing-medium) clamp(12px,3vw,15px);border-radius:var(--radius-large);margin:var(--spacing-small) 0;width:clamp(180px,55vw,220px);font-size:var(--font-large);font-family:'Gotham',sans-serif;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-soft)}
.custom-modal .duration-button:hover{background:lighten(var(--secondary-color),5%);transform:scale(1.05);color:var(--text-color);box-shadow:var(--shadow-hover)}
.custom-modal .duration-button.selected{background:var(--success-color);color:#fff;transform:scale(1.05);box-shadow:0 4px 10px rgba(0,255,159,0.4)}
.custom-modal .cancel-button,.custom-modal .confirm-button{background:var(--secondary-color);color:var(--accent-color);padding:var(--spacing-medium) clamp(12px,3vw,15px);border-radius:var(--radius-large);margin:var(--spacing-small);width:clamp(90px,25vw,110px);font-size:var(--font-large);font-family:'Gotham',sans-serif;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-soft)}
.custom-modal .cancel-button:hover,.custom-modal .confirm-button:hover{background:lighten(var(--secondary-color),5%);transform:scale(1.05);color:var(--text-color);box-shadow:var(--shadow-hover)}
#huntResultModal.custom-modal .modal-content{
    width:clamp(320px,90vw,420px);
    max-height:90vh;
    overflow-y:auto;
    padding:clamp(12px,3vw,16px);
    background:var(--secondary-color);
    border-radius:16px;
    display:flex;
    flex-direction:column;
    animation:modalPop 0.3s ease-out;
    box-shadow:var(--shadow-soft)
}

#huntResultModal .result-title{
    font-family:'Gotham',sans-serif;
    font-size:clamp(16px,4vw,18px);
    color:var(--accent-color);
    text-shadow:0 0 5px rgba(100,255,218,0.5);
    margin-bottom:clamp(8px,2vw,10px);
    animation:pulse 1.5s infinite
}

#huntResultModal .result-content{
    display:flex;
    flex-direction:column;
    gap:var(--spacing-medium)
}

#huntResultModal .result-summary{
    display:flex;
    flex-direction:column;
    gap:var(--spacing-small);
    background:rgba(0,0,0,0.3);
    padding:clamp(8px,2vw,10px);
    border-radius:var(--radius-large)
}

#huntResultModal .result-stat{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--spacing-medium);
    font-size:clamp(12px,3vw,14px);
    padding:var(--spacing-small);
    background:rgba(255,255,255,0.05);
    border-radius:var(--radius-medium);
    transition:transform var(--transition-fast)
}

#huntResultModal .result-stat:hover{
    transform:translateX(5px)
}

#huntResultModal .stat-icon{
    width:clamp(18px,4.5vw,22px);
    height:clamp(18px,4.5vw,22px);
    object-fit:contain
}

#huntResultModal .death-message{
    color:var(--error-color)
}

#huntResultModal .loot-section{
    margin-top:clamp(8px,2vw,10px);
    padding:var(--spacing-medium);
    background:rgba(0,0,0,0.3);
    border-radius:var(--radius-large)
}

#huntResultModal .loot-section h3{
    font-size:clamp(14px,3.5vw,16px);
    color:var(--accent-color);
    margin-bottom:var(--spacing-small);
    text-align:center
}

#huntResultModal .loot-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(40px,1fr));
    gap:var(--spacing-small);
    justify-content:center
}

#huntResultModal .loot-item{
    position:relative;
    width:clamp(35px,9vw,45px);
    height:clamp(35px,9vw,45px);
    background:rgba(255,255,255,0.05);
    border-radius:var(--radius-medium);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform var(--transition-fast);
    animation:popReward 0.3s ease-out
}

#huntResultModal .loot-item:hover{
    transform:scale(1.1);
    background:rgba(255,255,255,0.1)
}

#huntResultModal .loot-item img{
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:var(--radius-medium)
}

#huntResultModal .loot-item .quantity{
    position:absolute;
    bottom:0;
    right:0;
    background:rgba(0,0,0,0.7);
    color:var(--accent-color);
    font-size:clamp(9px,2.2vw,11px);
    padding:2px 4px;
    border-radius:3px 0 3px 0;
    font-weight:600
}

#huntResultModal .hunt-details-section{
    margin-top:clamp(8px,2vw,10px);
    padding:clamp(8px,2vw,10px);
    background:rgba(0,0,0,0.3);
    border-radius:var(--radius-large)
}
.history-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--secondary-color);padding:clamp(12px,3vw,15px);border-radius:12px;color:var(--accent-color);z-index:1001;max-width:clamp(320px,85vw,380px);width:90%;max-height:75vh;overflow-y:auto;font-family:'Gotham',sans-serif;animation:modalFadeIn 0.4s ease-out;box-shadow:var(--shadow-soft)}
.history-modal-content{display:flex;flex-direction:column;gap:var(--spacing-large)}
.history-modal h2{margin:0 0 clamp(12px,3vw,15px);font-size:clamp(16px,4vw,18px);text-align:center;color:var(--accent-color)}
.history-list{list-style:none;padding:0;margin:0;max-height:clamp(220px,55vh,320px);overflow-y:auto;border-radius:var(--radius-large)}
.history-item{background:rgba(255,255,255,0.05);padding:var(--spacing-large);margin-bottom:var(--spacing-large);border-radius:var(--radius-large);border-left:3px solid transparent;transition:transform var(--transition-fast),box-shadow var(--transition-fast);box-shadow:var(--shadow-soft)}
.history-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.history-item.completed{border-left-color:var(--success-color)}
.history-item.canceled{border-left-color:var(--error-color)}
.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-medium)}
.history-title{font-size:var(--font-large);font-weight:500;color:var(--accent-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.status-badge{padding:var(--spacing-small) var(--spacing-large);border-radius:12px;font-size:clamp(10px,2.5vw,12px);font-weight:500;line-height:1.2}
.status-badge.status-completed{background:rgba(0,255,159,0.2);color:var(--success-color)}
.status-badge.status-canceled{background:rgba(255,107,107,0.2);color:var(--error-color)}
.history-detail{margin:var(--spacing-small) 0;font-size:clamp(13px,3vw,18px)}
.history-detail strong{color:var(--accent-color);margin-right:var(--spacing-xs)}
.loot-list{margin:var(--spacing-medium) 0 0 clamp(12px,3vw,15px);padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center;border-radius:var(--radius-medium)}
.loot-item{font-size:var(--font-medium);color:var(--accent-color);display:inline;align-items:center;gap:var(--spacing-small);background:none;padding:0;margin:0}
.loot-item:not(:last-child)::after{content:",";margin-left:3px;color:var(--accent-color)}
.no-loot{font-size:var(--font-medium);color:#aaa;font-style:italic}
.history-empty{text-align:center;font-size:var(--font-large);color:#aaa;padding:clamp(12px,3vw,15px);background:rgba(255,255,255,0.05);border-radius:var(--radius-large);margin:var(--spacing-large) 0}
.close-history{background:var(--secondary-color);color:var(--accent-color);padding:var(--spacing-medium) clamp(12px,3vw,15px);border-radius:var(--radius-large);cursor:pointer;font-size:var(--font-large);margin-top:clamp(12px,3vw,15px);transition:all var(--transition-fast);align-self:center;font-family:'Gotham',sans-serif;box-shadow:var(--shadow-soft)}
.close-history:hover{background:lighten(var(--secondary-color),5%);transform:scale(1.05);box-shadow:var(--shadow-hover)}
.history-modal::-webkit-scrollbar,.history-list::-webkit-scrollbar{width:5px}
.history-modal::-webkit-scrollbar-track,.history-list::-webkit-scrollbar-track{background:darken(var(--secondary-color),5%);border-radius:10px}
.history-modal::-webkit-scrollbar-thumb,.history-list::-webkit-scrollbar-thumb{background:var(--accent-color);border-radius:10px}
.history-modal::-webkit-scrollbar-thumb:hover,.history-list::-webkit-scrollbar-thumb:hover{background:#fff}
.history-modal,.history-list{scrollbar-width:thin;scrollbar-color:var(--accent-color) darken(var(--secondary-color),5%)}
#bestiaryModal.custom-modal .modal-content {
    width: 460px; /* Largura fixa suficiente para 3 colunas confortáveis */
    max-width: 95vw;
    height: clamp(420px, 80vh, 520px);
    overflow-y: hidden;
    padding: clamp(15px, 3.5vw, 20px);
    background: var(--secondary-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    animation: modalPop 0.3s ease-out;
    font-family: 'Gotham', sans-serif;
    box-sizing: border-box;
    box-shadow: var(--shadow-soft);
    position: relative;
}

#bestiaryModal .modal-content h2 {
    margin: 0 0 var(--spacing-large);
    font-size: clamp(18px, 4.5vw, 20px);
    color: var(--text-color);
    text-align: center;
}

#bestiaryModal .fixed-content {
    flex-grow: 1;
    overflow-y: hidden;
    padding: var(--spacing-large);
    text-align: center;
    display: flex;
    flex-direction: column;
}

#bestiaryModal .fixed-content p {
    font-size: clamp(15px, 3.8vw, 17px);
    color: var(--text-color);
    margin: var(--spacing-medium) 0;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.5);
    padding: var(--spacing-medium);
    border-radius: var(--radius-medium);
}

#bestiaryModal .fixed-content p span#bestiaryPoints {
    color: var(--accent-color);
    font-weight: 600;
}

.bestiary-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-medium);
    padding: var(--spacing-medium);
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-large);
    max-height: calc(100% - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
}

.bestiary-item {
    display: flex;
    flex-direction: column !important;
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-medium);
    background: darken(var(--secondary-color), 5%);
    border-radius: var(--radius-large);
    min-height: 165px;
    transition: all var(--transition-fast);
    position: relative;
    box-shadow: var(--shadow-soft);
}

.bestiary-item:hover {
    transform: scale(1.03);
    background: lighten(var(--secondary-color), 5%);
    box-shadow: var(--shadow-hover);
}

.bestiary-item img {
    width: clamp(55px, 12vw, 65px);
    height: clamp(55px, 12vw, 65px);
    object-fit: contain;
    border-radius: var(--radius-medium);
    margin-bottom: var(--spacing-small);
    background: rgba(0, 0, 0, 0.6);
    padding: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.bestiary-item .creature-name {
    font-size: var(--font-medium); /* Fonte menor para o nome */
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: var(--spacing-xs);
    text-align: center;
    white-space: normal;
    word-break: break-word;
    width: 100%;
    padding: 0 4px;
    box-sizing: border-box;
    line-height: 1.2;
    max-height: 44px;
    overflow: hidden;
}

.bestiary-item .progress {
    font-size: var(--font-small); /* Fonte ainda menor para o progresso */
    color: var(--success-color);
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 10px;
    border-radius: var(--radius-medium);
    margin-bottom: var(--spacing-small);
    min-width: 85px;
    text-align: center;
    white-space: nowrap;
    font-weight: 500;
}

.bestiary-item.completed .progress {
    color: var(--accent-color);
    font-weight: 600;
}

.bestiary-item .complete-button {
    margin-top: auto;
    padding: 6px 12px;
    font-size: var(--font-small);
    background: rgba(0, 255, 159, 0.2);
    color: var(--success-color);
    border: 1px solid var(--success-color);
    border-radius: var(--radius-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 600;
    white-space: nowrap;
}

.bestiary-item .complete-button:hover {
    background: var(--success-color);
    color: #000;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0, 255, 159, 0.5);
}

.bestiary-item.completed .complete-button {
    display: none !important;
}

/* Scrollbar apenas vertical */
.bestiary-list::-webkit-scrollbar {
    width: 7px;
}

.bestiary-list::-webkit-scrollbar-track {
    background: darken(var(--secondary-color), 5%);
    border-radius: 10px;
}

.bestiary-list::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 10px;
}

.bestiary-list::-webkit-scrollbar-thumb:hover {
    background: #fff;
}

.bestiary-list {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) darken(var(--secondary-color), 5%);
}

/* Responsividade mobile */
@media (max-width: 767px) {
    #bestiaryModal.custom-modal .modal-content {
        width: 95vw;
        max-width: 400px;
    }

    .bestiary-list {
        gap: var(--spacing-small);
        padding: var(--spacing-small);
    }

    .bestiary-item {
        min-height: 155px;
        padding: 10px;
    }

    .bestiary-item img {
        width: 55px;
        height: 55px;
    }

    .bestiary-item .creature-name {
        font-size: var(--font-small);
        max-height: 40px;
    }

    .bestiary-item .progress {
        font-size: var(--font-xs);
        padding: 4px 8px;
        min-width: 75px;
    }

    .bestiary-item .complete-button {
        padding: 5px 10px;
        font-size: var(--font-xs);
    }
}

/* Botão X */
#bestiaryModal .close-button {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: none !important;
    border: none !important;
    font-size: 28px !important;
    color: var(--accent-color) !important;
    cursor: pointer !important;
    z-index: 10 !important;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition-fast);
}

#bestiaryModal .close-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: scale(1.1);
}
.dpad{position:absolute;bottom:clamp(10px,2.5vw,15px);right:10px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-areas:". up ." "left . right" ". down .";gap:4px;z-index:10;border-radius:var(--radius-large);background:rgba(0,0,0,0.5);padding:4px}
.dpad-button{width:35px;height:35px;background:rgba(0,0,0,0.8);color:var(--accent-color);border-radius:var(--radius-medium);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),transform var(--transition-fast);box-shadow:var(--shadow-soft)}
.dpad-button:hover{background:rgba(51,51,51,0.8);transform:scale(1.05);box-shadow:var(--shadow-hover)}
.up{grid-area:up}
.left{grid-area:left}
.right{grid-area:right}
.down{grid-area:down}
.sword-attack{background-image:url('https://firebasestorage.googleapis.com/v0/b/to-be-a-1af1b.firebasestorage.app/o/magiclongsword.png?alt=media&token=7eabdaec-3921-4d8e-b299-d6297994cb10');animation:projectileThrow 0.7s linear forwards}
.arrow-attack{background-image:url('https://firebasestorage.googleapis.com/v0/b/to-be-a-1af1b.firebasestorage.app/o/arrow.png?alt=media&token=7ba48245-966e-4697-84d9-9f70ac70f833');animation:projectileThrow 0.7s linear forwards}
.fireball-attack{background-image:url('https://firebasestorage.googleapis.com/v0/b/to-be-a-1af1b.firebasestorage.app/o/fireball.gif?alt=media&token=7f2ae69c-a78f-437f-b43b-cb2f86f59503');animation:projectileThrow 0.7s linear forwards}
.fire-power-attack{animation:projectileThrow 0.7s linear forwards;width:20px;height:20px;border-radius:50%;box-shadow:0 0 20px 10px #ff6b6b;background-size:contain;background-position:center;background-image:url('https://firebasestorage.googleapis.com/v0/b/to-be-a-1af1b.firebasestorage.app/o/fireball.gif?alt=media&token=7f2ae69c-a78f-437f-b43b-cb2f86f59503')}
.ice-power-attack{animation:projectileThrow 0.7s linear forwards;width:20px;height:20px;border-radius:50%;box-shadow:0 0 20px 10px #4dabf7;background-size:contain;background-position:center;background-color:#4dabf7}
.poison-power-attack{animation:projectileThrow 0.7s linear forwards;width:20px;height:20px;border-radius:50%;box-shadow:0 0 20px 10px #00ff9f;background-size:contain;background-position:center;background-color:#00ff9f}
.energy-power-attack{animation:projectileThrow 0.7s linear forwards;width:20px;height:20px;border-radius:50%;box-shadow:0 0 20px 10px #ffd166;background-size:contain;background-position:center;background-color:#ffd166}
.critical-attack{animation:aggressiveSword 0.7s linear forwards;background-image:url('https://firebasestorage.googleapis.com/v0/b/to-be-a-1af1b.firebasestorage.app/o/magiclongsword.png?alt=media&token=7eabdaec-3921-4d8e-b299-d6297994cb10');background-size:contain;background-repeat:no-repeat;background-position:center;transform:rotate(var(--angle))}
.light-heal-effect{animation:greenHeal 0.5s ease-in-out;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,255,159,0.3);pointer-events:none;border-radius:50%}
.reflect-attack{animation:reflectAttack 0.7s linear forwards;background-image:url('https://firebasestorage.googleapis.com/v0/b/to-be-a-1af1b.firebasestorage.app/o/magiclongsword.png?alt=media&token=7eabdaec-3921-4d8e-b299-d6297994cb10');background-size:contain;background-repeat:no-repeat;background-position:center;transform:rotate(calc(var(--angle)+180deg))}
.dodge-effect{animation:dodgeAnimation 0.3s ease-in-out}
.fade-out{animation:fadeOut 0.5s ease forwards}
.damage-text{position:absolute;z-index:20;font-size:clamp(18px,4.5vw,22px);font-weight:900;font-family:'Gotham',sans-serif;text-shadow:2px 2px 5px #000,-2px -2px 5px #000,2px -2px 5px #000,-2px 2px 5px #000;pointer-events:none;animation:damageFloat 1.5s ease forwards}
.damage-text.negative{color:var(--error-color)}
.damage-text.positive{color:var(--success-color)}
.damage-text.positive.exp-gain{animation:expGain 1.5s ease forwards;color:var(--accent-color);font-size:clamp(16px,4vw,18px)}
/* Barra de HP geral - menor e mais fina */
.hp-bar-container {
    position: absolute !important;
    width: calc(var(--cell-size) * 1.0) !important;   /* menor que antes */
    max-width: 52px !important;
    height: 10px !important;
    pointer-events: none !important;
    z-index: 999 !important;                         /* alto, mas não o suficiente sozinho */
}

#player > .hp-bar-container {
    display: none !important;                 /* mantém escondida por padrão */
    top: 8px !important;                      /* ← EM CIMA, logo abaixo da borda superior */
    bottom: auto !important;                  /* ← remove o bottom negativo */
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1001 !important;                 /* ← MUITO ALTO: fica acima da imagem do player e tudo */
    width: calc(var(--cell-size) * 1.0) !important;
    height: 12px !important;                  /* um pouco mais grossa pra ficar visível */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s ease-in-out;
}

/* Mostra só em hunt/training/boss (igual antes) */
.map-cell.hunting #player > .hp-bar-container,
#player.in-boss-fight > .hp-bar-container,
#player.in-hunt-sim > .hp-bar-container {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Barras das criaturas - sem alteração */
.map-cell.hunting .hp-bar-container,
.cell-creature ~ .hp-bar-container {
    top: -28px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 99 !important;
}

/* Estilo interno da barra */
.hp-bar {
    position: relative;
    background: rgba(0,0,0,0.7);
    height: 10px !important;
    border-radius: var(--radius-small);
    overflow: hidden;
    border: 1px solid #000;
}

.hp-bar-fill {
    height: 100%;
    background: linear-gradient(to right, #00ff9f, #00b894);
    transition: width var(--transition-medium);
}

.hp-bar-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px !important;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 2px #000;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

.cell-attack{z-index:15 !important}
#game-chat{width:calc(25vw - 16px);background:linear-gradient(to bottom,rgba(19,47,76,0.95),rgba(10,25,41,0.95));display:flex;flex-direction:column;height:100%;position:relative;z-index:1001;border-radius:0 16px 16px 0;box-shadow:-2px 0 10px rgba(0,0,0,0.5)}
.chat-header{padding:10px;background:linear-gradient(to bottom,#132f4c,#0a192f);display:flex;justify-content:space-between;align-items:center}
.chat-title{font-size:clamp(16px,4vw,18px);color:var(--accent-color);font-weight:600;text-shadow:1px 1px 3px #000}
.chat-body{flex-grow:1;display:flex;flex-direction:column}
.chat-messages{flex-grow:1;overflow-y:auto;padding:10px;padding-bottom:70px;color:#fff;font-size:var(--font-large);max-height:calc(100vh - 120px)}
.chat-input-area{padding:10px;display:flex;gap:6px;background:linear-gradient(to bottom,rgba(19,47,76,0.6),rgba(10,25,41,0.6));position:relative;align-items:center;box-sizing:border-box}
.chat-input-area input{flex-grow:1;padding:10px;background:rgba(0,0,0,0.6);color:var(--text-color);border-radius:var(--radius-medium);font-size:var(--font-large);font-family:'Gotham',sans-serif;box-shadow:inset 0 1px 3px rgba(0,0,0,0.5)}
.btn--chat{padding:10px 14px;background:linear-gradient(to bottom,#132f4c,#0a192f);color:var(--accent-color);font-size:var(--font-large);border-radius:var(--radius-medium);cursor:pointer;transition:all var(--transition-medium);box-shadow:var(--shadow-soft)}
.btn--chat.send-btn{padding:10px 8px;margin-right:6px}
.btn--chat:hover{background:linear-gradient(to bottom,lighten(#132f4c,5%),lighten(#0a192f,5%));color:#fff;box-shadow:var(--shadow-hover)}
.chat-message{margin-bottom:10px;padding:10px;background:rgba(19,47,76,0.7);border-radius:var(--radius-large);display:flex;flex-direction:row;gap:8px;align-items:flex-start;word-wrap:break-word;box-shadow:var(--shadow-soft)}
.chat-message.system{background:transparent;flex-direction:column;align-items:center}
.chat-message.gm{background:rgba(19,47,76,0.7);color:var(--accent-color);font-weight:500}
.message-left{display:flex;flex-direction:column;align-items:flex-start;min-width:110px;max-width:130px;background:rgba(19,47,76,0.7);padding:6px;border-radius:var(--radius-medium)}
.message-right{flex:1;display:flex;flex-direction:column;justify-content:flex-start;background:transparent;padding:8px;border-radius:var(--radius-medium)}
.message-outfit{width:35px;height:35px;object-fit:contain;border-radius:4px;margin-right:6px}
.message-info{display:flex;flex-direction:row;align-items:flex-start;gap:6px}
.message-vocation-level{display:flex;flex-direction:column;align-items:center;justify-content:center}
.message-vocation-icon{width:18px;height:18px;object-fit:contain;margin-top:3px}
.message-name{color:var(--accent-color);font-weight:500;font-size:var(--font-small);line-height:1.3;margin-top:6px;word-break:break-word;overflow-wrap:break-word;max-width:130px;white-space:normal;overflow:visible;text-overflow:clip;max-height:40px}
.message-level{color:#ffd166;font-size:clamp(13px,3.2vw,15px);line-height:1.3}
.message-text{color:#fff;font-size:var(--font-large);word-break:break-word;line-height:1.4}
.chat-message.gm .message-text,.chat-message.gm .message-level{color:#ffffff}
.chat-message.gm .message-name{color:var(--accent-color)}
.chat-message .message-time{font-size:0.8em;color:#999;margin-top:3px}
.custom-scrollbar{scrollbar-width:thin;scrollbar-color:var(--accent-color) rgba(0,0,0,0.4)}
.custom-scrollbar::-webkit-scrollbar{width:6px}
.custom-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,0.5);border-radius:10px}
.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--accent-color);border-radius:10px}
.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#fff}
#statsModal.custom-modal .modal-content{width:clamp(340px,90vw,420px);max-height:80vh;overflow-y:auto;padding:clamp(15px,3.5vw,20px);background:var(--secondary-color);border-radius:12px;display:flex;flex-direction:column;justify-content:space-between;animation:modalPop 0.3s ease-out;box-sizing:border-box;box-shadow:var(--shadow-soft)}
#statsModal .modal-content h2{margin:0 0 var(--spacing-large);font-size:clamp(18px,4.5vw,20px);color:var(--accent-color);text-align:center}
#statsModal .fixed-content{flex-grow:1;overflow-y:auto;padding:clamp(10px,2.5vw,12px);display:flex;flex-direction:column;align-items:center}
#statsModal .stats{display:flex;flex-direction:column;gap:12px;width:100%;font-size:var(--font-medium);color:var(--text-color);border-radius:var(--radius-large)}
#statsModal .stat-line{display:flex;flex-direction:row;justify-content:space-between;align-items:center;background:rgba(100,255,218,0.1);padding:6px 10px;border-radius:var(--radius-medium);transition:background var(--transition-medium);box-shadow:var(--shadow-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#statsModal .stat-line strong{color:var(--accent-color);font-weight:500;margin-right:10px}
#statsModal .stat-line span {
    color: #fff;
    font-weight: 400;
    font-size: 14px;                /* ← número menor */
}
#statsModal .stat-line strong {
    font-size: 14px;                /* ← título também um pouco menor */
}
#statsModal .stat-line:hover{background:rgba(100,255,218,0.15)}
#statsModal .exp-bar,#statsModal .stat-progress-bar,#statsModal .stamina-bar,#statsModal .hp-bar{width:100%;height:12px;margin-top:6px;border-radius:var(--radius-small);background-color:darken(var(--secondary-color),10%);position:relative;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,0.5)}
#statsModal #exp-progress,#statsModal #farming-progress,#statsModal .stat-progress-fill,#statsModal #stamina-progress,#statsModal #hp-progress{height:100%;transition:width var(--transition-medium);position:absolute;top:0;left:0;box-shadow:0 0 5px rgba(100,255,218,0.3)}
#statsModal #exp-progress{background:linear-gradient(to right,#ffd166 0%,#d4a017 50%,#ffd166 100%);background-size:200% 100%}
#statsModal #farming-progress,#statsModal #stamina-progress{background-size:200% 100%}
#statsModal #farming-progress{background:linear-gradient(to right,#00ff9f 0%,#00b894 50%,#00ff9f 100%)}
#statsModal #stamina-progress{background:linear-gradient(to right,#ffd166 0%,#d4a017 50%,#ffd166 100%)}
#statsModal .stat-progress-fill{background:linear-gradient(to right,#ff6b6b,#ee5253)}
#statsModal #hp-progress{background:linear-gradient(to right,#ffd166 0%,#d4a017 50%,#ffd166 100%)}
#statsModal .tooltip{color:var(--accent-color);font-size:var(--font-medium);font-weight:500;z-index:1;white-space:nowrap;pointer-events:none}
#statsModal .tooltip--percentage{top:50%;left:6px;transform:translateY(-50%);position:absolute}
#statsModal .tooltip--fraction{top:50%;right:4px;transform:translateY(-50%);position:absolute}
#statsModal .slots-container{display:flex;justify-content:space-around;gap:clamp(10px,2.5vw,12px);padding:var(--spacing-large);background:url('https://firebasestorage.googleapis.com/v0/b/to-be-a-1af1b.firebasestorage.app/o/citiesfloor.gif?alt=media&token=91504fd-915915eea57229') repeat-x center;background-size:90px 90px;border-radius:var(--radius-large)}
#statsModal .outfit-slot,#statsModal #characterMountSlot{width:90px;height:90px;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;border-radius:var(--radius-medium);box-shadow:var(--shadow-soft)}
#statsModal .outfit-slot img,#statsModal #characterMountSlot img{width:100%;height:100%;object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#statsModal .stamina-update-container{display:flex;align-items:center;gap:12px;border-radius:var(--radius-medium)}
#statsModal #staminaToAdd,#statsModal #lastStaminaUpdateLine,#statsModal #lastStaminaUpdateLine strong,#statsModal #lastStaminaUpdateLine span{font-size:var(--font-medium);white-space:nowrap}
#statsModal .btn--stamina-update{padding:6px 10px;font-size:var(--font-medium);border-radius:var(--radius-medium);background:var(--secondary-color);color:var(--accent-color);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-soft)}
#statsModal .btn--stamina-update:hover{background:lighten(var(--secondary-color),5%);transform:scale(1.05);color:var(--text-color);box-shadow:var(--shadow-hover)}
#statsModal .close-button{background:var(--secondary-color);color:var(--accent-color);padding:var(--spacing-medium) clamp(12px,3vw,15px);border-radius:var(--radius-medium);cursor:pointer;font-size:clamp(13px,3.2vw,15px);margin-top:var(--spacing-large);transition:all var(--transition-fast);align-self:flex-end;box-shadow:var(--shadow-soft)}
#statsModal .close-button:hover{background:lighten(var(--secondary-color),5%);transform:scale(1.05);color:var(--text-color);box-shadow:var(--shadow-hover)}
#statsModal .fixed-content::-webkit-scrollbar{width:7px}
#statsModal .fixed-content::-webkit-scrollbar-track{background:darken(var(--secondary-color),5%);border-radius:10px}
#statsModal .fixed-content::-webkit-scrollbar-thumb{background:var(--accent-color);border-radius:10px}
#statsModal .fixed-content::-webkit-scrollbar-thumb:hover{background:#fff}
#statsModal .fixed-content{scrollbar-width:thin;scrollbar-color:var(--accent-color) darken(var(--secondary-color),5%)}
#chat-toggle{display:none;position:fixed;top:15px;right:15px;background:linear-gradient(to right,darken(var(--secondary-color),5%),var(--secondary-color),darken(var(--secondary-color),5%));border-radius:50%;width:55px;height:55px;align-items:center;justify-content:center;box-shadow:var(--shadow-soft);z-index:1002;cursor:pointer;font-size:26px;color:var(--accent-color);padding:0}
#game-chat.hidden{display:none}
.creature-left{font-size:var(--font-medium);color:var(--accent-color);background:rgba(0,0,0,0.8);padding:6px 10px;border-radius:var(--radius-medium);margin-top:6px;text-align:center;font-family:'Gotham',sans-serif;z-index:5;position:absolute;top:0;left:0;pointer-events:none;box-shadow:var(--shadow-soft)}
.creature-count{position:absolute;right:calc(50% - (var(--cell-size)*0.9) - clamp(25px,6vw,30px));top:50%;transform:translateY(-50%) rotate(90deg);font-size:var(--font-small);font-family:'Gotham',sans-serif;font-weight:500;text-align:center;background:rgba(0,0,0,0.7);padding:var(--spacing-small) var(--spacing-medium);border-radius:var(--radius-medium);white-space:nowrap;max-width:calc(var(--cell-size)*1.2);overflow:hidden;text-overflow:ellipsis;z-index:17;pointer-events:none;color:#ffffff;box-shadow:var(--shadow-soft)}
.training-modal .boss-button{padding:6px 12px;font-size:var(--font-medium);color:var(--accent-color);background:darken(var(--secondary-color),5%);border-radius:var(--radius-medium);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-soft);font-family:'Gotham',sans-serif;margin-top:10px;width:clamp(90px,22vw,100px);text-align:center;touch-action:manipulation}
.training-modal .boss-button:hover{background:lighten(var(--secondary-color),5%);box-shadow:var(--shadow-hover);color:var(--text-color);transform:scale(1.05)}
.training-option{display:flex;align-items:center;justify-content:center;padding:6px 12px;font-size:var(--font-medium);color:var(--accent-color);background:darken(var(--secondary-color),5%);border-radius:var(--radius-medium);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-soft);font-family:'Gotham',sans-serif;margin-top:10px;width:clamp(220px,55vw,260px);text-align:center;touch-action:manipulation}
.training-option span{white-space:nowrap}
.training-option img{width:clamp(25px,6vw,30px);height:clamp(25px,6vw,30px);margin-right:var(--spacing-medium);object-fit:contain}
.training-option:hover{background:lighten(var(--secondary-color),5%);box-shadow:var(--shadow-hover);color:var(--text-color);transform:scale(1.05)}
#trainingTypeModal.custom-modal .modal-content{width:clamp(300px,80vw,360px);min-height:auto;padding:clamp(15px,3.5vw,20px);background:var(--secondary-color);border-radius:12px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow-soft)}
#trainingTypeModal .close-button{background:var(--secondary-color);color:var(--accent-color);padding:var(--spacing-medium) clamp(12px,3vw,15px);border-radius:var(--radius-medium);cursor:pointer;font-size:var(--font-large);margin-top:var(--spacing-large);transition:all var(--transition-fast);align-self:center;box-shadow:var(--shadow-soft);text-align:center;white-space:nowrap;overflow:visible}
#trainingTypeModal .close-button:hover{background:lighten(var(--secondary-color),5%);transform:scale(1.05);color:var(--text-color);box-shadow:var(--shadow-hover)}
#trainingTypeModal .training-option{display:flex;align-items:center;justify-content:center;padding:var(--spacing-large) clamp(12px,3vw,15px);font-size:var(--font-large);color:var(--accent-color);background:darken(var(--secondary-color),5%);border-radius:var(--radius-medium);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-soft);font-family:'Gotham',sans-serif;width:clamp(140px,35vw,160px);text-align:center;white-space:nowrap;overflow:visible;flex-direction:row}
#trainingTypeModal .training-option:hover{background:lighten(var(--secondary-color),5%);transform:scale(1.05);color:var(--text-color);box-shadow:var(--shadow-hover)}
#trainingTypeModal .fixed-content{display:flex;flex-direction:row;justify-content:center;gap:clamp(10px,2.5vw,12px);padding:clamp(10px,2.5vw,12px);flex-wrap:wrap}
.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100vh;background:linear-gradient(135deg,#1a1a1a 0%,#2c3e50 100%);z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:1;transition:opacity var(--transition-medium)}
.loading-overlay.hidden{opacity:0;pointer-events:none}
.loading-content{display:flex;flex-direction:column;align-items:center;z-index:1;margin-top:90px}
.loading-bar{width:clamp(250px,60vw,400px);height:24px;background:rgba(0,0,0,0.7);border-radius:12px;overflow:hidden;box-shadow:0 4px 8px rgba(0,0,0,0.5);margin-top:20px;position:relative}
.loading-bar-fill{height:100%;background:linear-gradient(to right,#00ff9f,#00b894,#00ff9f);width:0;animation:loadProgress 5s linear forwards;border-radius:12px}
.loading-icon{width:80px;height:80px;background-image:url('https://firebasestorage.googleapis.com/v0/b/to-be-a-1af1b.firebasestorage.app/o/magiclongsword.png?alt=media&token=7eabdaec-3921-4d8e-b299-d6297994cb10');background-size:contain;background-repeat:no-repeat;background-position:center;animation:stab 0.8s ease-in-out infinite;transform-origin:bottom right;position:absolute;top:calc(50% - 120px);z-index:2;filter:drop-shadow(0 0 10px rgba(0,255,159,0.5))}
.loading-text{font-family:'Gotham',sans-serif;font-size:clamp(16px,4vw,20px);color:#ffffff;text-shadow:0 0 8px rgba(0,255,159,0.7);letter-spacing:1px;opacity:0;animation:fadeInText 0.5s ease forwards 0.2s;text-align:center}

/* ==================== CORREÇÕES SOLICITADAS ==================== */

/* 1. Botão "i" (informação) no lado esquerdo – não sobrepõe o X */
#trainingTypeModal .info-button,
#creatureModal .info-button,
#huntInfoModal .info-button,
.info-button {
    left: 12px !important;
    right: auto !important;
    top: 12px !important;
}

/* Garante que o X fique sempre à direita */
.custom-modal .close-button,
#creatureModal .close-button,
#trainingTypeModal .close-button {
    right: 12px !important;
    left: auto !important;
    align-self: flex-end !important;
}

/* 2. Footer com largura igual ao conteúdo principal (não invade o chat) */
.footer {
    position: fixed;
    bottom: 0;
    left: var(--left-panel-width);                    /* começa depois do painel esquerdo */
    width: calc(75vw - 16px - var(--left-panel-width)); /* mesma largura do .screen */
    background: var(--secondary-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    gap: var(--spacing-medium);
    z-index: 40;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity var(--transition-slow);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    border-radius: 16px 16px 0 0;
}

/* Mostra o footer quando a tela está visível */
.screen-wrapper.visible + .footer,
.screen-wrapper.visible ~ .footer {
    opacity: 1;
}

/* Em mobile volta a ocupar 100% */
@media (max-width: 767px) {
    .footer {
        left: 0 !important;
        width: 100% !important;
    }
}

/* ==================== RESTO DO CSS (sem alterações) ==================== */

#dailyPlayersModal.custom-modal .modal-content{width:clamp(300px,75vw,360px);max-height:70vh;overflow-y:auto}
#dailyPlayersModal .players-list{display:flex;flex-direction:column;gap:var(--spacing-medium);padding:var(--spacing-large);background:rgba(0,0,0,0.3);border-radius:var(--radius-large);max-height:50vh;overflow-y:auto}
#dailyPlayersModal .player-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-medium);background:rgba(255,255,255,0.05);border-radius:var(--radius-medium);font-size:clamp(13px,3.2vw,15px);color:var(--text-color)}
#dailyPlayersModal .player-item .name{font-weight:500;color:var(--accent-color);flex:1}
#dailyPlayersModal .player-item .level{color:var(--success-color);font-weight:500}
#dailyPlayersModal .players-list::-webkit-scrollbar{width:5px}
#dailyPlayersModal .players-list::-webkit-scrollbar-track{background:darken(var(--secondary-color),5%);border-radius:10px}
#dailyPlayersModal .players-list::-webkit-scrollbar-thumb{background:var(--accent-color);border-radius:10px}
#dailyPlayersModal .players-list::-webkit-scrollbar-thumb:hover{background:#fff}
.proficiency-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--secondary-color);padding:clamp(12px,3vw,15px);border-radius:12px;color:var(--accent-color);z-index:1002;text-align:center;max-width:clamp(250px,75vw,300px);box-shadow:var(--shadow-soft)}
.proficiency-modal h2{margin:0 0 8px;font-size:clamp(15px,4vw,17px);font-family:'Gotham',sans-serif}
.proficiency-list{display:flex;flex-direction:column;gap:var(--spacing-large);padding:clamp(10px,2.5vw,12px);background:rgba(0,0,0,0.3);border-radius:var(--radius-large);max-height:50vh;overflow-y:auto}
.proficiency-item{background:rgba(255,255,255,0.05);padding:clamp(10px,2.5vw,12px);border-radius:var(--radius-large);border-left:3px solid var(--accent-color);transition:transform var(--transition-fast);box-shadow:var(--shadow-soft)}
.proficiency-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.proficiency-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-medium);font-size:var(--font-large);font-weight:500}
.proficiency-progress{font-size:clamp(13px,3.2vw,15px);color:var(--text-color)}
.proficiency-close{background:var(--secondary-color);color:var(--accent-color);padding:var(--spacing-medium) clamp(12px,3vw,15px);border-radius:var(--radius-large);cursor:pointer;font-size:var(--font-large);margin-top:clamp(10px,2.5vw,12px);transition:all var(--transition-fast);align-self:center;box-shadow:var(--shadow-soft)}
.proficiency-close:hover{background:lighten(var(--secondary-color),5%);transform:scale(1.05);box-shadow:var(--shadow-hover)}
.proficiency-modal::-webkit-scrollbar,.proficiency-list::-webkit-scrollbar{width:5px}
.proficiency-modal::-webkit-scrollbar-track,.proficiency-list::-webkit-scrollbar-track{background:darken(var(--secondary-color),5%);border-radius:10px}
.proficiency-modal::-webkit-scrollbar-thumb,.proficiency-list::-webkit-scrollbar-thumb{background:var(--accent-color);border-radius:10px}
.proficiency-modal::-webkit-scrollbar-thumb:hover,.proficiency-list::-webkit-scrollbar-thumb:hover{background:#fff}
#quantityGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;justify-content:center;padding:6px;max-width:fit-content;margin:0 auto;border-radius:var(--radius-large);background:rgba(0,0,0,0.5)}
.quantity-button{padding:4px;font-size:var(--font-medium);color:var(--accent-color);background:darken(var(--secondary-color),5%);border-radius:var(--radius-medium);cursor:pointer;transition:all var(--transition-fast);font-family:'Gotham',sans-serif;width:clamp(35px,9vw,40px);height:clamp(35px,9vw,40px);display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:var(--shadow-soft)}
.quantity-button:disabled{opacity:0.5;cursor:not-allowed}
.quantity-button:hover:not(:disabled){background:lighten(var(--secondary-color),5%);color:var(--text-color);transform:scale(1.05);box-shadow:var(--shadow-hover)}
.quantity-button.selected{background:var(--success-color);color:#fff;transform:scale(1.05);box-shadow:0 4px 10px rgba(0,255,159,0.4)}
.player-head-circle{width:clamp(35px,9vw,45px);height:clamp(35px,9vw,45px);border-radius:50%;object-fit:cover;margin-right:var(--spacing-medium);box-shadow:var(--shadow-soft)}
.hp-mp-container{display:flex;flex-direction:column;gap:var(--spacing-small);flex:1;align-items:flex-start;border-radius:var(--radius-medium);padding:4px}
.stamina-container{display:flex;flex-direction:column;gap:var(--spacing-small);flex:1;align-items:flex-start;border-radius:var(--radius-medium);padding:4px}
.player-info{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:var(--spacing-small);width:clamp(120px,25vw,150px);border-radius:var(--radius-medium);padding:4px}
.player-name-label{font-size:var(--font-small);color:var(--accent-color);margin-top:var(--spacing-small);max-width:clamp(140px,35vw,160px)}
#expBar{width:100%;height:12px;margin-top:6px;border-radius:var(--radius-small);background-color:darken(var(--secondary-color),10%);position:relative;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,0.5)}
#exp-progress{height:100%;background:linear-gradient(to right,#ffd166 0%,#d4a017 50%,#ffd166 100%);background-size:200% 100%;transition:width var(--transition-medium);position:absolute;top:0;left:0;box-shadow:0 0 5px rgba(100,255,218,0.3)}
#exp-tooltip{color:var(--accent-color);font-size:var(--font-medium);font-weight:500;z-index:1;white-space:nowrap;pointer-events:none;top:50%;left:6px;transform:translateY(-50%);position:absolute}
#exp-fraction{color:var(--text-color);font-size:var(--font-medium);font-weight:500;z-index:1;white-space:nowrap;pointer-events:none;top:50%;right:4px;transform:translateY(-50%);position:absolute}
.info-button{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:darken(var(--secondary-color),5%);color:var(--accent-color);font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);box-shadow:var(--shadow-soft)}
.info-button:hover{background:lighten(var(--secondary-color),5%);transform:scale(1.1);box-shadow:var(--shadow-hover)}
.result-title{font-family:'Gotham',sans-serif;font-size:clamp(18px,4.5vw,20px);color:var(--accent-color);text-shadow:0 0 5px rgba(100,255,218,0.5);margin-bottom:clamp(10px,2.5vw,12px);animation:pulse 1.5s infinite}
.result-content{display:flex;flex-direction:column;gap:var(--spacing-large)}
.result-summary{display:flex;flex-direction:column;gap:var(--spacing-medium);background:rgba(0,0,0,0.3);padding:clamp(10px,2.5vw,12px);border-radius:var(--radius-large)}
.result-stat{display:flex;align-items:center;gap:var(--spacing-medium);font-size:clamp(13px,3.2vw,15px);padding:var(--spacing-medium);background:rgba(255,255,255,0.05);border-radius:var(--radius-medium);transition:transform var(--transition-fast)}
.result-stat:hover{transform:translateX(5px)}
.stat-icon{width:clamp(20px,5vw,25px);height:clamp(20px,5vw,25px);object-fit:contain}
.death-message{color:var(--error-color)}
.loot-section{margin-top:clamp(10px,2.5vw,12px);padding:var(--spacing-large);background:rgba(0,0,0,0.3);border-radius:var(--radius-large)}
.loot-section h3{font-size:clamp(15px,3.8vw,17px);color:var(--accent-color);margin-bottom:var(--spacing-medium);text-align:center}
.loot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:var(--spacing-medium);justify-content:center}
.loot-item{position:relative;width:clamp(35px,9vw,45px);height:clamp(35px,9vw,45px);background:rgba(255,255,255,0.05);border-radius:var(--radius-medium);display:flex;align-items:center;justify-content:center;transition:transform var(--transition-fast);animation:popReward 0.3s ease-out}
.loot-item:hover{transform:scale(1.1);background:rgba(255,255,255,0.1)}
.loot-item img{width:100%;height:100%;object-fit:contain;border-radius:var(--radius-medium)}
.loot-item .quantity{position:absolute;bottom:0;right:0;background:rgba(0,0,0,0.7);color:var(--accent-color);font-size:clamp(10px,2.5vw,12px);padding:2px 4px;border-radius:3px 0 3px 0;font-weight:600}
#creatureModal #modalHuntImage{display:none}
.spell-slot,.potion-slot,.dpad-button{user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;touch-action:manipulation!important}
#statsFoodExp,#statsFoodGold,#statsFoodLuck,#statsPremiumExp,#statsPremiumGold{font-size:clamp(10px,2.5vw,12px)}
#cooldownModal .fixed-content{overflow-y:auto;max-height:60vh;padding:8px;background:rgba(0,0,0,0.3);border-radius:var(--radius-large)}
#cooldownModal .cooldown-category{font-size:var(--font-large);color:var(--accent-color);font-weight:600;padding:8px 0;border-bottom:1px solid rgba(100,255,218,0.2);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px}
#cooldownModal .cooldown-item{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,0.05);padding:10px 12px;border-radius:var(--radius-medium);margin-bottom:6px;border-left:3px solid var(--success-color);transition:transform var(--transition-fast),box-shadow var(--transition-fast);box-shadow:var(--shadow-soft)}
#cooldownModal .cooldown-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
#cooldownModal .cooldown-item .name{font-size:clamp(13px,3.2vw,15px);color:var(--text-color);font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cooldownModal .cooldown-item .time{font-size:clamp(13px,3.2vw,15px);color:var(--accent-color);font-weight:600;min-width:80px;text-align:right}
#cooldownModal .close-button{position:sticky;bottom:0;left:0;width:100%;background:var(--secondary-color);border-radius:0 0 var(--radius-large) var(--radius-large);z-index:1;padding:12px;font-size:var(--font-large);font-weight:600;margin-top:10px}
#cooldownModal .fixed-content::-webkit-scrollbar{width:6px}
#cooldownModal .fixed-content::-webkit-scrollbar-track{background:rgba(0,0,0,0.5);border-radius:10px}
#cooldownModal .fixed-content::-webkit-scrollbar-thumb{background:var(--accent-color);border-radius:10px}
#cooldownModal .fixed-content::-webkit-scrollbar-thumb:hover{background:#fff}
#cooldownModal .fixed-content{scrollbar-width:thin;scrollbar-color:var(--accent-color) rgba(0,0,0,0.5)}
.event-message{border:1px solid var(--accent-color);border-radius:var(--radius-medium);padding:4px 8px;background:rgba(0,0,0,0.5);color:var(--text-color);font-size:var(--font-medium);box-shadow:var(--shadow-soft)}
#huntInfoModal.custom-modal .modal-content{width:clamp(300px,80vw,400px);max-height:80vh;overflow:hidden;background:var(--secondary-color);border-radius:12px;box-shadow:var(--shadow-soft)}
#huntInfoModal .fixed-content{max-height:60vh;overflow-y:auto;padding:clamp(10px,2.5vw,12px);text-align:left;color:var(--text-color);font-size:var(--font-large);line-height:1.5}
#huntInfoModal .fixed-content h3{font-size:clamp(16px,4vw,18px);color:var(--accent-color);margin:1em 0 0.5em 0;font-weight:600;border-bottom:1px solid var(--border-color);padding-bottom:0.5em}
#huntInfoModal .fixed-content p{margin:0.5em 0;padding:8px;background:rgba(0,0,0,0.5);border-radius:var(--radius-medium);box-shadow:inset 0 1px 3px rgba(0,0,0,0.2)}
#huntInfoModal .fixed-content ul{list-style-type:disc;padding-left:20px;margin:0.5em 0}
#huntInfoModal .fixed-content li{margin-bottom:0.5em;padding:4px 8px;background:rgba(255,255,255,0.05);border-radius:4px}
#huntInfoModal .close-button{background:var(--secondary-color);color:var(--accent-color);padding:var(--spacing-medium) clamp(12px,3vw,15px);border-radius:var(--radius-medium);cursor:pointer;font-size:var(--font-large);margin-top:var(--spacing-large);transition:all var(--transition-fast);align-self:center;box-shadow:var(--shadow-soft);display:block;visibility:visible}
#huntInfoModal .close-button:hover{background:lighten(var(--secondary-color),5%);transform:scale(1.05);box-shadow:var(--shadow-hover)}
.creature-list-modal .modal-content{width:clamp(320px,85vw,400px);max-height:80vh;overflow-y:hidden;background:var(--secondary-color);border-radius:16px;box-shadow:var(--shadow-soft)}
.creature-list-modal .fixed-content{max-height:60vh;overflow-y:auto;padding:var(--spacing-medium)}
.creature-list{display:flex;flex-direction:column;gap:var(--spacing-medium)}
.creature-item{display:flex;align-items:center;padding:var(--spacing-medium);background:rgba(255,255,255,0.05);border-radius:var(--radius-large);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-soft)}
.creature-item:hover{background:rgba(255,255,255,0.1);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.creature-thumbnail{width:clamp(40px,10vw,50px);height:clamp(40px,10vw,50px);object-fit:contain;border-radius:var(--radius-medium);margin-right:var(--spacing-large);box-shadow:0 0 10px rgba(100,255,218,0.2)}
.creature-info{display:flex;flex-direction:column}
.creature-name{font-size:clamp(14px,3.5vw,16px);color:var(--accent-color);font-weight:500}
.creature-level{font-size:clamp(12px,3vw,14px);color:var(--text-color);opacity:0.8}
.mmorpg-button#inventoryButton{background:var(--secondary-color);color:var(--accent-color);font-size:var(--font-small);box-shadow:var(--shadow-soft)}


/* ===== INVENTORY MODAL - ESTILO ANTIGO ATUALIZADO E RESPONSIVO ===== */
#inventoryModal .inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); /* responsivo principal */
    gap: 6px;
    padding: 50px 30px 40px 30px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
    justify-content: center;
    overflow: visible;
}

#inventoryModal .inventory-slot {
    width: 54px;
    height: 54px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

#inventoryModal .inventory-slot:hover {
    background: rgba(100, 255, 218, 0.1);
    transform: scale(1.03);
    box-shadow: var(--shadow-hover);
    z-index: 20;
}

#inventoryModal .inventory-slot img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

#inventoryModal .item-count {
    position: absolute;
    bottom: 2px;
    right: 2px;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--accent-color);
    font-size: clamp(9px, 2vw, 11px);
    border-radius: 4px;
    z-index: 3;
    font-weight: normal;
}

#inventoryModal .tooltip {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: var(--text-color);
    padding: clamp(6px, 1.5vw, 8px);
    border-radius: 6px;
    font-size: clamp(10px, 2vw, 12px);
    line-height: 1.4;
    z-index: 1000000;
    white-space: pre;
    max-width: 180px;
    word-break: break-word;
    box-shadow: var(--shadow-soft);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#inventoryModal .inventory-slot:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

/* Tooltip da primeira linha (quando não cabe acima) */
#inventoryModal .inventory-grid > .inventory-slot:nth-child(-n+8) .tooltip {
    bottom: auto;
    top: calc(100% + 10px);
}

/* Scrollbar igual ao antigo */
#inventoryModal .fixed-content::-webkit-scrollbar { width: 6px; }
#inventoryModal .fixed-content::-webkit-scrollbar-track { background: darken(var(--secondary-color), 5%); border-radius: 10px; }
#inventoryModal .fixed-content::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 10px; }
#inventoryModal .fixed-content::-webkit-scrollbar-thumb:hover { background: #fff; }

/* ===== MOBILE - RESPONSIVO (não força 8 colunas, adapta à largura do modal) ===== */
@media (max-width: 768px) {
    #inventoryModal .inventory-grid {
        grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); /* cria quantas colunas couberem */
        gap: 6px;
        padding: 60px 12px 12px 12px; /* padding menor para caber melhor */
        justify-content: center;
    }
    #inventoryModal .inventory-slot {
        width: 48px;
        height: 48px;
    }
    #inventoryModal .item-count {
        font-size: clamp(8px, 2vw, 10px);
        padding: 1px 4px;
    }
    #inventoryModal .tooltip {
        font-size: clamp(8px, 1.8vw, 10px);
        padding: clamp(4px, 1vw, 6px);
        max-width: 150px;
    }
}

@media (max-width: 480px) {
    #inventoryModal .inventory-grid {
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); /* ainda mais flexível em telas muito pequenas */
        gap: 6px;
        padding: 50px 8px 8px 8px;
    }
    #inventoryModal .inventory-slot {
        width: 44px;
        height: 44px;
    }
    #inventoryModal .item-count {
        font-size: clamp(7px, 1.8vw, 9px);
        padding: 1px 3px;
    }
    #inventoryModal .tooltip {
        font-size: clamp(7px, 1.4vw, 9px);
        padding: clamp(3px, 0.8vw, 5px);
        max-width: 120px;
    }
}


.cooking-recipe-item{margin:12px 10px;padding:14px;background:rgba(255,255,255,0.05);border-radius:12px;cursor:pointer;border:1px solid #8B4513;transition:all 0.2s ease;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;gap:14px}
.cooking-recipe-item:hover{background:rgba(255,215,0,0.15);transform:translateY(-2px)}
.cooking-recipe-item img{width:64px;height:64px;object-fit:contain;border-radius:10px;border:2px solid #8B4513;flex-shrink:0;background:rgba(0,0,0,0.3)}
.cooking-recipe-item .recipe-info{flex:1;min-width:0}
.cooking-recipe-item .recipe-info strong{color:#FFD700;font-size:16px;display:block;margin-bottom:4px}
.cooking-recipe-item .recipe-info span{font-size:13px;color:#ccc;display:block;margin:2px 0}
.cooking-recipe-item .recipe-info .max-qty{color:#64ffda;font-weight:bold}

.map-cell[data-blocked="true"],.map-cell[data-blocked="true"]:hover,.map-cell[data-hunt],.map-cell[data-hunt]:hover,.map-cell.hunting,.map-cell.hunting:hover{cursor:default}
#craftingModal .modal-content {
    width: clamp(340px, 90vw, 460px);
    max-height: 90vh;
    padding: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* evita qualquer scroll interno inesperado */
}

#craftingModal h2 {
    margin: 0 0 12px 0;
    text-align: center;
    font-size: 18px;
}

/* Layout principal: lado a lado em desktop, coluna em mobile */
.crafting-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    overflow: hidden;
    padding: 8px 0;
}

/* Barra de materiais (menor e mais compacta) */
.crafting-materials {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 90px;
    align-items: center;
}

.crafting-materials h3 {
    margin: 0 0 8px 0;
    font-size: 15px;
    color: #64ffda;
    text-align: center;
}

.material-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    width: 80px;
}

.material-item:hover {
    background: rgba(100,255,218,0.2);
    transform: scale(1.05);
}

.material-item.selected {
    background: rgba(100,255,218,0.3);
    border: 2px solid #64ffda;
    box-shadow: 0 0 10px rgba(100,255,218,0.4);
}

.material-item img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 6px;
}

.material-item span {
    margin-top: 4px;
    font-size: 11px;
    color: #fff;
    text-align: center;
}

/* Slot vazio */
.empty-slot {
    width: 44px;
    height: 44px;
    background: rgba(0,0,0,0.4);
    border: 2px dashed #666;
    border-radius: 6px;
}

/* Área principal: grid + resultado + botão */
.crafting-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex: 1;
}

/* Grid 3x3 compacto (slots menores) */
.crafting-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
    width: 200px;
    height: 200px;
    background: rgba(0,0,0,0.5);
    padding: 12px;
    border-radius: 12px;
    box-sizing: border-box;
}

.craft-cell {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    border: 2px dashed #555;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.craft-cell:hover {
    border-color: #64ffda;
    background: rgba(100,255,218,0.15);
}

.craft-cell img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

/* Preview do resultado (mais compacto) */
.craft-result {
    min-height: 70px;
    width: 100%;
    max-width: 220px;
    padding: 10px;
    background: rgba(0,0,0,0.4);
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.craft-result img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 6px;
}

.craft-result strong {
    color: #64ffda;
    font-size: 15px;
}

.craft-result p {
    color: #888;
    margin: 0;
    font-size: 13px;
}

/* Botão Craft menor */
#craftButton {
    width: 160px;
    padding: 10px;
    font-size: 16px;
}

/* Responsivo mobile: tudo em coluna e ainda menor */
@media (max-width: 767px) {
    #craftingModal .modal-content {
        padding: 12px;
    }

    .crafting-layout {
        flex-direction: column;
        gap: 16px;
    }

    .crafting-materials {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    .material-item {
        padding: 6px;
        width: 70px;
    }

    .material-item img,
    .empty-slot {
        width: 40px;
        height: 40px;
    }

    .material-item span {
        font-size: 10px;
    }

    .crafting-grid {
        width: 180px;
        height: 180px;
        gap: 6px;
        padding: 10px;
    }

    .craft-result {
        min-height: 60px;
        padding: 8px;
    }

    .craft-result img {
        width: 45px;
        height: 45px;
    }

    .craft-result strong {
        font-size: 14px;
    }

    #craftButton {
        width: 140px;
        padding: 10px;
        font-size: 15px;
    }
}


.modal{position:fixed;z-index:999;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;justify-content:center;align-items:center}
.spell-enchanting-modal{background:var(--secondary-color);padding:clamp(15px,3.5vw,20px);border-radius:12px;width:clamp(300px,75vw,400px);text-align:center;color:var(--text-color);min-height:420px;display:flex;flex-direction:column;justify-content:space-between;position:relative;box-shadow:var(--shadow-soft)}
.spell-enchanting-modal h2{color:var(--accent-color);font-size:clamp(16px,4vw,18px);margin-bottom:clamp(10px,2.5vw,12px);font-family:'Gotham',sans-serif}
.spell-select{width:80%;padding:clamp(6px,1.5vw,8px);margin:clamp(6px,1.5vw,8px) auto;border-radius:6px;background:rgba(255,255,255,0.1);color:var(--accent-color);font-size:clamp(12px,3vw,14px);font-family:'Gotham',sans-serif;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.spell-select:focus{outline:none}
.chance-container{display:flex;flex-direction:column;align-items:center;margin:clamp(6px,1.5vw,8px) 0}
.chance-text{color:var(--accent-color);font-size:clamp(14px,3.5vw,16px);font-weight:500;margin:clamp(4px,1vw,6px) 0}
.gem-text{color:var(--text-color);font-size:clamp(12px,3vw,14px);margin:clamp(4px,1vw,6px) 0}
.ritual-container{position:relative;width:240px;height:220px;margin:30px auto;display:flex;justify-content:center;align-items:center}
.spell-slot{width:clamp(45px,11vw,50px);height:clamp(45px,11vw,50px);background:rgba(0,0,0,0.8);border-radius:6px;display:flex;align-items:center;justify-content:center;position:absolute;z-index:2;transition:all 0.2s ease;box-shadow:var(--shadow-soft)}
.spell-slot.slot-0{top:0;left:50%;transform:translateX(-50%)}
.spell-slot.slot-1{bottom:10px;left:0}
.spell-slot.slot-2{bottom:10px;right:0}
.spell-slot.center-slot{top:50%;left:50%;transform:translate(-50%,-50%);z-index:3}
.spell-slot.active{box-shadow:0 0 8px rgba(100,255,218,0.3)}
.spell-slot.filled{background:rgba(100,255,218,0.1)}
.triangle-lines{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.triangle-line{stroke:var(--border-color);stroke-width:4px;fill:none;transition:stroke 0.5s ease}
.triangle-line.active{stroke:var(--accent-color);filter:drop-shadow(0 0 5px rgba(100,255,218,0.7))}
.triangle-line.success{stroke:var(--success-color);filter:drop-shadow(0 0 5px rgba(0,255,159,0.7))}
.triangle-line.active.pulsing{animation:linePulse 1.5s ease-in-out infinite}
.triangle-line.success.pulsing{animation:successPulse 1.5s ease-in-out infinite}
.enchanting-effect{width:100%;height:100%;position:absolute;top:0;left:0;background:url('https://firebasestorage.googleapis.com/v0/b/to-be-a-1af1b.firebasestorage.app/o/enchanting.gif?alt=media') no-repeat center;background-size:cover;z-index:2;opacity:0.8;animation:fadeOut 1s forwards}
.attempt-button{background:var(--secondary-color);padding:clamp(6px,1.5vw,8px);margin:clamp(6px,1.5vw,8px) auto;cursor:pointer;border-radius:6px;box-shadow:var(--shadow-soft);display:flex;justify-content:center;align-items:center;width:48px;height:48px;transition:all 0.2s ease}
.attempt-button img{width:32px;height:32px;object-fit:contain}
.attempt-button:hover:not(:disabled){background:lighten(var(--secondary-color),5%);transform:scale(1.05);box-shadow:var(--shadow-hover)}
.attempt-button:disabled{opacity:0.5;cursor:not-allowed}
.close-button{position:absolute;top:10px;right:10px;background:var(--secondary-color);color:var(--accent-color);font-size:clamp(14px,3.5vw,16px);cursor:pointer;width:24px;height:24px;display:flex;justify-content:center;align-items:center;border-radius:6px;transition:all 0.2s ease;box-shadow:var(--shadow-soft)}
.close-button:hover{background:lighten(var(--secondary-color),5%);transform:scale(1.1);color:var(--text-color);box-shadow:var(--shadow-hover)}
@keyframes gemPulse{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes linePulse{0%{filter:drop-shadow(0 0 5px rgba(100,255,218,0.7))}50%{filter:drop-shadow(0 0 10px rgba(100,255,218,1))}100%{filter:drop-shadow(0 0 5px rgba(100,255,218,0.7))}}
@keyframes successPulse{0%{filter:drop-shadow(0 0 5px rgba(0,255,159,0.7))}50%{filter:drop-shadow(0 0 10px rgba(0,255,159,1))}100%{filter:drop-shadow(0 0 5px rgba(0,255,159,0.7))}}
@keyframes shake{0%{transform:translate(0,0)}25%{transform:translate(5px,0)}50%{transform:translate(-5px,0)}75%{transform:translate(5px,0)}100%{transform:translate(0,0)}}
.spell-slot[style*="animation: shake"]{animation:shake 0.5s ease-in-out}
@keyframes fusionGlow{0%{transform:translate(-50%,-50%) scale(0);opacity:0}50%{transform:translate(-50%,-50%) scale(1.5);opacity:0.8}100%{transform:translate(-50%,-50%) scale(2);opacity:0}}
.fusionGlowEffect{position:absolute;width:60px;height:60px;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(0,255,159,0.8),rgba(0,255,159,0));animation:fusionGlow 0.8s ease-out forwards;pointer-events:none}
.hotkey-options{position:absolute;display:flex;flex-direction:row;gap:var(--spacing-small);background:var(--secondary-color);padding:var(--spacing-small);border-radius:var(--radius-medium);box-shadow:var(--shadow-hover);z-index:1001;border:1px solid var(--border-color);animation:modalPop 0.2s ease-out}
.hotkey-options button{padding:var(--spacing-small) var(--spacing-medium);background:linear-gradient(to bottom,var(--accent-color),darken(var(--accent-color),10%));color:var(--primary-color);border:none;border-radius:var(--radius-small);font-family:'Gotham',sans-serif;font-size:var(--font-small);font-weight:bold;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 2px 5px rgba(0,0,0,0,0.3);text-transform:uppercase;letter-spacing:0.5px}
.hotkey-options button:hover{transform:scale(1.05);background:linear-gradient(to bottom,lighten(var(--accent-color),10%),var(--accent-color));box-shadow:0 4px 10px rgba(100,255,218,0.3)}
.hotkey-options button:active{transform:scale(0.98);box-shadow:inset 0 2px 5px rgba(0,0,0,0.3)}
.hotkey-change{background:linear-gradient(to bottom,#ffd166,#d4a017)!important}
.hotkey-change:hover{background:linear-gradient(to bottom,lighten(#ffd166,10%),#ffd166)!important}
.hotkey-use{background:linear-gradient(to bottom,#00ff9f,#00b894)!important}
.hotkey-use:hover{background:linear-gradient(to bottom,lighten(#00ff9f,10%),#00ff9f)!important}
#fishingBar{background:linear-gradient(90deg,#8B0000,#FFD700,#00FF00,#FFD700,#8B0000);border-radius:12px}
#fishingTarget{background:linear-gradient(180deg,transparent,rgba(0,255,100,0.6));border:3px solid #00ff9f!important;box-shadow:0 0 20px #00ff9f;animation:pulse 1.5s infinite}
#fishingHook{background:linear-gradient(to bottom,#ccc,#fff);border:1px solid #64ffda;box-shadow:0 0 15px #64ffda}
@keyframes pulse{0%,100%{box-shadow:0 0 15px #00ff9f}50%{box-shadow:0 0 30px #00ff9f}}
@keyframes pulseRing{0%,100%{box-shadow:0 0 30px #ffd700,inset 0 0 20px #ffaa00;transform:translate(-50%,-50%) scale(1)}50%{box-shadow:0 0 50px #ffd700,0 0 70px #ffff00,inset 0 0 30px #ffaa00;transform:translate(-50%,-50%) scale(1.08)}}

@media (max-width:767px){.content{width:calc(var(--visible-cells)*var(--cell-size))!important;height:calc(var(--visible-cells)*var(--cell-size))!important;max-width:100vw!important;margin:0 auto!important;overflow:hidden!important;flex-grow:0!important;flex-shrink:0!important;padding-bottom:80px}}
#player{width:calc(var(--cell-size)*1.8)!important;height:calc(var(--cell-size)*1.8)!important}
.mmorpg-button,#dailyPlayersButton{width:50px;height:50px;padding:6px;margin:0;font-size:10px;overflow:hidden;border-radius:var(--radius-large);background:var(--secondary-color);box-shadow:var(--shadow-soft)}
.mmorpg-button img,#dailyPlayersButton img{width:25px;height:25px;margin-bottom:4px}
.mmorpg-button span{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skill-progress-container{display:flex;align-items:center;gap:clamp(8px,2vw,10px);position:relative}
.skill-type{font-size:clamp(13px,3vw,15px)!important;padding:6px 14px!important;background:rgba(0,0,0,0.8);border-radius:8px}
.skill-progress-bar{width:clamp(120px,30vw,140px);height:12px;background:#333;border-radius:var(--radius-small);overflow:hidden;position:relative;box-shadow:inset 0 1px 3px rgba(0,0,0,0.5)}
.skill-progress-fill{height:100%;background:linear-gradient(to right,#FFD700,#FFA500);transition:width var(--transition-medium)}
.skill-level{font-family:'Gotham',sans-serif;font-size:clamp(10px,2.5vw,12px);color:#fff;text-shadow:1px 1px 2px #000;white-space:nowrap}
.skill-current{order:-1;margin-right:var(--spacing-medium)}
.skill-next{margin-left:var(--spacing-medium)}
.skill-percentage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Gotham',sans-serif;font-size:clamp(9px,2.2vw,11px);color:#fff;text-shadow:1px 1px 2px #000;font-weight:500}
@media (max-width:767px){.event-message{max-width:clamp(80px,30vw,100px);padding:var(--spacing-small) var(--spacing-medium)}}
@media (min-width:768px){:root{--cell-size:52px;--visible-cells:7}.content{height:calc(var(--visible-cells)*var(--cell-size))-60px;margin-bottom:90px}.screen{padding:8px;margin-left:var(--left-panel-width);width:calc(75vw-16px-var(--left-panel-width))}.dpad{display:none}.logout{transform:translateX(0)!important}.logout.minimized{transform:translateX(0)!important}.logout-toggle{display:none!important}.footer{left:var(--left-panel-width);width:calc(75vw-16px-var(--left-panel-width));z-index:40}#game-chat.hidden{display:flex!important}#chat-toggle{display:none!important}.chat-input-area{position:relative}.chat-messages{padding-bottom:0}.logout-toggle{font-size:clamp(20px,4vw,24px);padding:clamp(12px,2.5vw,15px) var(--spacing-medium)}.logout:not(.minimized)+.logout-toggle{left:var(--left-panel-width)}.logout:not(.minimized)~.screen{margin-left:var(--left-panel-width)}}
@media (max-width:767px){html,body{overflow:hidden;height:100%;width:100%}.screen-wrapper{flex-direction:column;width:100%;height:100vh;min-height:unset;overflow:hidden}.screen{width:100%;height:100%;min-height:unset;overflow:hidden;margin-left:0!important}.logout{left:0;z-index:200!important;gap:2px;top:100px}.mmorpg-button{margin:2px;padding:4px}#game-chat{width:100%;height:100vh;position:fixed;top:0;left:0;z-index:999;background:rgba(0,0,0,1);display:none}#game-chat.hidden{display:none}#chat-toggle{display:flex}#game-chat.visible{display:flex}.chat-messages{height:calc(100vh-160px);font-size:clamp(13px,3.2vw,15px);padding-bottom:110px}.chat-input-area{position:fixed;bottom:0;left:0;right:0;z-index:1010}.message-left{min-width:80px;max-width:90px}.message-outfit{width:30px;height:30px}.message-name{font-size:clamp(10px,2.5vw,12px);max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-vocation-icon{width:16px;height:16px}.message-level{font-size:clamp(10px,2.5vw,12px)}.message-text{font-size:clamp(12px,3vw,14px)}.spell-grid{position:fixed!important;bottom:0!important;left:0!important;transform:none!important;display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;align-items:flex-start!important;width:100%!important;padding:8px!important;box-sizing:border-box!important;z-index:100!important;overflow-x:auto!important;max-height:100px!important;gap:4px!important}.spell-slot{width:clamp(40px,10vw,50px)!important;height:clamp(40px,10vw,50px)!important;margin:4px!important;flex-shrink:0!important;font-size:clamp(9px,2.2vw,11px)!important;padding:3px!important}.potion-slot{order:-1!important;margin-left:8px!important}.dpad{position:fixed!important;bottom:clamp(80px,20vw,100px)!important;right:15px!important;z-index:205!important;gap:4px!important;padding:4px!important}.dpad-button{width:clamp(35px,9vw,45px)!important;height:clamp(35px,9vw,45px)!important;font-size:clamp(18px,4.5vw,22px)!important}#installAppButton{display:flex!important}.logout-toggle{top:85px;transform:none}}
@media (max-width:400px){.chat-message{padding:6px;gap:5px}.message-left{min-width:70px;max-width:80px}.message-outfit{width:26px;height:26px}.message-name{font-size:clamp(9px,2.2vw,11px);max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-vocation-icon{width:14px;height:14px}.message-level{font-size:clamp(9px,2.2vw,11px)}.message-text{font-size:clamp(11px,2.8vw,13px)}}
@media (max-width:767px){header{padding:var(--spacing-small) var(--spacing-xs);justify-content:flex-start;flex-wrap:wrap}.player-info{width:clamp(90px,22vw,110px);align-items:flex-start}.hp-mp-container{flex:0 1 auto;width:clamp(120px,30vw,140px)}.stamina-container{flex:0 1 auto;width:clamp(120px,30vw,140px)}#staminaToAdd{max-width:clamp(50px,12vw,60px);font-size:clamp(9px,2.2vw,11px)}.btn--stamina-update{padding:var(--spacing-xs) var(--spacing-small);font-size:clamp(9px,2.2vw,11px)}}
@media (max-width:400px){header{padding:var(--spacing-xs) 0;gap:clamp(3px,0.8vw,4px)}.player-info{width:clamp(70px,18vw,90px)}.hp-mp-container{width:clamp(100px,25vw,120px)}.stamina-container{width:clamp(100px,25vw,120px)}#staminaToAdd{max-width:clamp(40px,10vw,50px);font-size:clamp(8px,2vw,10px)}.btn--stamina-update{padding:var(--spacing-xs) var(--spacing-small);font-size:clamp(8px,2vw,10px)}}
.content{position:relative;padding-bottom:60px}


@keyframes floatUpAndFade {
    0% { transform: translate(-50%, -50%); opacity: 1; }
    60% { transform: translate(-50%, -80%); opacity: 1; }   /* Fica legível por mais tempo */
    100% { transform: translate(-50%, -140%); opacity: 0; }
}


.boss-attack-effect {
    position: absolute;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 25;
    pointer-events: none;
    animation: projectileThrow 0.8s linear forwards;
    transform-origin: center;
}

/* Variantes visuais do contra-ataque */
.boss-attack-sword {
    background-image: url('https://firebasestorage.googleapis.com/v0/b/to-be-a-1af1b.firebasestorage.app/o/magiclongsword.png?alt=media&token=7eabdaec-3921-4d8e-b299-d6297994cb10');
}

.boss-attack-critical {
    background-image: url('https://firebasestorage.googleapis.com/v0/b/to-be-a-1af1b.firebasestorage.app/o/magiclongsword.png?alt=media&token=7eabdaec-3921-4d8e-b299-d6297994cb10');
    animation: aggressiveSword 0.9s linear forwards;
}

.boss-attack-fire {
    background-image: url('https://firebasestorage.googleapis.com/v0/b/to-be-a-1af1b.firebasestorage.app/o/fireball.gif?alt=media&token=7f2ae69c-a78f-437f-b43b-cb2f86f59503');
}

/* 3. CSS para manter barra visível no boss fight (adicione) */
#player.in-boss-fight > .hp-bar-container {
    opacity: 1 !important;
    transition: none !important;
}

#player.dead {
    opacity: 0.3;
    animation: blink 1s infinite;
}

.tremble-image {
  animation: tremble 0.6s ease;  /* Apenas shake, sem opacity */
}

@keyframes tremble {
  0% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

.damage-text {
  background: transparent !important;  /* Garante sem fundo sólido */
  z-index: 1001;  /* Acima do player (z=10), mas sem cobrir visualmente */
}


/* Clip overflow do player para não vazar para cells adjacentes */
#player {

    z-index: 10 !important;       /* Garante que fique acima, mas sem interferir em cursor */
    pointer-events: none !important;  /* Já existe, mas reforça */
}

/* Cursor default no mapa inteiro (remove o 'grab' que causa o indicador) */
.hunt-map {
    cursor: default !important;   /* Flecha normal em todo o mapa */
}

/* Aplica pointer apenas no hover dos slots/cells clicáveis */
.map-cell:hover {
    cursor: pointer !important;   /* Muda para mão apenas no hover válido */
}

/* Indicador simples PVP no header */
#pvpHeaderStatus {
    margin-left: 8px;              /* menos espaço lateral */
    font-size: 13px;               /* ← diminui o tamanho (era 14px ou maior) */
    font-weight: 600;              /* um pouco mais fino que bold */
    padding: 3px 8px;              /* padding menor */
    border-radius: 6px;
    background: rgba(0,0,0,0.5);
    line-height: 1.2;
    white-space: nowrap;
}

#pvpHeaderStatus.on {
    display: inline;
    color: #ff0000;
}

#pvpHeaderStatus.off {
    display: inline;
    color: #888888;
}

/* Modal custom de confirmação PVP */
#pvpConfirmModal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

#pvpConfirmModal .modal-content {
    width: 90%;
    max-width: 380px;
    background: var(--secondary-color);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow-soft);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

#pvpConfirmModal h2 {
    color: var(--accent-color);
    margin-bottom: 16px;
    font-size: 18px;
}

#pvpConfirmModal p {
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.4;
    white-space: pre-line;
}

#pvpConfirmModal .button-row {
    display: flex;
    gap: 16px;
    justify-content: center;
}

#pvpConfirmModal button {
    padding: 10px 24px;
    border-radius: 12px;
    font-size: 15px;
    cursor: pointer;
    flex: 1;
    font-weight: bold;
}

#pvpConfirmModal .confirm-btn {
    background: #00ff9f;
    color: #000;
}

#pvpConfirmModal .cancel-btn {
    background: #444;
    color: #fff;
}

/* Responsividade mobile */
@media (max-width: 767px) {
    header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px;
    }
    #pvpHeaderStatus {
        font-size: 11px;
        margin-left: 6px;
        padding: 2px 6px;
    }
    
    .player-info {
        flex-wrap: nowrap;
        gap: 6px;
    }
}


.proficiency-item {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.05);
    padding: 12px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.proficiency-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(100,255,218,0.2);
}

.proficiency-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.proficiency-item-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(0,0,0,0.5);
    padding: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.proficiency-info {
    display: flex;
    flex-direction: column;
}

.weapon-name {
    font-size: 16px;
    font-weight: bold;
    color: #64ffda;
}

.weapon-level {
    font-size: 13px;
    color: #aaa;
}

.progress-bar-container {
    position: relative;
    margin-top: 6px;
}


/* Barra de HP do player acima das criaturas durante hunt/boss */
#player.in-hunt-sim,
#player.in-boss-fight {
    z-index: 50 !important; /* maior que 16 das criaturas */
}

/* Garante que a barra de HP continue visível e no topo */
#player.in-hunt-sim > .hp-bar-container,
#player.in-boss-fight > .hp-bar-container {
    z-index: 1001 !important;
    position: relative; /* reforça o posicionamento */
}

.creature-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    align-self: center;
}

.status-recommended {
    background: rgba(0, 255, 100, 0.2);
    color: #00ff9f;
    border: 1px solid #00ff9f;
}

.status-risky {
    background: rgba(255, 255, 0, 0.2);
    color: #ffff66;
    border: 1px solid #ffff66;
}

.status-dangerous {
    background: rgba(255, 0, 0, 0.2);
    color: #ff6b6b;
    border: 1px solid #ff6b6b;
}