/* Everything is laid out on a fixed 1280x720 "TV screen" (the size of the
   reference captures) and the whole thing is scaled to fit the window.
   All numbers below are 720p pixels measured from the 360 screenshots. */

/* Selawik: Microsoft's open-source Segoe UI look-alike (fonts/Selawik-LICENSE.txt),
   for Macs and phones. Windows uses its own Segoe UI first. */
@font-face { font-family: Selawik; src: url(/fonts/selawk.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Selawik; src: url(/fonts/selawksb.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Selawik; src: url(/fonts/selawkb.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --font: Convection, "Segoe UI", Selawik, "Helvetica Neue", Arial, sans-serif;
  --text: #2f3133;
  --text-off: #a9b0b4;
  --white-text: #eef0f2;
  --tab-dark: #485969;
  --tab-light: #f8fbff;
  --status-green: #8cc63e;
  --green-row: linear-gradient(#b5e57f 0, #7bc224 2px, #70cf00 4px, #57b101 50%, #428a0d calc(100% - 2px), #35691a 100%);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #010101;
  font-family: var(--font);
  letter-spacing: .059em; /* the 360 font sets letters ~10% wider apart than Segoe UI */
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

#stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 1280px;
  height: 720px;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  overflow: hidden;
  background: #010101;
}

.ico { display: block; fill: currentColor; flex: none; }

/* Dev overlay (?ref=...) for lining up against a reference screenshot. */
#ref {
  position: absolute; inset: 0; width: 1280px; height: 720px;
  opacity: .5; pointer-events: none; z-index: 50;
}

/* ---------------------------------------------------------------- shared */

.screen { position: absolute; inset: 0; }
.screen.opening { animation: guide-open .22s cubic-bezier(.2, .8, .3, 1); }
@keyframes guide-open {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: none; }
}

.footer {
  position: absolute;
  display: flex;
  align-items: center;
  height: 22px;
  color: var(--white-text);
  font-size: 21px;
}
.footer button {
  all: unset;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: 13px;
  cursor: pointer;
}
.footer .ico { width: 21px; height: 21px; }
.footer button[hidden] { display: none; }

.gamerpic {
  width: 34px;
  height: 34px;
  box-shadow: 0 0 0 1px #fff, 0 0 2px 1px rgba(0, 0, 0, .3);
  flex: none;
}
/* The party leader's picture: thin dark edge with a soft yellow glow. */
.gamerpic.host { box-shadow: 0 0 0 1px #262600, 0 0 2px 3px #fff38a; }
.gamerpic svg { display: block; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- party guide */

.top-title {
  position: absolute;
  left: 233px;
  top: 57px;
  font-size: 22.5px;
  letter-spacing: .065em;
  color: #e9ecee;
}
.top-pic {
  position: absolute;
  left: 614px;
  top: 37px;
  width: 48px;
  height: 48px;
}
.top-pic svg { display: block; width: 100%; height: 100%; }
.clock {
  position: absolute;
  right: 242px;
  top: 60px;
  font-size: 20px;
  color: #e9ecee;
  word-spacing: 9px;
}

.guide {
  position: absolute;
  left: 206px;
  top: 93px;
  width: 862px;
  height: 525px;
  box-shadow: 0 0 0 1px #5f5f5f;
}

.tabs { display: flex; height: 43px; }
.tab {
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: 46px;
  gap: 9px;
  background: linear-gradient(#4b5c6c, #465767);
  border-left: 1px solid #3c4b59;
  color: #f4f6f8;
  font-size: 24px;
  --gap: var(--tab-dark);
}
.tab.party {
  flex: none;
  width: 386px;
  padding-left: 30px;
  gap: 18px;
  background: var(--tab-light);
  border-left: 0;
  color: var(--text);
  --gap: var(--tab-light);
}
.tab span { margin-top: -4px; }
.tab .ico-party { width: 27px; height: 26px; }
.tab .ico-person { width: 16px; height: 27px; }
.tab .ico-envelope { width: 26px; height: 19px; }
.tab .ico-controller { width: 28px; height: 20px; }

.list {
  position: relative;
  height: 482px;
  padding-top: 13px;
  background: linear-gradient(#f5fdff, #d5dce2);
}

.row {
  position: relative;
  display: flex;
  align-items: center;
  height: 42px;
  padding-left: 27px;
  color: var(--text);
  font-size: 24px;
  white-space: nowrap;
  cursor: pointer;
  --gap: #eef4f7;
  --badge-face: #f4f9fb;
}
.row::after {
  /* the thin two-tone line under every row */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(#c6ced1 50%, #e2e9ec 50%);
}
.row.disabled { color: var(--text-off); cursor: default; }
.row.selected {
  z-index: 1;
  margin: -1px 0;
  height: 44px;
  background: var(--green-row);
  color: #fff;
  --gap: #5cb303;
  --badge: #245a00;
  --badge-face: #6ec21a;
}
.row.selected::after { display: none; }

.member { padding-left: 0; }
.member .voice { position: absolute; left: 4px; width: 32px; height: 30px; color: #111; }
.member .gamerpic { position: absolute; left: 38px; }
.member .name { position: absolute; left: 81px; }
.member .status-ico { position: absolute; left: 421px; height: 21px; color: var(--status-green); transform: translateY(-3px); }
.member .status-ico.ico-person { width: 12.6px; }
.member .status-ico.ico-away { width: 16.8px; }
.member .status-text { position: absolute; left: 508px; }
.member .leader { position: absolute; left: 822px; width: 25px; height: 28px; color: #111; }
.row.selected .voice, .row.selected .leader { color: #fff; }
.row.selected .status-ico { color: #9ee05a; }

.party-footer { left: 234px; top: 625px; }

/* Not in a party (left, kicked, link full...): the message under "Start a Party". */
.no-party-msg {
  position: absolute;
  left: 0; right: 0;
  top: 220px;
  padding: 0 31px;
  text-align: center;
  font-size: 22.5px;
  line-height: 30px;
  color: #59595f;
}

/* Options for one member (opens in place of the list). */
.row.heading { cursor: default; font-weight: 600; gap: 14px; }

/* Leave-party confirmation. */
.dialog-shade {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 5;
}
.dialog {
  position: absolute;
  left: 390px;
  top: 250px;
  width: 500px;
  background: linear-gradient(#f5fdff, #d5dce2);
  box-shadow: 0 0 0 1px #5f5f5f, 0 10px 40px rgba(0, 0, 0, .6);
}
.dialog .msg { padding: 22px 27px 16px; font-size: 22px; color: var(--text); }

/* ---------------------------------------------------------------- keyboard */

.kb-title {
  position: absolute;
  left: 141px;
  top: 51px;
  font-size: 31px;
  color: #f2f2f2;
}
.kb {
  position: absolute;
  left: 197px;
  top: 118px;
  width: 880px;
  height: 479px;
  background: #eaeaec;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 6px 30px rgba(0, 0, 0, .5);
}
.kb-head {
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 172px;
  background: linear-gradient(#8e9197, #7e8187 25%, #6f7279 55%, #5d6067);
}
.kb-instr {
  position: absolute;
  left: 34px;
  top: 16px;
  font-size: 20px;
  color: #e8e9ec;
}
.kb-field {
  position: absolute;
  left: 33px;
  top: 117px;
  width: 780px;
  height: 39px;
  padding-left: 10px;
  background: #eaeaea;
  color: var(--text);
  font-size: 23px;
  line-height: 39px;
  white-space: pre;
}
.kb-field .caret {
  display: inline-block;
  width: 2px;
  height: 25px;
  margin: 0 -1px;
  vertical-align: -5px;
  background: #222;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.key {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ededef;
  border: 1px solid #b6b6b6;
  box-shadow: inset 0 0 0 1px #d2d2d4;
  color: #4a4b4d;
  font-size: 19px;
  cursor: pointer;
  --gap: #ededef;
}
.key.side { flex-direction: column; gap: 9px; padding-top: 6px; }
.key.off { color: #b9bbbe; cursor: default; }
.key.side.off { background: #c4c7cc; color: #a2a6ac; --gap: #c4c7cc; }
.key.done.off { background: #c8d8b3; color: #93a483; --gap: #c8d8b3; }
.kb .key.focus { /* ".kb" so focus also wins over the greyed-out keys */
  background: var(--green-row);
  border-color: #3d7d0c;
  box-shadow: none;
  color: #fff;
  --gap: #5cb303;
}
.key .ico-kb-left, .key .ico-kb-right { width: 40px; height: 18px; }
.key .ico-lt, .key .ico-rt { width: 22px; height: 24px; }
.key .ico-lstick { width: 28px; height: 26px; }
.key .ico-start { width: 21px; height: 21px; }
.key.wide { justify-content: flex-start; gap: 7px; padding-left: 10px; }
.key.wide .ico { width: 21px; height: 21px; }

.kb-footer { left: 140px; top: 639px; }

/* ---------------------------------------------------------------- gamerpic picker */

.pick-grid {
  position: absolute;
  left: 33px;
  top: 204px;
  display: grid;
  grid-template-columns: repeat(6, 104px);
  gap: 22px 26px;
}
.pick {
  width: 104px;
  height: 104px;
  padding: 4px;
  background: #ededef;
  border: 1px solid #b6b6b6;
  cursor: pointer;
}
.pick svg { display: block; width: 100%; height: 100%; }
.pick.focus { background: var(--green-row); border-color: #3d7d0c; }

/* ---------------------------------------------------------------- toasts */

#toasts { position: absolute; inset: 0; pointer-events: none; z-index: 10; }

/* Measured from a 720p capture of the 360's "Kicked from Xbox Live Party"
   notification: a slim dark pill with a light top rim, the orb on the left,
   two lines of light grey text. Wider messages make the pill grow right. */
.toast {
  position: absolute;
  left: 504px;
  top: 588px;
  height: 69px;
  min-width: 301px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 44px 0 6px;
  border: 1.5px solid;
  border-color: #9a99a0 #57575c #4a4a4a;
  border-radius: 35px;
  background: linear-gradient(#2d2c30, #28272a 50%, #202021);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 3px 9px rgba(0, 0, 0, .7);
  color: #dcdce0;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  animation: toast-in .3s ease-out;
  --gap: #d3d5d7;
}
.toast.leaving { animation: toast-out .3s ease-in forwards; }
.toast .ico-orb { width: 58px; height: 58px; }
.toast .lines { display: flex; flex-direction: column; padding-bottom: 5px; white-space: nowrap; }
@keyframes toast-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(24px); } }

/* People who turn animations off in their system settings get none. */
@media (prefers-reduced-motion: reduce) {
  .screen.opening, .toast, .toast.leaving { animation: none; }
  .kb-field .caret { animation: none; }
}

/* ---------------------------------------------------------------- phones (portrait) */
/* Holding a phone upright, the stage is a 540x960 "phone screen" instead of a
   TV (main.js sets .portrait). Same look, rearranged: full-width list, bigger
   rows, and the phone's own keyboard for the gamertag. */

.portrait #stage { width: 540px; height: 960px; }

.portrait .top-title { left: 20px; top: 38px; }
.portrait .top-pic { left: 246px; top: 22px; }
.portrait .clock { right: 20px; top: 42px; }
.portrait .guide { left: 12px; top: 84px; width: 516px; height: 790px; }
.portrait .tab { padding-left: 20px; gap: 7px; font-size: 22px; }
.portrait .tab.party { width: 222px; padding-left: 16px; gap: 12px; }
.portrait .list { height: 747px; }
.portrait .row { height: 58px; padding-left: 20px; font-size: 26px; }
.portrait .row.selected { height: 60px; }
.portrait .member { padding-left: 0; }
.portrait .member .voice { left: 4px; width: 35px; height: 33px; }
.portrait .member .gamerpic { left: 44px; width: 42px; height: 42px; }
.portrait .member .name { left: 100px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.portrait .member .status-ico { left: 414px; height: 26px; }
.portrait .member .status-ico.ico-person { width: 15.6px; }
.portrait .member .status-ico.ico-away { width: 20.8px; }
.portrait .member .status-text { display: none; }
.portrait .member .leader { left: 466px; width: 30px; height: 33px; }
.portrait .no-party-msg { top: 260px; padding: 0 24px; font-size: 24px; line-height: 32px; }
.portrait .footer { height: 44px; font-size: 26px; }
.portrait .footer button { gap: 10px; margin-right: 24px; }
.portrait .footer .ico { width: 30px; height: 30px; }
.portrait .party-footer, .portrait .kb-footer { left: 20px; top: 894px; }
.portrait .dialog { left: 30px; top: 330px; width: 480px; }
.portrait .toast { left: 119px; top: 780px; }

.portrait .kb-title { left: 20px; top: 34px; font-size: 30px; }
.portrait .kb { left: 12px; top: 100px; width: 516px; height: 310px; }
.portrait .kb.pick-panel { height: 600px; }
.portrait .kb-head { height: 200px; }
.portrait .kb-instr { left: 20px; right: 20px; font-size: 21px; }
.portrait .kb-field { left: 20px; top: 110px; width: 476px; height: 52px; line-height: 52px; font-size: 26px; }
.portrait .kb .key { display: none; }
.portrait .pick-grid { left: 20px; top: 216px; grid-template-columns: repeat(4, 104px); gap: 20px; }

/* The phone's own keyboard: a real text box in the field, and a big Done. */
.kb-native, .kb-phone-done { display: none; }
.portrait .kb-field .shown { display: none; }
.portrait .kb-native {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.portrait .kb-phone-done {
  position: absolute;
  left: 20px;
  top: 224px;
  width: 476px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--green-row);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  --gap: #5cb303;
}
.portrait .kb-phone-done .ico { width: 26px; height: 26px; }