/* The match header (js/header.js): team portraits with HP, round gems, and the turn medallion between them. */
/* Centred over the board, out of the bar's flow, so the brand and the tools keep their places. */
#turninfo.mh { position: fixed; top: calc(6px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); flex: none; width: max-content; display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 12px;
  overflow: visible; white-space: nowrap; text-transform: none; letter-spacing: 0; color: var(--fg); z-index: 3; }
#top .tools { margin-left: auto; }
.mh .mh-side { display: flex; align-items: center; gap: 10px; padding-top: 4px; min-width: 0; }
.mh .mh-side.l { justify-content: flex-end; } .mh .mh-side.r { justify-content: flex-start; }
.mh .t0 { --tc: var(--ally); --tc2: #0f6c86; } .mh .t1 { --tc: var(--enemy); --tc2: #7c1626; }
.mh .mh-roster { display: flex; gap: 6px; }

/* A portrait: the champion's emblem on a bevelled tile in its team's colour, a thin HP bar beneath. */
.mh-p { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mh-p .pf { position: relative; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tc) 45%, #121826), color-mix(in srgb, var(--tc2) 55%, #080b12) 75%);
  border: 2px solid var(--tc); box-shadow: 0 0 10px color-mix(in srgb, var(--tc) 45%, transparent), inset 0 2px 0 rgba(255,255,255,.18), inset 0 -6px 10px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.5);
  transition: filter .4s, opacity .4s, transform .2s; }
.mh-p .art { width: 26px; height: 26px; display: grid; place-items: center; font: 700 20px var(--title); color: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.8)); }
.mh-p .art .svgi { background: #f2fbff; }
.mh-p .art .q { font: 800 20px var(--title); color: rgba(255,255,255,.75); }
.mh-p.me .pf { border-color: #fff; box-shadow: 0 0 0 2px var(--tc), 0 0 14px color-mix(in srgb, var(--tc) 70%, transparent), inset 0 2px 0 rgba(255,255,255,.18), 0 4px 10px rgba(0,0,0,.5); }
.mh-p .hp { position: relative; width: 38px; height: 4px; border-radius: 3px; background: rgba(0,0,0,.65); box-shadow: 0 0 0 1px rgba(0,0,0,.6); overflow: hidden; }
.mh-p .hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 70%, #fff), var(--tc)); border-radius: 3px; transition: width .35s ease-out; }
.mh-p .hp s { position: absolute; top: 0; bottom: 0; right: 0; background: rgba(230,240,255,.85); }
.mh-p .tag { position: absolute; right: 1px; bottom: 1px; font: 800 8.5px var(--ui); padding: 0 3px; border-radius: 4px; background: rgba(0,0,0,.75); color: #cfd8e8; }
.mh-p .crack, .mh-p .skull { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.mh-p .crack { background: linear-gradient(118deg, transparent 46%, rgba(255,255,255,.75) 47%, transparent 49%), linear-gradient(62deg, transparent 58%, rgba(255,255,255,.55) 59%, transparent 61%), linear-gradient(160deg, transparent 30%, rgba(255,255,255,.45) 31%, transparent 33%); }
.mh-p .skull { display: grid; place-items: center; font-size: 19px; color: #f1e6d8; text-shadow: 0 0 6px #000, 0 1px 1px #000; }
/* Out of sight: dimmed, last-seen turn in the corner. Never seen: a "?". */
.mh-p.ghost .pf { opacity: .55; filter: saturate(.5); border-style: dashed; }
.mh-p.unseen .pf { opacity: .5; filter: saturate(.3); border-style: dashed; }
/* Fallen: grey, cracked, a skull. */
.mh-p.dead .pf { filter: grayscale(1) brightness(.55); border-color: #5a6272; box-shadow: inset 0 -6px 10px rgba(0,0,0,.5); }
.mh-p.dead .art { opacity: .35; } .mh-p.dead .crack { opacity: .9; } .mh-p.dead .skull { opacity: 1; }
/* A kill: a white flash, a jolt, and the shards of the frame flying off. */
.mh-p.kill .pf { animation: mh-kill .7s ease-out; }
.mh-p.kill::after { content: ""; position: absolute; left: 50%; top: 19px; width: 6px; height: 6px; margin: -3px; border-radius: 1px; pointer-events: none;
  box-shadow: -16px -12px 0 1px var(--tc), 15px -14px 0 0 #fff, 18px 9px 0 1px var(--tc), -14px 13px 0 0 #fff, 0 -20px 0 0 var(--tc), 2px 20px 0 1px var(--tc);
  animation: mh-shards .7s ease-out forwards; }
@keyframes mh-kill { 0% { filter: brightness(3) saturate(0); transform: scale(1.25); } 25% { transform: scale(.9) rotate(-6deg); } 50% { transform: scale(1.05) rotate(4deg); } 100% { transform: none; } }
@keyframes mh-shards { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.2) rotate(40deg); } }
/* A hit: a quick red blink. */
.mh-p.hit .pf { animation: mh-hit .35s ease-out; }
@keyframes mh-hit { 30% { box-shadow: 0 0 16px #ff4a4a, inset 0 0 12px rgba(255,60,60,.8); transform: translateY(1px); } }

/* Round score: a gem per round to win, lit when won. */
.mh-gems { display: flex; gap: 4px; }
.mh-gems .gem { position: relative; width: 12px; height: 12px; transform: rotate(45deg); border-radius: 2px; border: 1.5px solid color-mix(in srgb, var(--tc) 55%, #3a4458); background: rgba(5,8,13,.7); box-shadow: inset 0 0 4px rgba(0,0,0,.8); }
.mh-gems .gem.on { border-color: color-mix(in srgb, var(--tc) 60%, #fff); background: linear-gradient(135deg, #fff 0%, var(--tc) 35%, var(--tc2) 100%); box-shadow: 0 0 10px var(--tc), inset 0 0 3px rgba(255,255,255,.6); }
.mh-gems .gem.won { animation: mh-gem 1.1s ease-out; }
.mh-gems .gem.won::after { content: ""; position: absolute; inset: -3px; border-radius: 3px; border: 2px solid var(--tc); animation: mh-ring 1.1s ease-out forwards; }
@keyframes mh-gem { 0% { transform: rotate(45deg) scale(2.4); filter: brightness(3); } 40% { transform: rotate(225deg) scale(.85); } 100% { transform: rotate(405deg) scale(1); } }
@keyframes mh-ring { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(3.2); } }
.mh .mh-kills { font: 800 22px var(--title); color: var(--tc); text-shadow: 0 0 10px color-mix(in srgb, var(--tc) 60%, transparent), 0 2px 2px #000; min-width: 18px; text-align: center; }

/* The turn medallion: a hexagonal badge hanging from the bar. */
.mh-medal { position: relative; flex: none; width: 84px; display: flex; flex-direction: column; align-items: center; margin-top: -4px; }
.mh-medal::before { content: ""; position: absolute; top: 0; left: 50%; width: 72px; height: 64px; transform: translateX(-50%); z-index: -1;
  clip-path: polygon(50% 0, 100% 22%, 100% 70%, 50% 100%, 0 70%, 0 22%);
  background: linear-gradient(180deg, #2a3550 0%, #121826 60%, #0a0e16 100%); box-shadow: inset 0 0 0 2px #c9a65a; }
.mh-medal::after { content: ""; position: absolute; top: 3px; left: 50%; width: 66px; height: 58px; transform: translateX(-50%); z-index: -1; pointer-events: none;
  clip-path: polygon(50% 0, 100% 22%, 100% 70%, 50% 100%, 0 70%, 0 22%); background: linear-gradient(180deg, rgba(255,214,120,.35), rgba(255,214,120,0) 40%); }
.mh-medal .mh-rd { margin-top: 9px; font: 700 8.5px var(--title); letter-spacing: .16em; text-transform: uppercase; color: #e8cf8f; }
.mh-medal .tn { font: 800 24px/1 var(--title); color: #fff; text-shadow: 0 0 10px rgba(255,214,120,.5), 0 2px 2px #000; display: flex; flex-direction: column; align-items: center; }
.mh-medal .tn small { display: none; }
.mh-medal .notes { position: absolute; top: 66px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; }
.mh-medal .n { font: 700 10.5px var(--ui); letter-spacing: .03em; padding: 1px 8px; border-radius: 99px; background: rgba(10,14,21,.85); border: 1px solid var(--line); color: #cfd8e8; }
.mh-medal .n.storm { border-color: rgba(176,124,255,.45); color: #cdb3ff; }
.mh-medal .n.storm.on { background: rgba(122,44,255,.35); border-color: #b07cff; color: #fff; box-shadow: 0 0 12px rgba(176,124,255,.45); }
.mh-medal .n.sdw { border-color: rgba(255,120,60,.5); color: #ffb08a; }
.mh-medal .n.sd { background: linear-gradient(90deg, #ff3d2a, #ff8a2a); border-color: #ffb08a; color: #fff; font-weight: 800; }
/* Sudden death: the badge burns red and pulses. */
.mh-medal.sd::before { background: linear-gradient(180deg, #7a1410 0%, #3a0806 65%, #1a0403 100%); box-shadow: inset 0 0 0 2px #ff6a3a; animation: mh-sd 1.3s ease-in-out infinite; }
.mh-medal.sd .mh-rd { color: #ffb08a; } .mh-medal.sd .tn { text-shadow: 0 0 14px #ff5a2a, 0 2px 2px #000; }
.mh-medal.sd { filter: drop-shadow(0 0 10px rgba(255,80,40,.6)); animation: mh-sdglow 1.3s ease-in-out infinite; }
@keyframes mh-sd { 50% { filter: brightness(1.45); } }
@keyframes mh-sdglow { 50% { filter: drop-shadow(0 0 18px rgba(255,80,40,.95)); } }
/* A round won: the badge flashes in the winner's colour. */
.mh-medal.win0 { animation: mh-win0 1.2s ease-out; } .mh-medal.win1 { animation: mh-win1 1.2s ease-out; }
@keyframes mh-win0 { 0% { filter: drop-shadow(0 0 0 var(--ally)) brightness(2.2); } 100% { filter: none; } }
@keyframes mh-win1 { 0% { filter: drop-shadow(0 0 0 var(--enemy)) brightness(2.2); } 100% { filter: none; } }

/* The phase tracker and toasts sit below the medallion. */
#phases { top: 92px; }
#toasts { top: 124px; }

/* Narrower desktops: smaller portraits. */
@media (max-width: 1180px) and (min-width: 641px) {
  #turninfo.mh { gap: 6px; } .mh .mh-side { gap: 5px; } .mh .mh-roster { gap: 3px; }
  .mh-p .pf { width: 28px; height: 28px; border-radius: 7px; } .mh-p .hp { width: 28px; } .mh-p .art { width: 19px; height: 19px; font-size: 15px; }
  .mh-gems .gem { width: 9px; height: 9px; }
}
/* Phones: a row of its own under the bar (the tools fill the bar), small portraits with their gems beneath,
   a small badge, and short notes. The cards and the phase tracker move down to make room. */
.mh-medal .n i { font-style: normal; }
@media (max-width: 640px) {
  #turninfo.mh { top: calc(50px + env(safe-area-inset-top)); gap: 5px; }
  .mh .mh-side { gap: 3px; padding-top: 1px; flex-direction: column; } .mh .mh-side.l { align-items: flex-end; } .mh .mh-side.r { align-items: flex-start; }
  .mh .mh-side .mh-gems { order: 2; }
  .mh .mh-roster { gap: 3px; }
  .mh-p { gap: 2px; } .mh-p .pf { width: 21px; height: 21px; border-radius: 6px; border-width: 1.5px; } .mh-p .hp { width: 21px; height: 3px; }
  .mh-p .art { width: 14px; height: 14px; font-size: 11px; } .mh-p .art .q { font-size: 12px; } .mh-p .skull { font-size: 12px; } .mh-p .tag { display: none; }
  .mh-p.kill::after { top: 10px; }
  .mh-gems { gap: 3px; } .mh-gems .gem { width: 7px; height: 7px; border-width: 1px; }
  .mh-medal { width: 48px; margin-top: -2px; } .mh-medal::before { width: 46px; height: 42px; } .mh-medal::after { width: 42px; height: 38px; }
  .mh-medal .mh-rd { margin-top: 5px; font-size: 6.5px; letter-spacing: .08em; } .mh-medal .tn { font-size: 16px; }
  .mh-medal .notes { top: 44px; gap: 3px; } .mh-medal .n { font-size: 9.5px; padding: 0 5px; } .mh-medal .n .lg { display: none; }
  .cards, #cardsR { top: 102px; }
  #phases { top: 106px; }
  #toasts { top: 150px; }
}