/* Styles for the 3D arena: the canvas host and the overlays drawn on top of it. */
#stage3d { position: absolute; inset: 0; }
#stage3d canvas { width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.overlay3d { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.overlay3d .float { position: absolute; }
.u3d { position: absolute; left: 0; top: 0; width: 58px; text-align: center; will-change: transform; }
.u3d .hp, .u3d .mp { height: 5px; background: #000a; border-radius: 2px; overflow: hidden; }
.u3d .hp { display: flex; position: relative; height: 8px; border: 1px solid #000; }
.u3d .hp::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(to right, transparent 0, transparent calc(var(--big) - 2px), #000 calc(var(--big) - 2px), #000 var(--big)),
    repeating-linear-gradient(to right, transparent 0, transparent calc(var(--seg) - 1px), #000b calc(var(--seg) - 1px), #000b var(--seg));
}
.u3d .mp { height: 3px; margin-top: 1px; }
.u3d .hp i { display: block; height: 100%; background: #4fd163; transition: width .15s; }
.u3d.foe .hp i { background: #e8554a; }
.u3d .hp b { display: block; height: 100%; background: #e9eef7; }
.u3d .mp i { display: block; height: 100%; background: #4d9bff; transition: width .15s; }
.u3d .row { display: flex; justify-content: center; align-items: center; gap: 3px; min-height: 14px; }
.u3d .stars { font-size: 12px; color: var(--gold); text-shadow: 0 1px 2px #000, 0 0 3px #000; letter-spacing: -1px; }
.u3d .stars.s2 { color: #cfe3ff; }
.u3d .stars.s3 { font-size: 14px; }
.u3d .its { display: flex; gap: 1px; }
.u3d .its img { width: 15px; height: 15px; border-radius: 3px; }
.u3d .tag { font-size: 10px; color: var(--dim); white-space: nowrap; }
.u3d.taken { opacity: .5; }
.u3d.stunned::before { content: "💫"; position: absolute; left: 50%; top: -18px; translate: -50% 0; font-size: 15px; }

#game.canpick canvas, #stage.canpick canvas { cursor: pointer; }
.u3d .stars, .u3d .tag { font-family: var(--title); }

/* carousel avatars: a name plate, no stars */
.u3d.avatar .row { display: none; }
.u3d.avatar { width: 110px; }
.u3d.avatar .tag { display: inline-block; padding: 1px 7px; font-size: 11px; color: #f0e6d2; background: #000b; border: 1px solid #5c4a26; border-radius: 9px; }
.u3d.avatar.me .tag { color: #ffd100; border-color: #ffd100; }
.u3d.avatar.held .tag { color: #9ad0ff; border-color: #4a7ab0; }

/* heroes on the carousel: a name plate in the colour of the hero's cost */
.u3d.offer { width: 120px; }
.u3d.offer .tag { display: inline-block; margin-top: 1px; padding: 1px 7px; font-size: 11px; font-weight: 700; background: #000c; border: 1px solid currentColor; border-radius: 9px; white-space: nowrap; }
.u3d.offer.c1 .tag { color: var(--c1); } .u3d.offer.c2 .tag { color: var(--c2); } .u3d.offer.c3 .tag { color: var(--c3); } .u3d.offer.c4 .tag { color: var(--c4); } .u3d.offer.c5 .tag { color: var(--c5); }
.u3d.offer .its img { width: 20px; height: 20px; }

/* conditions on a unit: small badges above its bars */
.u3d.stunned::before { content: none; }
.u3d .sts { position: absolute; left: 50%; bottom: 100%; translate: -50% -2px; display: flex; gap: 1px; white-space: nowrap; pointer-events: none; }
.u3d .sts i { font-style: normal; font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 1px #000); animation: st-in .18s ease-out; }
html.phone .u3d .sts i { font-size: 9px; }
@keyframes st-in { from { scale: 2; opacity: 0; } to { scale: 1; opacity: 1; } }

/* a hero's Health bar just grew while building */
.u3d .hp.grew { animation: hp-grew .9s ease-out; }
@keyframes hp-grew { 0% { box-shadow: 0 0 0 0 #7dff8a; scale: 1.35 1.9; } 60% { box-shadow: 0 0 10px 3px #7dff8a; } 100% { box-shadow: 0 0 0 0 #7dff8a00; scale: 1; } }

/* the throne hex */
.crownhex { position: absolute; translate: -50% -50%; font-size: 15px; opacity: .45; pointer-events: none; filter: drop-shadow(0 1px 2px #000); }
.crownhex.on { opacity: 1; font-size: 19px; }
.crownhex[hidden] { display: none; }
html.phone .crownhex { font-size: 10px; }
html.phone .crownhex.on { font-size: 13px; }
#tip .gift { color: #d9b8ff; }