.mode-combat .workbench { padding: 16px; }
.combat-shell { flex: 1; min-height: 360px; border-radius: 12px; background: #b8bcc1; overflow: hidden; }
.combat-host { position: absolute; inset: 0; }
.combat-canvas { display: block; width: 100%; height: 100%; outline: none; cursor: crosshair; touch-action: none; }
.combat-hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif; color: #fff; }
.combat-loading { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(24,24,24,.72); backdrop-filter: blur(6px); }
.combat-loading[hidden] { display: none; }
.combat-loading-card { display: grid; gap: 10px; width: min(320px, 80%); padding: 20px; border: 1px solid #3a3a3a; border-radius: 12px; background: #151515; color: #ddd; font-size: 12px; }
.combat-loading-card strong { font-size: 14px; color: #fff; }
.combat-progress { height: 4px; border-radius: 2px; background: #2c2c2c; overflow: hidden; }
.combat-progress i { display: block; height: 100%; width: 0; background: #d9d9d9; transition: width .2s; }
.combat-panel { display: grid; gap: 12px; padding: 0 10px; }
.combat-panel .button { justify-self: start; }
.combat-toggles { display: grid; gap: 6px; }
.combat-toggle { display: flex; align-items: center; gap: 8px; min-height: 28px; color: #bdbdbd; font-size: 12px; }
.combat-toggle input { accent-color: #cfcfcf; }
.combat-keys { display: grid; grid-template-columns: 92px 1fr; gap: 6px 10px; margin: 0; font-size: 12px; }
.combat-keys dt { color: #e2e2e2; font-weight: 600; }
.combat-keys dd { margin: 0; color: #9a9a9a; }

/* HUD: player frame, weapon diamond, minimap, enemy bars and numbers. */
.hud-player { position: absolute; left: 12px; top: 10px; display: flex; align-items: flex-start; }
.hud-portrait { position: relative; width: 62px; height: 62px; transform: rotate(45deg); margin: 9px; border: 2px solid #c9a44a; background: #2a2420; overflow: hidden; box-shadow: 0 0 0 2px #1a1714; }
.hud-portrait canvas, .hud-portrait img { position: absolute; left: -12px; top: -12px; width: 86px; height: 86px; transform: rotate(-45deg); }
.hud-stats { margin: 14px 0 0 -6px; }
.hud-level { display: inline-block; padding: 1px 10px 1px 14px; background: #121212; color: #f1f1f1; font: 700 13px/18px 'Courier New', monospace; letter-spacing: .04em; }
.hud-hp { position: relative; width: 230px; height: 22px; margin-top: 2px; border: 2px solid #c9a44a; background: #3a0c0c; box-shadow: 0 0 0 1px #1a1714; }
.hud-hp i { position: absolute; inset: 0; width: 100%; background: linear-gradient(#d93a3a, #b01e1e); transition: width .2s; }
.hud-hp span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px/1 'Courier New', monospace; color: #fff; text-shadow: 0 1px 2px #000; }
.hud-xp { position: relative; width: 230px; height: 13px; background: #131313; }
.hud-xp i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #c9a44a; transition: width .4s; }
.hud-xp span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 9px/1 'Courier New', monospace; color: #ddd; }
.hud-weapons { position: absolute; left: 22px; bottom: 22px; width: 104px; height: 104px; }
.hud-slot { position: absolute; width: 40px; height: 40px; transform: rotate(45deg); background: rgba(20,20,20,.86); border: 1px solid rgba(255,255,255,.15); display: grid; place-items: center; }
.hud-slot svg { width: 24px; height: 24px; transform: rotate(-45deg); color: #9e9e9e; }
.hud-slot.active { background: rgba(32,32,32,.95); border-color: #e9e9e9; }
.hud-slot.active svg { color: #fff; }
.hud-slot[data-slot="0"] { left: 32px; top: 0; }
.hud-slot[data-slot="1"] { left: 0; top: 32px; }
.hud-slot[data-slot="2"] { left: 64px; top: 32px; }
.hud-slot[data-slot="3"] { left: 32px; top: 64px; }
.hud-dpad { position: absolute; left: 44px; top: 44px; width: 16px; height: 16px; color: #ddd; font: 700 16px/16px monospace; text-align: center; }
.hud-minimap { position: absolute; right: 18px; bottom: 18px; width: 128px; height: 128px; border-radius: 50%; border: 3px solid #2c2c2c; background: rgba(60,60,60,.7); overflow: hidden; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.hud-minimap canvas { width: 100%; height: 100%; }
.hud-zoom { position: absolute; right: 152px; bottom: 22px; display: grid; gap: 4px; pointer-events: auto; }
.hud-zoom button { width: 22px; height: 22px; padding: 0; border: 1px solid #555; border-radius: 3px; background: #1d1d1d; color: #eee; font: 700 14px/1 monospace; }
.hud-help { position: absolute; right: 16px; top: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(18,18,18,.78); font-size: 11px; color: #ddd; }
.hud-help[hidden] { display: none; }
.hud-help .combat-keys { grid-template-columns: 74px 1fr; gap: 3px 8px; font-size: 11px; }
.enemy-bar { position: absolute; width: 58px; height: 7px; margin-left: -29px; background: #141414; border: 1px solid #0a0a0a; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.enemy-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #d42a2a; }
.enemy-bar::before { content: ''; position: absolute; left: -4px; top: -1px; width: 6px; height: 7px; background: #ff4646; border: 1px solid #0a0a0a; }
.damage-number { position: absolute; transform: translate(-50%, -100%); font: 900 17px/1 'Courier New', 'Lucida Console', monospace; letter-spacing: .02em; -webkit-text-stroke: 3px #161616; paint-order: stroke fill; text-shadow: 0 2px 0 #161616; white-space: nowrap; }
.damage-number.red { color: #ff3b30; }
.damage-number.orange { color: #ff9a2e; }
.damage-number.yellow { color: #ffd84a; }
.hud-banner { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); padding: 6px 14px; border-radius: 6px; background: rgba(15,15,15,.7); font-size: 13px; letter-spacing: .04em; }
.hud-banner[hidden] { display: none; }
@media (max-width: 900px) { .hud-hp, .hud-xp { width: 160px; } .hud-minimap { width: 96px; height: 96px; } .hud-zoom { right: 118px; } }
.hud-layer { position: absolute; inset: 0; overflow: hidden; }
.combat-toggle input { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; flex: none; }
/* Narrow screens: arena first, controls underneath, compact HUD. */
@media (max-width: 760px) {
  .studio.mode-combat { grid-template-columns: minmax(0, 1fr); grid-template-rows: 104px minmax(380px, 68dvh) auto; height: auto; }
  .mode-combat .workbench { grid-column: 1; grid-row: 2; padding: 8px; }
  .mode-combat .library { grid-column: 1; grid-row: 3; }
  .mode-combat .workspace-heading { display: none; }
  .hud-portrait { width: 44px; height: 44px; margin: 6px; }
  .hud-portrait canvas { left: -9px; top: -9px; width: 62px; height: 62px; }
  .hud-hp, .hud-xp { width: 128px; }
  .hud-hp { height: 18px; }
  .hud-weapons { transform: scale(0.72); transform-origin: left bottom; left: 12px; bottom: 12px; }
  .hud-minimap { width: 80px; height: 80px; right: 10px; bottom: 10px; }
  .hud-zoom { display: none; }
}