.tm-battle-hud { position:fixed; z-index:1400; transform-origin:0 0; pointer-events:none; font:14px RiseDialogue,sans-serif; color:#eff5f4; user-select:none; }
.tm-battle-hud * { box-sizing:border-box; }
.tm-battle-stamina{position:absolute;left:24px;top:147px;width:290px;height:44px;background:url('../img/ui/skills/vfx/stamina-frame-v1.png') center/100% 100% no-repeat;font:800 12px RiseDialogue,sans-serif;color:#fff8de;pointer-events:none}
.tm-stamina-track{position:absolute;left:23px;right:16px;top:14px;height:17px;overflow:hidden}
.tm-stamina-track i{display:block;height:100%;background:url('../img/ui/skills/vfx/stamina-fill-v1.png') left center/251px 100% no-repeat}
.tm-battle-stamina>span{position:absolute;left:26px;right:20px;top:14px;line-height:17px;text-align:center;white-space:nowrap;text-shadow:0 1px 3px #201300}
.tm-raster-aim,.tm-raster-channel{position:absolute;left:50%;top:205px;transform:translateX(-50%);width:560px;min-height:110px;padding:30px 44px;background:url('../img/ui/sapphire/panel-v1.png') center/100% 100% no-repeat;font:15px RiseDialogue,sans-serif;color:#fff4d3;pointer-events:auto;text-align:center}
.tm-raster-aim[hidden],.tm-raster-channel[hidden]{display:none}
.tm-raster-aim span{display:block;margin-bottom:8px}
.tm-battle-hud .tm-raster-aim button{border:0;background:url('../img/ui/inventory/learn-button-v1.png') center/100% 100% no-repeat;padding:9px 20px;margin:0 5px;font:700 14px RiseDialogue,sans-serif;min-width:150px}
.tm-raster-channel{width:350px;min-height:0;padding:0;background:none;pointer-events:none;color:#fff4d3;text-shadow:0 1px 3px #102330,0 0 5px #102330}
.tm-raster-aim{color:#c5d8e8}
.tm-raster-channel strong,.tm-raster-channel small{display:block;overflow-wrap:break-word}
.tm-raster-channel small{display:none}
.tm-raster-channel>div{height:20px;margin:8px 0;background:url('../img/ui/skills/vfx/stamina-frame-v1.png') center/100% 100% no-repeat;padding:5px 12px}
.tm-raster-channel i{display:block;height:100%;background:url('../img/ui/skills/vfx/stamina-fill-v1.png') left center/100% 100% no-repeat}
.tm-battle-hud button,.tm-battle-hud select { font:inherit; color:inherit; pointer-events:auto; }
.tm-battle-hud button { border:1px solid #9b89635e; background:#101e2ee8; cursor:pointer; }
.tm-battle-hud button:hover { border-color:#d9c08a; background:#244452ed; }
.tm-battle-hud button:focus { outline:2px solid #89ddd5; outline-offset:2px; }
.tm-battle-hud button:disabled { opacity:.4; cursor:default; }
.tm-battle-portrait { position:absolute; left:24px; top:22px; display:flex; width:362px; padding:10px; border:1px solid #bca77990; border-radius:4px 18px 4px 18px; background:linear-gradient(110deg,#07131ff2,#102b3ce3); box-shadow:0 7px 30px #0007,inset 0 0 0 3px #e3ce8b0c; }
.tm-battle-hud > .tm-battle-portrait { transform:scale(.8); transform-origin:top left; }
.tm-battle-face { width:96px; height:96px; border:1px solid #c1aa76; border-radius:3px 13px 3px 13px; background:radial-gradient(#375765,#11212b); }
.tm-battle-info { flex:1; margin-left:12px; min-width:0; }
.tm-battle-name { font:20px Georgia,serif; color:#f2e7d0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-battle-class { font-size:10px; color:#9fced3; letter-spacing:1px; margin:3px 0 7px; }
.tm-battle-meter { height:14px; position:relative; margin-top:4px; background:#020b13; border:1px solid #688a8c55; overflow:hidden; border-radius:2px; }
.tm-battle-meter i { display:block; height:100%; transition:width .1s; }
.tm-battle-meter span { position:absolute; left:7px; top:0; right:5px; font-size:9px; line-height:12px; text-shadow:0 1px 2px #000; text-align:right; letter-spacing:.7px; }
.tm-battle-meter.hp i { background:linear-gradient(90deg,#23604c,#102b46); }.tm-battle-meter.mp i { background:linear-gradient(90deg,#214677,#102b46); }.tm-battle-meter.tp i { background:linear-gradient(90deg,#64511d,#102b46); }
.tm-battle-location { position:absolute; right:28px; top:30px; text-align:right; text-shadow:0 2px 6px #000; }
.tm-battle-location span { display:block; font-size:9px; letter-spacing:3px; color:#a7cbd5; }.tm-battle-location strong { display:block; margin-top:8px; font:24px Georgia,serif; color:#e0e7db; }
.tm-battle-notice { position:absolute; top:165px; left:350px; right:350px; text-align:center; color:#d2f4ed; font:20px Georgia,serif; text-shadow:0 2px 10px #001921; opacity:0; transition:opacity .2s; }
.tm-battle-notice.error { font:13px 'Segoe UI',sans-serif; color:#ffd0a4; }
.tm-battle-cast { position:absolute; left:475px; bottom:158px; width:330px; display:none; text-align:center; }.tm-battle-cast span { font-size:11px; letter-spacing:1.5px; text-shadow:0 1px 5px #000; }.tm-battle-cast>div { margin-top:6px; height:6px; background:#061622; border:1px solid #d1b57a99; }.tm-battle-cast i { display:block; height:100%; background:#102b46; box-shadow:0 0 10px #42c4c8; }
.tm-battle-bottom { position:absolute; left:120px; right:120px; bottom:14px; padding:10px 16px 8px; background:linear-gradient(#0c1c29ee,#060e18f5); border:1px solid #b1a07290; border-radius:5px; box-shadow:0 5px 24px #0008; }
.tm-battle-bottom { transform:scale(.8); transform-origin:bottom center; }
.tm-battle-toolbar { display:flex; align-items:center; margin-bottom:9px; }.tm-battle-toolbar>span { font-size:10px; color:#a6bac1; flex:1; }.tm-battle-toolbar button { padding:4px 8px; margin-left:8px; border-radius:2px; font-size:10px; color:#ddcea8; }
.tm-battle-skills { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); grid-gap:7px; }
.tm-battle-hud .tm-battle-skill { position:relative; min-width:0; height:79px; padding:5px 3px 3px; border-color:#758c9480; background:linear-gradient(#213c4c,#0b1a29); border-radius:3px; overflow:hidden; }
.tm-battle-skill kbd { position:absolute; left:4px; top:3px; font:11px 'Segoe UI',sans-serif; color:#ead9b4; z-index:2; }.tm-battle-skill canvas { display:block; width:33px; height:33px; margin:0 auto 3px; image-rendering:pixelated; }
.tm-battle-skill-name { display:block; position:relative; z-index:2; font-size:10px; line-height:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.tm-battle-skill small { display:block; position:relative; z-index:2; color:#80bfd2; font-size:8px; margin-top:3px; }
.tm-battle-skill.unavailable canvas { opacity:.35; }.tm-battle-skill.empty { opacity:.5; }.tm-battle-hud .tm-battle-skill.casting { border-color:#9df2d6; box-shadow:inset 0 0 16px #53cdad88,0 0 12px #90db9f66; }
.tm-battle-recovery { position:absolute; top:0; left:0; right:0; height:0; background:#0008; pointer-events:none; }.tm-battle-hint { font-size:9px; color:#e2eaf0; margin-top:7px; text-align:center; letter-spacing:.5px; }
.tm-battle-editor { pointer-events:auto; position:absolute; left:350px; top:170px; width:580px; padding:25px; background:#091926fa; border:1px solid #c4af80; box-shadow:0 12px 80px #000; border-radius:5px; }
.tm-battle-editor h2 { margin:0; font:25px Georgia,serif; color:#ecddbd; }.tm-battle-editor p { color:#a6bac4; font-size:12px; margin-bottom:20px; }.tm-battle-assignment { display:grid; grid-template-columns:1fr 1fr; grid-gap:10px 20px; }.tm-battle-assignment label { display:flex; align-items:center; color:#ddc18c; }.tm-battle-assignment select { min-width:0; width:100%; margin-left:12px; padding:8px; border:1px solid #547079; background:#122b3a; font-size:12px; }.tm-battle-editor-close { margin-top:22px; width:100%; padding:10px; }
.tm-battle-skill.on-cooldown .tm-battle-recovery{display:flex;align-items:center;justify-content:center;color:#fff;font:bold 18px Arial;pointer-events:none;text-shadow:0 1px 3px #000;background:#061321bb}.tm-battle-skill.on-cooldown{cursor:wait}
#tm-battle-hud,#tm-battle-hud *{font-family:RiseDialogue,sans-serif}
/* 20 October: stamina belongs to each actor's card, directly below MP. */
.tm-battle-meter.stamina{background:transparent url('../img/ui/skills/vfx/stamina-frame-v1.png') center/100% 100% no-repeat;border:0}
.tm-battle-meter.stamina i{background:transparent url('../img/ui/skills/vfx/stamina-fill-v1.png') left center/100% 100% no-repeat}
.tm-battle-portrait .tm-battle-meter.tp{display:none}
.tm-battle-portrait{background:transparent url('../img/ui/sapphire/panel-v1.png') center/100% 100% no-repeat;border:0;box-shadow:none;padding:24px 30px;width:390px;font-family:RiseDialogue,sans-serif}
.tm-battle-portrait .tm-battle-name{font-family:RiseDialogue,sans-serif;color:#c5d8e8;font-size:18px}
.tm-battle-portrait .tm-battle-class{color:#c5d8e8}
.tm-battle-hud .tm-npc-party{top:158px}
.tm-battle-location{right:84px}
/* Use the same registered portrait artwork as the town player HUD. */
.tm-battle-portrait{display:block;width:440px;height:128px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:#c5d8e8}
.tm-battle-frame{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden}
.tm-battle-frame img{position:absolute;width:103.85%;height:155.58%;max-width:none;left:-2.57%;top:-23.08%;pointer-events:none}
.tm-battle-portrait .tm-battle-face{position:absolute;left:36px;top:20px;width:83px;height:83px;border:0;border-radius:50%;background:none}
.tm-battle-level{position:absolute;left:52px;top:102px;min-width:53px;padding:3px 7px;text-align:center;border:1px solid #dab74f;border-radius:7px;background:linear-gradient(#102b46,#102b46);color:#f4a29b;font-weight:800;font-size:11px;line-height:13px;z-index:1}
.tm-battle-info{position:absolute;left:147px;top:39px;width:250px;margin:0}
.tm-battle-portrait .tm-battle-name{height:19px;max-width:155px;color:#c5d8e8;font-size:16px;line-height:19px}
.tm-battle-portrait .tm-battle-class{position:absolute;right:0;top:0;max-width:90px;margin:0;color:#e2eaf0;font-size:10px;line-height:19px;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-battle-meter.hp,.tm-battle-meter.mp{height:19px;margin-top:1px;border:0;background:none;overflow:visible}
.tm-battle-meter.hp:before,.tm-battle-meter.mp:before{position:absolute;left:0;top:0;font-size:10px;line-height:12px;font-weight:700}
.tm-battle-meter.hp:before{content:'HP';color:#f4a29b}.tm-battle-meter.mp:before{content:'MP';color:#e2eaf0}
.tm-battle-meter.hp:after,.tm-battle-meter.mp:after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;border:1px solid #c2d5dc;border-radius:8px;background:#102b46}
.tm-battle-meter.hp i,.tm-battle-meter.mp i{position:absolute;left:0;bottom:1px;height:4px;max-width:100%;border-radius:8px;z-index:1}
.tm-battle-meter.hp i{background:#dc897b}.tm-battle-meter.mp i{background:#6bbce3}
.tm-battle-meter.hp span,.tm-battle-meter.mp span{top:0;right:0;color:#e2eaf0;font-size:9px;line-height:12px;text-shadow:none;letter-spacing:0}
.tm-battle-portrait .tm-battle-meter.stamina{height:9px;margin-top:4px}
.tm-battle-meter.stamina span{top:0;font-size:7px;line-height:9px;letter-spacing:0;color:#fff7d0}
.tm-npc-card.tm-battle-portrait .tm-battle-name{padding-right:0}
.tm-npc-card .tm-npc-contract{left:auto;right:44px;bottom:1px;width:auto;max-width:180px;padding:1px 8px;font-size:14px;line-height:14px}
.tm-battle-hud>.tm-battle-portrait{left:0;top:0}
.tm-battle-portrait{width:384px;height:124px}
.tm-battle-frame{z-index:1;overflow:visible}.tm-battle-frame img{left:0;top:0;width:100%;height:100%}
.tm-battle-portrait .tm-battle-face{left:9px;top:8px;width:80px;height:80px;z-index:0}
.tm-battle-portrait .tm-battle-info{left:100px;top:26px;width:257px;z-index:2}
.tm-battle-portrait .tm-battle-name{font-size:14px;color:#fff2d2}.tm-battle-portrait .tm-battle-class{font-size:9px;color:#b9d5df}
.tm-battle-portrait .tm-battle-level{left:23px;top:94px;min-width:53px;height:14px;padding:0;border:0;background:none;line-height:14px;font-size:10px;z-index:2;color:#fff0b9}
/* Keep the large countdown centered while the recovery mask shrinks. */
.tm-battle-skill .tm-battle-cooldown{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:3;color:#fff;font:900 30px/1 RiseDialogue,sans-serif;text-shadow:-1px -1px 2px #071b2d,1px 1px 2px #071b2d,0 2px 5px #000;pointer-events:none}
.tm-battle-skill .tm-battle-cooldown[hidden]{display:none}
.tm-battle-skill .tm-battle-cooldown{top:4px;bottom:auto;height:35px}
.tm-battle-hud .tm-battle-skill.on-cooldown{opacity:1}

/* 2026-11-03 hotbar look (desktop): ready glows, blocked dims, busy/own action stays neutral, cooldown unchanged. */
.tm-battle-hud .tm-battle-skill.unavailable canvas{opacity:1}
.tm-battle-hud .tm-battle-skill.blocked canvas{opacity:.4;filter:grayscale(.65) brightness(.6)}
.tm-battle-hud .tm-battle-skill.blocked .tm-battle-skill-name,.tm-battle-hud .tm-battle-skill.blocked small{opacity:.55}
.tm-battle-hud .tm-battle-skill.ready{border-color:#e7c275;box-shadow:0 0 0 1px #e7c27588,0 0 10px 1px rgba(255,214,110,.55);animation:tm-battle-skill-ready 1.6s ease-in-out infinite}
.tm-battle-hud .tm-battle-skill.ready canvas{filter:brightness(1.12) saturate(1.15)}
@keyframes tm-battle-skill-ready{0%,100%{box-shadow:0 0 0 1px #e7c27566,0 0 6px rgba(255,214,110,.4)}50%{box-shadow:0 0 0 1px #f3d48fcc,0 0 14px 2px rgba(255,224,140,.8)}}
#tm-boss-meter{position:fixed;z-index:1450;box-sizing:border-box;padding:0;pointer-events:none;color:#f7edcf;font:12px/1.25 RiseDialogue,Nunito,sans-serif;background:transparent;text-shadow:0 1px 3px #071321}
#tm-boss-meter[hidden],#tm-boss-meter [hidden]{display:none!important}
#tm-boss-meter header{display:flex;align-items:center;height:15px;text-align:center}#tm-boss-meter .tm-boss-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;color:#ffe2a2}#tm-boss-meter .tm-boss-layers{font-size:12px;font-variant-numeric:tabular-nums;flex:none}
#tm-boss-meter .tm-boss-frame{position:relative;height:28px;background:transparent url('../img/ui/skills/vfx/boss-frame-transparent-v1.png') center/100% 100% no-repeat}
#tm-boss-meter .tm-boss-track{position:absolute;left:8%;right:6%;top:32%;height:37%;overflow:hidden}
#tm-boss-meter .tm-boss-track i{position:absolute;left:0;top:0;height:100%;background:#dba741 url('../img/ui/skills/vfx/stamina-fill-v1.png') left center/100% 100% no-repeat}
#tm-boss-meter .tm-boss-next{width:100%;opacity:1}#tm-boss-meter .tm-boss-labels{position:absolute;left:9%;right:7%;top:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff}#tm-boss-meter .tm-boss-values{min-width:0;white-space:nowrap;font-size:11px;font-variant-numeric:tabular-nums}
#tm-boss-meter .tm-boss-status{display:block;text-align:center;font-size:9px;line-height:11px;white-space:nowrap;color:#dce9ef}