/* Meme Throne · admin.css — sticker themed admin panel.
 * Two-column layout: tokens roster (left) + matches grid (right). */

.admin-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 40px;
  position: relative;
  overflow-x: hidden;
}

.admin-main { flex: 1; padding-top: 32px; padding-bottom: 60px; position: relative; z-index: 1; }
.admin-container { max-width: 1200px; }

.admin-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 800;
  color: var(--pepe-red);
  background: rgba(212, 63, 63, 0.18);
  border: 1px solid rgba(212, 63, 63, 0.4);
  padding: 4px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}

/* ════ Two-column grid ════ */
.admin-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 20px;
  margin-top: 24px;
  align-items: flex-start;
}

/* ════ TOKENS PANEL (left) ════ */

.tokens-panel {
  position: sticky;
  top: 88px;
  padding: 22px 22px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 110px);
  overflow: hidden;
  animation: tp-in 600ms ease-out;
}

/* v63 admin monochrome override */
.admin-body {
  background: #050505 !important;
  color: #f7f7f2 !important;
  font-family: var(--font-body) !important;
}

.admin-body .bg-stage {
  display: none !important;
}

.admin-body .app-header,
.tokens-panel,
.matches-panel,
.admin-panel,
.modal-card,
.form-card,
.token-card,
.match-card {
  border: 1px solid rgba(247, 247, 242, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    #0b0b0b !important;
  color: #f7f7f2 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 18px 44px rgba(0, 0, 0, 0.34) !important;
}

.admin-tag,
.admin-body button,
.admin-body .btn {
  border: 0 !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  box-shadow: none !important;
  font-family: var(--font-display) !important;
}
@keyframes tp-in {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}

.tp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tp-head h2 {
  margin: 0;
  font-family: var(--font-sticker);
  font-size: 26px;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.45);
}
.tp-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--pepe-blue);
  background: var(--blue-soft);
  border: 1px solid rgba(30, 136, 229, 0.35);
  padding: 4px 10px;
  border-radius: 999px;
}

/* Add token form */
.tp-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
}
.tp-add-row {
  display: grid;
  gap: 8px;
}
.tp-add-row:nth-child(1) { grid-template-columns: 56px 1fr; }
.tp-add-row:nth-child(2) { grid-template-columns: 1fr auto; }

.tp-add input,
.tp-add select {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: border-color 200ms, background 200ms, transform 160ms;
}
.tp-add input:focus,
.tp-add select:focus {
  border-color: var(--pepe-blue);
  background: rgba(30, 136, 229, 0.06);
}
.tp-emoji {
  text-align: center;
  font-size: 22px !important;
  padding: 6px !important;
}
.tp-name { font-weight: 700; letter-spacing: 0.02em; }
.tp-league {
  cursor: pointer;
  appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff80'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
  padding-right: 30px !important;
}
.tp-add-btn {
  padding: 10px 16px !important;
  font-size: 12px !important;
  font-family: var(--font-sticker) !important;
}

/* Tokens list */
.tp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
}
.tp-list::-webkit-scrollbar { width: 6px; }
.tp-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 4px; }
.tp-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 4px; }

.tp-empty {
  padding: 24px 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-35);
  background: rgba(0,0,0,0.2);
  border: 1px dashed var(--glass-line);
  border-radius: 12px;
}

.tp-token {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  transition: all 220ms;
  animation: tp-token-in 360ms ease-out;
}
@keyframes tp-token-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}
.tp-token:hover {
  border-color: var(--pepe-blue);
  background: rgba(30, 136, 229, 0.08);
  transform: translateX(2px);
}
.tp-token.is-removing {
  animation: tp-token-out 280ms ease-in forwards;
}
@keyframes tp-token-out {
  to { opacity: 0; transform: translateX(20px) scale(0.95); }
}
.tp-token-emoji {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-line);
}
.tp-token-name {
  font-family: var(--font-sticker);
  font-size: 16px;
  letter-spacing: 0.01em;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-token-league {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  font-weight: 700;
}
.tp-token-league.lg-bronze { color: #CD7F32; background: rgba(205, 127, 50, 0.15); }
.tp-token-league.lg-silver { color: #C0C0C0; background: rgba(192, 192, 192, 0.15); }
.tp-token-league.lg-gold   { color: #FFD60A; background: rgba(255, 214, 10, 0.15); }
.tp-token-del {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(212, 63, 63, 0.12);
  border: 1px solid rgba(212, 63, 63, 0.3);
  color: var(--pepe-red);
  cursor: pointer;
  font-size: 12px;
  transition: all 200ms;
}
.tp-token-del:hover { background: var(--pepe-red); color: #fff; transform: rotate(90deg); }


/* ════ MATCHES PANEL (right) ════ */

.matches-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: mp-in 600ms 100ms both ease-out;
}
@keyframes mp-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

.mp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mp-head h2 {
  margin: 0;
  font-family: var(--font-sticker);
  font-size: 26px;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.45);
}

.matches-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.mp-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-35);
  background: var(--glass-bg);
  border: 1px dashed var(--glass-line);
  border-radius: 14px;
}

/* Match card */
.mc-card {
  padding: 16px 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 240ms;
  animation: mc-in 500ms both ease-out;
}
.mc-card:nth-child(1) { animation-delay: 60ms; }
.mc-card:nth-child(2) { animation-delay: 120ms; }
.mc-card:nth-child(3) { animation-delay: 180ms; }
.mc-card:nth-child(4) { animation-delay: 240ms; }
.mc-card:nth-child(5) { animation-delay: 300ms; }
.mc-card:nth-child(6) { animation-delay: 360ms; }
.mc-card:nth-child(7) { animation-delay: 420ms; }
@keyframes mc-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.mc-card.is-final {
  grid-column: 1 / -1;
  border-color: rgba(255, 214, 10, 0.45);
  background: linear-gradient(180deg, rgba(255, 214, 10, 0.04), transparent), var(--glass-bg);
}
.mc-card.is-active { border-color: var(--pepe-blue); }
.mc-card.is-done   { opacity: 0.78; }

.mc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--glass-line);
  padding-bottom: 10px;
}
.mc-stage { color: var(--pepe-blue); font-weight: 800; }
.mc-card.is-final .mc-stage { color: #FFD60A; }
.mc-key {
  font-family: var(--font-mono);
  color: var(--text-35);
  font-size: 10px;
}

.mc-slots {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}

.mc-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 14px;
  background: rgba(255,255,255,0.03);
  border: 2px dashed var(--glass-line);
  border-radius: 12px;
  cursor: pointer;
  transition: all 220ms;
  position: relative;
}
.mc-slot:hover {
  border-color: var(--pepe-blue);
  border-style: solid;
  background: rgba(30, 136, 229, 0.08);
  transform: scale(1.03);
}
.mc-slot.is-filled {
  border-style: solid;
  border-color: var(--glass-line-2);
}
.mc-slot.is-winner {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 8px 24px -8px rgba(255, 214, 10, 0.5);
  background: rgba(255, 214, 10, 0.06);
}

.mc-slot-emoji {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-line);
}
.mc-slot.is-filled .mc-slot-emoji {
  background: rgba(30, 136, 229, 0.12);
  border-color: rgba(30, 136, 229, 0.35);
}
.mc-slot-name {
  font-family: var(--font-sticker);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-slot-empty {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-35);
}
.mc-slot-votes {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-50);
  font-variant-numeric: tabular-nums;
}
.mc-slot-crown {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  animation: crown-bob 2.4s ease-in-out infinite;
}
@keyframes crown-bob {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg) translateY(-2px); }
}

.mc-vs {
  font-family: var(--font-sticker);
  font-size: 16px;
  color: var(--text-35);
  letter-spacing: 0.06em;
}

/* Status pills */
.mc-status {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
}
.mc-status-btn {
  flex: 1;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-50);
  transition: all 200ms;
}
.mc-status-btn:hover { color: var(--text); }
.mc-status-btn.is-on {
  color: #fff;
}
.mc-status-btn.is-pending.is-on { background: var(--text-35); }
.mc-status-btn.is-active.is-on  { background: var(--pepe-blue); }
.mc-status-btn.is-done.is-on    { background: var(--pepe-green); }


/* ════ Champion row ════ */

.champion-row {
  margin-top: 8px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  border-radius: 18px;
  border-color: rgba(255, 214, 10, 0.4);
  background:
    linear-gradient(135deg, rgba(255, 214, 10, 0.10), transparent 50%),
    var(--glass-bg);
}
.cr-info { display: flex; flex-direction: column; gap: 4px; }
.cr-label {
  font-family: var(--font-sticker);
  font-size: 18px;
  color: #FFD60A;
  text-shadow: 0 2px 0 rgba(0,0,0,0.45);
}
.cr-hint {
  font-size: 12px;
  color: var(--text-50);
}
.cr-form {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cr-input {
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text);
  font-family: var(--font-sticker);
  font-size: 16px;
  outline: none;
  width: 200px;
  transition: border-color 200ms;
}
.cr-input:focus { border-color: #FFD60A; }


/* ════ Token assign modal ════ */

.am-tokens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
}
.am-token {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  cursor: pointer;
  transition: all 220ms;
}
.am-token:hover {
  border-color: var(--pepe-blue);
  background: rgba(30, 136, 229, 0.12);
  transform: translateY(-3px) scale(1.04);
}
.am-token-emoji {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-line);
}
.am-token-name {
  font-family: var(--font-sticker);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: #fff;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ════ Responsive ════ */

@media (max-width: 920px) {
  .admin-grid { grid-template-columns: 1fr; }
  .tokens-panel { position: static; max-height: 480px; }
  .matches-grid { grid-template-columns: 1fr; }
  .champion-row { grid-template-columns: 1fr; }
  .cr-input { width: 100%; }
}

/* v63 final admin monochrome pass */
.admin-body,
.admin-body * {
  font-family: var(--font-body) !important;
}

.admin-body h1,
.admin-body h2,
.admin-body h3,
.admin-body button,
.admin-body .btn {
  font-family: var(--font-display) !important;
}

.admin-body .app-header,
.tokens-panel,
.matches-panel,
.admin-panel,
.modal-card,
.form-card,
.token-card,
.match-card,
.tp-add,
.tp-list,
.match-panel,
.am-token {
  border-color: rgba(247, 247, 242, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    #0b0b0b !important;
  color: #f7f7f2 !important;
  box-shadow: none !important;
}