/* 3'S A CROWD (src/ui/party.js, party-hud.js): the lobby over the live
   title city, the mode title card, pause and results. Type roles and
   tokens from ui.css. Player colours arrive as --pc. */
body.party #title, body.party #menu, body.party #hud, body.party #touch, body.party #fw, body.party #minimap, body.party .lab-panel { display: none !important; }
body.party-play .overlay3d { display: none !important; }

#party-hud { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; display: none; }

/* ---------------- Lobby ---------------- */
#party {
  position: fixed; inset: 0; z-index: 30; display: grid; grid-template-rows: auto 1fr auto auto auto; gap: clamp(10px, 2vh, 22px);
  padding: calc(clamp(16px, 4vh, 44px) + var(--safe-t, 0px)) clamp(16px, 4vw, 64px) calc(clamp(14px, 3vh, 34px) + var(--safe-b, 0px));
  background:
    radial-gradient(60% 50% at 50% 18%, rgba(255, 61, 139, 0.28), transparent 70%),
    linear-gradient(rgba(8, 6, 16, 0.55), rgba(8, 6, 16, 0.78) 60%, rgba(8, 6, 16, 0.92));
  color: var(--ink); overflow: hidden auto;
}
#party.hidden { display: none; }
#party::before, #party::after { content: ''; position: absolute; left: 0; right: 0; height: 5vh; background: #000; pointer-events: none; }
#party::before { top: 0; }
#party::after { bottom: 0; }
.pp-sun {
  position: absolute; left: 50%; top: 2vh; width: min(38vh, 60vw); aspect-ratio: 1; border-radius: 50%; translate: -50% 0; pointer-events: none; opacity: 0.55;
  background: linear-gradient(#ffe066 8%, #ff9a3c 42%, #ff3d8b 78%);
  mask: repeating-linear-gradient(to bottom, #000 0 52%, transparent 52% 56%, #000 56% 61%, transparent 61% 66%, #000 66% 70%, transparent 70% 76%, #000 76% 79%, transparent 79% 86%, #000 86% 88%, transparent 88% 100%);
  -webkit-mask: repeating-linear-gradient(to bottom, #000 0 52%, transparent 52% 56%, #000 56% 61%, transparent 61% 66%, #000 66% 70%, transparent 70% 76%, #000 76% 79%, transparent 79% 86%, #000 86% 88%, transparent 88% 100%);
  filter: drop-shadow(0 0 50px rgba(255, 61, 139, 0.6));
}
.pp-head { position: relative; text-align: center; z-index: 1; }
.pp-head h1 { margin: 0; display: flex; justify-content: center; gap: 0.2em; font: 400 clamp(54px, 10vw, 150px)/0.86 var(--display); text-transform: uppercase; color: #ff3d8b; transform: skewX(-10deg); text-shadow: 0.05em 0.05em 0 #29e0ff, 0.1em 0.1em 0 rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 61, 139, 0.6); }
.pp-head h1 span { display: inline-block; animation: pp-slam 0.5s var(--spring) both; }
.pp-head h1 span:nth-child(2) { animation-delay: 0.12s; color: #fff; }
.pp-head h1 span:nth-child(3) { animation-delay: 0.24s; }
.pp-head p { margin: var(--s3) 0 0; font: 700 clamp(12px, 1.3vw, 16px)/1 var(--sign); letter-spacing: 0.5em; padding-left: 0.5em; color: #fff; text-shadow: var(--txt-shadow); }
@keyframes pp-slam { from { opacity: 0; transform: scale(2) translateY(-0.1em); } to { opacity: 1; transform: none; } }

.pp-slots { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 20px); align-items: stretch; min-height: 0; }
.pp-slot {
  --pc: #8d879a; position: relative; display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--s3); padding: var(--s4); min-height: clamp(190px, 30vh, 300px);
  background: rgba(9, 8, 14, 0.84); border-top: 6px solid var(--pc); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: box-shadow 0.2s, transform 0.2s var(--spring);
  animation: pp-in 0.35s var(--spring) both;
}
.pp-slot.empty { place-content: center; justify-items: center; text-align: center; border-top-color: rgba(255, 255, 255, 0.12); background: rgba(9, 8, 14, 0.55); }
.pp-slot.ready { box-shadow: inset 0 0 0 2px var(--pc), 0 0 34px color-mix(in srgb, var(--pc) 45%, transparent); transform: translateY(-4px); }
@keyframes pp-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
.pp-slot header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.pp-n { font: 400 clamp(34px, 3.6vw, 54px)/0.9 var(--display); color: var(--pc); text-shadow: 0 0 20px color-mix(in srgb, var(--pc) 55%, transparent); }
.pp-slot.empty .pp-n { color: rgba(255, 255, 255, 0.22); text-shadow: none; font-size: clamp(44px, 5vw, 72px); }
.pp-dev { font: 800 10px/1 var(--sans); letter-spacing: 0.18em; color: var(--ink-2, #bdb8c6); }
.pp-join { margin: var(--s3) 0 0; font: 800 14px/1.3 var(--sans); letter-spacing: 0.12em; animation: pp-blink 1.6s ease-in-out infinite; }
.pp-kb { margin: var(--s2) 0 0; font: 700 10.5px/1.5 var(--sans); letter-spacing: 0.1em; color: var(--dim, #8d879a); }
@keyframes pp-blink { 50% { opacity: 0.45; } }
.pp-color { display: flex; align-items: center; gap: var(--s2); font: 800 13px/1 var(--sans); letter-spacing: 0.14em; }
.pp-color i { width: 22px; height: 22px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 14px var(--pc); }
.pp-color em, .pp-car em { margin-left: auto; font-style: normal; opacity: 0.75; }
.pp-car { align-self: end; display: flex; align-items: center; gap: var(--s3); padding: var(--s3); background: rgba(255, 255, 255, 0.05); border-left: 3px solid var(--pc); }
.pp-car em { order: 2; }
.pp-car div { display: grid; gap: 4px; min-width: 0; }
.pp-car b { font: 400 clamp(18px, 1.8vw, 26px)/1 var(--display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-car small { font: 700 10px/1.2 var(--sans); letter-spacing: 0.12em; color: var(--dim, #8d879a); }
.pp-car small.r-rare { color: #3fd0ff; }
.pp-car small.r-epic { color: #b07bff; }
.pp-car small.r-legendary { color: var(--gold); }
.pp-slot footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); font: 800 13px/1 var(--sans); letter-spacing: 0.12em; }
.pp-slot footer small { font: 700 10px/1 var(--sans); letter-spacing: 0.1em; opacity: 0.7; }
.pp-ready { padding: 6px 12px 5px; background: var(--pc); color: #0b0a10; transform: skewX(-10deg); box-shadow: 0 0 20px var(--pc); }
.pp-press { display: inline-flex; align-items: center; gap: 6px; }

.pp-modes { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, 1vw, 14px); }
.pp-mode { all: unset; cursor: pointer; display: grid; gap: 6px; padding: var(--s3) var(--s4); background: rgba(9, 8, 14, 0.7); border-bottom: 3px solid transparent; transition: background 0.15s, transform 0.2s var(--spring); }
.pp-mode b { font: 400 clamp(16px, 1.7vw, 26px)/1 var(--display); text-transform: uppercase; }
.pp-mode small { font: 700 9.5px/1.2 var(--sans); letter-spacing: 0.14em; color: var(--dim, #8d879a); }
.pp-mode.on { background: linear-gradient(rgba(255, 61, 139, 0.32), rgba(9, 8, 14, 0.85)); border-bottom-color: #ff3d8b; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(255, 61, 139, 0.25); }
.pp-mode.on small { color: #fff; }
.pp-how { position: relative; z-index: 1; margin: 0; display: flex; align-items: center; justify-content: center; gap: var(--s4); font: 600 clamp(13px, 1.2vw, 16px)/1.35 var(--sans); text-align: center; color: #fff; text-shadow: var(--txt-shadow); }
.pp-how span { display: inline-flex; gap: 4px; align-items: center; font: 800 10px/1 var(--sans); letter-spacing: 0.14em; color: var(--dim, #8d879a); white-space: nowrap; }
.pp-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); font: 800 12px/1 var(--sans); letter-spacing: 0.14em; }
.pp-foot button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(9, 8, 14, 0.7); }
.pp-foot b { color: #29e0ff; }
.pp-status { text-align: center; color: #fff; text-shadow: var(--txt-shadow); }
.pp-go { display: inline-block; padding: 8px 18px 7px; font: 400 clamp(20px, 2.4vw, 32px)/1 var(--display); background: #ff3d8b; color: #fff; transform: skewX(-10deg); box-shadow: 0 0 30px rgba(255, 61, 139, 0.6); animation: pp-pulse 0.5s ease-in-out infinite alternate; }
@keyframes pp-pulse { to { transform: skewX(-10deg) scale(1.06); } }
#party kbd, #party-card kbd { display: inline-grid; place-items: center; min-width: 1.6em; padding: 3px 6px 2px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); font: 800 11px/1 var(--sans); letter-spacing: 0.04em; color: #fff; }
#party .cap svg, #party-card .cap svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .pp-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-slot { min-height: 150px; }
  .pp-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-head h1 { font-size: clamp(44px, 13vw, 90px); }
}

/* ---------------- Cards: mode intro, pause, results ---------------- */
#party-card { position: fixed; inset: 0; z-index: 31; display: none; place-content: center; justify-items: center; text-align: center; pointer-events: none; padding: var(--s5); }
#party-card.show { display: grid; }
#party-card.show nav, #party-card.show button { pointer-events: auto; }
#party-card h2 { margin: 0; font: 400 clamp(56px, 11vw, 168px)/0.86 var(--display); text-transform: uppercase; color: #fff; transform: skewX(-10deg); text-shadow: 0.05em 0.05em 0 var(--pc, #ff3d8b), 0.1em 0.1em 0 rgba(0, 0, 0, 0.55), 0 0 40px color-mix(in srgb, var(--pc, #ff3d8b) 60%, transparent); }
.pc-intro { background: radial-gradient(60% 45% at 50% 50%, rgba(8, 6, 16, 0.78), rgba(8, 6, 16, 0.15)); }
.pc-intro h2 { animation: pp-slam 0.55s var(--spring) both; }
.pc-intro.out { animation: pc-out 0.5s var(--ease) forwards; }
@keyframes pc-out { to { opacity: 0; transform: scale(1.06); } }
.pc-tag { margin: var(--s4) 0 0; padding: 6px 16px 5px; background: #ff3d8b; color: #fff; font: 800 clamp(14px, 1.6vw, 20px)/1.1 var(--sans); letter-spacing: 0.18em; transform: skewX(-10deg); animation: pp-in 0.4s 0.25s var(--spring) both; }
.pc-role { margin: var(--s4) 0 0; font: 700 clamp(14px, 1.6vw, 20px)/1.3 var(--sans); letter-spacing: 0.12em; color: #fff; text-shadow: var(--txt-shadow); animation: pp-in 0.4s 0.45s var(--spring) both; }
.pc-role b { color: var(--pc, var(--gold)); }
.pc-sub { margin: var(--s2) 0 0; font: 700 12px/1.3 var(--sans); letter-spacing: 0.16em; color: var(--ink-2, #bdb8c6); text-shadow: var(--txt-shadow); }
.pc-how { margin: var(--s4) 0 0; max-width: 46ch; font: 600 clamp(13px, 1.2vw, 16px)/1.45 var(--sans); color: #fff; text-shadow: var(--txt-shadow); animation: pp-in 0.4s 0.6s var(--spring) both; }
.pc-pause { background: rgba(8, 6, 16, 0.62); }
.pc-pause > p { margin: var(--s3) 0 var(--s5); font: 800 13px/1 var(--sans); letter-spacing: 0.2em; color: var(--ink-2, #bdb8c6); }
#party-card nav { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; margin-top: var(--s5); }
#party-card nav button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px 11px; background: rgba(9, 8, 14, 0.88); font: 800 14px/1 var(--sans); letter-spacing: 0.14em; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
#party-card nav button:first-child { background: #ff3d8b; box-shadow: 0 0 26px rgba(255, 61, 139, 0.45); }
.pc-keys { margin-top: var(--s4); font: 700 10px/1 var(--sans); letter-spacing: 0.16em; color: var(--dim, #8d879a); }
.pc-results { background: radial-gradient(70% 60% at 50% 45%, rgba(8, 6, 16, 0.88), rgba(8, 6, 16, 0.6)); }
.pc-results h2 { animation: pp-slam 0.55s var(--spring) both; font-size: clamp(46px, 8vw, 120px) !important; }
.pc-kicker { margin: 0 0 var(--s3); font: 800 13px/1 var(--sans); letter-spacing: 0.3em; color: #ff3d8b; }
.pc-team { margin: var(--s4) 0 0; padding: 8px 18px 7px; font: 700 18px/1 var(--mono); letter-spacing: 0.06em; background: rgba(9, 8, 14, 0.85); }
.pc-team.gold { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.pc-team.silver { color: #dfe6ee; box-shadow: inset 0 0 0 2px #dfe6ee; }
.pc-team.bronze { color: #e0a070; box-shadow: inset 0 0 0 2px #e0a070; }
.pc-results ol { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: 8px; min-width: min(640px, 92vw); }
.pc-results li { display: grid; grid-template-columns: 44px 44px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: var(--s3); padding: 10px 16px 9px 12px; background: rgba(9, 8, 14, 0.88); border-left: 5px solid var(--pc); text-align: left; animation: pp-in 0.4s var(--spring) both; }
.pc-results li:nth-child(2) { animation-delay: 0.12s; }
.pc-results li:nth-child(3) { animation-delay: 0.24s; }
.pc-results li:nth-child(4) { animation-delay: 0.36s; }
.pc-results li b { grid-row: 1 / span 2; font: 400 30px/1 var(--display); color: var(--pc); }
.pc-results li span { font: 800 15px/1.1 var(--sans); letter-spacing: 0.12em; }
.pc-results li em { grid-row: 1 / span 2; grid-column: 4; font: 700 17px/1 var(--mono); font-style: normal; color: #fff; }
.pc-results li small { grid-column: 3; font: 700 10px/1.3 var(--sans); letter-spacing: 0.12em; color: var(--dim, #8d879a); }
.pc-medal { grid-row: 1 / span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font: 400 20px/1 var(--display); font-style: normal; color: #2a1d00; }
.pc-medal.gold { background: radial-gradient(circle at 35% 30%, #fff6c0, #ffd23f 45%, #b98a00); box-shadow: 0 0 22px rgba(255, 210, 63, 0.7); }
.pc-medal.silver { background: radial-gradient(circle at 35% 30%, #ffffff, #c9d2dc 45%, #7d8794); color: #1c2229; }
.pc-medal.bronze { background: radial-gradient(circle at 35% 30%, #ffe0c4, #d08a52 45%, #7a4a22); color: #2a1406; }
.pc-medal.none { background: rgba(255, 255, 255, 0.08); color: var(--dim, #8d879a); }