/* ==========================================================================
   MathClash — Party tab (Kahoot-style live game)
   Loaded AFTER mobile-fixes.css (see index.html).
   The Create | Join switch reuses .duel-kind-switch / .duel-kind-btn.
   ========================================================================== */

/* 0. Five game-mode tabs. On phones the tabs sit in a 2-column grid, so an odd
   tab count would leave the last tab alone in a half-width cell: let it span. */
@media (max-width: 600px) {
  .mode-selector-track > .mode-tab:nth-of-type(odd):last-of-type {
    grid-column: 1 / -1;
  }
}

/* 1. Layout ---------------------------------------------------------------- */
.party-shell {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.party-card {
  min-width: 0;
  padding: 24px;
  text-align: left;
  animation: .35s rise;
}
.party-host,
.party-player-view,
.party-final {
  display: grid;
  gap: 16px;
  align-content: start;
}
.party-head {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}
.party-head h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.party-head p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
}
.party-field {
  display: block;
  margin-bottom: 18px;
}
.party-field .field-label {
  align-items: center;
}
.party-avail {
  color: var(--cyan);
  letter-spacing: 0;
  text-transform: none;
}
.party-empty {
  margin: 0;
}
.party-info {
  margin: 0 0 14px;
}
.party-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* 2. Create panel ---------------------------------------------------------- */
.party-format {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.party-format-btn {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 13px 14px;
  color: var(--muted);
  text-align: left;
  background: #101a2db8;
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: color .2s, background .2s, border-color .2s, box-shadow .2s;
}
.party-format-btn strong {
  color: var(--text);
  font-size: .9rem;
}
.party-format-btn span {
  font-size: .74rem;
  line-height: 1.4;
}
.party-format-btn:hover {
  border-color: var(--border-bright);
}
.party-format-btn.active {
  border-color: #7ee6e09e;
  background: linear-gradient(135deg, #4a7dca52, #2b7a8138);
  box-shadow: inset 0 1px #ffffff14, 0 5px 18px #0f537026;
}
.party-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.party-chip {
  min-width: 52px;
  min-height: 40px;
  padding: 8px 14px;
  color: var(--muted);
  background: #101a2db8;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
  transition: color .2s, background .2s, border-color .2s;
}
.party-chip:hover {
  color: var(--text);
}
.party-chip.active {
  color: var(--text);
  border-color: #7ee6e09e;
  background: linear-gradient(135deg, #4a7dca52, #2b7a8138);
}
.party-code-input {
  padding-left: .5em;
  font: 800 2rem var(--font-mono);
  letter-spacing: .5em;
  text-align: center;
}

/* 3. Lobby ----------------------------------------------------------------- */
.party-code-label,
.party-code-hint {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
  text-align: center;
}
.party-code-hint {
  font-size: .8rem;
}
.party-code {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.party-digit {
  display: grid;
  place-items: center;
  width: clamp(52px, 17vw, 78px);
  aspect-ratio: 3 / 4;
  color: var(--text);
  font: 800 clamp(2rem, 9vw, 3rem) var(--font-mono);
  background: #081523cc;
  border: 1px solid #7ee6e061;
  border-radius: 12px;
  box-shadow: 0 0 22px #7ee6e01a;
}
.party-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.party-summary span {
  padding: 6px 11px;
  color: #b8cef3;
  font: 700 .72rem var(--font-mono);
  background: #4d8dff1f;
  border: 1px solid #4d8dff40;
  border-radius: 999px;
}
.party-section {
  display: grid;
  gap: 10px;
}
.party-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font: 700 .7rem var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.party-section-head b {
  color: var(--cyan);
}
.party-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.party-player {
  max-width: 100%;
  padding: 7px 12px;
  overflow: hidden;
  font-size: .84rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #17243be6;
  border: 1px solid var(--border);
  border-radius: 999px;
  animation: .25s rise;
}
.party-player.me {
  color: var(--cyan);
  border-color: #7ee6e09e;
}

/* 4. Questions ------------------------------------------------------------- */
.party-time {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.party-timebar {
  flex: 1;
  height: 8px;
  overflow: hidden;
  background: #0a1324;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.party-timebar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: width .25s linear;
}
.party-timebar i.low {
  background: linear-gradient(90deg, var(--red), var(--gold));
}
.party-question {
  min-height: 96px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.party-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.party-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 12px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  background: #101a2dd9;
  border: 1px solid var(--border);
  border-radius: 11px;
  transition: transform .2s, color .2s, background .2s, border-color .2s, opacity .2s;
}
.party-option:not(:disabled):hover {
  border-color: var(--border-bright);
  transform: translateY(-1px);
}
.party-option:disabled {
  cursor: default;
}
.party-option-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.party-option.picked {
  border-color: var(--blue);
  background: #3d78d833;
}
.party-option.correct {
  color: #c9f8e3;
  border-color: var(--green);
  background: #35d29a24;
}
.party-option.wrong {
  border-color: var(--red);
  background: #ff64791f;
}
.party-option.dim {
  opacity: .45;
}
.party-letter {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  font: 800 .78rem var(--font-mono);
  border-radius: 8px;
}
.party-letter.l0 { color: #a8c8ff; background: #6aa7ff33; }
.party-letter.l1 { color: #a4f0ec; background: #7ee6e02e; }
.party-letter.l2 { color: #ffdc9a; background: #f6c76a2e; }
.party-letter.l3 { color: #ffb6d3; background: #ff8fbd2e; }
.party-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font: 700 .8rem var(--font-mono);
}
.party-waiting,
.party-locked {
  color: var(--cyan);
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
}
.party-locked {
  color: var(--text);
}
.party-wait-host {
  margin: 0;
  text-align: center;
}
.party-me {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  color: var(--muted);
  font-size: .9rem;
}
.party-me b {
  color: var(--text);
}

/* 5. Host reveal ------------------------------------------------------------ */
.party-reveal {
  display: grid;
  gap: 16px;
}
.party-reveal .feedback {
  margin: 0;
}
.party-dist {
  display: grid;
  gap: 8px;
}
.party-dist-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(50px, 28%) 2ch;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #0a13249e;
  border: 1px solid var(--border);
  border-radius: 9px;
}
.party-dist-row.correct {
  border-color: #35d29a80;
}
.party-dist-label {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}
.party-dist-bar {
  height: 8px;
  overflow: hidden;
  background: #0a1324;
  border-radius: 999px;
}
.party-dist-bar i {
  display: block;
  height: 100%;
  background: var(--blue);
  transition: width .4s cubic-bezier(.22, 1, .36, 1);
}
.party-dist-row.correct .party-dist-bar i {
  background: var(--green);
}
.party-dist-text {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}

/* 6. Standings + podium ------------------------------------------------------ */
.party-standings {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.party-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #0a13249e;
  border: 1px solid var(--border);
  border-radius: 9px;
}
.party-row.me {
  border-color: #7ee6e09e;
}
.party-rank {
  color: var(--muted);
  font: 700 .8rem var(--font-mono);
}
.party-name {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.party-score {
  color: var(--gold);
  font: 700 .85rem var(--font-mono);
}
.party-final {
  justify-items: center;
  color: var(--gold);
  text-align: center;
}
.party-final .duel-title {
  margin: 0;
  color: var(--text);
}
.party-final .duel-sub,
.party-player-view .duel-title,
.party-player-view .duel-sub {
  margin: 0;
}
.party-final .party-standings {
  width: 100%;
  color: var(--text);
  text-align: left;
}
.party-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 4px 0;
}
.party-step {
  display: grid;
  flex: 1;
  gap: 4px;
  justify-items: center;
  min-width: 0;
  max-width: 120px;
  text-align: center;
}
.party-step-name {
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: .85rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.party-step b {
  color: var(--gold);
  font: 700 .8rem var(--font-mono);
}
.party-step-bar {
  display: grid;
  place-items: center;
  width: 100%;
  color: var(--text);
  font: 800 1.4rem var(--font-mono);
  background: linear-gradient(180deg, #4a7dca66, #2b7a8133);
  border: 1px solid var(--border-bright);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
}
.party-step.place-1 .party-step-bar { height: 96px; color: var(--gold); border-color: #f6c76a99; }
.party-step.place-2 .party-step-bar { height: 70px; }
.party-step.place-3 .party-step-bar { height: 52px; }

/* 7. Phones ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .party-card {
    padding: 18px;
  }
  .party-code {
    gap: 8px;
  }
}
@media (max-width: 430px) {
  .party-format {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 360px) {
  .party-options {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .party-card,
  .party-player {
    animation: none;
  }
  .party-timebar i,
  .party-dist-bar i {
    transition: none;
  }
}

/* 8. Join link, QR code, lobby controls ------------------------------------ */
.party-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 26px;
}
.party-qr {
  flex: none;
  width: clamp(140px, 20vw, 190px);
  height: auto;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 22px #7ee6e01a;
}
.party-share-side {
  display: grid;
  gap: 10px;
  justify-items: start;
  min-width: 0;
  max-width: 100%;
}
.party-share-side .party-code-hint {
  text-align: left;
}
.party-link {
  margin: 0;
  max-width: 100%;
  padding: 8px 10px;
  overflow-wrap: anywhere;
  color: var(--cyan);
  font: 700 .78rem var(--font-mono);
  background: #081523cc;
  border: 1px solid var(--border);
  border-radius: 8px;
  user-select: all;
}
.party-player.kickable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-right: 6px;
}
.party-player-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.party-kick {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  color: var(--red);
  font: 700 .68rem var(--font-mono);
  letter-spacing: .02em;
  background: #ff64791a;
  border: 1px solid #ff7f8759;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.party-kick:hover {
  background: #ff64792e;
  border-color: var(--red);
}
.party-lock.on {
  color: var(--gold);
  border-color: #f6c76a99;
  background: #f6c76a14;
}
.party-locked-note {
  color: var(--gold);
}
.party-standings-me {
  margin-top: 2px;
}

/* 9. Presenter view (host) ----------------------------------------------------
   On the Party tab the app hides the Live Standings column and adds
   .party-mode to the grid, so the game uses the full width. The host card
   gets larger type; the fullscreen stage makes it larger still. */
.main-grid.party-mode {
  grid-template-columns: minmax(0, 1fr);
}
.party-stage {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.party-stage-bar {
  display: flex;
  justify-content: flex-end;
}
.party-fs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: .78rem;
}
@media (min-width: 881px) {
  .main-grid.party-mode {
    width: min(1480px, 100%);
  }
  .party-host .party-question.problem-body {
    min-height: 170px;
    padding-top: 22px;
    padding-bottom: 22px;
    font-size: clamp(1.7rem, 2.6vw, 2.5rem);
    line-height: 1.5;
  }
  .party-host .party-options {
    gap: 14px;
  }
  .party-host .party-option {
    gap: 16px;
    min-height: 88px;
    padding: 16px 18px;
    font-size: clamp(1.25rem, 1.9vw, 1.8rem);
  }
  .party-host .party-letter {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
    border-radius: 10px;
  }
  .party-host .party-option svg {
    width: 1.3em;
    height: 1.3em;
  }
  .party-host .timer {
    padding: 8px 16px;
    font-size: 1.05rem;
  }
  .party-host .party-timebar {
    height: 12px;
  }
  .party-host .party-progress {
    font-size: 1rem;
  }
  .party-host .party-reveal .feedback {
    font-size: clamp(1.2rem, 2vw, 1.8rem);
  }
  .party-host .party-dist-row {
    grid-template-columns: auto minmax(0, 1fr) minmax(80px, 30%) 3ch;
    padding: 12px 14px;
    font-size: 1.15rem;
  }
  .party-host .party-dist-bar {
    height: 12px;
  }
  .party-host .party-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    padding: 12px 16px;
    font-size: 1.15rem;
  }
  .party-host .party-rank {
    font-size: 1rem;
  }
  .party-host .party-score {
    font-size: 1.05rem;
  }
  .party-host .party-digit {
    width: clamp(64px, 7vw, 100px);
    font-size: clamp(2.4rem, 4vw, 3.8rem);
  }
}

/* Fullscreen: the stage fills the screen and the game scales up again. */
.party-stage.is-full {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(14px, 2.4vw, 36px);
  overflow: auto;
  background:
    radial-gradient(circle at 13% -6%, #4086d338, transparent 31rem),
    radial-gradient(circle at 96% 78%, #31b79f1a, transparent 26rem),
    var(--bg);
}
.party-stage.is-full > .party-stage-bar {
  flex: none;
}
.party-stage.is-full > .card {
  width: min(1500px, 100%);
  margin: auto;
}
.party-stage.is-full .party-host .party-question.problem-body {
  min-height: 220px;
  font-size: clamp(2rem, 4vw, 3.8rem);
}
.party-stage.is-full .party-host .party-option {
  min-height: 110px;
  font-size: clamp(1.5rem, 2.7vw, 2.6rem);
}
.party-stage.is-full .party-host .party-letter {
  width: 52px;
  height: 52px;
  font-size: 1.4rem;
}
.party-stage.is-full .party-host .timer {
  font-size: 1.5rem;
}
.party-stage.is-full .party-host .party-digit {
  width: clamp(80px, 9vw, 150px);
  font-size: clamp(3rem, 6vw, 5.5rem);
}
.party-stage.is-full .party-qr {
  width: clamp(200px, 26vh, 300px);
}
.party-stage.is-full .party-link {
  font-size: 1rem;
}
.party-stage.is-full .party-host .party-dist-row,
.party-stage.is-full .party-host .party-row {
  font-size: clamp(1.2rem, 2vw, 1.8rem);
}

@media (max-width: 600px) {
  .party-share-side {
    justify-items: center;
  }
  .party-share-side .party-code-hint {
    text-align: center;
  }
}

/* Round 19 (M6): party codes are 6 characters now. Keep six boxes on one row on a phone. */
.party-code {
  flex-wrap: nowrap;
  gap: clamp(4px, 1.4vw, 10px);
}
.party-digit {
  width: clamp(38px, 11.5vw, 64px);
  font-size: clamp(1.5rem, 7vw, 2.6rem);
  border-radius: 10px;
}
.party-code-input {
  font-size: 1.6rem;
  letter-spacing: .32em;
  padding-left: .32em;
  text-transform: uppercase;
}