.admin-page{ max-width:1080px; }
.admin-page .stats-grid, .admin-page .stat-list{ margin-bottom:34px; }
.admin-page h2{ margin-top:38px; }
.admin-page .leaderboard{ margin-top:10px; }

.admin-form{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 8px; }
.admin-form input{
  flex:1 1 200px; min-width:0; padding:12px 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--ink-3); color:var(--paper);
  font-family:var(--font-body); font-size:0.88rem;
  transition:border-color .2s var(--ease);
}
.admin-form input:focus{ outline:none; border-color:var(--accent-dim); }
.admin-form select{
  flex:1 1 160px; min-width:0; padding:12px 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--ink-3); color:var(--paper);
  font-family:var(--font-body); font-size:0.88rem;
}
.admin-form select:focus{ outline:none; border-color:var(--accent-dim); }
.admin-form__note{ font-size:0.8rem; color:var(--paper-dim); min-height:1.2em; }
.admin-form__note--error{ color:#e08a8a; }
.admin-form__note--success{ color:var(--accent); }

.admins-list{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.admins-list li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; border-radius:var(--radius-s);
  border:1px solid var(--line); background:rgba(236,231,220,0.02);
  font-size:0.85rem; color:var(--paper);
}
.admins-list__root{ font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); }
.admins-list__remove{
  border:1px solid var(--line); background:transparent; color:var(--paper-dim);
  border-radius:999px; padding:5px 12px; font-size:0.78rem; cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.admins-list__remove:hover{ color:#e08a8a; border-color:#e08a8a; }

.admin-select{
  padding:10px 14px; border-radius:999px; margin:6px 8px 6px 0;
  border:1px solid var(--line); background:var(--ink-3); color:var(--paper);
  font-family:var(--font-body); font-size:0.85rem;
}
.admin-select:focus{ outline:none; border-color:var(--accent-dim); }
.admin-cosmetics-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px 16px; margin:10px 0 18px; }
.admin-cosmetics-grid__row{ display:flex; flex-direction:column; gap:4px; }
.admin-cosmetics-grid__row label{ font-size:0.76rem; color:var(--paper-dim); }
.admin-cosmetics-grid__row span{ font-size:0.76rem; color:var(--paper-dim); }
/* Any input/select living directly inside this flex-COLUMN row must not
   inherit .admin-form input's flex:1 1 200px -- in a column flex parent
   that turns the basis into a *height*, not a width (the exact bug fixed
   for .report-modal__title-input earlier), producing a tall pill instead
   of a normal single-line field. */
.admin-cosmetics-grid__row input, .admin-cosmetics-grid__row select{ flex:none; width:100%; }
.admin-avatar-btn{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--line); background:var(--ink-3);
  font-size:1.15rem; cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.admin-avatar-btn:hover{ border-color:var(--accent-dim); }
.admin-avatar-btn.chip--active{ border-color:var(--gold-dim); background:rgba(205,166,95,0.14); }

.admin-view{ display:none; }
.admin-view--active{ display:block; }
.admin-subview{ display:none; }
.admin-subview--active{ display:block; }

/* ---- Admin: Promo Code image modal ---- */
.promo-image-canvas{ width:100%; max-width:600px; border-radius:var(--radius-m); display:block; margin:16px auto 0; }
.promo-image-actions{ display:flex; justify-content:center; margin-top:16px; }

/* ---- Admin: Logging tab (Event Log / Player History / Analytics) ---- */
.logs-filters{ align-items:center; }
.logs-filters__date{
  display:flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--paper-dim);
}
.logs-filters__date input{ flex:none; width:auto; padding:8px 12px; }

/* Level chips get their own accent per level so a scan of the feed reads
   severity at a glance, same idea components.css's design-notes call for
   semantic color being distinct from the site's own accent hue. */
.chip--level-info{ }
.chip--level-warning{ border-color:rgba(205,166,95,0.5); background:rgba(205,166,95,0.14); color:var(--gold); }
.chip--level-security{ border-color:rgba(216,110,110,0.5); background:rgba(216,110,110,0.14); color:#e08a8a; }
.chip--level-admin{ border-color:rgba(127,162,201,0.5); background:rgba(127,162,201,0.14); color:var(--accent); }
.chip--level-error{ border-color:rgba(216,110,110,0.7); background:rgba(216,110,110,0.24); color:#f0a0a0; }

.logs-row__details{
  max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:0.78rem; color:var(--paper-dim);
}
.logs-row__user{ color:var(--accent); text-decoration:none; }
.logs-row__user:hover{ text-decoration:underline; }
/* Row itself opens the full-detail modal (see #logEventModal) -- the
   Details column above is deliberately truncated, this is where the rest
   of it lives. */
.logs-row{ cursor:pointer; transition:background .15s var(--ease); }
.logs-row:hover{ background:rgba(127,162,201,0.06); }

.log-event-fields{
  margin:16px 0; display:grid; grid-template-columns:auto 1fr; gap:8px 16px;
}
.log-event-fields__row{ display:contents; }
.log-event-fields__row dt{ font-size:0.76rem; color:var(--paper-dim); }
.log-event-fields__row dd{ margin:0; font-size:0.86rem; color:var(--paper); overflow-wrap:anywhere; }
.log-event-detail__heading{
  margin:18px 0 8px; font-size:0.76rem; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--paper-dim);
}
.log-event-detail{
  margin:0; padding:14px 16px; border-radius:var(--radius-m);
  border:1px solid var(--line); background:rgba(0,0,0,0.25);
  font-family:'SFMono-Regular', Consolas, monospace; font-size:0.8rem; line-height:1.6;
  color:var(--paper); white-space:pre-wrap; word-break:break-word;
  max-height:40vh; overflow-y:auto;
}

.player-history-timeline{
  list-style:none; margin:16px 0 0; padding:0;
  display:flex; flex-direction:column; gap:2px;
  position:relative;
}
/* A continuous vertical rule down the left edge, behind each item's level
   chip -- the "life story" reads as one connected line, not a stack of
   unrelated cards. */
.player-history-timeline::before{
  content:''; position:absolute; left:33px; top:6px; bottom:6px; width:1px;
  background:var(--line);
}
.player-history-timeline__item{
  position:relative; display:flex; gap:14px; align-items:flex-start;
  padding:10px 14px 10px 0; border-radius:var(--radius-s);
  cursor:pointer; transition:background .15s var(--ease);
}
.player-history-timeline__item:hover{ background:rgba(127,162,201,0.06); }
.player-history-timeline__item .chip{
  position:relative; z-index:1; flex-shrink:0; width:66px; justify-content:center;
  background:var(--ink-2);
}
.player-history-timeline__body{ min-width:0; flex:1; padding-top:2px; }
.player-history-timeline__event{ margin:0; font-size:0.86rem; color:var(--paper); font-weight:600; }
.player-history-timeline__actor{ font-weight:400; color:var(--paper-dim); }
.player-history-timeline__detail{
  margin:3px 0 0; font-size:0.78rem; color:var(--paper-dim);
  overflow-wrap:anywhere;
}
.player-history-timeline__time{ margin:4px 0 0; font-size:0.7rem; color:var(--paper-dim); opacity:0.7; }

.analytics-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px; margin-top:16px; align-items:start;
}
.analytics-card{
  padding:16px 18px; border-radius:var(--radius-m);
  border:1px solid var(--line); background:rgba(236,231,220,0.02);
}
.analytics-card h3{
  margin:0 0 10px; font-size:0.76rem; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--paper-dim);
}
.analytics-card .stat-list{ margin:0; }