/* partywin.css — the party window (js/partywin.js), layout "A" of the social pages (assets/gen/nightcamp_pg_party_a_raw.png):
   the camp with the party round the fire, the four places under it, the leader's rules and the invite list on the
   right, the last hand-over line at the bottom. Sizes follow the mockup at the same window width (1 mockup px = 1u).
   The window's look is css/kui.css. */
.pw-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; }
.pw-win { width: calc(1240 * var(--u)); }
.pw-count {
  position: absolute; right: calc(70 * var(--u)); top: 50%; transform: translateY(-50%);
  font: 800 calc(24 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; color: #fff; -webkit-text-stroke: calc(5 * var(--u)) var(--ink); paint-order: stroke fill;
}
.pw-body { display: grid; grid-template-columns: calc(880 * var(--u)) minmax(0, 1fr); gap: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)) 0; }
.pw-main { display: flex; flex-direction: column; gap: calc(12 * var(--u)); min-width: 0; }

/* ---------- the camp ---------- */
.pw-scene {
  position: relative; height: calc(362 * var(--u)); overflow: hidden; border-radius: calc(18 * var(--u)); border: calc(4 * var(--u)) solid var(--ink);
  background-size: cover; background-position: 50% 36%; box-shadow: inset 0 0 calc(40 * var(--u)) rgba(10, 8, 30, 0.45);
}
.pw-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pw-people { position: absolute; inset: 0; pointer-events: none; }
.pw-person { position: absolute; width: 20%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.pw-tag { position: relative; display: flex; flex-direction: column; align-items: center; }
.pw-tag b {
  padding: calc(1 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(24, 22, 40, 0.92);
  border: calc(2.5 * var(--u)) solid rgba(255, 255, 255, 0.35); color: #fff; font: 700 calc(21 * var(--u)) / 1.45 'Mitr', sans-serif; white-space: nowrap;
}
.pw-tag.you b { background: rgba(24, 22, 40, 0.95); border-color: #ffd35c; }
.pw-crown { width: calc(40 * var(--u)); height: calc(40 * var(--u)); margin-bottom: calc(-6 * var(--u)); filter: drop-shadow(0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.35)); }

/* ---------- the four places ---------- */
.pw-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(12 * var(--u)); }
.pw-slot {
  display: flex; flex-direction: column; min-width: 0; height: calc(336 * var(--u)); box-sizing: border-box; padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
  border-radius: calc(18 * var(--u)); background: #fffaf0; border: calc(3 * var(--u)) solid #d8c8a4;
}
.pw-slot.you { border-color: #8fc6f1; box-shadow: 0 0 0 calc(2 * var(--u)) #cfe7fb inset; }
.pw-slot.lead .pw-face { border-color: #f2b632; }
.pw-slot.empty { background: #f3ead6; border-style: dashed; border-color: #c4b48e; }
.pw-face {
  position: relative; height: calc(134 * var(--u)); flex: none; border-radius: calc(14 * var(--u)); overflow: hidden;
  border: calc(4 * var(--u)) solid var(--ink); background: radial-gradient(ellipse at 50% 75%, #eaf5ff, #9fd0f6);
}
.pw-slot.empty .pw-face { display: grid; place-items: center; background: #ece2cb; border: calc(3 * var(--u)) dashed #c4b48e; }
.pw-face canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pw-fcrown { position: absolute; right: calc(6 * var(--u)); top: calc(4 * var(--u)); width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
.pw-plus { font: 700 calc(64 * var(--u)) / 1 'Baloo 2', sans-serif; color: #b3a888; }
.pw-badge {
  position: absolute; left: 50%; bottom: calc(6 * var(--u)); transform: translateX(-50%); padding: 0 calc(12 * var(--u)); border-radius: calc(12 * var(--u));
  border: calc(2.5 * var(--u)) solid var(--ink); background: linear-gradient(#cfd1dc, #9ea2b3); color: #fff; white-space: nowrap;
  font: 700 calc(14 * var(--u)) / 1.5 'Mitr', sans-serif; -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill;
}
.pw-sname, .pw-sjob, .pw-smap { flex: none; }
.pw-sname { margin-top: calc(7 * var(--u)); font: 700 calc(21 * var(--u)) / 1.25 'Mitr', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-sjob { font: 500 calc(15.5 * var(--u)) / 1.4 'Mitr', sans-serif; color: #4a4258; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-slot.empty .pw-sname, .pw-slot.empty .pw-sjob { text-align: center; color: #9c8e70; }
.pw-smap { display: flex; align-items: center; gap: calc(7 * var(--u)); font: 500 calc(15 * var(--u)) / 1.4 'Mitr', sans-serif; color: #6a6078; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-smap i { flex: none; width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%; border: calc(2.5 * var(--u)) solid var(--ink); background: #a7a3b3; }
.pw-smap.online i { background: #6ad36a; }
.pw-hp { height: calc(10 * var(--u)); margin: calc(6 * var(--u)) 0 calc(4 * var(--u)); overflow: hidden; border-radius: calc(6 * var(--u)); border: calc(2 * var(--u)) solid var(--ink); background: #2e3350; flex: none; }
.pw-hp i { display: block; height: 100%; background: linear-gradient(#9fe39a, #4cb95c); }
.pw-sbtn { width: 100%; height: calc(37 * var(--u)); margin-top: calc(5 * var(--u)); font-size: calc(16.5 * var(--u)); flex: none; }
.pw-slot .pw-sbtn:first-of-type { margin-top: auto; }

/* ---------- the rules and the invite list ---------- */
.pw-side { display: flex; flex-direction: column; gap: calc(14 * var(--u)); min-width: 0; }
.pw-box { border-radius: calc(18 * var(--u)); border: calc(4 * var(--u)) solid var(--ink); background: #fffaf0; overflow: hidden; min-width: 0; }
.pw-bh {
  display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); height: calc(46 * var(--u)); padding: 0 calc(12 * var(--u));
  background: linear-gradient(#7fcaf8, #3b8fdc); border-bottom: calc(4 * var(--u)) solid var(--ink);
}
.pw-bh span { font: 800 calc(21 * var(--u)) / 1 'Mitr', sans-serif; color: #fff; -webkit-text-stroke: calc(5 * var(--u)) var(--ink); paint-order: stroke fill; white-space: nowrap; }
.pw-bh small { display: flex; align-items: center; gap: calc(4 * var(--u)); font: 600 calc(14 * var(--u)) / 1 'Mitr', sans-serif; color: #fff; -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill; white-space: nowrap; }
.pw-bh small img { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.pw-rb { padding: calc(6 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); }
.pw-rt { margin: calc(4 * var(--u)) 0 calc(2 * var(--u)); font: 700 calc(17 * var(--u)) / 1.4 'Mitr', sans-serif; }
.pw-rt + .pw-radio { margin-top: 0; }
.pw-radio {
  display: grid; grid-template-columns: calc(26 * var(--u)) calc(36 * var(--u)) minmax(0, 1fr); align-items: center; gap: calc(9 * var(--u)); width: 100%;
  height: calc(40 * var(--u)); padding: 0 calc(4 * var(--u)); border: 0; border-radius: calc(10 * var(--u)); background: none; cursor: pointer; text-align: left;
  font: 600 calc(17 * var(--u)) / 1.2 'Mitr', sans-serif; color: var(--ink);
}
.pw-radio:not(:disabled):hover { background: rgba(127, 202, 248, 0.18); }
.pw-radio:disabled { cursor: default; }
.pw-radio i { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid var(--ink); background: #fff; box-sizing: border-box; }
.pw-radio.on i { background: radial-gradient(circle, #fff 0 22%, #3b8fdc 26%); }
.pw-radio img { width: calc(36 * var(--u)); height: calc(36 * var(--u)); object-fit: contain; }
.pw-radio:disabled:not(.on) span { color: #8a8296; }
.pw-rnote { margin-top: calc(6 * var(--u)); padding-top: calc(6 * var(--u)); border-top: calc(2 * var(--u)) solid #e4d7b9; font: 400 calc(13.5 * var(--u)) / 1.45 'Mitr', sans-serif; color: #6a6078; }
.pw-inv { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pw-list { height: calc(236 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); }
.pw-row { display: grid; grid-template-columns: calc(48 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(10 * var(--u)); padding: calc(6 * var(--u)) 0; border-bottom: calc(2 * var(--u)) solid #ece0c6; }
.pw-row:last-child { border-bottom: 0; }
.pw-row canvas { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid var(--ink); box-sizing: border-box; }
.pw-rn { min-width: 0; }
.pw-rn b { display: block; font: 700 calc(17 * var(--u)) / 1.25 'Mitr', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-rn small { display: block; font: 400 calc(13.5 * var(--u)) / 1.35 'Mitr', sans-serif; color: #6a6078; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-ibtn { height: calc(38 * var(--u)); padding: 0 calc(16 * var(--u)); font-size: calc(16.5 * var(--u)); }
.pw-st { font: 600 calc(13.5 * var(--u)) / 1.3 'Mitr', sans-serif; color: #8a8296; white-space: nowrap; }
.pw-st.in { color: #3e9c4b; }
.pw-empty { padding: calc(30 * var(--u)) calc(8 * var(--u)); text-align: center; font: 400 calc(15 * var(--u)) / 1.6 'Mitr', sans-serif; color: #7d7488; }

/* ---------- the last hand-over line ---------- */
.pw-news {
  display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(46 * var(--u)); margin: calc(12 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
  padding: 0 calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: linear-gradient(#272b47, #1b1e33); border: calc(4 * var(--u)) solid var(--ink);
  color: #eef0ff; font: 500 calc(17 * var(--u)) / 1.3 'Mitr', sans-serif;
}
.pw-news img { width: calc(32 * var(--u)); height: calc(32 * var(--u)); flex: none; }
.pw-news span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- on the main screen: the invite question (the party list itself: css/partylist.css) ---------- */
.pn-ask {
  position: absolute; left: 50%; top: calc(120 * var(--u)); transform: translateX(-50%); z-index: 25; pointer-events: auto; min-width: calc(380 * var(--u));
  padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u)); border-radius: calc(20 * var(--u)); background: #f7efdc; border: calc(5 * var(--u)) solid var(--ink);
  box-shadow: inset 0 0 0 calc(4 * var(--u)) #74b6ec, 0 calc(8 * var(--u)) 0 rgba(0, 0, 0, 0.3); color: var(--ink); text-align: center;
}
.pn-ask[hidden] { display: none; }
.pn-ask-t { font: 500 calc(19 * var(--u)) / 1.45 'Mitr', sans-serif; }
.pn-ask-t b { font-weight: 700; color: #2f6fb5; }
.pn-ask-t small { display: block; font-size: calc(14 * var(--u)); color: #6a6078; }
.pn-ask-b { display: flex; justify-content: center; gap: calc(12 * var(--u)); margin-top: calc(10 * var(--u)); }
.pn-ask-bar { height: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); border-radius: 99px; background: #e4d7b9; overflow: hidden; }
.pn-ask-bar i { display: block; height: 100%; width: 100%; background: #3b8fdc; }