@import url('./shared/tokens.css');
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--paper);
  font: 16px/1.2 var(--font);
  -webkit-user-select: none; user-select: none;
}

#gl {
  position: fixed; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated;
  display: block; touch-action: none;
}

#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

#labels .tag {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  will-change: transform;
}
#labels .tag .name {
  display: flex; flex-direction: column; align-items: center;
  padding: 3px 8px 4px;
  background: var(--ink);
  border: 2px solid var(--paper);
  border-radius: 6px;
  font-size: 14px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
}
#labels .tag.me .name { border-color: var(--orange); }
/* SS group tag inside the card, under the name, coloured like Telegram's: purple owner, green admins, grey members */
#labels .tag .role { font-size: 11px; font-weight: 400; line-height: 1.1; color: #c0c6cb; }
#labels .tag .role.creator { color: #b98aff; }
#labels .tag .role.admin { color: #5ccb3a; }
/* damage numbers, floating off the tag */
#labels .tag .dmg {
  position: absolute; left: 50%; top: 0;
  font-size: 20px; font-weight: 700; color: var(--paper);
  text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
  pointer-events: none; white-space: nowrap;
  animation: dmg 0.65s cubic-bezier(.2, .9, .3, 1) forwards;
}
#labels .tag .dmg.fin { font-size: 25px; color: var(--orange); }
#labels .tag .dmg.big { font-size: 28px; color: var(--orange); animation-duration: 0.9s; }
@keyframes dmg {
  0% { transform: translate(-50%, 0) scale(0.4); opacity: 1; }
  18% { transform: translate(calc(-50% + var(--dx) * 0.4), -26px) scale(1.35); }
  35% { transform: translate(calc(-50% + var(--dx) * 0.6), -34px) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), -58px) scale(0.9); opacity: 0; }
}
/* away in a minigame: the tag fades with the ghost, no health bar */
#labels .tag.ghost { opacity: 0.7; }
#labels .tag.ghost .hp { display: none; }
/* health bar under the name */
#labels .tag .hp {
  width: 58px; height: 9px; margin-top: -3px;
  background: var(--ink); border: 2px solid var(--ink); border-radius: 4px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
#labels .tag .hp i { display: block; height: 100%; width: 100%; background: #5ccb3a; border-radius: 2px; transition: width 0.18s ease-out; }
#labels .tag .hp.mid i { background: var(--orange); }
#labels .tag .hp.low i { background: var(--red); }
#labels .tag .hp.hit { animation: hp-hit 0.3s; }
@keyframes hp-hit { 20% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 80% { transform: translateX(-1px); } }
#labels .tag .bubble {
  position: relative;
  max-width: 220px;
  padding: 7px 10px 8px;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 8px;
  font-size: 15px; text-align: center;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
  overflow-wrap: anywhere;
  animation: pop 0.28s cubic-bezier(.3, 1.6, .5, 1);
}
#labels .tag .bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -6px;
  border: 6px solid transparent; border-top-color: var(--ink); border-bottom: 0;
}
#labels .tag .bubble.out { animation: fadeout 0.3s forwards; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fadeout { to { transform: translateY(-6px); opacity: 0; } }

.pill {
  font: inherit; font-weight: 700; color: #fff;
  border: 0; border-radius: 10px;
  padding: 12px 18px 14px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer; touch-action: none;
}
.pill:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
.pill.blue { background: var(--blue); }
.pill.orange { background: var(--orange); }
.pill.red { background: var(--red); }

/* the table page while seated (overlay.js): full screen and opaque, under the chat (z 30+) */
#table-overlay {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4;
  border: 0; background: #07061a; color-scheme: dark;
  animation: table-in .3s ease-out;
}
#table-overlay[hidden] { display: none; }
@keyframes table-in { from { opacity: 0; } }
/* seated: the sticks give way to the table UI; the pill stays */
body.seated #pad .zone { display: none; }
/* the world isn't drawn behind the table page (hub.js stops the loop too) */
body.at-table #gl, body.at-table #labels { display: none; }
/* the table page has its own Stand button and keys */
body.at-table #pad .act, body.at-table #pad .keys { display: none !important; }

/* hit on me: a red edge that fades */
#hurt { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0; box-shadow: inset 0 0 60px 10px rgb(254 95 85 / 0.7); }
#hurt.on { animation: hurt 0.35s ease-out; }
#hurt.big { animation-duration: 0.8s; box-shadow: inset 0 0 120px 30px rgb(254 95 85 / 0.85); }
@keyframes hurt { from { opacity: 1; } to { opacity: 0; } }