/* ==========================================================================
   Throne Grid — daily 3x3 NBA grid. Mobile-first, matches the TRS token system.
   ========================================================================== */
.tg-wrap { position: relative; padding-top: calc(var(--nav-h) + var(--space-5)); padding-bottom: var(--space-8); min-height: 90vh; overflow: hidden; }
.tg-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(12,10,18,0.78), rgba(12,10,18,0.94)), url('../img/throne-arena.jpg') center top / cover no-repeat; pointer-events: none; }
.tg-wrap .container { position: relative; z-index: 1; }

.tg-loading { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8) 0; color: var(--text-dim); font-weight: var(--weight-semibold); }

/* ---- Header ---- */
.tg-head { text-align: center; margin-bottom: var(--space-4); }
.tg-title { font-size: clamp(2.2rem, 8vw, 3.4rem); font-weight: var(--weight-black); line-height: 1.02; margin: var(--space-3) 0 var(--space-2); }
.tg-sub { max-width: 460px; margin: 0 auto; color: var(--text-dim); font-size: var(--text-sm); }

/* ---- Status row ---- */
.tg-status { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.tg-stat { font-size: var(--text-sm); color: var(--text-dim); }
.tg-stat b { color: var(--gold-light); font-size: 1.05rem; }

/* ---- Board ---- */
.tg-board { display: grid; grid-template-columns: 0.8fr 1fr 1fr 1fr; gap: 6px; max-width: 520px; margin: 0 auto; }
.tg-corner { }
.tg-hd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; text-align: center; }
.tg-hd-col { min-height: 62px; }
.tg-hd-row { min-height: 90px; }
.tg-hd-icon { width: clamp(30px, 9vw, 46px); height: clamp(30px, 9vw, 46px); border-radius: 50%; object-fit: cover; }
.tg-hd-txt { font-size: 0.66rem; font-weight: var(--weight-bold); color: var(--text); line-height: 1.05; }
.tg-hd-trait { color: var(--gold-light); font-size: 0.7rem; }

/* ---- Cells ---- */
.tg-cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--card); cursor: pointer; padding: 4px; transition: border-color .15s, transform .08s, background .15s; }
.tg-cell.empty:not([disabled]):hover { border-color: var(--gold); background: rgba(201,162,39,0.06); }
.tg-cell.empty:active { transform: scale(0.97); }
.tg-cell-plus { font-size: 1.8rem; color: var(--text-muted); opacity: 0.5; font-weight: var(--weight-bold); }
.tg-cell.empty.over { opacity: 0.5; cursor: default; }
.tg-cell.filled { cursor: default; background: rgba(255,255,255,0.03); animation: tg-pop 0.35s cubic-bezier(.2,.9,.3,1.4); }
.tg-cell-name { font-size: clamp(0.66rem, 2.4vw, 0.82rem); font-weight: var(--weight-bold); line-height: 1.1; max-width: 100%; overflow-wrap: break-word; word-break: break-word; padding: 0 2px; }
.tg-cell-rare { font-size: 0.56rem; color: var(--gold-light); font-weight: var(--weight-semibold); }
@keyframes tg-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
/* tier accents on filled cells (reuse chip-* palette feel) */
.tg-cell.chip-goat, .tg-cell.chip-throne { border-color: rgba(201,162,39,0.6); box-shadow: 0 0 12px var(--gold-soft); }
.tg-cell.chip-allstar { border-color: rgba(244,146,59,0.55); }
.tg-cell.chip-elite { border-color: rgba(139,82,204,0.55); }

.tg-hint { text-align: center; color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-4); }

/* ---- Result ---- */
.tg-result { text-align: center; margin-top: var(--space-5); }
.tg-result-h { font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: var(--weight-black); color: var(--gold); }
.tg-result-sub { font-weight: var(--weight-bold); margin-top: var(--space-2); }
.tg-result-note { color: var(--text-dim); font-size: var(--text-sm); margin-top: var(--space-2); }

.tg-foot-actions { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }

/* ---- Player picker (overlay) ---- */
.tg-picker-ov { position: fixed; inset: 0; z-index: 10002; display: flex; align-items: flex-start; justify-content: center; padding: 10vh var(--space-4) var(--space-4); background: rgba(8,6,14,0.74); backdrop-filter: blur(3px); animation: tg-fade 0.18s ease; }
@keyframes tg-fade { from { opacity: 0; } to { opacity: 1; } }
.tg-picker { width: 100%; max-width: 420px; background: var(--card); border: 1px solid rgba(201,162,39,0.4); border-radius: var(--radius-lg, 16px); padding: var(--space-4); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.tg-picker-head { display: flex; align-items: center; justify-content: space-between; font-weight: var(--weight-black); font-size: 1rem; margin-bottom: var(--space-3); }
.tg-x { color: var(--text-muted); font-weight: var(--weight-semibold); }
.tg-picker-close { background: none; border: none; color: var(--text-dim); font-size: 1.1rem; cursor: pointer; padding: 4px 8px; }
.tg-search { width: 100%; box-sizing: border-box; padding: 11px 14px; font-size: 1rem; font-family: inherit; color: var(--text); background: rgba(255,255,255,0.04); border: 1.5px solid var(--border); border-radius: 12px; outline: none; }
.tg-search:focus { border-color: var(--gold); }
.tg-results { margin-top: var(--space-2); max-height: 46vh; overflow-y: auto; display: grid; gap: 4px; }
.tg-empty { color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-3); text-align: center; }
.tg-res { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; cursor: pointer; color: inherit; transition: border-color .12s, background .12s; }
.tg-res:hover:not(:disabled) { border-color: var(--gold); background: rgba(201,162,39,0.06); }
.tg-res-name { font-weight: var(--weight-bold); font-size: 0.92rem; }
.tg-res-meta { font-size: 0.7rem; color: var(--text-muted); }
.tg-res:disabled, .tg-res.used { opacity: 0.4; cursor: default; }

/* ---- Toast ---- */
.tg-toast { position: fixed; left: 50%; bottom: 42px; transform: translateX(-50%) translateY(18px); background: var(--card); border: 1px solid var(--gold); color: var(--gold-light); font-weight: var(--weight-bold); font-size: var(--text-sm); padding: 10px 18px; border-radius: var(--radius-pill); opacity: 0; transition: opacity .25s, transform .25s; z-index: 10003; pointer-events: none; max-width: 90vw; text-align: center; }
.tg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .tg-cell.filled { animation: none; }
  .tg-picker-ov { animation: none; }
}