/* =====================================================================================================
   PIT STOP ARCADE — admin panel (ui/screens/admin.js): find players, grant / revoke exclusive items, audit log.
   Landscape phones 740–932 × 330–430 first: header on top, player + sets on the reading-start side, the log on
   the other side. Built on the app.css tokens; item art comes from css/exclusive.css (scaled down here).
   Logical properties everywhere so Arabic (RTL) mirrors; motion is transform / opacity only.
   ===================================================================================================== */

.adm {
  --adm-gold: #ffc21f;
  display: grid; gap: .5rem .7rem;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: 'head head' 'main log';
}
.adm::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 70% at 0% 0%, rgba(255, 194, 31, .07), transparent 60%), linear-gradient(180deg, rgba(7, 7, 11, .74), rgba(7, 7, 11, .62) 50%, rgba(7, 7, 11, .8));
}
html[dir="rtl"] .adm::before { background: radial-gradient(90% 70% at 100% 0%, rgba(255, 194, 31, .07), transparent 60%), linear-gradient(180deg, rgba(7, 7, 11, .74), rgba(7, 7, 11, .62) 50%, rgba(7, 7, 11, .8)); }
.adm > .b-head { grid-area: head; }
.adm-role { color: #ffe07a; border-color: rgba(255, 194, 31, .45); background: rgba(255, 194, 31, .1); }
.adm-role .ico { color: var(--adm-gold); }

/* ---- Panels ------------------------------------------------------------------------------------------ */
.adm-main { grid-area: main; min-height: 0; display: flex; flex-direction: column; gap: .4rem; padding: .5rem .55rem .15rem; }
.adm-log { grid-area: log; min-height: 0; display: flex; flex-direction: column; padding: .35rem .5rem .15rem; }
.adm-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .45rem; padding: .3rem .1rem .9rem; }

/* ---- Search ------------------------------------------------------------------------------------------ */
.adm-search { flex: none; display: flex; align-items: center; gap: .5rem; }
.adm-qbox {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .45rem;
  height: max(40px, 2.8rem); padding-inline: .7rem .3rem; border-radius: 10px; cursor: text;
  background: rgba(0, 0, 0, .36); border: 1px solid var(--line-2); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .32);
  transition: border-color .2s, box-shadow .2s;
}
.adm-qbox:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 106, 0, .18), inset 0 2px 6px rgba(0, 0, 0, .32); }
.adm-qico { color: var(--muted); font-size: 1.1rem; }
.adm-qbox:focus-within .adm-qico { color: var(--brand-hot); }
.adm-q {
  flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent;
  font-weight: 600; font-size: max(16px, .95rem); color: #fff; -webkit-user-select: text; user-select: text;
}
html[dir="rtl"] .adm-q { text-align: right; }
.adm-q::placeholder { color: rgba(255, 255, 255, .4); font-weight: 500; }
.adm-q::-webkit-search-cancel-button { display: none; }
.adm-qx {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: var(--muted); font-size: .85rem; cursor: pointer;
}
.adm-qx:active { transform: scale(.9); }
.adm-find { flex: none; min-height: max(40px, 2.8rem); }

/* ---- Empty / loading states ----------------------------------------------------------------------------- */
.adm-empty {
  margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem;
  max-width: 25rem; padding: .5rem .6rem; animation: rise-in .38s var(--ease-out) backwards;
}
.adm-empty > b { font-size: 1.02rem; font-weight: 800; line-height: 1.25; }
.adm-empty > span:not(.adm-empty-i) { font-size: .8rem; color: var(--muted); line-height: 1.45; }
.adm-empty > .btn { margin-top: .3rem; }
.adm-empty-i {
  display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; font-size: 1.4rem; flex: none;
  color: var(--adm-gold); background: rgba(255, 194, 31, .12); border: 1px solid rgba(255, 194, 31, .32);
}
.adm-empty.bad .adm-empty-i, .adm-empty-i.bad { color: #ff8a9b; background: rgba(255, 61, 90, .12); border-color: rgba(255, 61, 90, .35); }
.adm-empty.small { margin-block: 1.2rem auto; gap: .25rem; }
.adm-empty.small > b { font-size: .9rem; }
.adm-empty.small .adm-empty-i { width: 2.3rem; height: 2.3rem; font-size: 1.15rem; }
.adm-q-echo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffd6a8 !important; font-weight: 700; unicode-bidi: isolate; }
.adm-loading { margin: auto; display: flex; align-items: center; gap: .55rem; color: var(--muted); font-size: .85rem; font-weight: 700; padding: .8rem; }
li.adm-loading { justify-content: center; margin-block: 1.4rem auto; }

.adm-minis { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: .45rem; }
.adm-mini {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem; padding: 0 .65rem 0 .4rem; border-radius: 999px;
  background: color-mix(in srgb, var(--x1) 10%, rgba(0, 0, 0, .35)); border: 1px solid color-mix(in srgb, var(--x1) 38%, transparent);
  font-size: .76rem; white-space: nowrap;
}
html[dir="rtl"] .adm-mini { padding: 0 .4rem 0 .65rem; }
.adm-mini b { font-weight: 800; color: color-mix(in srgb, var(--x2) 70%, #fff); }
.adm-mini small { color: var(--muted); font-size: .7rem; }
.adm-mini-em { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; }
.adm-mini-em svg { width: 100%; height: 100%; filter: drop-shadow(0 0 .25rem var(--x1)); }

/* ---- Search results ---------------------------------------------------------------------------------- */
.adm-res-h { font-size: .78rem; font-weight: 700; color: var(--muted); padding-inline: .15rem; }
.adm-res-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); gap: .4rem; }
.adm-res {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem;
  min-height: 3.1rem; padding: .35rem .6rem; margin: 0; border-radius: 11px; text-align: start; font: inherit; color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03)); border: 1px solid var(--line);
  cursor: pointer; transition: transform .14s var(--ease), border-color .2s;
  animation: rise-in .34s var(--ease-out) backwards;
}
.adm-res:active { transform: scale(.975); }
@media (hover: hover) { .adm-res:hover { border-color: rgba(255, 255, 255, .26); } }
.adm-res-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.adm-res-t b { font-size: .9rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; text-align: start; }
.adm-mail { font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
html[dir="rtl"] .adm-mail { text-align: right; }
.adm-count { min-height: 1.6rem; padding: 0 .5rem; font-size: .72rem; }
.adm-av {
  flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  font-weight: 800; font-size: 1rem; color: #fff; text-shadow: 0 1px 1px rgba(90, 25, 0, .5);
  background: var(--grad-brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 10px rgba(255, 106, 0, .3);
}
.adm-av.big { width: 2.7rem; height: 2.7rem; font-size: 1.2rem; }
.adm-badge-admin { --bc: var(--adm-gold); color: #2a1c00; }
.adm-badge-admin .ico { font-size: 1.05em; }

/* ---- Player card ------------------------------------------------------------------------------------- */
.adm-link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; min-height: 1.9rem; padding: 0 .55rem; margin: 0;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--muted); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer;
}
.adm-link-i { font-size: 1rem; }
html[dir="rtl"] .adm-link-i { transform: scaleX(-1); }
.adm-user {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem;
  padding: .5rem .7rem; border-radius: 12px; flex: none;
  background: linear-gradient(100deg, rgba(255, 106, 0, .16), rgba(255, 255, 255, .03) 70%); border: 1px solid rgba(255, 138, 31, .28);
  animation: rise-in .34s var(--ease-out) backwards;
}
.adm-user-t { display: flex; flex-direction: column; min-width: 0; gap: .05rem; line-height: 1.25; }
.adm-user-name { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.adm-user-name b { min-width: 0; font-size: 1.05rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.adm-user-name .badge { flex: none; }
.adm-joined { font-size: .68rem; color: var(--muted); }
.adm-own { display: flex; flex-direction: column; align-items: center; line-height: 1; padding-inline: .2rem; }
.adm-own b { font-size: 1.45rem; font-weight: 800; color: #ffd6a8; }
.adm-own small { font-size: .66rem; color: var(--muted); margin-top: .15rem; white-space: nowrap; }

.adm-strip { flex: none; display: flex; align-items: center; gap: .3rem; padding-block: .1rem; min-height: 2.2rem; }
.adm-strip.none { gap: .4rem; padding-inline: .3rem; font-size: .78rem; color: var(--muted); }
.adm-strip.none .ico { color: var(--adm-gold); font-size: 1rem; }
.adm-note { flex: none; display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--muted); line-height: 1.35; padding-inline: .2rem; }
.adm-note .ico { flex: none; color: var(--brand-hot); font-size: .95rem; }

/* ---- Sets ------------------------------------------------------------------------------------------ */
.adm-sets { display: flex; flex-direction: column; gap: .4rem; }
.adm-set {
  --x1: #ffc21f; --x2: #fff0b8; --x3: #a86a00; --x4: #0b0b0d;
  flex: none; border-radius: 12px; overflow: hidden;
  background: linear-gradient(100deg, color-mix(in srgb, var(--x1) 13%, rgba(0, 0, 0, .3)), rgba(255, 255, 255, .025) 62%);
  border: 1px solid color-mix(in srgb, var(--x1) 30%, var(--line));
}
html[dir="rtl"] .adm-set { background: linear-gradient(260deg, color-mix(in srgb, var(--x1) 13%, rgba(0, 0, 0, .3)), rgba(255, 255, 255, .025) 62%); }
.adm-set.full { border-color: color-mix(in srgb, var(--x1) 60%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--x1) 18%, transparent); }
.adm-set-row { display: flex; align-items: center; gap: .35rem; padding: .25rem .4rem .1rem .25rem; }
html[dir="rtl"] .adm-set-row { padding: .25rem .25rem .1rem .4rem; }
.adm-set-head {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .55rem; min-height: max(40px, 2.75rem);
  padding: 0 .3rem; margin: 0; border: 0; border-radius: 9px; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer;
}
.adm-set-head:active { background: rgba(255, 255, 255, .05); }
.adm-set-em { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; }
.adm-set-em svg { width: 100%; height: 100%; filter: drop-shadow(0 0 .35rem color-mix(in srgb, var(--x1) 70%, transparent)); }
.adm-set-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.adm-set-t b { font-size: .95rem; font-weight: 800; color: color-mix(in srgb, var(--x2) 55%, #fff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-set-t small { font-size: .7rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-set-n { color: color-mix(in srgb, var(--x2) 60%, #fff); font-weight: 800; }
.adm-chev { flex: none; color: var(--muted); font-size: 1rem; transition: transform .25s var(--ease); }
.adm-set.open .adm-chev { transform: rotate(180deg); }
.adm-set-acts { flex: none; display: flex; gap: .35rem; }
.adm-set-acts .btn { min-height: max(34px, 2.3rem); padding: 0 .6rem; font-size: .78rem; }
.adm-sg { color: #fff; border-color: color-mix(in srgb, var(--x1) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--x1) 34%, transparent), color-mix(in srgb, var(--x1) 12%, transparent)); }
.adm-sg .ico { color: color-mix(in srgb, var(--x2) 70%, #fff); }
.adm-sr .ico { color: #ff8a9b; }
.adm-set-bar { height: 3px; margin: 0 .65rem .3rem; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.adm-set-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--x3), var(--x1), var(--x2)); transition: width .35s var(--ease); }
html[dir="rtl"] .adm-set-bar i { background: linear-gradient(270deg, var(--x3), var(--x1), var(--x2)); }

.adm-items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.4rem), 1fr)); gap: .35rem;
  padding: .15rem .4rem .45rem;
}
.adm-item {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .5rem;
  min-height: 3.2rem; padding: .3rem .45rem; border-radius: 10px; cursor: pointer;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--line);
  transition: border-color .2s, background-color .2s, opacity .2s;
  animation: rise-in .3s var(--ease-out) backwards;
}
.adm-item.on { border-color: color-mix(in srgb, var(--x1) 58%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--x1) 17%, rgba(0, 0, 0, .3)), rgba(0, 0, 0, .26)); }
html[dir="rtl"] .adm-item.on { background: linear-gradient(270deg, color-mix(in srgb, var(--x1) 17%, rgba(0, 0, 0, .3)), rgba(0, 0, 0, .26)); }
.adm-item.busy { opacity: .78; }
.adm-item.locked { cursor: default; }
.adm-item-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.adm-item-t b {
  font-size: .82rem; font-weight: 800; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.adm-item-t small { font-size: .66rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-spin { width: 1rem; height: 1rem; border-width: 2px; color: var(--x1); }
.adm-tg { transform: scale(.9); }

/* item art: the garage card previews (css/exclusive.css) shrunk into a chip */
.adm-art {
  position: relative; flex: none; display: grid; place-items: center; inline-size: 3.7rem; block-size: 2.55rem;
  border-radius: 8px; overflow: hidden; font-size: .8rem; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 25%, color-mix(in srgb, var(--x1) 24%, #121218), #08080c 75%);
  border: 1px solid color-mix(in srgb, var(--x1) 38%, transparent);
}
.adm-art.sm { inline-size: 3rem; block-size: 2.05rem; pointer-events: auto; }
.adm-art .xfx-orb { inline-size: 1.95rem; }
.adm-art.sm .xfx-orb { inline-size: 1.55rem; }
.adm-art .xfx-rim { inline-size: 2rem; }
.adm-art.sm .xfx-rim { inline-size: 1.6rem; }
.adm-art .xfx-kart { inline-size: 3.4rem; }
.adm-art.sm .xfx-kart { inline-size: 2.75rem; }
.adm-art .xfx-fxart { inline-size: 2.15rem; }
.adm-art .xfx-fxart .xfx-emblem { inline-size: 1.5rem; block-size: 1.5rem; }
.adm-art .xfx-fxglyph { inline-size: .85rem; block-size: .85rem; }
.adm-art.sm .xfx-fxart { inline-size: 1.75rem; }
.adm-art.sm .xfx-fxart .xfx-emblem { inline-size: 1.2rem; block-size: 1.2rem; }
.adm-art .xfx-wave { gap: .15rem; }
.adm-art .xfx-wave .xfx-emblem { inline-size: 1.35rem; block-size: 1.35rem; }
.adm-art .xfx-bars { block-size: 1.1rem; gap: 1px; }
.adm-art .xfx-bars i { inline-size: 2px; }
.adm-art.sm .xfx-wave .xfx-emblem { inline-size: 1.1rem; block-size: 1.1rem; }
.adm-art .xfx-art-name { font-size: .62rem; max-inline-size: 100%; padding-inline: .2rem; }
.adm-art.sm .xfx-art-name { font-size: .5rem; }
.adm-art .xfx-art-title .xfx-title { font-size: .42rem; }
.adm-art.sm .xfx-art-title .xfx-title { font-size: .36rem; }

/* ---- Audit log --------------------------------------------------------------------------------------- */
.adm-log-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-height: 2.5rem; padding-inline: .2rem .05rem; }
.adm-log-h { display: flex; align-items: center; gap: .4rem; font-size: .95rem; font-weight: 800; min-width: 0; }
.adm-log-h .ico { color: var(--brand-hot); }
.adm-log-refresh .ico { transition: transform .5s var(--ease); }
.adm-log.busy .adm-log-refresh .ico { animation: spin .9s linear infinite; }
.adm-log-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .3rem; padding: .3rem 0 .9rem; }
.adm-le {
  --x1: var(--brand-hot);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .45rem;
  padding: .4rem .5rem; border-radius: 10px; flex: none;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06);
  border-inline-start: 3px solid color-mix(in srgb, var(--x1) 70%, transparent);
  animation: rise-in .3s var(--ease-out) backwards;
}
.adm-le-i { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: .05rem; border-radius: 50%; font-size: .85rem; }
.adm-le.grant .adm-le-i { color: #04210f; background: var(--ok); }
.adm-le.revoke .adm-le-i { color: #fff; background: var(--bad); }
.adm-le-b { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.adm-le-t { font-size: .76rem; line-height: 1.45; color: #d8d9e0; overflow-wrap: anywhere; }
.adm-le-admin { font-weight: 800; color: #fff; }
.adm-le-item { font-weight: 800; color: color-mix(in srgb, var(--x1) 55%, #fff); }
.adm-le-who, .adm-le-target { font-weight: 700; }
/* the target's email stays on one line (ellipsis; full address in the tooltip, a tap opens the player) */
.adm-le-who {
  display: inline-block; max-width: 100%; vertical-align: bottom; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; font-weight: 700; color: var(--brand-hot); cursor: pointer; line-height: inherit;
  text-decoration: underline dotted rgba(255, 138, 31, .6); text-underline-offset: 2px; unicode-bidi: isolate;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start;
}
.adm-le-when { font-size: .66rem; color: var(--muted); }

/* ---- Denied ------------------------------------------------------------------------------------------ */
.adm.denied { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'main'; }
.adm-denied {
  grid-area: main; align-self: center; justify-self: center; width: min(26rem, 100%);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem; padding: 1.1rem 1.2rem 1rem;
}
.adm-denied > b { font-size: 1.15rem; font-weight: 800; }
.adm-denied > span:not(.adm-empty-i) { font-size: .85rem; color: var(--muted); line-height: 1.45; }
.adm-denied > .btn { margin-top: .35rem; }

/* ---- Undo toast (the shared #toasts host ignores pointer events) ---------------------------------------- */
.adm-toast { pointer-events: auto; padding-inline-end: .4rem; }
.adm-toast-t { min-width: 0; }
.adm-undo {
  flex: none; display: inline-flex; align-items: center; gap: .3rem; min-height: 2.1rem; padding: 0 .75rem; margin-inline-start: .2rem;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: rgba(255, 255, 255, .1);
  color: #fff; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer;
}
.adm-undo .ico { font-size: .95rem; color: #fff; }
.adm-undo:active { transform: scale(.94); }

/* ---- Settings → Account entry ------------------------------------------------------------------------ */
.set-acc-admin { color: #ffe9a8; border-color: rgba(255, 194, 31, .55); background: linear-gradient(180deg, rgba(255, 194, 31, .24), rgba(255, 194, 31, .07)); }
.set-acc-admin .ico { color: #ffc21f; }

/* ---- Narrow phones (740 wide and below) -------------------------------------------------------------- */
@media (max-width: 780px) {
  .adm { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); column-gap: .55rem; }
  .adm-set-acts .btn { padding: 0 .5rem; font-size: .74rem; }
  .adm-set-em { width: 1.85rem; height: 1.85rem; }
  .adm-set-head { gap: .45rem; }
  .adm-items { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.6rem), 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .adm-empty, .adm-res, .adm-user, .adm-item, .adm-le { animation: none; }
  .adm-art * { animation-duration: 0s !important; animation-iteration-count: 1 !important; }
}