/* The end of a match (client-post-screen.js): banner, scoreboard, XP. */

#screen-post .post-card { width: min(780px, 94vw); }
#screen-post .post-card.has-board #post-stats { display: none; }
#screen-post .post-card:not(.show-details) #post-meter { display: none !important; }

/* ---- Banner: an emblem under slow light rays ---- */
#post-banner {
  position: relative;
  height: 112px;
  margin: -6px auto 0;
  pointer-events: none;
}
#post-banner .post-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 222, 140, 0.34) 0deg 6deg, rgba(255, 222, 140, 0) 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, 0.5) 40%, transparent 68%);
  mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, 0.5) 40%, transparent 68%);
  animation: postRays 40s linear infinite;
}
.post-lost #post-banner .post-rays {
  background: repeating-conic-gradient(from 0deg, rgba(200, 40, 24, 0.3) 0deg 5deg, rgba(200, 40, 24, 0) 5deg 20deg);
}
#post-banner .post-emblem {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
  filter: drop-shadow(0 0 10px rgba(255, 210, 110, 0.65)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}
.post-lost #post-banner .post-emblem { filter: drop-shadow(0 0 10px rgba(200, 40, 20, 0.6)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7)); }
#post-banner .post-emblem svg { width: 100%; height: 100%; display: block; }
@keyframes postRays { to { transform: rotate(360deg); } }

#screen-post .post-card #post-title {
  margin: 0 0 2px;
  font-size: 46px;
  letter-spacing: 0.16em;
  background: linear-gradient(180deg, #fff6cf 0%, #f0c860 45%, #a8701c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #2a1806) drop-shadow(0 0 14px rgba(255, 200, 90, 0.45));
}
#screen-post .post-card.post-lost #post-title {
  background: linear-gradient(180deg, #ffd6c8 0%, #d24a2c 48%, #5a120a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 0 #1a0604) drop-shadow(0 0 14px rgba(210, 50, 20, 0.45));
}
#post-reason { margin: 0 0 10px; letter-spacing: 0.06em; }

.post-enter #post-banner .post-emblem { animation: postEmblem 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.post-enter #post-title { animation: postTitle 0.55s 0.12s ease-out both; }
@keyframes postEmblem {
  from { transform: scale(0.3) rotate(-14deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes postTitle {
  from { transform: translateY(8px) scale(1.12); opacity: 0; letter-spacing: 0.4em; }
  to { transform: none; opacity: 1; }
}

/* ---- Scoreboard ---- */
#post-board { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 10px; text-align: left; }
.pb-team {
  border: 1px solid rgba(90, 62, 26, 0.9);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(20, 14, 8, 0.86), rgba(10, 7, 4, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.12), 0 4px 10px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.pb-head,
.pb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 76px 76px 76px;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
}
.pb-head {
  font: 700 10px var(--ui-label, Georgia), Georgia, serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9a458;
  border-bottom: 1px solid rgba(201, 162, 74, 0.35);
}
.pb-head > span:not(.pb-name),
.pb-row > span:not(.pb-who) { text-align: right; font-variant-numeric: tabular-nums; }
.pb-team.won .pb-head { background: linear-gradient(90deg, rgba(212, 170, 70, 0.32), rgba(212, 170, 70, 0)); }
.pb-team.lost .pb-head { background: linear-gradient(90deg, rgba(170, 34, 20, 0.34), rgba(170, 34, 20, 0)); color: #e0907a; }
.pb-row {
  color: #f2e2bc;
  font-size: 14px;
  border-top: 1px solid rgba(255, 220, 150, 0.05);
  animation: pbRow 0.4s ease-out both;
}
.pb-row:nth-child(odd) { background: rgba(255, 230, 170, 0.025); }
.pb-row.me { background: linear-gradient(90deg, rgba(255, 214, 110, 0.18), rgba(255, 214, 110, 0.02)); box-shadow: inset 2px 0 0 #f0c860; }
.pb-row.dead .pb-port { filter: grayscale(1) brightness(0.6); }
.pb-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pb-port {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px #1a1208, 0 0 0 2px #c9a24a, 0 2px 6px rgba(0, 0, 0, 0.6);
}
.pb-text { display: flex; flex-direction: column; min-width: 0; }
.pb-text b { font-weight: 700; color: #fff0c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-text small { font-size: 11px; color: #a89068; letter-spacing: 0.04em; }
.pb-mark { font-style: normal; margin-left: 6px; font-size: 12px; }
.pb-mark.dmg { color: #ff9a50; text-shadow: 0 0 6px rgba(255, 120, 40, 0.8); }
.pb-mark.heal { color: #7ef08a; text-shadow: 0 0 6px rgba(80, 230, 110, 0.8); }
@keyframes pbRow {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

/* ---- XP and quests ---- */
#post-xp { margin: 2px 0 8px; }
#post-xp.hidden { display: none; }
.post-xp-line { display: flex; justify-content: space-between; font-size: 13px; color: #e8d4a4; letter-spacing: 0.06em; margin-bottom: 4px; }
.post-xp-gain { color: #d8b0ff; text-shadow: 0 0 8px rgba(180, 110, 255, 0.6); }
.post-xp-track {
  position: relative;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, #120c14, #241830);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px #5a4026;
  overflow: hidden;
}
.post-xp-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.post-xp-was { background: linear-gradient(180deg, #6a3aa8, #3a1a68); z-index: 1; }
.post-xp-now {
  background: linear-gradient(180deg, #e0b0ff, #9a58e8 55%, #5a28a8);
  box-shadow: 0 0 10px rgba(190, 120, 255, 0.7);
  animation: postXp 1.1s 0.5s ease-out both;
  transform-origin: left center;
}
@keyframes postXp { from { transform: scaleX(0); } to { transform: none; } }
.post-quests { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.post-quests-label { font: 700 10px var(--ui-label, Georgia), serif; letter-spacing: 0.14em; text-transform: uppercase; color: #c9a458; align-self: center; }
.post-quest {
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  color: #fff0c8;
  background: linear-gradient(180deg, rgba(90, 60, 20, 0.9), rgba(40, 26, 10, 0.9));
  box-shadow: 0 0 0 1px #c9a24a;
}
#screen-post .post-card.has-board #post-awards { display: none; }
#btn-post-details { margin: 0 0 8px; width: auto; padding: 5px 16px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---- Phone: the same, tighter ---- */
html.touch-play #post-banner { height: 56px; margin: -4px auto -4px; }
html.touch-play #post-banner .post-emblem { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
html.touch-play #post-banner .post-rays { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
html.touch-play #screen-post .post-card #post-title { font-size: 24px; }
/* The board takes the room that is left and scrolls; Leave always shows. */
html.touch-play #screen-post .post-card > #post-board { flex: 1 1 auto; min-height: 40px; overflow: auto; -webkit-overflow-scrolling: touch; gap: 6px; margin: 2px 0 6px; }
html.touch-play .pb-head,
html.touch-play .pb-row { grid-template-columns: minmax(0, 1fr) 40px 56px 56px 56px; padding: 2px 8px; gap: 4px; }
html.touch-play .pb-row { font-size: 12px; }
html.touch-play .pb-port { width: 24px; height: 24px; flex-basis: 24px; }
html.touch-play .pb-text small { display: none; }
html.touch-play #post-xp { margin: 0 0 4px; }
html.touch-play .post-quests { margin-top: 4px; }
html.touch-play #btn-post-details { margin: 0 0 4px; padding: 3px 12px; }
@media (prefers-reduced-motion: reduce) {
  #post-banner .post-rays, .post-enter #post-banner .post-emblem, .post-enter #post-title, .pb-row, .post-xp-now { animation: none; }
}
/* Teams keep their rows; the board scrolls instead of squashing them. */
#post-board > .pb-team { flex: 0 0 auto; }
html.touch-play #post-banner { height: 40px; }
html.touch-play #post-banner .post-emblem { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
html.touch-play #screen-post .post-card #post-title { font-size: 21px; letter-spacing: 0.12em; }
html.touch-play #post-reason { margin: 0 0 2px !important; font-size: 12px !important; }
html.touch-play #screen-post .post-card > #post-xp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
html.touch-play #post-xp .post-xp-line { display: contents; }
html.touch-play #post-xp .post-xp-level { order: 0; font-size: 12px; }
html.touch-play #post-xp .post-xp-track { order: 1; height: 9px; }
html.touch-play #post-xp .post-xp-gain { order: 2; font-size: 12px; }
html.touch-play #post-xp .post-quests { order: 3; grid-column: 1 / -1; margin-top: 0; }
html.touch-play #btn-post-hub { min-height: 34px !important; margin-top: 2px !important; }