/* Vertical top-down adventure: overrides the first prototype's horizontal stage. */
.hud-row{grid-template-columns:1.55fr 1.2fr 1fr .75fr .75fr .75fr 1.2fr}
.main-grid{max-width:1150px;margin:0 auto;grid-template-columns:minmax(0,1fr) 290px}
.game-panel{min-width:0}
.game-view{background:#7edca9;display:flex;justify-content:center;align-items:center;position:relative}
.game-view canvas{display:block;width:min(100%,590px);height:auto;max-height:75vh;aspect-ratio:700/960;object-fit:contain;border-left:3px solid #0e6b67;border-right:3px solid #0e6b67;box-shadow:0 0 35px #0a20294d}
.viewport-label{left:50%;right:auto;transform:translateX(-50%);width:min(95%,560px);justify-content:space-between}
.control-pad{right:calc(50% - min(48%,285px));bottom:16px;gap:6px;background:#033d44d9;z-index:2}
.control-pad button{width:45px;height:45px;font-size:17px}
.control-pad .vertical-pad{display:flex;flex-direction:column;gap:3px;padding:0}
.control-pad .vertical-pad button{height:30px;width:48px}
.spell-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:17px 0 5px}
.spell-choices h3{grid-column:span 2;font-size:16px;color:#bffad0;margin:0 0 3px}
.spell-choices button{min-height:83px;border:2px solid #8fd6b3;border-radius:15px;color:white;background:linear-gradient(130deg,#257a5f,#1b6c83);font-weight:900;font-size:17px;padding:12px}
.spell-choices button:nth-child(3){background:linear-gradient(130deg,#7354bd,#3669ac);border-color:#b1a1ff}
.spell-choices button:disabled{opacity:.48;cursor:not-allowed}
.spell-choices button small{display:block;font-size:10px;margin-top:5px;color:#def8eb}
.timer-info{display:flex;gap:12px;align-items:center;margin:0 0 18px}
.timer-info #battleTimer{min-width:70px;padding:8px 10px;border-radius:12px;background:#1f6672;border:1px solid #65a5a5;text-align:center;color:#fff2bd;font-weight:900;font-size:18px}
.timer-info #battleTimer.danger{background:#8d3e52;color:#ffe7e1;animation:pulse .8s infinite}
.timer-track{flex:1;height:12px;background:#072e3b;border-radius:20px;overflow:hidden;border:1px solid #4f8992}
.timer-track span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#f1c765,#9ceba6);transition:width .1s linear}
.fighter .enemy-health{height:10px}
.hud-stat.hearts-stat strong{font-size:17px}
@keyframes pulse{50%{filter:brightness(1.35)}}
.hit-hero{animation:hero-damaged .45s ease-in-out!important}
.hit-enemy{animation:enemy-damaged .5s ease-in-out!important}
@keyframes hero-damaged{0%,100%{transform:translateX(0);filter:brightness(1)}20%,60%{transform:translateX(-12px);filter:sepia(1) saturate(4) hue-rotate(-30deg)}40%,80%{transform:translateX(11px);filter:brightness(2)}}
@keyframes enemy-damaged{0%,100%{transform:scale(1)}30%,70%{transform:scale(1.18) rotate(12deg);filter:brightness(1.8)}50%{transform:scale(.88) rotate(-15deg)}}
@media(max-width:1190px){.hud-row{grid-template-columns:repeat(4,1fr)}.profile-summary{grid-column:span 2}.main-grid{grid-template-columns:minmax(0,1fr) 255px}}
@media(max-width:990px){.main-grid{grid-template-columns:1fr}.side-panel{display:block}.game-view canvas{max-height:70vh}.control-pad{right:calc(50% - min(48%,270px))}}
@media(max-width:700px){.hud-row{grid-template-columns:repeat(3,1fr)}.profile-summary{grid-column:span 3}.level-stat{grid-column:span 2}.store-btn{grid-column:span 2}.game-view canvas{width:100%;max-height:none;aspect-ratio:700/960;object-fit:fill}.control-pad{right:8px;bottom:9px}.control-pad button{width:39px;height:42px}.control-pad .vertical-pad button{width:43px;height:28px}.timer-info{margin:0 0 13px}.spell-choices button{min-height:70px;font-size:15px}.spell-choices button small{font-size:9px}}

/* Retratos dos cinco heróis e dos vinte inimigos, pintados com o mesmo motor do mapa. */
.hero-portrait{overflow:hidden;position:relative;background:radial-gradient(circle at 37% 22%,#94f6d2,#23838b 78%);border:1px solid #96e9c5;box-shadow:inset 0 -5px 10px #003c5066}
.hero-portrait canvas{display:block;max-width:100%;max-height:100%;object-fit:contain}
.avatars{align-items:stretch;gap:7px}
.avatars button{padding:4px 1px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,#407f8c,#174856);min-height:105px;box-shadow:inset 0 -5px 0 #05253255;transition:transform .16s,border-color .16s}
.avatars button:hover{transform:translateY(-4px)}
.avatars button.selected{background:radial-gradient(circle at 35% 20%,#458e7d,#235d65);box-shadow:0 0 0 2px #fbe2a955,inset 0 -5px 0 #153f49}
.avatars button canvas{display:block;max-width:100%;height:auto!important;object-fit:contain}
.avatars button small{font-size:10px;line-height:1.2;color:#eafff3;font-weight:900;white-space:nowrap;text-shadow:0 1px 3px #08323d}
.avatars button.selected small{color:#ffec9e}
.fight-icon,.fight-icon.enemy-icon{width:123px;height:120px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 83%,#4d9c9777,transparent 73%);filter:none}
.fight-icon canvas{display:block;flex:none}
.fight-icon.enemy-icon{background:radial-gradient(ellipse at 50% 83%,#bc739d77,transparent 73%)}
.fighter strong{max-width:180px;line-height:1.25;min-height:19px}
.viewport-label span{backdrop-filter:blur(4px)}
@media(max-width:560px){.avatars button{min-height:90px}.avatars button small{font-size:9px}.avatars button canvas{width:60px!important;height:60px!important}.fight-icon,.fight-icon.enemy-icon{width:96px;height:96px}.fight-icon canvas{width:100px!important;height:100px!important}.fighter strong{font-size:12px}}