/* Mix Mode — the look shared by the control panel (index.php + /mobile/mixmode/index.php),
   the join lobby (teams.php), the join page (join.php), the host's screen (play.php) and a
   player's phone (player.php). Dark-navy glass with the blue glow of the رجوع disc, over the
   stage in /images/design/{web,mobile}/mixmode/background.webp. Every page scales off its
   own font-size: sizes below are in em. */

:root {
  --glass: rgba(9, 16, 52, .78);
  --glass-2: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .16);
  --blue: #2f86ff;
  --blue-glow: rgba(47, 134, 255, .5);
  --gold: #ffb52e;
  --gold-2: #ff8a00;
  --ink: #fff;
  --mute: rgba(255, 255, 255, .62);
  --t1: #ff6b6b;
  --t2: #4dabf7;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  min-height: 100vh; min-height: 100dvh;
  background: #0a1238;
  color: var(--ink);
  font-family: 'Cairo', sans-serif;
}
/* The stage: a fixed layer, not background-attachment: fixed (which iOS ignores). The big
   screen stretches the whole picture to fit; a phone covers with its own portrait cut. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: url('/images/design/web/mixmode/background.webp') center / 100% 100% no-repeat;
}
body.phone::before {
  background: url('/images/design/mobile/mixmode/background.webp') center / cover no-repeat;
}

/* ── the corner buttons: رجوع top left, اقتراح (includes/suggest.php) bottom left ── */
.back-btn {
  position: fixed; left: 22px; top: calc(22px + env(safe-area-inset-top));
  z-index: 900;
  display: flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none; white-space: nowrap;
  font-size: 15px; font-weight: 700; direction: ltr;
}
.back-btn .disc {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 20, 70, .8); border: 3px solid var(--blue);
  box-shadow: 0 0 18px var(--blue-glow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.back-btn svg { width: 26px; height: 26px; }
.back-btn:hover .disc { transform: scale(1.06); box-shadow: 0 0 24px rgba(47, 134, 255, .75); }
.back-btn:active .disc { transform: scale(.95); }
body #sgst-btn { top: auto; bottom: calc(22px + env(safe-area-inset-bottom)); left: 22px; }
body #sgst-btn { background: rgba(10, 20, 70, .8); border: 3px solid var(--blue); color: #fff; box-shadow: 0 0 18px var(--blue-glow); }
body #sgst-btn:hover { border-color: var(--blue); box-shadow: 0 0 24px rgba(47, 134, 255, .75); }
body #sgst-btn:focus-visible { outline-color: rgba(47, 134, 255, .8); }
body.phone .back-btn { left: 14px; top: calc(14px + env(safe-area-inset-top)); gap: 8px; font-size: 14px; }
body.phone .back-btn .disc { width: 46px; height: 46px; }
body.phone .back-btn svg { width: 22px; height: 22px; }
body.phone #sgst-btn { bottom: calc(14px + env(safe-area-inset-bottom)); left: 14px; }

/* ── the glass panel every screen sits in ── */
.panel {
  width: 100%;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 2px solid rgba(47, 134, 255, .55);
  border-radius: 1.6em;
  box-shadow: 0 0 2em rgba(47, 134, 255, .28), 0 1.4em 3em rgba(0, 0, 0, .45);
  padding: 1.3em 1.5em 1.5em;
  display: flex; flex-direction: column; gap: 1em;
  animation: mm-rise .5s cubic-bezier(.2, .85, .3, 1) backwards;
}
@keyframes mm-rise { from { opacity: 0; transform: translateY(1em); } }

.panel-title {
  text-align: center; font-size: 1.7em; font-weight: 900; line-height: 1.2;
  text-shadow: 0 0 .6em rgba(47, 134, 255, .6);
}
.panel-sub { text-align: center; color: var(--mute); font-size: .95em; font-weight: 700; margin-top: -.6em; }

.sec { display: flex; flex-direction: column; gap: .5em; }
.sec-h {
  display: flex; align-items: center; gap: .45em;
  font-size: .95em; font-weight: 800; color: var(--gold);
}
.sec-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 181, 46, .45), transparent); }
[dir="rtl"] .sec-h::after { background: linear-gradient(270deg, rgba(255, 181, 46, .45), transparent); }
.hint { font-size: .8em; color: var(--mute); font-weight: 600; }

/* طريقة اللعب: two big choices */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.opt {
  display: flex; align-items: center; gap: .8em; text-align: right;
  padding: .75em .9em; border-radius: 1.1em; cursor: pointer;
  font-family: inherit; color: #fff;
  background: var(--glass-2); border: 2px solid var(--line);
  transition: border-color .18s, background .18s, box-shadow .18s, transform .12s;
}
.opt:hover { border-color: rgba(47, 134, 255, .6); }
.opt:active { transform: scale(.98); }
.opt .oi {
  flex: none; width: 2.6em; height: 2.6em; border-radius: .8em;
  display: flex; align-items: center; justify-content: center;
  background: rgba(47, 134, 255, .16); color: #8fc0ff;
}
.opt .oi svg { width: 1.6em; height: 1.6em; }
.opt .ot { display: block; font-size: 1.1em; font-weight: 800; line-height: 1.3; }
.opt .os { display: block; font-size: .78em; font-weight: 600; color: var(--mute); line-height: 1.4; }
.opt.sel {
  border-color: var(--blue); background: rgba(47, 134, 255, .2);
  box-shadow: 0 0 1em var(--blue-glow), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.opt.sel .oi { background: var(--blue); color: #fff; }

/* نوع الجولة: the six old boxes, now chips — each keeps its colour */
.types { display: grid; grid-template-columns: repeat(6, 1fr); gap: .55em; }
.type {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em;
  padding: .55em .3em; border-radius: 1em; cursor: pointer;
  font-family: inherit; color: #fff;
  background: var(--glass-2); border: 2px solid color-mix(in srgb, var(--c) 55%, transparent);
  transition: transform .12s, box-shadow .18s, background .18s;
}
.type .ti { font-size: 1.5em; line-height: 1.1; }
.type .tn { font-size: .85em; font-weight: 800; white-space: nowrap; }
.type:hover { background: color-mix(in srgb, var(--c) 22%, transparent); }
.type:active { transform: scale(.96); }
.type.sel {
  background: linear-gradient(135deg, var(--c), var(--c2));
  border-color: #fff;
  box-shadow: 0 0 1em color-mix(in srgb, var(--c) 70%, transparent);
}

/* عدد الجولات + وقت الدور side by side */
.duo { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1em; }
.stepper { display: flex; align-items: center; justify-content: center; gap: .8em; }
.stepper button {
  width: 2.3em; height: 2.3em; border-radius: 50%; cursor: pointer;
  font-family: inherit; font-size: 1.1em; font-weight: 900; line-height: 1;
  color: #fff; background: rgba(47, 134, 255, .25); border: 2px solid var(--blue);
}
.stepper button:disabled { opacity: .3; cursor: default; }
.stepper .val { min-width: 1.6em; text-align: center; font-size: 1.9em; font-weight: 900; line-height: 1; }
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45em; }
.chip {
  padding: .55em .2em; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: .9em; font-weight: 800; color: #fff; white-space: nowrap;
  background: var(--glass-2); border: 2px solid var(--line);
}
.chip.sel { background: var(--gold); border-color: var(--gold); color: #2a1a00; box-shadow: 0 0 .9em rgba(255, 181, 46, .5); }

/* the two team names */
.teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; }
.team-in {
  display: flex; align-items: center; gap: .6em; min-width: 0;   /* or a long input overflows its column */
  padding: .2em .9em; border-radius: 1em;
  background: var(--glass-2); border: 2px solid color-mix(in srgb, var(--tc) 60%, transparent);
}
.team-in .sw { flex: none; width: .9em; height: .9em; border-radius: 50%; background: var(--tc); box-shadow: 0 0 .6em var(--tc); }
.team-in input {
  flex: 1; min-width: 0; padding: .55em 0; border: none; outline: none; background: none;
  font-family: inherit; font-size: 1.05em; font-weight: 800; color: #fff;
}
.team-in input::placeholder { color: rgba(255, 255, 255, .4); }
.team-in:focus-within { box-shadow: 0 0 .9em color-mix(in srgb, var(--tc) 55%, transparent); }
.t1c { --tc: var(--t1); }
.t2c { --tc: var(--t2); }

/* ابدأ اللعبة and the other gold buttons */
.go {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  width: 100%; padding: .55em 1em; border: none; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 1.35em; font-weight: 900; color: #2a1a00; text-decoration: none;
  background: linear-gradient(180deg, #ffd35c, var(--gold) 45%, var(--gold-2));
  box-shadow: 0 0 1.2em rgba(255, 181, 46, .55), 0 .3em 0 #b35c00;
  transition: transform .12s, filter .15s;
}
.go:hover { filter: brightness(1.06); }
.go:active { transform: translateY(.15em); box-shadow: 0 0 1em rgba(255, 181, 46, .5), 0 .1em 0 #b35c00; }
.go:disabled { filter: grayscale(.6) brightness(.8); cursor: default; }
.go svg { width: 1em; height: 1em; }
/* ابدأ الوقت, centred under the word's frame */
.go.clock-go { align-self: center; width: auto; min-width: 12em; font-size: 1.1em; padding: .35em 1.1em; box-shadow: 0 0 1em rgba(255, 181, 46, .5), 0 .2em 0 #b35c00; }
.ghost {
  display: flex; align-items: center; justify-content: center; gap: .4em;
  padding: .5em 1em; border-radius: 999px; cursor: pointer; text-decoration: none;
  font-family: inherit; font-size: 1em; font-weight: 800; color: #fff;
  background: rgba(255, 255, 255, .08); border: 2px solid var(--line);
}
.ghost:hover { border-color: rgba(47, 134, 255, .7); }

.err {
  text-align: center; font-weight: 800; color: #ffb3b3;
  background: rgba(231, 76, 60, .18); border: 1px solid rgba(231, 76, 60, .5);
  border-radius: .8em; padding: .5em .8em;
}

/* the game code, small at the bottom, as on every one-device game */
.gcode {
  position: fixed; bottom: 8px; left: 0; right: 0; text-align: center; pointer-events: none;
  font-size: 12px; letter-spacing: 1px; color: rgba(255, 255, 255, .55);
}
.gcode b { letter-spacing: 3px; }

/* ── the scoreboard strip on play.php / player.php ── */
.board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: .7em; padding-top: .5em; }
.sc {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: .45em .6em; border-radius: 1em; min-width: 0;
  background: var(--glass-2); border: 2px solid color-mix(in srgb, var(--tc) 45%, transparent);
  transition: box-shadow .2s, border-color .2s, background .2s;
}
.sc .nm { max-width: 100%; font-size: 1.35em; font-weight: 900; line-height: 1.3; color: var(--tc); overflow: hidden; white-space: nowrap; }   /* the team name, whole on one line: fit.js shrinks it to fit */   /* the team name, a heading over its score */
.sc .pts { font-size: 2.2em; font-weight: 900; line-height: 1.1; color: var(--tc); }
/* The team on the clock: filled in its colour, lifted, glowing in a slow pulse and tagged
   الدور — and the other team steps back, so the turn reads from across the room. */
.sc { position: relative; transition: opacity .3s, transform .3s, box-shadow .3s, border-color .3s, background .3s; }
.sc.on {
  border-width: 3px; border-color: var(--tc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 38%, transparent), color-mix(in srgb, var(--tc) 14%, transparent));
  transform: scale(1.06);
  animation: mm-turn 1.6s ease-in-out infinite;
}
.sc.on .nm { color: #fff; margin-top: .45em; text-shadow: 0 0 .5em var(--tc); }   /* clear of the الدور tag */
.sc.on .pts { color: #fff; text-shadow: 0 0 .5em var(--tc); }
.sc.on::before {
  content: "الدور"; position: absolute; top: -.85em; left: 50%; transform: translateX(-50%);
  padding: .05em .7em; border-radius: 999px; white-space: nowrap;
  font-size: .75em; font-weight: 900; color: #0a1238; background: var(--tc);
  box-shadow: 0 0 .8em var(--tc);
}
.board:has(.sc.on) .sc:not(.on) { opacity: .6; transform: scale(.94); }   /* stepped back, name still readable */
@keyframes mm-turn {
  0%, 100% { box-shadow: 0 0 .8em color-mix(in srgb, var(--tc) 45%, transparent); }
  50%      { box-shadow: 0 0 2em color-mix(in srgb, var(--tc) 85%, transparent), 0 0 .4em var(--tc) inset; }
}
@media (prefers-reduced-motion: reduce) { .sc.on { animation: none; box-shadow: 0 0 1.4em color-mix(in srgb, var(--tc) 70%, transparent); } }
.mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; }
.mid .rl { font-size: .8em; font-weight: 700; color: var(--mute); }
.mid .rv { font-size: 1.3em; font-weight: 900; }
/* the clock sits between the two scores */
.mid { gap: .3em; }
.mid .clock { font-size: 1.5em; min-width: 3.8em; padding: .05em .6em; }

.clock {
  align-self: center; min-width: 4.2em; text-align: center; direction: ltr;
  padding: .1em .8em; border-radius: 999px;
  font-size: 1.7em; font-weight: 900; font-variant-numeric: tabular-nums;
  background: rgba(47, 134, 255, .18); border: 2px solid var(--blue);
}
.clock.low { background: rgba(231, 76, 60, .25); border-color: #e74c3c; color: #ffb3b3; }
.clock.out { background: #e74c3c; border-color: #e74c3c; color: #fff; }

.badge {
  align-self: center; display: inline-flex; align-items: center; gap: .4em;
  padding: .25em 1em; border-radius: 999px;
  font-size: 1.05em; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--c), var(--c2, var(--c)));
  box-shadow: 0 0 1em color-mix(in srgb, var(--c) 60%, transparent);
}
.do { text-align: center; font-size: 1.15em; font-weight: 800; color: rgba(255, 255, 255, .85); }

.word-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em;
  min-height: 7.5em; padding: 1em; border-radius: 1.2em; text-align: center;
  max-width: 100%; overflow: hidden;   /* a word that has not been fitted yet must not widen the page */
  background: rgba(255, 255, 255, .06); border: 2px solid color-mix(in srgb, var(--c) 55%, transparent);
}
.word-ar { font-size: 3.4em; font-weight: 900; line-height: 1.25; color: var(--c); white-space: nowrap; max-width: 100%; }
.word-ar.long { font-size: 1.8em; white-space: normal; }
.word-en { font-size: 1.9em; font-weight: 700; color: rgba(255, 255, 255, .75); direction: ltr; white-space: nowrap; max-width: 100%; }
.word-cat {
  margin-top: .2em; padding: .15em .9em; border-radius: 999px; font-size: .85em; font-weight: 700;
  background: rgba(255, 255, 255, .1); border: 1px solid var(--line); color: rgba(255, 255, 255, .8);
}
.reveal {
  width: 100%; min-height: 7.5em; border-radius: 1.2em; cursor: pointer;
  font-family: inherit; font-size: 1.5em; font-weight: 900; color: var(--c);
  background: rgba(255, 255, 255, .06); border: 2px dashed color-mix(in srgb, var(--c) 60%, transparent);
}
.who {
  display: flex; flex-direction: column; align-items: center; gap: .2em; text-align: center;
  padding: 1em; border-radius: 1.2em; background: rgba(255, 255, 255, .06); border: 2px solid var(--line);
}
.who .lbl { font-size: .95em; font-weight: 700; color: var(--mute); }
.who .pn { font-size: 2.6em; font-weight: 900; line-height: 1.2; color: var(--tc, #fff); }

.judge { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.judge button {
  padding: .5em; border: none; border-radius: 1em; cursor: pointer;
  font-family: inherit; font-size: 1.5em; font-weight: 900; color: #fff;
  transition: transform .12s, filter .15s;
}
.judge button:active { transform: scale(.97); }
/* once صح or خطأ is pressed, both go grey until the next turn loads */
.judge button:disabled, .row2 button:disabled { opacity: .4; filter: grayscale(.8); cursor: default; transform: none; box-shadow: none; }
.judge .hit  { background: linear-gradient(180deg, #3edc65, #1a8f35); box-shadow: 0 0 1em rgba(62, 220, 101, .45), 0 .25em 0 #0f5e22; }
.judge .miss { background: linear-gradient(180deg, #ff6b6b, #c0392b); box-shadow: 0 0 1em rgba(255, 107, 107, .4), 0 .25em 0 #7d2016; }
.row2 { display: flex; gap: .7em; justify-content: center; flex-wrap: wrap; }
.row2 .ghost { flex: 1; min-width: 9em; }

.report { background: none; border: none; cursor: pointer; font-family: inherit; font-size: .8em; color: rgba(255, 255, 255, .35); align-self: center; }
.report:hover { color: rgba(255, 120, 120, .9); }

.win { text-align: center; }
.win .trophy { font-size: 4em; line-height: 1.1; }
.win .wt { font-size: 2em; font-weight: 900; color: var(--gold); text-shadow: 0 0 .6em rgba(255, 181, 46, .5); }

/* ── the page's own confirm box (play.php: رجوع, 🚩) ── */
.ask-ov {
  position: fixed; inset: 0; z-index: 99990;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(3, 6, 24, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease;
}
.ask-ov.open { opacity: 1; }
.ask {
  width: 100%; max-width: 380px; text-align: center;
  padding: 26px 22px 20px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(20, 34, 96, .96), rgba(9, 16, 52, .97));
  border: 2px solid var(--blue);
  box-shadow: 0 0 34px rgba(47, 134, 255, .45), 0 24px 60px rgba(0, 0, 0, .55);
  transform: translateY(14px) scale(.96); transition: transform .22s cubic-bezier(.2, .85, .3, 1.2);
}
.ask-ov.open .ask { transform: none; }
.ask-ico {
  width: 64px; height: 64px; margin: -58px auto 10px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: rgba(10, 20, 70, .95); border: 3px solid var(--gold);
  box-shadow: 0 0 20px rgba(255, 181, 46, .5);
}
.ask-title { font-size: 22px; font-weight: 900; margin-bottom: 6px; }
.ask-text { font-size: 15px; font-weight: 600; color: var(--mute); line-height: 1.7; margin-bottom: 18px; }
.ask-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ask-btns button {
  padding: 11px 10px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 900; color: #fff;
  transition: transform .12s, filter .15s;
}
.ask-btns button:active { transform: scale(.97); }
.ask-yes { border: none; background: linear-gradient(180deg, #ff6b6b, #c0392b); box-shadow: 0 0 14px rgba(255, 107, 107, .4), 0 3px 0 #7d2016; }
.ask-no  { background: rgba(255, 255, 255, .08); border: 2px solid var(--line) !important; }
.ask-no:hover { border-color: rgba(47, 134, 255, .7) !important; }
.ask-btns button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ⚙ الإعدادات on play.php (جهاز واحد) — the رجوع disc's twin, top right */
.gear-btn {
  position: fixed; right: 22px; top: calc(22px + env(safe-area-inset-top)); z-index: 900;
  display: flex; align-items: center; gap: 10px; padding: 0; border: none; background: none; cursor: pointer;
  color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; white-space: nowrap; direction: ltr;
}
.gear-btn .disc {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 20, 70, .8); border: 3px solid var(--blue); box-shadow: 0 0 18px var(--blue-glow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.gear-btn svg { width: 28px; height: 28px; transition: transform .5s ease; }
.gear-btn:hover .disc { box-shadow: 0 0 24px rgba(47, 134, 255, .75); }
.gear-btn:hover svg { transform: rotate(60deg); }
.gear-btn:active .disc { transform: scale(.95); }
body.phone .gear-btn { right: 14px; top: calc(14px + env(safe-area-inset-top)); font-size: 14px; gap: 8px; }
body.phone .gear-btn .disc { width: 46px; height: 46px; }
body.phone .gear-btn svg { width: 22px; height: 22px; }

/* the settings box: the confirm box, wider, holding the panel's controls */
.ask.set { max-width: 560px; text-align: right; display: flex; flex-direction: column; gap: 14px;
           max-height: calc(100dvh - 60px); overflow-y: auto; font-size: 14px; }
.ask.set .ask-title { text-align: center; margin-bottom: 0; }
.ask.set .ask-ico { flex: none; margin: 0 auto; width: 52px; height: 52px; font-size: 24px; }   /* inside: the box scrolls */
.ask.set .types { grid-template-columns: repeat(3, 1fr); }
.ask.set .team-in input { font-size: 16px; }
body.phone .ask.set .teams { grid-template-columns: 1fr; gap: 8px; }   /* a phone stacks the two names */
.ask-yes.save { background: linear-gradient(180deg, #ffd35c, var(--gold) 45%, var(--gold-2)); color: #2a1a00; box-shadow: 0 0 14px rgba(255, 181, 46, .5), 0 3px 0 #b35c00; }

/* ── the word card on phones (player.php, and play.php's host view): it opens on the name of
   whoever's turn it is; a tap shows the word, another tap hides it again ── */
.word-card.flip { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background .2s, box-shadow .2s; }
.word-card.flip:active { transform: scale(.99); }
.word-card.flip .w-name, .word-card.flip .w-word { display: flex; flex-direction: column; align-items: center; gap: .3em; max-width: 100%; }
.word-card.flip .w-word { display: none; }
.word-card.flip.show .w-name { display: none; }
.word-card.flip.show .w-word { display: flex; }
.word-card.flip:not(.show) { background: color-mix(in srgb, var(--c) 12%, rgba(255, 255, 255, .05)); box-shadow: 0 0 1.2em color-mix(in srgb, var(--c) 30%, transparent); }
.w-name .pn { font-size: 2.6em; font-weight: 900; line-height: 1.2; color: #fff; text-shadow: 0 0 .5em var(--c); }
.w-tap { font-size: .85em; font-weight: 700; color: var(--mute); }
.w-tap::before { content: "👆 "; }

/* 👥 اللاعبون on play.php (phones) — opened from the ⚙ settings box */
.ghost.set-pl { width: 100%; border-color: rgba(47, 134, 255, .55); }
.ask.plpop { max-width: 520px; }
.pl-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; text-align: right; }
.pl-team { border-radius: 16px; padding: 10px; background: rgba(255, 255, 255, .05);
           border: 2px solid color-mix(in srgb, var(--tc) 55%, transparent); max-height: 46vh; overflow-y: auto; }
.pl-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pl-n { flex: 1; min-width: 0; font-size: 17px; font-weight: 900; color: var(--tc); overflow: hidden; white-space: nowrap; }
.pl-c { flex: none; min-width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
        font-size: 13px; font-weight: 900; background: var(--tc); color: #0a1238; }
.pl-team ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pl-team li { display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 10px;
              background: rgba(255, 255, 255, .08); font-size: 15px; font-weight: 800; }
.pl-team li .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-team li button { flex: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
                     font-family: inherit; font-size: 14px; font-weight: 900; color: #fff;
                     background: rgba(255, 255, 255, .12); border: 1px solid var(--line); }
.pl-team li button:hover { border-color: rgba(47, 134, 255, .8); }
.pl-team li button.rm:hover { background: rgba(231, 76, 60, .55); border-color: #e74c3c; }
.pl-team li.now { background: color-mix(in srgb, var(--tc) 30%, transparent); box-shadow: inset 0 0 0 1px var(--tc); }
.pl-team li.none { background: none; color: var(--mute); font-weight: 700; text-align: center; }
.pl-key { text-align: center; margin-bottom: 14px; }
.ask.plpop .ask-btns { grid-template-columns: 1fr; }