/* Compact, legible RPG panels, with the artwork left visible beneath them. */
.hud{padding:16px;font-family:Tahoma,Verdana,sans-serif;color:#eee6cd}
.health-block,.timer-panel,.kill-block,.mini-wrap{background:linear-gradient(#383a34f5,#202720f5);border:2px solid #746b50;box-shadow:inset 0 0 0 1px #141b16,0 3px 0 #121b1799;border-radius:2px}
.health-block{display:flex;align-items:center;gap:10px;width:290px;padding:9px 11px 9px 8px}
.portrait-frame{width:49px;height:65px;flex-shrink:0;border:1px solid #706c50;background:radial-gradient(ellipse at bottom,#526140,#202a21);box-shadow:inset 0 0 8px #101a14}
.portrait{position:static;width:47px;height:63px;object-fit:contain;display:block}
.player-status{flex:1;min-width:0}
.eyebrow{font:700 10px Tahoma,Verdana,sans-serif;letter-spacing:.2px;text-shadow:1px 1px #0c120e}
.eyebrow span{color:#ddc886;font-size:10px}
.vital-line{display:flex;align-items:center;gap:5px;margin-top:10px}
.vital-line>span{font-size:8px;color:#b7b9a9;width:20px}
.health{position:relative;flex:1;height:15px;margin:0;border:1px solid #111b16;background:#101812;box-shadow:0 1px #626452}
.health i{background:linear-gradient(#cd6251,#a6322f 48%,#802720);box-shadow:inset 0 1px #e37c66}
.health strong{position:absolute;inset:0;display:grid;place-items:center;font:700 9px Tahoma,Verdana,sans-serif;color:#fff1df;text-shadow:1px 1px #321812}
.experience-line{margin-top:7px}
.xp{position:relative;inset:auto;flex:1;height:7px;border:1px solid #111a15;background:#111a16;box-shadow:0 1px #5c6150}
.xp i{background:linear-gradient(#78a9c4,#426b9e)}
.experience-line small{font-size:8px;color:#bfcbc7;min-width:28px;text-align:right}
.timer-panel{position:absolute;top:16px;left:50%;transform:translateX(-50%);padding:7px 19px 8px;text-align:center}
.timer-panel>span{font-size:8px;letter-spacing:1px;color:#bdc2ad}
.timer{padding:2px 0 0;background:none;border:0;font:700 29px 'Pixelify Sans',monospace;line-height:1;text-shadow:2px 2px #101812}
.kill-block{min-width:172px;padding:10px 14px 9px}
.kill-block .eyebrow{font-size:8px;letter-spacing:.7px;color:#bbc2af}
.kill-block strong{font:700 24px 'Pixelify Sans',monospace;margin-top:3px;color:#e3cf90}
.zone-name{top:86px;font:10px Tahoma,Verdana,sans-serif;letter-spacing:1px;background:#20291dd9;border-color:#7c775057;padding:6px 14px;color:#d9dbc5}
.mini-wrap{right:16px;top:97px;padding:7px;width:186px}
.map-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:6px;font:9px Tahoma,Verdana,sans-serif;color:#bdc7ad}
.map-heading b{font:700 8px Tahoma,Verdana,sans-serif;letter-spacing:.4px;color:#e0dcc6}
.map-heading>div{display:flex;gap:3px}
.map-heading button{pointer-events:auto;border:1px solid #6c725b;background:#20271e;color:#e5dbc2;width:16px;height:16px;padding:0;font:13px monospace;line-height:12px}
.map-heading button:hover{background:#5b6045}
.mini-wrap canvas{width:168px;height:126px;border:1px solid #151d14}
.map-legend{display:flex;justify-content:space-between;margin-top:6px;font-size:7px;letter-spacing:.3px;color:#dfd9bf}
.map-legend span:last-child{color:#dfbb62}
.skillbar{left:16px;bottom:45px;gap:5px}
.skill-slot{width:37px;height:37px;border:2px solid #7b765b;background:linear-gradient(#343b2deb,#1c241deb);box-shadow:inset 0 0 0 1px #141b14,0 2px #10170f99}
.shop-trigger{right:16px;bottom:45px;border:2px solid #8b7c50;background:linear-gradient(#494a32f5,#282f23f5);box-shadow:inset 0 0 0 1px #161e14;color:#e8cd7e;min-height:37px;padding:6px 11px}
.shop-trigger small{color:#e0dcc0;font-size:9px}
.hud-bottom{left:16px;right:16px;bottom:17px;font:9px Tahoma,Verdana,sans-serif;color:#e3e1cb;text-shadow:1px 1px #10170e}
#toast{top:120px;font:11px Tahoma,Verdana,sans-serif;max-width:calc(100% - 32px);white-space:normal;text-align:center;background:#222b20ed;border-color:#8a805a;color:#eee0b2;padding:10px 14px}
@media(max-width:760px){
 .hud{padding:10px}.health-block{width:213px;padding:7px;gap:7px}.portrait-frame{width:36px;height:53px}.portrait{width:34px;height:51px}.eyebrow,.eyebrow b,.eyebrow span{font-size:8px}.vital-line{margin-top:8px;gap:3px}.vital-line>span{font-size:7px;width:17px}.health{height:13px}.health strong{font-size:8px}.experience-line{margin-top:6px}.experience-line small{font-size:7px;min-width:22px}
 .timer-panel{left:auto;right:10px;top:10px;transform:none;padding:8px 10px;width:94px}.timer-panel>span{font-size:6px;letter-spacing:.4px}.timer{font-size:25px;padding-top:4px}
 .kill-block{position:absolute;right:10px;top:77px;min-width:94px;width:94px;padding:5px 7px;display:flex;align-items:center;justify-content:space-between;gap:3px}.kill-block .eyebrow{font-size:6px;letter-spacing:0;max-width:53px;text-align:left}.kill-block strong{font-size:18px;margin:0}
 .zone-name{top:93px;left:10px;transform:none;font-size:8px;letter-spacing:.3px;padding:5px 7px;max-width:210px;white-space:normal}
 .mini-wrap{top:119px;right:10px;width:117px;padding:5px}.mini-wrap canvas{width:103px;height:77px}.map-heading{font-size:7px;gap:2px;margin-bottom:4px}.map-heading b{display:inline;font-size:6px;letter-spacing:0}.map-heading button{width:13px;height:13px;font-size:11px;line-height:10px}.map-legend{font-size:5px;letter-spacing:0;margin-top:4px}
 .skillbar{left:10px;bottom:44px;max-width:180px;gap:3px}.skill-slot{width:27px;height:27px}.skill-slot img{width:22px;height:22px}.shop-trigger{right:10px;bottom:44px;padding:6px;gap:5px;min-height:31px}.shop-trigger small{font-size:7px}.hud-bottom{left:10px;right:10px;bottom:17px;font-size:7px}#toast{top:260px;font-size:10px}
}
@media(max-width:360px){.health-block{width:184px;gap:5px;padding:6px}.portrait-frame{width:30px}.portrait{width:28px}.timer-panel{width:78px;padding:8px 5px}.timer{font-size:23px}.eyebrow,.eyebrow b,.eyebrow span{font-size:7px}}