/* 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: var(--font-body);
  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 var(--border);
  border-radius: .625rem;
  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: var(--font-body); }

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

/* Generic player card */
.tg-card {
  background: var(--tg-surface);
  border: 1px solid var(--border);
  border-radius: .625rem;
  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 var(--border);
  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: .625rem;
  padding: 14px 20px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  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: .625rem;
  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: .625rem;
  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 var(--border);
}
.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: .625rem;
  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; }
}