/* ============================================================
   TRASFORMO · DESIGN SYSTEM
   Identità visiva dei giochi: oro nuragico su basalto scuro,
   micro-animazioni, feedback a ogni tocco.
   Un solo file per tutti i giochi.
   ============================================================ */

/* ---- VARIABILI ---- */
:root {
  --tg-gold: #c9a25c;
  --tg-gold-bright: #f5d48a;
  --tg-gold-dark: #8a6e3a;
  --tg-stone: #1a232b;
  --tg-stone-light: #2a3540;
  --tg-green: #7fc780;
  --tg-red: #e07070;
  --tg-blue: #7fc7ff;
  --tg-radius: 12px;
}

/* ---- CONTAINER GIOCO ---- */
.tg-game {
  max-width: 420px;
  margin: 0 auto;
  padding: 0 4px;
}

/* ---- HEADER GIOCO (score/timer/combo) ---- */
.tg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: var(--tg-radius);
  background: linear-gradient(135deg, rgba(201,162,92,.08), rgba(26,35,43,.6));
  border: 1px solid rgba(201,162,92,.12);
}
.tg-header .tg-stat {
  font-size: .78rem;
  color: rgba(236,229,216,.8);
  display: flex;
  align-items: center;
  gap: 4px;
}
.tg-header .tg-stat b {
  font-size: .95rem;
  color: var(--tg-gold-bright);
  font-weight: 700;
}
.tg-header .tg-stat.tg-timer-low {
  color: var(--tg-red);
  animation: tg-pulse-red .5s ease infinite;
}
@keyframes tg-pulse-red {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* ---- BARRE DI PROGRESSO ---- */
.tg-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(128,128,128,.15);
  overflow: hidden;
  margin: 4px 0;
}
.tg-bar > div {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--tg-gold-dark), var(--tg-gold), var(--tg-gold-bright));
  transition: width .3s ease;
}
.tg-bar.tg-bar-red > div {
  background: linear-gradient(90deg, #8a3030, var(--tg-red));
}

/* ---- BOTTONI GIOCO ---- */
.tg-btn {
  padding: 12px 16px;
  border-radius: var(--tg-radius);
  border: 1px solid rgba(201,162,92,.2);
  background: linear-gradient(135deg, var(--tg-stone-light), var(--tg-stone));
  color: inherit;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  position: relative;
  overflow: hidden;
}
.tg-btn:hover {
  border-color: rgba(201,162,92,.4);
  background: linear-gradient(135deg, #2a3540, #202a34);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.tg-btn:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.tg-btn.tg-btn-primary {
  background: linear-gradient(135deg, var(--tg-gold-dark), var(--tg-gold));
  color: #1a232b;
  font-weight: 700;
  border: none;
}
.tg-btn.tg-btn-primary:hover {
  background: linear-gradient(135deg, var(--tg-gold), var(--tg-gold-bright));
  box-shadow: 0 4px 16px rgba(201,162,92,.4);
}
.tg-btn.tg-btn-success {
  border-color: rgba(127,199,128,.3);
  background: linear-gradient(135deg, #1a3320, #152a1a);
}
.tg-btn.tg-btn-error {
  border-color: rgba(224,112,112,.3);
  background: linear-gradient(135deg, #2a1515, #1a0d0d);
}
.tg-btn:disabled {
  opacity: .4;
  cursor: default;
  transform: none;
}

/* ---- CARTE GIOCO (memoria, fortuna) ---- */
.tg-card {
  aspect-ratio: 1;
  border-radius: var(--tg-radius);
  cursor: pointer;
  background: linear-gradient(145deg, var(--tg-stone-light), var(--tg-stone));
  border: 2px solid rgba(201,162,92,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform .2s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.tg-card:active {
  transform: scale(.95);
}
.tg-card.tg-card-flipped {
  border-color: rgba(201,162,92,.5);
  box-shadow: 0 0 12px rgba(201,162,92,.15);
}
.tg-card.tg-card-matched {
  border-color: rgba(127,199,128,.5);
  background: linear-gradient(145deg, #1a3320, #152a1a);
  animation: tg-pop .3s ease;
}
.tg-card.tg-card-wrong {
  border-color: rgba(224,112,112,.4);
  animation: tg-shake .4s ease;
}
@keyframes tg-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes tg-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ---- CARTA SOVRANO (elite) ---- */
.tg-card.tg-card-sovrano {
  border: 2px solid rgba(245,212,138,.5);
  background: linear-gradient(145deg, #2a2318, #1a1510);
  box-shadow: 0 0 16px rgba(245,212,138,.3), inset 0 0 20px rgba(245,212,138,.05);
}
.tg-card.tg-card-sovrano::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--tg-radius);
  background: linear-gradient(135deg, transparent 30%, rgba(245,212,138,.1) 50%, transparent 70%);
  animation: tg-sheen 2s ease infinite;
  pointer-events: none;
}
@keyframes tg-sheen {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ---- GRIGLIA (memoria, riflessi, impiccato) ---- */
.tg-grid {
  display: grid;
  gap: 8px;
}
.tg-grid-4 { grid-template-columns: repeat(4, 1fr); }
.tg-grid-5 { grid-template-columns: repeat(5, 1fr); }
.tg-grid-6 { grid-template-columns: repeat(6, 1fr); }
.tg-grid-7 { grid-template-columns: repeat(7, 1fr); }

/* ---- MESSAGGIO FEEDBACK ---- */
.tg-msg {
  text-align: center;
  margin-top: 10px;
  font-size: .82rem;
  opacity: .6;
  transition: opacity .2s;
}
.tg-msg.tg-msg-success { color: var(--tg-green); opacity: 1; }
.tg-msg.tg-msg-error { color: var(--tg-red); opacity: 1; }
.tg-msg.tg-msg-gold { color: var(--tg-gold-bright); opacity: 1; }
.tg-msg.tg-msg-animate {
  animation: tg-msg-in .3s ease;
}
@keyframes tg-msg-in {
  0% { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---- COMBO BADGE ---- */
.tg-combo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(201,162,92,.2), rgba(245,212,138,.1));
  border: 1px solid rgba(201,162,92,.3);
  font-size: .72rem;
  font-weight: 700;
  color: var(--tg-gold-bright);
}
.tg-combo.tg-combo-high {
  animation: tg-combo-pulse .6s ease infinite;
  box-shadow: 0 0 10px rgba(245,212,138,.3);
}
@keyframes tg-combo-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ---- SCHERMATA RISULTATO ---- */
.tg-result {
  text-align: center;
  padding: 24px 16px;
}
.tg-result .tg-score-big {
  font-size: 3rem;
  font-weight: 800;
  color: var(--tg-gold-bright);
  text-shadow: 0 2px 10px rgba(201,162,92,.3);
  animation: tg-score-count .5s ease;
}
@keyframes tg-score-count {
  0% { transform: scale(.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.tg-result .tg-score-sub {
  font-size: .78rem;
  color: rgba(236,229,216,.5);
  margin-top: 4px;
}
.tg-result .tg-record-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(245,212,138,.2), rgba(201,162,92,.1));
  border: 1px solid rgba(245,212,138,.4);
  color: var(--tg-gold-bright);
  font-weight: 700;
  font-size: .85rem;
  margin: 10px 0;
  animation: tg-badge-in .4s ease .3s backwards;
}
@keyframes tg-badge-in {
  0% { transform: scale(0) rotate(-5deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---- TABella RISULTATO ---- */
.tg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.tg-table td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(128,128,128,.08);
}
.tg-table td:last-child {
  text-align: right;
}
.tg-table .tg-row-highlight td {
  background: rgba(201,162,92,.05);
}

/* ---- POPOVER / TOAST ---- */
.tg-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: var(--tg-radius);
  background: rgba(26,35,43,.95);
  border: 1px solid rgba(201,162,92,.3);
  color: var(--tg-gold-bright);
  font-size: .85rem;
  z-index: 100;
  animation: tg-toast-in .3s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
@keyframes tg-toast-in {
  0% { transform: translateX(-50%) translateY(20px); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ---- SFONDO PATTERN (nuragico sottile) ---- */
.tg-pattern-bg {
  background-image: radial-gradient(rgba(201,162,92,.03) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---- UTILITÀ ---- */
.tg-fade-in {
  animation: tg-fade .3s ease;
}
@keyframes tg-fade {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.tg-bounce {
  animation: tg-bounce .5s ease;
}
@keyframes tg-bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}


/* ============================================================
   FORZA TEMA: tutte le classi tg-* sono SEMPRE dark+oro
   (indipendenti dal tema Telegram dell'utente)
   ============================================================ */
.tg-header, .tg-msg, .tg-game, .tg-grid {
  color: #ece5d8;
}
.tg-header {
  background: linear-gradient(135deg, rgba(201,162,92,.08), #1a232b) !important;
  border-color: rgba(201,162,92,.15) !important;
}
.tg-btn {
  background: linear-gradient(145deg, #1e2830, #141a20) !important;
  color: #ece5d8 !important;
  border-color: rgba(201,162,92,.2) !important;
}
.tg-btn:hover {
  background: linear-gradient(145deg, #2a3540, #202a34) !important;
  border-color: rgba(201,162,92,.4) !important;
  color: #f5d48a !important;
}
.tg-btn.tg-btn-primary {
  background: linear-gradient(135deg, #c9a25c, #f5d48a) !important;
  color: #1a232b !important;
}
.tg-btn.tg-btn-success {
  background: linear-gradient(145deg, #1a3320, #152a1a) !important;
  border-color: rgba(127,199,128,.4) !important;
}
.tg-btn.tg-btn-error {
  background: linear-gradient(145deg, #2a1515, #1a0d0d) !important;
  border-color: rgba(224,112,112,.3) !important;
}
.tg-card {
  background: linear-gradient(145deg, #1e2830, #141a20) !important;
  border-color: rgba(201,162,92,.15) !important;
}
.tg-card.tg-card-matched {
  background: linear-gradient(145deg, #1a3320, #152a1a) !important;
  border-color: rgba(127,199,128,.4) !important;
}
.tg-card.tg-card-sovrano {
  background: linear-gradient(145deg, #2a2318, #1a1510) !important;
  border-color: rgba(245,212,138,.5) !important;
}
.tg-combo {
  background: linear-gradient(135deg, rgba(201,162,92,.25), rgba(245,212,138,.1)) !important;
  color: #f5d48a !important;
  border-color: rgba(201,162,92,.4) !important;
}
.tg-bar {
  background: rgba(128,128,128,.15) !important;
}
.tg-bar > div {
  background: linear-gradient(90deg, #8a6e3a, #c9a25c, #f5d48a) !important;
}
.tg-table {
  color: #ece5d8;
}
.tg-toast {
  background: #1a232b !important;
  color: #f5d48a !important;
  border-color: rgba(201,162,92,.3) !important;
}

/* il container dei giochi: forziamo lo sfondo */
#battle, #nx-root, [id*="game"] {
  background: transparent;
  color: #ece5d8;
}


/* ============================================================
   FORZA TEMA: tutte le classi tg-* sono SEMPRE dark+oro
   (indipendenti dal tema Telegram dell'utente)
   ============================================================ */
.tg-header, .tg-msg, .tg-game, .tg-grid {
  color: #ece5d8;
}
.tg-header {
  background: linear-gradient(135deg, rgba(201,162,92,.08), #1a232b) !important;
  border-color: rgba(201,162,92,.15) !important;
}
.tg-btn {
  background: linear-gradient(145deg, #1e2830, #141a20) !important;
  color: #ece5d8 !important;
  border-color: rgba(201,162,92,.2) !important;
}
.tg-btn:hover {
  background: linear-gradient(145deg, #2a3540, #202a34) !important;
  border-color: rgba(201,162,92,.4) !important;
  color: #f5d48a !important;
}
.tg-btn.tg-btn-primary {
  background: linear-gradient(135deg, #c9a25c, #f5d48a) !important;
  color: #1a232b !important;
}
.tg-btn.tg-btn-success {
  background: linear-gradient(145deg, #1a3320, #152a1a) !important;
  border-color: rgba(127,199,128,.4) !important;
}
.tg-btn.tg-btn-error {
  background: linear-gradient(145deg, #2a1515, #1a0d0d) !important;
  border-color: rgba(224,112,112,.3) !important;
}
.tg-card {
  background: linear-gradient(145deg, #1e2830, #141a20) !important;
  border-color: rgba(201,162,92,.15) !important;
}
.tg-card.tg-card-matched {
  background: linear-gradient(145deg, #1a3320, #152a1a) !important;
  border-color: rgba(127,199,128,.4) !important;
}
.tg-card.tg-card-sovrano {
  background: linear-gradient(145deg, #2a2318, #1a1510) !important;
  border-color: rgba(245,212,138,.5) !important;
}
.tg-combo {
  background: linear-gradient(135deg, rgba(201,162,92,.25), rgba(245,212,138,.1)) !important;
  color: #f5d48a !important;
  border-color: rgba(201,162,92,.4) !important;
}
.tg-bar {
  background: rgba(128,128,128,.15) !important;
}
.tg-bar > div {
  background: linear-gradient(90deg, #8a6e3a, #c9a25c, #f5d48a) !important;
}
.tg-table {
  color: #ece5d8;
}
.tg-toast {
  background: #1a232b !important;
  color: #f5d48a !important;
  border-color: rgba(201,162,92,.3) !important;
}

/* il container dei giochi: forziamo lo sfondo */
#battle, #nx-root, [id*="game"] {
  background: transparent;
  color: #ece5d8;
}