/* patani.fun — light/modern palette with sport accents */

:root {
    --accent: #16a34a;        /* green-600 */
    --accent-strong: #15803d; /* green-700 */
    --accent-soft: #dcfce7;   /* green-100 */
    --warn:   #ea580c;        /* orange-600 */
    --warn-soft: #ffedd5;     /* orange-100 */
    --danger: #dc2626;        /* red-600 */

    --bg:     #f1f5f9;        /* slate-100 */
    --card:   #ffffff;        /* white cards */
    --card-alt: #f8fafc;      /* slate-50 — alt rows */
    --line:   #e2e8f0;        /* slate-200 */
    --line-strong: #cbd5e1;   /* slate-300 */
    --muted:  #64748b;        /* slate-500 */
    --text:   #0f172a;        /* slate-900 */
    --text-soft: #334155;     /* slate-700 */
}

html, body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 16px;  /* up from default 14-15px */
}

/* Modal overlay — keep dark for focus */
.modal-backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}

/* Match cards */
.match-card {
    background: var(--card);
    border: 1px solid var(--line);
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.match-card:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.08);
}

/* Live pulse */
.live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239,68,68, 0.6);
    animation: pulse 1.6s infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(239,68,68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68, 0); }
}

/* Flag images */
.flag-img {
    display: inline-block;
    width: 36px;
    height: 24px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1);
    vertical-align: middle;
    background: #e5e7eb;  /* shows a neutral gray box if image fails to load */
}
.flag-inline {
    margin-right: 10px;
}
@media (max-width: 640px) {
    .flag-img { width: 30px; height: 20px; }
}
.flag-placeholder { font-size: 1.4em; line-height: 1; vertical-align: middle; }

.score-num {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .hide-mobile { display: none !important; }
}

/* Form controls — light theme */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="datetime-local"], select, textarea {
    background-color: white;
    color: var(--text);
    border: 1px solid var(--line-strong);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.5rem 0.95rem; border-radius: 0.5rem;
    font-weight: 600; font-size: 0.875rem;
    transition: background .15s, transform .05s, box-shadow .15s;
    cursor: pointer; user-select: none;
    border: 1px solid transparent;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
    background: var(--accent); color: white;
}
.btn-primary:hover { background: var(--accent-strong); box-shadow: 0 2px 6px rgba(22,163,74,0.25); }
.btn-warn {
    background: var(--warn); color: white;
}
.btn-warn:hover { background: #c2410c; box-shadow: 0 2px 6px rgba(234,88,12,0.25); }
.btn-ghost {
    background: white; color: var(--text-soft); border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--card-alt); border-color: var(--accent); color: var(--accent); }
.btn-danger {
    background: var(--danger); color: white;
}
.btn-danger:hover { background: #b91c1c; }

/* Badges fază */
.badge-faza {
    font-size: 0.7rem; padding: 0.2rem 0.6rem; border-radius: 9999px;
    font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    display: inline-block;
}
.faza-group  { background: var(--accent-soft); color: var(--accent-strong); }
.faza-r32    { background: var(--warn-soft); color: #c2410c; }
.faza-r16    { background: #ffedd5; color: #9a3412; }
.faza-qf     { background: #fed7aa; color: #9a3412; }
.faza-sf     { background: #fecaca; color: #991b1b; }
.faza-3rd    { background: #e9d5ff; color: #6b21a8; }
.faza-final  { background: #fef9c3; color: #854d0e; }