/* Shared styles for the new trivia games built on top of the
   Moroccan football dataset. Each game has its own page but shares
   this baseline so they feel like one family.
   Loaded by: higher-lower, stat-duel, teammate-chain, trophy-cabinet,
   transfer-timeline, all-time-xi. */

:root {
  --tg-bg:        #242d08;
  --tg-surface:   #000000;
  --tg-surface-2: #0a0a0a;
  --tg-text:      #ffffff;
  --tg-dim:       rgba(255,255,255,0.6);
  --tg-gold:      #ceff28;         /* site accent (was gold) */
  --tg-good:      #ceff28;
  --tg-warn:      #ff5c7a;
  --tg-violet:    #c4a0ff;
}
.tg-body {
  background: var(--tg-bg);
  color: var(--tg-text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.tg-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 12px 60px;
}

/* Headings */
.tg-title {
  text-align: center;
  font-family: "Bebas Neue", sans-serif;
  font-size: 34px;
  letter-spacing: 5px;
  margin: 8px 0 4px;
  color: var(--tg-text);
}
.tg-subtitle {
  text-align: center;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tg-dim);
  margin-bottom: 20px;
}

/* Score pill */
.tg-score {
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
  background: var(--tg-surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 16px;
  margin: 0 auto 16px;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 2px;
}
.tg-score-num { font-size: 28px; color: var(--tg-gold); line-height: 1; }
.tg-score-lbl { font-size: 11px; color: var(--tg-dim); letter-spacing: 1.5px; text-transform: uppercase; font-family: "Inter", sans-serif; }

.tg-score-row {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

/* Generic player card */
.tg-card {
  background: var(--tg-surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tg-card-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.15);
  background: var(--tg-surface-2);
  margin: 0 auto 10px;
  display: block;
}
.tg-card-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}
.tg-card-meta {
  font-size: 11px;
  color: var(--tg-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.tg-card-stat {
  font-family: "Bebas Neue", sans-serif;
  font-size: 36px;
  letter-spacing: 1.5px;
  color: var(--tg-gold);
  margin-top: 10px;
  line-height: 1;
}
.tg-card-stat .q { color: var(--tg-dim); }

/* Buttons */
.tg-btn {
  background: var(--tg-gold);
  color: #0a1122;
  border: none;
  border-radius: 10px;
  padding: 14px 20px;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 16px -4px rgba(255,200,87,0.4);
  transition: transform 0.1s;
  width: 100%;
}
.tg-btn:active { transform: translateY(1px); }
.tg-btn.secondary {
  background: var(--tg-surface-2);
  color: var(--tg-text);
  box-shadow: none;
}
.tg-btn.danger {
  background: var(--tg-warn);
  color: #fff;
}
.tg-btn.success {
  background: var(--tg-good);
  color: #0a1122;
}

/* Inputs */
.tg-input {
  width: 100%;
  background: var(--tg-surface);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--tg-text);
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
}
.tg-input:focus { outline: 2px solid rgba(255,200,87,0.5); border-color: transparent; }

/* Autocomplete */
.tg-ac {
  background: var(--tg-surface);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  max-height: 260px;
  overflow-y: auto;
  margin-top: 6px;
}
.tg-ac-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.tg-ac-item:hover { background: var(--tg-surface-2); }
.tg-ac-item img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  background: var(--tg-surface-2);
}
.tg-ac-item .n { font-size: 13px; font-weight: 600; }
.tg-ac-item .m { font-size: 10px; color: var(--tg-dim); }

/* Result flash */
.tg-flash {
  text-align: center;
  padding: 14px;
  border-radius: 10px;
  margin: 14px 0;
  font-weight: 700;
}
.tg-flash.ok   { background: rgba(62,207,142,0.15); color: var(--tg-good); }
.tg-flash.bad  { background: rgba(255,92,122,0.15); color: var(--tg-warn); }

/* Responsive */
@media (max-width: 520px) {
  .tg-wrap { padding: 12px 8px 40px; }
  .tg-title { font-size: 26px; letter-spacing: 3px; }
  .tg-card-img { width: 100px; height: 100px; }
  .tg-card-name { font-size: 14px; }
  .tg-card-stat { font-size: 30px; }
}