/* ===== Tefooz GAME-SCOPED styles (won't touch index) ===== */
/* Arabic web font (loaded via <link> in game.html for reliability). */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Noto+Kufi+Arabic:wght@400;600;700;800&display=swap');

html,body{background:#0b1220;color:#e5e7eb;margin:0}
#tg{font-family:"Noto Kufi Arabic","Cairo",system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans",Tahoma,Arial,sans-serif}

/* Global focus ring for keyboard / TV-remote users */
#tg :focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:8px}


/* Topbar */
#tg .tg-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;background:#0f172a;border-bottom:1px solid rgba(255,255,255,.08)}
#tg .tg-brand{display:flex;align-items:center;gap:10px}
/* Bigger in game as requested */
#tg .tg-brand img{height:clamp(56px,5vw,96px);max-width:320px;object-fit:contain}

/* Layout */
#tg #tg-screens{max-width:1200px;margin:0 auto;padding:20px}
#tg .tg-foot{padding:14px;text-align:center;color:#9ca3af;font-size:clamp(14px,1.8vw,18px)}
#tg .tg-foot a{color:#93c5fd;text-decoration:none} 
#tg .tg-foot a:hover{text-decoration:underline}

/* Setup card */
#tg .tg-setup{max-width:min(920px,94vw);margin:6vh auto;background:#121a2b;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:min(5vw,28px);box-shadow:0 10px 30px rgba(0,0,0,.28);font-size:clamp(18px,3.2vw,30px)}
#tg .tg-title{margin:0 0 12px;font-size:clamp(34px,5vw,56px);font-weight:800}
#tg .tg-form{display:grid;grid-template-columns:1fr;gap:12px}
#tg .tg-form label{display:flex;align-items:center;gap:.6em;flex-wrap:wrap}
#tg .tg-form select,
#tg .tg-form input[type="number"],
#tg .tg-form input[type="text"]{font-size:1em;padding:.45em .7em;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0c1220;color:#e5e7eb;min-width:8ch}
#tg .tg-names{display:grid;grid-template-columns:1fr;gap:8px;width:100%}
#tg .tg-team-input{width:100%}

/* Buttons */
#tg .tg-btn{background:#1f2937;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:.55em 1em;font-size:clamp(16px,2.4vw,24px);cursor:pointer}
#tg .tg-btn.primary{background:#2563eb;border-color:#60a5fa}
#tg .tg-btn.disabled, #tg .tg-btn:disabled{opacity:.6;pointer-events:none}

/* Toggle / checkbox chip */
#tg .tg-check{display:inline-flex;align-items:center;justify-content:center;padding:.2em .6em;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#0e1628}

/* Fancy (?) — larger hit area on mobile */
#tg .tg-info{display:inline-flex;align-items:center;justify-content:center;width:1.4em;height:1.4em;min-width:32px;min-height:32px;border-radius:999px;padding:0;line-height:1;font-weight:900;color:#fff;background:linear-gradient(180deg,#3b82f6,#1d4ed8);border:1px solid #93c5fd;box-shadow:0 2px 6px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3);cursor:pointer}
@media (max-width: 640px){
  #tg .tg-info{min-width:36px;min-height:36px}
}
#tg .tg-help{position:fixed;display:none;max-width:min(520px,90vw);background:#111827;color:#fff;padding:10px 14px;border-radius:12px;font-size:clamp(14px,1.8vw,20px);box-shadow:0 6px 20px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);z-index:9999}

/* Categories (initial pick) */
#tg .tg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:14px}
#tg .tg-card{position:relative;background:linear-gradient(180deg,#0f1627,#0c1220);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}
#tg .tg-card:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.2)}
#tg .tg-card.selected{outline:2px solid #60a5fa}
#tg .tg-thumb{width:100%;height:160px;border-radius:12px;background:#0b1220 center/cover no-repeat;margin-bottom:8px}
#tg .tg-card-title{font-weight:700;text-align:center}
#tg .tg-badge{position:absolute;top:8px;left:8px;background:#111827;color:#fff;padding:4px 10px;border-radius:999px;font-size:.9rem;box-shadow:0 2px 4px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.15);pointer-events:none}

/* Per-turn picker overlay */
#tg .tg-ol{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:9998}
#tg .tg-ol-card{max-width:min(980px,94vw);width:94vw;background:#121a2b;border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.32);padding:min(5vw,24px)}
#tg .tg-ol h3{margin:0 0 10px;font-size:clamp(24px,4vw,40px)}
#tg .tg-ol .tg-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
#tg .tg-diffs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#tg .tg-chip{border:1px solid rgba(255,255,255,.15);padding:.4em .8em;border-radius:999px;background:#0c1220;cursor:pointer;font-size:clamp(14px,2.6vw,22px)}
#tg .tg-chip.sel{outline:2px solid #60a5fa}

/* Question screen */
#tg .tg-qwrap{max-width:min(1100px,95vw);margin:4vh auto;background:#121a2b;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:min(5vw,28px)}
#tg .tg-qmeta{color:#b6bcc7;font-size:clamp(16px,2.6vw,24px)}

/* Timer: normal / warn (≤ 10s) / danger (≤ 5s) */
#tg .tg-qtimer{color:#93c5fd;font-weight:700;margin-top:6px;transition:color .2s ease, transform .2s ease;font-size:clamp(18px,2.8vw,28px)}
#tg .tg-qtimer.tg-t-warn{color:#fbbf24}
#tg .tg-qtimer.tg-t-danger{color:#f87171;animation:tgPulse 1s ease-in-out infinite}
@keyframes tgPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}
@media (prefers-reduced-motion: reduce){
  #tg .tg-qtimer.tg-t-danger{animation:none}
}
#tg .tg-qtext{font-size:clamp(26px,6.8vw,110px);line-height:1.5;margin:12px 0}
#tg .tg-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}
#tg .tg-choice{font-size:clamp(20px,4.8vw,46px);padding:clamp(12px,3.2vw,24px) clamp(18px,4vw,34px);border-radius:18px;background:#1f2937;color:#fff;border:1px solid rgba(255,255,255,.15);cursor:pointer}
#tg .tg-choice.selected{outline:2px solid #60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.35) inset}

#tg .tg-ans{display:flex;gap:10px;margin-top:12px}
#tg #tg-answer{flex:1;font-size:clamp(20px,3.8vw,44px);padding:.5em .7em;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:#0c1220;color:#e5e7eb}

/* Result */
#tg .tg-res{max-width:min(900px,94vw);margin:6vh auto;background:#121a2b;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:min(5vw,28px);text-align:center}
#tg .tg-res .good{color:#86efac;font-size:clamp(24px,4.6vw,48px);font-weight:800;animation:tgPop .35s ease-out}
@keyframes tgPop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}
#tg .tg-res .bad{color:#fca5a5;font-size:clamp(24px,4.6vw,48px);font-weight:800}
#tg #tg-correct{margin-top:10px;font-size:clamp(16px,3vw,24px)}
#tg .tg-override{margin-top:14px}


/* --- Tefooz small adjustments v12 --- */
.tg-current-team{
  text-align:center;
  font-weight:800;
  font-size: clamp(22px, 4.5vw, 48px);
  margin: 6px 0 12px;
}
.tg-winner-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
  z-index: 9999;
}
.tg-winner-overlay.show{ opacity:1; pointer-events: all; }
.tg-winner-card{
  background: #fff; color:#111;
  padding: 24px 28px; border-radius: 20px;
  text-align:center; max-width: 90vw; box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.tg-crown{ font-size: 48px; }
.tg-winner-title{ font-size: 22px; margin-top: 8px; }
.tg-winner-name{ font-size: clamp(28px, 6vw, 56px); font-weight: 800; margin: 10px 0 16px; }


#tg #tg-cats .tg-grid{max-height:64vh;overflow:auto;-webkit-overflow-scrolling:touch}

#tg .tg-ol{overflow:auto;-webkit-overflow-scrolling:touch}

#tg .tg-ol-card{max-height:88vh;overflow:auto}

/* ============ TG21: Used-category badges (turn picker) ============ */
#tg .tg-ol .tg-card { position: relative; }
#tg .tg-ol .tg-card.tg-cat-used-mine { opacity: .72; }
#tg .tg-ol .tg-card.tg-cat-used-other { opacity: .90; }
#tg .tg-ol .tg-card.tg-cat-used-mine::after,
#tg .tg-ol .tg-card.tg-cat-used-other::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 12px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
}
#tg .tg-used-badge {
  position: absolute; top: 8px; inset-inline-start: 8px;
  z-index: 3; font-size: 12px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(248, 113, 113, 0.92); color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  letter-spacing: .3px;
}
#tg .tg-used-badge-other {
  background: rgba(251, 191, 36, 0.92); color: #1f1300;
}

/* ============ TG21: End Game floating action button ============ */
#tg .tg-fab-end {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  inset-inline-start: max(12px, env(safe-area-inset-left));
  z-index: 9999;
  display: none; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(239, 68, 68, 0.92); color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  font: 600 14px/1.2 inherit;
  cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  transition: transform .15s ease, background .15s ease;
}
#tg .tg-fab-end:hover { background: rgb(220, 38, 38); transform: translateY(-1px); }
#tg .tg-fab-end:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
@media (max-width: 600px){
  #tg .tg-fab-end { font-size: 13px; padding: 7px 12px; }
}

/* ============ TG21: Confirm modal ============ */
#tg .tg-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  animation: tgFade .18s ease;
}
@keyframes tgFade { from{opacity:0} to{opacity:1} }
#tg .tg-modal-card {
  background: #1a2033; color: #e5e7eb;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 22px 24px;
  max-width: 92vw; width: 420px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  text-align: center;
}
#tg .tg-modal-card h3 {
  margin: 0 0 8px; font-size: 20px; color: #fff;
}
#tg .tg-modal-card p {
  margin: 0 0 18px; color: #b6bcc7; font-size: 15px;
}
#tg .tg-modal-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
#tg .tg-btn.danger {
  background: #ef4444; color: #fff; border-color: rgba(255,255,255,.15);
}
#tg .tg-btn.danger:hover { background: #dc2626; }

/* ============ TG21: Admin bar (only when ?admin=1) ============ */
#tg .tg-admin-bar {
  position: fixed;
  bottom: 10px;
  inset-inline-end: 10px;
  z-index: 9600;
  display: flex; gap: 8px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 6px 10px;
  backdrop-filter: blur(8px);
}
#tg .tg-admin-bar .tg-btn.small {
  padding: 4px 10px; font-size: 12px; border-radius: 999px;
}