:root { --bg: #121110; --ash: #cfc9bf; --ochre: #d9a44a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ash);
  font: 16px/1.5 system-ui, sans-serif; overflow: hidden; }
#arena { display: block; width: 100vw; height: 100vh; touch-action: none; }
#hud { position: fixed; top: 8px; left: 16px; right: 16px; display: flex; flex-wrap: wrap; gap: 0 24px;
  justify-content: space-between; pointer-events: none; font-weight: 600;
  text-shadow: 0 1px 2px #000; }
#hud-title { color: var(--ochre); }
#hint { position: fixed; bottom: 48px; left: 50%; transform: translateX(-50%); max-width: 90vw;
  padding: 8px 16px; background: rgba(18, 17, 16, 0.8); border: 1px solid #6b665e;
  border-radius: 8px; pointer-events: none; text-align: center; }
#legal { position: fixed; bottom: 8px; right: 16px; font-size: 14px; }
#legal a { color: var(--ash); display: inline-block; min-height: 44px; line-height: 44px; padding: 0 8px; }
#nodata { color: var(--ash); padding: 0 8px; }
#load-error { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: min(90vw, 65ch);
  margin: 0; padding: 16px 24px; background: #121110; border: 2px solid var(--ochre); border-radius: 8px;
  color: var(--ash); text-align: center; }
#load-error[hidden] { display: none; }
#joy { position: fixed; width: 112px; height: 112px; border-radius: 50%; left: 32px; bottom: 96px;
  border: 2px solid rgba(217, 164, 74, 0.6); background: rgba(18, 17, 16, 0.35);
  pointer-events: none; display: none; }
#joy-knob { position: absolute; left: 32px; top: 32px; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(217, 164, 74, 0.75); }
#boosts { position: fixed; top: 72px; left: 16px; display: flex; flex-direction: column; gap: 4px;
  pointer-events: none; font-weight: 600; text-shadow: 0 1px 2px #000; }
.boost { padding: 0 8px; border-left: 4px solid; background: rgba(18, 17, 16, 0.6); border-radius: 4px; }
.boost[hidden], #pickup[hidden] { display: none; }
.boost.move { border-color: #2fd0b8; color: #8ff0e0; }
.boost.attack { border-color: #f0a82a; color: #ffd48a; }
#pickup { position: fixed; top: 30%; left: 50%; transform: translateX(-50%); margin: 0; padding: 8px 16px;
  background: rgba(18, 17, 16, 0.8); border: 1px solid var(--ochre); border-radius: 8px; color: var(--ash);
  font-weight: 600; pointer-events: none; white-space: nowrap; }
/* V2-A3: rage bar + 3 ability slots (desktop: row bottom left; touch: thumb arc bottom right, see media query) */
#abil { position: fixed; left: 16px; bottom: 16px; width: 240px; display: flex; flex-wrap: wrap; gap: 8px 24px;
  padding-bottom: 12px; }
#rage { position: relative; width: 100%; height: 24px; background: rgba(18, 17, 16, 0.85); border: 1px solid #6b665e;
  border-radius: 4px; overflow: hidden; pointer-events: none; }
#rage-fill { position: absolute; inset: 0; background: #a83a1c; transform-origin: left; transform: scaleX(0); }
#rage-text { position: relative; display: block; padding: 0 8px; font-size: 14px; line-height: 22px; font-weight: 700;
  color: #f2ede4; text-shadow: 0 1px 2px #000; }
.abil { position: relative; width: 64px; height: 64px; padding: 0; border-radius: 50%; color: var(--ash);
  background: rgba(18, 17, 16, 0.85); border: 2px solid #6b665e; touch-action: none; user-select: none;
  -webkit-user-select: none; -webkit-tap-highlight-color: transparent; --cd: 0; }
.abil svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
  stroke-linejoin: round; opacity: 0.45; }
.abil::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--ochre) calc(var(--cd) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); }
.abil .key { position: absolute; top: -6px; left: -6px; min-width: 22px; height: 22px; border-radius: 4px;
  font-size: 14px; line-height: 20px; background: #121110; border: 1px solid #6b665e; color: var(--ash); }
.abil .state { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); white-space: nowrap;
  padding: 0 4px; border-radius: 4px; font-size: 12px; line-height: 18px; background: #121110; color: #f2ede4; }
.abil .state:empty { display: none; }
.abil.ready { border-color: var(--ochre); color: #ffd48a; box-shadow: 0 0 12px rgba(217, 164, 74, 0.55); }
.abil.ready svg { opacity: 1; }
.abil.locked { border-style: dashed; }
@media (pointer: coarse) {
  #abil { left: auto; right: 16px; bottom: 128px; width: 172px; height: 204px; display: block; padding: 0; }
  #rage { position: absolute; top: 0; left: 0; }
  .abil { position: absolute; width: 60px; height: 60px; }
  #abil-1 { right: 112px; bottom: 0; }
  #abil-2 { right: 79px; bottom: 79px; }
  #abil-3 { right: 0; bottom: 112px; }
  .abil .key { display: none; }
  #joy { display: block; opacity: 0.5; }
  #joy.active { opacity: 1; }
  .desktop-only { display: none; }
  #hint { top: 188px; bottom: auto; }
  #boosts { top: 124px; } /* L1: below the quit button (ends at 108px) */
  #pickup { top: 42%; }
}
@media (pointer: fine) { .touch-only { display: none; } }
button { font: inherit; font-weight: 600; min-height: 44px; min-width: 44px; padding: 8px 16px; cursor: pointer;
  color: var(--bg); background: var(--ochre); border: 0; border-radius: 8px; }
button:focus-visible { outline: 3px solid var(--ash); outline-offset: 2px; }
#quit { position: fixed; top: 64px; right: 16px; background: rgba(18, 17, 16, 0.8); color: var(--ash);
  border: 1px solid #6b665e; }
#end { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: calc(100vw - 32px);
  padding: 24px 32px; background: rgba(18, 17, 16, 0.94); border: 1px solid var(--ochre); border-radius: 8px;
  text-align: center; }
#end[hidden] { display: none; }
#end h2 { margin: 0 0 8px; line-height: 1.2; color: var(--ochre); }
#end p { margin: 0 0 16px; }
#loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 16px 24px;
  background: rgba(18, 17, 16, 0.9); border: 1px solid #6b665e; border-radius: 8px; color: var(--ash); }
#loading[hidden] { display: none; }