html,body{margin:0;height:100%;overflow:hidden;background:#0b0f14;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
#hud{position:fixed;left:14px;top:14px;z-index:9999;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 12px;display:flex;gap:10px;align-items:center}
#hud b{font-size:13px;letter-spacing:.3px}
#hud button{cursor:pointer;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;border-radius:12px;padding:8px 10px;font-size:12px}
#hud button:hover{background:rgba(255,255,255,.12)}
#hud .dot{width:8px;height:8px;border-radius:50%;background:#7CFF9A;box-shadow:0 0 16px rgba(124,255,154,.6)}
.cork{position:fixed;width:92px;height:92px;left:0;top:0;user-select:none;pointer-events:auto;touch-action:none;will-change:transform;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.cork svg{width:100%;height:100%;overflow:visible}
.cork-emote{font-size:16px;position:fixed;font-size:20px;pointer-events:none;transform:translate(-50%,-110%);opacity:0;transition:opacity .15s ease;text-shadow:0 2px 6px rgba(0,0,0,.35);z-index:9998}
.cork-speech{position:fixed;max-width:240px;pointer-events:none;opacity:0;transform:translate(-50%,-140%) scale(.98);transition:opacity .18s ease, transform .18s ease;z-index:9997}
.cork-speech .bubble{background:rgba(255,255,255,.92);color:#111;border-radius:14px;padding:8px 10px;font-size:12px;line-height:1.25;box-shadow:0 12px 26px rgba(0,0,0,.35);border:1px solid rgba(0,0,0,.08)}
.cork-speech.enemy .bubble{background:rgba(255,180,180,.92)}
.cork-speech .tail{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid rgba(255,255,255,.92);filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.cork-speech.enemy .tail{border-top-color:rgba(255,180,180,.92)}

.cork-speech{z-index:9999}
.cork-emote{z-index:9996;opacity:.75}

.cork-speech{max-width:260px}

/* UI highlight pulse when corks react */
.cork-ui-highlight{
  outline: 3px solid rgba(124,255,154,.85);
  outline-offset: 4px;
  border-radius: 16px;
  box-shadow: 0 0 0 0 rgba(124,255,154,.5);
  animation: corkPulse 1.2s ease-out 0s 3;
}
@keyframes corkPulse{
  0%{box-shadow:0 0 0 0 rgba(124,255,154,.55)}
  70%{box-shadow:0 0 0 18px rgba(124,255,154,0)}
  100%{box-shadow:0 0 0 0 rgba(124,255,154,0)}
}