body { background: radial-gradient(circle at 70% -10%,#618878 0,transparent 34%),linear-gradient(160deg,#294e40,#132a22); }
.quest { border: 1px solid rgba(242,210,111,.22); background: linear-gradient(135deg,rgba(242,210,111,.11),rgba(242,210,111,.04)); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.game { border: 1px solid rgba(255,255,255,.11); background: linear-gradient(155deg,rgba(11,39,29,.75),rgba(8,28,22,.65)); box-shadow: 0 28px 70px rgba(5,23,16,.28),inset 0 1px rgba(255,255,255,.05); }
.hud > div { border: 1px solid rgba(255,255,255,.055); background: linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03)); box-shadow: inset 0 1px rgba(255,255,255,.05); }
canvas { border: 7px solid #27483b; outline: 1px solid rgba(244,233,198,.18); box-shadow: 0 15px 30px rgba(0,0,0,.22),inset 0 0 25px rgba(8,27,19,.25); }
.controls { margin-top: 8px; align-items: center; gap: 30px; }
.dpad { width: 166px; gap: 3px; }
.dpad button { width: 54px; aspect-ratio: 1; justify-self: center; border: 1px solid rgba(255,235,174,.42); border-radius: 50%; background: radial-gradient(circle at 35% 25%,#fff4cb,#d7bd76 72%,#a78948); box-shadow: inset 0 2px 1px rgba(255,255,255,.72),inset 0 -5px 8px rgba(91,69,24,.18),0 5px 0 #8d7947,0 9px 16px rgba(0,0,0,.23); }
.dpad button svg { width: 26px; height: 26px; fill: none; stroke: #254738; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px rgba(255,255,255,.6)); }
.dpad button:active { transform: translateY(4px) scale(.96); box-shadow: inset 0 2px 1px rgba(255,255,255,.5),0 1px 0 #8d7947; }
.actions { gap: 10px; margin: 0; }
.actions button { min-width: 128px; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-color: rgba(242,210,111,.25); border-radius: 18px; color: #f7edcd; background: linear-gradient(145deg,rgba(242,210,111,.13),rgba(255,255,255,.035)); box-shadow: inset 0 1px rgba(255,255,255,.09),0 7px 18px rgba(0,0,0,.18); text-align: left; }
.actions button i { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255,228,145,.28); border-radius: 13px; background: radial-gradient(circle at 35% 25%,rgba(255,238,178,.24),rgba(242,210,111,.06)); }
.actions button svg { width: 23px; height: 23px; stroke: #ffe49a; }
.actions button span { margin: 0; font-size: 10px; letter-spacing: .02em; }.actions button b { color: #ffe47a; font-size: 12px; }
.actions button:active { transform: translateY(2px) scale(.98); }
.legend > div { min-height: 88px; gap: 5px; padding: 8px 10px 8px 3px; border: 1px solid rgba(255,255,255,.07); background: linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.025)); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.legend-sprite { width: 68px !important; height: 68px !important; flex: 0 0 auto; border-radius: 0 !important; background: url("assets/forest-atlas.png") no-repeat !important; background-size: 500% auto !important; background-position-y: center !important; filter: drop-shadow(0 7px 5px rgba(0,0,0,.28)); }
.legend-hero { background-position-x: 0 !important; }.legend-shade { background-position-x: 50% !important; }.legend-crystal { background-position-x: 75% !important; }
.legend b { font-size: 10px; }.legend small { max-width: 90px; font-size: 7.5px; line-height: 1.45; }
.crystal-count i { width: 18px; height: 22px; background: url("assets/forest-atlas.png") 75% center / 500% auto no-repeat; clip-path: none; filter: drop-shadow(0 0 5px rgba(255,228,122,.7)); }
@media(max-width:520px){.controls{gap:14px}.dpad{width:146px}.dpad button{width:47px}.actions button{min-width:110px;padding-right:8px}.legend>div{min-height:82px;display:flex;text-align:left}.legend-sprite{width:54px!important;height:62px!important;margin:0!important}.legend small{max-width:72px}}