Admin panel imprvmnts

app.py

@@ -11,6 +11,7 @@ import threading
 from datetime import datetime, date, timedelta
 from functools import wraps
 from collections import defaultdict
+from zoneinfo import ZoneInfo
 
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
 _log = logging.getLogger(__name__)
@@ -19,6 +20,12 @@ app = Flask(__name__, template_folder=os.path.join(BASE_DIR, 'templates'))
 app.secret_key = os.environ.get('SECRET_KEY', 'ipl-predictions-secret-change-in-prod')
 app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=90)
 
+APP_TIMEZONE = (os.environ.get('APP_TIMEZONE') or 'Asia/Kolkata').strip()
+try:
+    APP_TZ = ZoneInfo(APP_TIMEZONE)
+except Exception:
+    APP_TZ = ZoneInfo('Asia/Kolkata')
+
 
 def get_data_dir() -> str:
     """Writable directory for SQLite. Optional DIS_DATA_DIR (e.g. /data) if you use HF paid persistent disk."""
@@ -263,8 +270,8 @@ ABBR_TO_FULL = {v: k for k, v in TEAM_ABBR.items()}
 
 TEAM_COLORS = {
     'MI': '#004BA0', 'CSK': '#FFCC00', 'RCB': '#EC1C24',
-    'KKR': '#3A225D', 'SRH': '#FF822A', 'DC': '#0078BC',
-    'RR': '#EA1A85', 'PBKS': '#AA4545', 'LSG': '#A4C639', 'GT': '#1C1C1C',
+    'KKR': '#7C3AED', 'SRH': '#FF822A', 'DC': '#0078BC',
+    'RR': '#EA1A85', 'PBKS': '#AA4545', 'LSG': '#A4C639', 'GT': '#00B5E2',
 }
 
 POINTS_CONFIG = {
@@ -611,6 +618,9 @@ def require_login(f):
     @wraps(f)
     def wrapper(*args, **kwargs):
         if not get_current_user():
+            # Allow admin-only flows with staff session even if no team user is selected.
+            if session.get('staff_ok') and request.endpoint and request.endpoint.startswith('admin'):
+                return f(*args, **kwargs)
             flash('Pick your name to continue.', 'info')
             return redirect(url_for('index'))
         return f(*args, **kwargs)
@@ -637,17 +647,30 @@ def match_calendar_date(match) -> date:
 
 
 def is_match_today(match) -> bool:
-    return match_calendar_date(match) == date.today()
+    return match_calendar_date(match) == app_today()
+
+
+def app_now() -> datetime:
+    return datetime.now(APP_TZ)
+
+
+def app_today() -> date:
+    return app_now().date()
+
+
+def match_start_dt(match) -> datetime:
+    match_dt_str = f"{match['match_date']} {match['match_time']}"
+    naive = datetime.strptime(match_dt_str, '%Y-%m-%d %H:%M')
+    return naive.replace(tzinfo=APP_TZ)
 
 
 def is_prediction_locked(match) -> bool:
     if match['status'] not in ('upcoming',):
         return True
     try:
-        match_dt_str = f"{match['match_date']} {match['match_time']}"
-        match_dt = datetime.strptime(match_dt_str, '%Y-%m-%d %H:%M')
+        match_dt = match_start_dt(match)
         lock_dt = match_dt - timedelta(minutes=POINTS_CONFIG['lock_minutes_before'])
-        return datetime.now() >= lock_dt
+        return app_now() >= lock_dt
     except Exception:
         return True
 
@@ -669,10 +692,9 @@ def auto_lock_matches():
     ).fetchall()
     for row in rows:
         try:
-            match_dt_str = f"{row['match_date']} {row['match_time']}"
-            match_dt = datetime.strptime(match_dt_str, '%Y-%m-%d %H:%M')
+            match_dt = match_start_dt(row)
             lock_dt = match_dt - timedelta(minutes=POINTS_CONFIG['lock_minutes_before'])
-            if datetime.now() >= lock_dt:
+            if app_now() >= lock_dt:
                 conn.execute(
                     "UPDATE matches SET status='locked', updated_at=CURRENT_TIMESTAMP WHERE id=?",
                     (row['id'],)
@@ -986,7 +1008,7 @@ def dashboard():
     user = get_current_user()
     conn = get_db()
 
-    today = date.today().isoformat()
+    today = app_today().isoformat()
     todays_matches = conn.execute(
         'SELECT * FROM matches WHERE match_date=? ORDER BY match_time', (today,)
     ).fetchall()
@@ -1972,7 +1994,7 @@ def inject_globals():
         'current_user': get_current_user(),
         'team_abbr': TEAM_ABBR,
         'team_colors': TEAM_COLORS,
-        'today': date.today().isoformat(),
+        'today': app_today().isoformat(),
         'points_config': POINTS_CONFIG,
         'staff_session': bool(session.get('staff_ok')),
         'admin_login_configured': bool(admin_password()),

templates/admin.html

@@ -1,5 +1,18 @@
 {% extends 'base.html' %}
 {% block title %}Admin – {{ app_brand }}{% endblock %}
+{% block head %}
+<style>
+  @media (max-width: 860px) {
+    .admin-result-form {
+      min-width: 0 !important;
+      width: 100%;
+    }
+    .admin-header-logout {
+      width: 100%;
+    }
+  }
+</style>
+{% endblock %}
 {% block content %}
 <div class="page">
   <div class="page-header" style="display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:1rem;">
@@ -7,7 +20,7 @@
       <div class="page-title">⚙️ ADMIN PANEL</div>
       <div class="page-subtitle">Manage matches, users, results and points</div>
     </div>
-    <a href="{{ url_for('admin_logout') }}" class="btn btn-ghost btn-sm" style="align-self:center;">🔒 Log out admin</a>
+    <a href="{{ url_for('admin_logout') }}" class="btn btn-ghost btn-sm admin-header-logout" style="align-self:center;">🔒 Log out admin</a>
   </div>
 
   <!-- Tab Nav -->
@@ -173,7 +186,7 @@
             </div>
             {% endif %}
           </div>
-          <form method="post" action="{{ url_for('admin_set_result', match_id=match.id) }}" style="display:flex; flex-direction:column; gap:0.75rem; min-width:320px;">
+          <form method="post" action="{{ url_for('admin_set_result', match_id=match.id) }}" class="admin-result-form" style="display:flex; flex-direction:column; gap:0.75rem; min-width:320px;">
             <div class="form-row cols-2">
               <div class="form-group" style="margin:0;">
                 <label>Winner *</label>

templates/base.html

@@ -37,6 +37,7 @@
       color: var(--text);
       min-height: 100vh;
       line-height: 1.6;
+      overflow-x: hidden;
     }
 
     /* ── SCROLLBAR ──────────────────────────────── */
@@ -127,6 +128,7 @@
       border-radius: var(--radius-sm); border: none;
       cursor: pointer; text-decoration: none;
       transition: all 0.2s; white-space: nowrap;
+      justify-content: center;
     }
     .btn-primary { background: var(--orange); color: var(--bg); }
     .btn-primary:hover { background: var(--orange2); transform: translateY(-1px); }
@@ -193,7 +195,11 @@
     @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
 
     /* ── TABLES ──────────────────────────────────── */
-    .table-wrap { overflow-x: auto; }
+    .table-wrap {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: thin;
+    }
     table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
     th {
       text-align: left; padding: 0.75rem 1rem;
@@ -294,15 +300,58 @@
     }
 
     /* ── RESPONSIVE ──────────────────────────────── */
+    @media (max-width: 1100px) {
+      .page { padding: 1.4rem 1rem; }
+      .grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
+    }
+
     @media (max-width: 768px) {
       .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
       .form-row.cols-2, .form-row.cols-3 { grid-template-columns: 1fr; }
+      nav { padding: 0 0.8rem; }
+      .nav-inner { height: 56px; gap: 0.5rem; }
+      .nav-brand { font-size: 1.35rem; letter-spacing: 1px; }
       .nav-links { display: none; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0;
-        background: var(--bg2); padding: 1rem; border-bottom: 1px solid var(--border); gap: 0.5rem; }
+        background: var(--bg2); padding: 0.8rem; border-bottom: 1px solid var(--border); gap: 0.45rem;
+        max-height: calc(100vh - 56px); overflow-y: auto; }
+      .nav-links { top: 56px; }
       .nav-links.open { display: flex; }
       .hamburger { display: block; margin-left: auto; }
-      .page { padding: 1rem; }
-      .page-title { font-size: 1.8rem; }
+      .nav-link { width: 100%; text-align: left; }
+      .pts-badge { margin-left: 0; align-self: flex-start; margin-top: 0.3rem; }
+      .alerts { padding: 0 0.9rem; margin-top: 0.75rem; }
+      .alert { font-size: 0.84rem; padding: 0.65rem 0.8rem; }
+      .page { padding: 0.95rem 0.8rem 1.1rem; }
+      .page-header { margin-bottom: 1.25rem; }
+      .page-title { font-size: 1.65rem; letter-spacing: 1px; }
+      .page-subtitle { font-size: 0.9rem; }
+      .card { padding: 1rem; border-radius: 10px; }
+      .card-title { font-size: 1.05rem; margin-bottom: 0.75rem; }
+      .section-title { font-size: 1.22rem; letter-spacing: 1px; margin-bottom: 0.75rem; gap: 0.55rem; }
+      .btn { font-size: 0.84rem; padding: 0.55rem 0.95rem; }
+      .btn-sm { font-size: 0.76rem; padding: 0.38rem 0.72rem; }
+      input, select, textarea { font-size: 0.88rem; padding: 0.58rem 0.85rem; }
+      .match-card { padding: 1rem; }
+      .match-vs { gap: 0.55rem; }
+      .team-abbr { font-size: 1.5rem; letter-spacing: 1px; }
+      .team-name { font-size: 0.72rem; }
+      .vs-divider { font-size: 1rem; letter-spacing: 1px; }
+      .match-meta { gap: 0.55rem; font-size: 0.75rem; margin-top: 0.62rem; }
+      .stat-box { padding: 0.9rem; }
+      .stat-value { font-size: 1.55rem; }
+      .empty-state { padding: 1.5rem 0.9rem; }
+      .empty-state .icon { font-size: 2.2rem; margin-bottom: 0.7rem; }
+      .glow { display: none; }
+    }
+
+    @media (max-width: 560px) {
+      table { font-size: 0.8rem; }
+      th { padding: 0.52rem 0.62rem; font-size: 0.67rem; }
+      td { padding: 0.62rem; }
+      .btn { width: 100%; }
+      .btn.btn-sm { width: auto; }
+      .section-title { flex-wrap: wrap; }
+      .section-title a { width: auto; }
     }
 
     /* ── ACCENT GLOW ─────────────────────────────── */
@@ -318,12 +367,12 @@
 <body>
 <div class="glow"></div>
 
-{% if current_user %}
 <nav>
   <div class="nav-inner">
     <a href="{{ url_for('index') }}" class="nav-brand" title="{{ app_brand }} — pick name / switch user">DIS <span class="brand-ipl">IPL</span> <span class="brand-year">2026</span></a>
     <button class="hamburger" onclick="toggleNav()">☰</button>
     <div class="nav-links" id="navLinks">
+      {% if current_user %}
       <a href="{{ url_for('dashboard') }}"  class="nav-link {% if request.endpoint == 'dashboard'  %}active{% endif %}">🏠 Home</a>
       <a href="{{ url_for('user_guide') }}" class="nav-link {% if request.endpoint == 'user_guide'   %}active{% endif %}">📘 Guide</a>
       <a href="{{ url_for('matches') }}"    class="nav-link {% if request.endpoint == 'matches'    %}active{% endif %}">📅 Matches</a>
@@ -331,6 +380,9 @@
       <a href="{{ url_for('leaderboard') }}"class="nav-link {% if request.endpoint == 'leaderboard'%}active{% endif %}">🏆 Board</a>
       <a href="{{ url_for('analytics') }}"  class="nav-link {% if request.endpoint == 'analytics'  %}active{% endif %}">📈 Analytics</a>
       <a href="{{ url_for('history') }}"    class="nav-link {% if request.endpoint == 'history'    %}active{% endif %}">📊 My Stats</a>
+      {% else %}
+      <a href="{{ url_for('index') }}" class="nav-link {% if request.endpoint in ['index','identify'] %}active{% endif %}">🏠 Home</a>
+      {% endif %}
       {% if admin_login_configured %}
         {% if staff_session %}
         <a href="{{ url_for('admin') }}" class="nav-link {% if request.endpoint and request.endpoint.startswith('admin') %}active{% endif %}">⚙️ Admin</a>
@@ -338,11 +390,12 @@
         <a href="{{ url_for('admin_login', next=url_for('admin')) }}" class="nav-link">🔐 Admin</a>
         {% endif %}
       {% endif %}
+      {% if current_user %}
       <span class="pts-badge">{{ '%.0f'|format(current_user.points) }} pts</span>
+      {% endif %}
     </div>
   </div>
 </nav>
-{% endif %}
 
 <div class="alerts">
   {% for cat, msg in get_flashed_messages(with_categories=True) %}

templates/dashboard.html

@@ -4,7 +4,7 @@
 <div class="page">
   <!-- Header -->
   <div class="page-header">
-    <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;">
+    <div style="display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:1rem;">
       <div>
         <div class="page-title">HEY, {{ (current_user.display_name or current_user.username)|upper }} 👋</div>
         <div class="page-subtitle">
@@ -21,41 +21,26 @@
           {% endif %}
         </div>
       </div>
-      <div class="stat-box" style="min-width:160px;">
-        <div class="stat-value">{{ '%.0f'|format(current_user.points) }}</div>
-        <div class="stat-label">Your Points</div>
-        <div style="font-size:0.78rem; color:var(--muted2); margin-top:0.4rem;">#{{ rank }} on leaderboard</div>
-      </div>
-      <div class="stat-box" style="min-width:140px;">
-        <div class="stat-value" style="font-size:1.75rem;">{{ my_streak }}🔥</div>
-        <div class="stat-label">Best win streak</div>
-        <div style="font-size:0.78rem; color:var(--muted2); margin-top:0.4rem;">Last 5 IPL results</div>
-        <div style="display:flex; justify-content:center; gap:4px; margin-top:0.5rem;">
-          {% for c in my_last5 %}
-          <span title="{% if c=='green' %}Correct{% elif c=='red' %}Wrong{% else %}No pick / pending{% endif %}" style="width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid var(--border);{% if c=='green' %}background:var(--green);border-color:var(--green);{% elif c=='red' %}background:var(--red);border-color:var(--red);{% else %}background:var(--bg3);{% endif %}"></span>
-          {% endfor %}
+      <div style="display:flex; gap:0.75rem; flex-wrap:wrap;">
+        <div class="stat-box" style="min-width:160px;">
+          <div class="stat-value">{{ '%.0f'|format(current_user.points) }}</div>
+          <div class="stat-label">Your Points</div>
+          <div style="font-size:0.78rem; color:var(--muted2); margin-top:0.4rem;">#{{ rank }} on leaderboard</div>
+        </div>
+        <div class="stat-box" style="min-width:160px;">
+          <div class="stat-value" style="font-size:1.75rem;">{{ my_streak }}🔥</div>
+          <div class="stat-label">Best win streak</div>
+          <div style="font-size:0.78rem; color:var(--muted2); margin-top:0.4rem;">Last 5 IPL results</div>
+          <div style="display:flex; justify-content:center; gap:4px; margin-top:0.5rem;">
+            {% for c in my_last5 %}
+            <span title="{% if c=='green' %}Correct{% elif c=='red' %}Wrong{% else %}No pick / pending{% endif %}" style="width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid var(--border);{% if c=='green' %}background:var(--green);border-color:var(--green);{% elif c=='red' %}background:var(--red);border-color:var(--red);{% else %}background:var(--bg3);{% endif %}"></span>
+            {% endfor %}
+          </div>
         </div>
       </div>
     </div>
   </div>
 
-  {% if upcoming_other %}
-  <div class="section-title" style="font-size:1.1rem;">🔜 COMING UP NEXT</div>
-  <div class="grid grid-auto" style="margin-bottom:2rem;">
-    {% for m in upcoming_other %}
-    <a href="{{ url_for('matches') }}?date={{ m.match_date }}" class="match-card" style="text-decoration:none; color:inherit;">
-      <div style="font-size:0.75rem; color:var(--muted);">{{ m.match_date|format_date }} · {{ m.match_time }}</div>
-      <div style="display:flex; align-items:center; justify-content:space-between; margin-top:0.5rem; gap:0.5rem;">
-        <span style="font-family:var(--font-display); font-size:1.25rem; color:{{ m.team1_color }};">{{ m.team1_abbr }}</span>
-        <span style="color:var(--muted); font-size:0.75rem;">vs</span>
-        <span style="font-family:var(--font-display); font-size:1.25rem; color:{{ m.team2_color }};">{{ m.team2_abbr }}</span>
-      </div>
-      {% if m.venue %}<div style="font-size:0.78rem; color:var(--muted2); margin-top:0.4rem;">📍 {{ m.venue }}</div>{% endif %}
-    </a>
-    {% endfor %}
-  </div>
-  {% endif %}
-
   <!-- Today's Matches -->
   <div class="section-title">
     🗓️ TODAY'S MATCHES
@@ -150,6 +135,23 @@
   </div>
   {% endif %}
 
+  {% if upcoming_other %}
+  <div class="section-title" style="font-size:1.1rem; margin-top:0.25rem;">🔜 COMING UP NEXT</div>
+  <div class="grid grid-auto" style="margin-bottom:2rem;">
+    {% for m in upcoming_other %}
+    <a href="{{ url_for('matches') }}?date={{ m.match_date }}" class="match-card" style="text-decoration:none; color:inherit;">
+      <div style="font-size:0.75rem; color:var(--muted);">{{ m.match_date|format_date }} · {{ m.match_time }}</div>
+      <div style="display:flex; align-items:center; justify-content:space-between; margin-top:0.5rem; gap:0.5rem;">
+        <span style="font-family:var(--font-display); font-size:1.25rem; color:{{ m.team1_color }};">{{ m.team1_abbr }}</span>
+        <span style="color:var(--muted); font-size:0.75rem;">vs</span>
+        <span style="font-family:var(--font-display); font-size:1.25rem; color:{{ m.team2_color }};">{{ m.team2_abbr }}</span>
+      </div>
+      {% if m.venue %}<div style="font-size:0.78rem; color:var(--muted2); margin-top:0.4rem;">📍 {{ m.venue }}</div>{% endif %}
+    </a>
+    {% endfor %}
+  </div>
+  {% endif %}
+
   <!-- Bottom Grid -->
   <div class="grid grid-2">
     <!-- Leaderboard snapshot -->

templates/identify.html

@@ -1,27 +1,88 @@
 {% extends 'base.html' %}
 {% block title %}Home – {{ app_brand }}{% endblock %}
+{% block head %}
+<style>
+  .home-wrap { max-width: 620px; }
+  .home-hero {
+    position: relative;
+    overflow: hidden;
+    border-color: rgba(249,115,22,0.28);
+    background:
+      radial-gradient(circle at 10% 10%, rgba(249,115,22,0.18), transparent 48%),
+      radial-gradient(circle at 90% 20%, rgba(59,130,246,0.14), transparent 44%),
+      linear-gradient(165deg, var(--card), #0f182b);
+  }
+  .home-hero:after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.03) 45%, transparent 100%);
+  }
+  .home-hero-inner { position: relative; z-index: 1; text-align: center; }
+  .home-title { font-size: 2rem; letter-spacing: 3px; }
+  .home-sub {
+    font-size: 0.95rem;
+    color: var(--muted2);
+    margin-top: 0.75rem;
+    line-height: 1.45;
+  }
+  .home-chip-row {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-top: 1rem;
+  }
+  .home-chip {
+    font-size: 0.72rem;
+    letter-spacing: 0.05em;
+    padding: 0.3rem 0.55rem;
+    border-radius: 999px;
+    border: 1px solid var(--border);
+    background: rgba(10,14,26,0.45);
+    color: var(--muted2);
+  }
+  .identity-panel { border-color: rgba(148,163,184,0.28); }
+  .current-user-panel {
+    text-align: center;
+    padding: 1rem;
+    border: 1px solid rgba(34,197,94,0.28);
+    border-radius: var(--radius-sm);
+    background: rgba(34,197,94,0.06);
+    margin-bottom: 1rem;
+  }
+</style>
+{% endblock %}
 {% block content %}
-<div class="page" style="max-width:520px;">
-  <div class="card" style="text-align:center; margin-bottom:1.5rem; border-color:rgba(249,115,22,0.25);">
-    <div style="font-size:2.5rem; margin-bottom:0.5rem;">🏏</div>
-    <div class="page-title" style="font-size:1.75rem; letter-spacing:3px;">
-      DIS <span style="color:var(--white);">IPL</span> <span style="color:var(--gold);">2026</span>
+<div class="page home-wrap">
+  <div class="card home-hero" style="margin-bottom:1.25rem;">
+    <div class="home-hero-inner">
+      <div style="font-size:2.4rem; margin-bottom:0.35rem;">🏏</div>
+      <div class="page-title home-title">
+        DIS <span style="color:var(--white);">IPL</span> <span style="color:var(--gold);">2026</span>
+      </div>
+      <div style="font-size:1.02rem; color:var(--orange); font-weight:700; margin-top:0.35rem;">DIS IPL Match Predictions</div>
+      <div class="home-sub">🏆 {{ app_tagline }} 🏏</div>
+      <div class="home-chip-row">
+        <span class="home-chip">Team pool</span>
+        <span class="home-chip">Match-day picks</span>
+        <span class="home-chip">Live leaderboard</span>
+      </div>
     </div>
-    <div style="font-size:1rem; color:var(--orange); font-weight:600; margin-top:0.5rem;">DIS IPL Match Predictions</div>
-    <div class="page-subtitle" style="margin-top:0.75rem;">🏆 {{ app_tagline }} 🏏</div>
-    <div style="font-size:0.88rem; color:var(--muted2); margin-top:0.75rem;">Pick your name to track predictions &amp; points.</div>
   </div>
 
-  <div class="card">
+  <div class="card identity-panel">
     <div class="card-title">WHO ARE YOU?</div>
     {% if current_user %}
-    <div style="text-align:center; padding-bottom:1.25rem; margin-bottom:1.25rem; border-bottom:1px solid var(--border);">
-      <div style="font-size:0.85rem; color:var(--muted2);">You’re signed in as</div>
-      <div style="font-size:1.2rem; font-weight:700; color:var(--orange); margin-top:0.35rem;">{{ current_user.display_name or current_user.username }}</div>
-      <a href="{{ url_for('dashboard') }}" class="btn btn-primary" style="margin-top:1rem; width:100%; max-width:280px; justify-content:center;">Open app — today’s matches</a>
-      <div style="font-size:0.8rem; color:var(--muted); margin-top:1rem;">Someone else on this device? Pick their name below.</div>
+    <div class="current-user-panel">
+      <div style="font-size:0.82rem; color:var(--muted2);">You’re signed in as</div>
+      <div style="font-size:1.28rem; font-weight:700; color:var(--orange); margin-top:0.25rem;">{{ current_user.display_name or current_user.username }}</div>
+      <a href="{{ url_for('dashboard') }}" class="btn btn-primary" style="margin-top:0.9rem; width:100%; max-width:310px; justify-content:center;">Open app — today’s matches</a>
+      <div style="font-size:0.8rem; color:var(--muted); margin-top:0.8rem;">Switch user? Select another teammate below.</div>
     </div>
     {% endif %}
+
     <form method="post" action="{{ url_for('index') }}">
       <input type="hidden" name="remember" value="1">
       <div class="form-group">
@@ -36,11 +97,19 @@
           {% endfor %}
         </select>
       </div>
-      <button type="submit" class="btn btn-primary" style="width:100%; justify-content:center; padding:0.85rem;">Let’s go →</button>
+      <button type="submit" class="btn btn-primary" style="width:100%; justify-content:center; padding:0.9rem;">Let’s go →</button>
     </form>
-    <p style="margin-top:1.25rem; font-size:0.8rem; color:var(--muted);">
+
+    <p style="margin-top:1rem; font-size:0.8rem; color:var(--muted); text-align:center;">
       New teammate? Ask your admin to add you to the team roster.
     </p>
+    <p style="margin-top:0.5rem; font-size:0.8rem; text-align:center;">
+      {% if admin_login_configured %}
+      <a href="{{ url_for('admin_login', next=url_for('admin')) }}" style="color:var(--orange);">🔐 Admin login</a>
+      {% else %}
+      <span style="color:var(--muted);">Admin login is not enabled yet.</span>
+      {% endif %}
+    </p>
   </div>
 </div>
 {% endblock %}

templates/leaderboard.html

@@ -7,6 +7,9 @@
     overflow: auto;
     -webkit-overflow-scrolling: touch;
   }
+  .leaderboard-table-wrap table {
+    min-width: 880px;
+  }
   .leaderboard-table-wrap thead th {
     position: sticky;
     top: 0;
@@ -14,6 +17,71 @@
     background: var(--card);
     box-shadow: 0 1px 0 var(--border);
   }
+  .podium-wrap {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 2.5rem;
+    flex-wrap: wrap;
+  }
+  @media (max-width: 760px) {
+    .podium-wrap {
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+      gap: 0.45rem;
+      margin-bottom: 1.2rem;
+      flex-wrap: nowrap;
+    }
+    .podium-wrap > div { min-width: 0; flex: 1 1 0 !important; }
+    .podium-wrap .podium-rank-1 { order: 2; }
+    .podium-wrap .podium-rank-2 { order: 1; }
+    .podium-wrap .podium-rank-3 { order: 3; }
+    .podium-wrap .podium-name { font-size: 0.95rem !important; }
+    .podium-wrap .podium-pts { font-size: 1.15rem !important; }
+    .podium-wrap .podium-col { height: 46px !important; }
+    .leaderboard-table-wrap table {
+      min-width: 760px;
+      font-size: 0.84rem;
+    }
+    .leaderboard-table-wrap thead th:nth-child(1),
+    .leaderboard-table-wrap tbody td:nth-child(1) {
+      position: sticky;
+      left: 0;
+      z-index: 3;
+      background: var(--card);
+      box-shadow: 1px 0 0 var(--border);
+    }
+    .leaderboard-table-wrap thead th:nth-child(2),
+    .leaderboard-table-wrap tbody td:nth-child(2) {
+      position: sticky;
+      left: 52px;
+      z-index: 3;
+      background: var(--card);
+      box-shadow: 1px 0 0 var(--border);
+      min-width: 140px;
+    }
+    .leaderboard-table-wrap tbody td { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+  }
+  @media (max-width: 560px) {
+    .podium-wrap { gap: 0.35rem; margin-bottom: 1rem; }
+    .podium-wrap .podium-name { font-size: 0.84rem !important; }
+    .podium-wrap .podium-pts { font-size: 1rem !important; }
+    .podium-wrap .podium-col { height: 34px !important; }
+    .leaderboard-table-wrap thead th:nth-child(4),
+    .leaderboard-table-wrap tbody td:nth-child(4),
+    .leaderboard-table-wrap thead th:nth-child(6),
+    .leaderboard-table-wrap tbody td:nth-child(6),
+    .leaderboard-table-wrap thead th:nth-child(8),
+    .leaderboard-table-wrap tbody td:nth-child(8) {
+      display: none;
+    }
+    .leaderboard-table-wrap table {
+      min-width: 640px;
+      font-size: 0.8rem;
+    }
+  }
 </style>
 {% endblock %}
 {% block content %}
@@ -25,45 +93,45 @@
 
   <!-- Podium (top 3) -->
   {% if players|length >= 3 %}
-  <div style="display:flex; align-items:flex-end; justify-content:center; gap:1rem; margin-bottom:2.5rem; flex-wrap:wrap;">
+  <div class="podium-wrap">
     <!-- 2nd -->
-    <div style="text-align:center; flex:0 0 180px;">
+    <div class="podium-rank-2" style="text-align:center; flex:0 0 180px;">
       <div style="font-size:2rem;">🥈</div>
       <div style="background:var(--card); border:1px solid var(--border); border-radius:12px 12px 0 0; padding:1rem 0.75rem; border-bottom:none;">
-        <div style="font-family:var(--font-display); font-size:1.1rem; color:var(--muted2);">{{ players[1].display_name or players[1].username }}</div>
-        <div style="font-family:var(--font-mono); font-size:1.5rem; color:var(--muted2); font-weight:700;">{{ '%.0f'|format(players[1].points) }}</div>
+        <div class="podium-name" style="font-family:var(--font-display); font-size:1.1rem; color:var(--muted2);">{{ players[1].display_name or players[1].username }}</div>
+        <div class="podium-pts" style="font-family:var(--font-mono); font-size:1.5rem; color:var(--muted2); font-weight:700;">{{ '%.0f'|format(players[1].points) }}</div>
         <div style="font-size:0.75rem; color:var(--muted);">pts</div>
         {% if players[1].settled_count > 0 %}
         <div style="font-size:0.75rem; color:var(--muted); margin-top:0.5rem;">{{ players[1].correct_winners }}/{{ players[1].settled_count }} wins</div>
         {% endif %}
       </div>
-      <div style="background:var(--bg3); border:1px solid var(--border); height:80px; border-radius:0 0 8px 8px;"></div>
+      <div class="podium-col" style="background:var(--bg3); border:1px solid var(--border); height:80px; border-radius:0 0 8px 8px;"></div>
     </div>
     <!-- 1st -->
-    <div style="text-align:center; flex:0 0 200px;">
+    <div class="podium-rank-1" style="text-align:center; flex:0 0 200px;">
       <div style="font-size:2.5rem;">🥇</div>
       <div style="background:linear-gradient(135deg,var(--card),rgba(251,191,36,0.08)); border:1px solid rgba(251,191,36,0.3); border-radius:12px 12px 0 0; padding:1.25rem 0.75rem; border-bottom:none;">
-        <div style="font-family:var(--font-display); font-size:1.3rem; color:var(--gold);">{{ players[0].display_name or players[0].username }}</div>
-        <div style="font-family:var(--font-mono); font-size:2rem; color:var(--gold); font-weight:700;">{{ '%.0f'|format(players[0].points) }}</div>
+        <div class="podium-name" style="font-family:var(--font-display); font-size:1.3rem; color:var(--gold);">{{ players[0].display_name or players[0].username }}</div>
+        <div class="podium-pts" style="font-family:var(--font-mono); font-size:2rem; color:var(--gold); font-weight:700;">{{ '%.0f'|format(players[0].points) }}</div>
         <div style="font-size:0.75rem; color:var(--muted);">pts</div>
         {% if players[0].settled_count > 0 %}
         <div style="font-size:0.75rem; color:var(--muted); margin-top:0.5rem;">{{ players[0].correct_winners }}/{{ players[0].settled_count }} wins</div>
         {% endif %}
       </div>
-      <div style="background:linear-gradient(to bottom, rgba(251,191,36,0.1), var(--bg3)); border:1px solid var(--border); height:110px; border-radius:0 0 8px 8px;"></div>
+      <div class="podium-col" style="background:linear-gradient(to bottom, rgba(251,191,36,0.1), var(--bg3)); border:1px solid var(--border); height:110px; border-radius:0 0 8px 8px;"></div>
     </div>
     <!-- 3rd -->
-    <div style="text-align:center; flex:0 0 180px;">
+    <div class="podium-rank-3" style="text-align:center; flex:0 0 180px;">
       <div style="font-size:2rem;">🥉</div>
       <div style="background:var(--card); border:1px solid var(--border); border-radius:12px 12px 0 0; padding:1rem 0.75rem; border-bottom:none;">
-        <div style="font-family:var(--font-display); font-size:1.1rem; color:#cd7f32;">{{ players[2].display_name or players[2].username }}</div>
-        <div style="font-family:var(--font-mono); font-size:1.5rem; color:#cd7f32; font-weight:700;">{{ '%.0f'|format(players[2].points) }}</div>
+        <div class="podium-name" style="font-family:var(--font-display); font-size:1.1rem; color:#cd7f32;">{{ players[2].display_name or players[2].username }}</div>
+        <div class="podium-pts" style="font-family:var(--font-mono); font-size:1.5rem; color:#cd7f32; font-weight:700;">{{ '%.0f'|format(players[2].points) }}</div>
         <div style="font-size:0.75rem; color:var(--muted);">pts</div>
         {% if players[2].settled_count > 0 %}
         <div style="font-size:0.75rem; color:var(--muted); margin-top:0.5rem;">{{ players[2].correct_winners }}/{{ players[2].settled_count }} wins</div>
         {% endif %}
       </div>
-      <div style="background:var(--bg3); border:1px solid var(--border); height:55px; border-radius:0 0 8px 8px;"></div>
+      <div class="podium-col" style="background:var(--bg3); border:1px solid var(--border); height:55px; border-radius:0 0 8px 8px;"></div>
     </div>
   </div>
   {% endif %}

users.json

@@ -6,7 +6,6 @@
     {"key": "jay", "display_name": "Jay"},
     {"key": "kishore", "display_name": "Kishore"},
     {"key": "megha", "display_name": "Megha"},
-    {"key": "naveein", "display_name": "Naveein"},
     {"key": "neha", "display_name": "Neha"},
     {"key": "praveen", "display_name": "Praveen"},
     {"key": "rakesh", "display_name": "Rakesh"},