/* ── Penalties Tournament Plugin – Frontend Styles ── */
/* Mobile-first design. Breakpoints: sm 480px, md 768px, lg 1024px */

:root {
    --pen-primary:    #1a3a5c;
    --pen-accent:     #e8a020;
    --pen-success:    #27ae60;
    --pen-danger:     #e74c3c;
    --pen-neutral:    #95a5a6;
    --pen-bg:         #f4f6f9;
    --pen-card-bg:    #ffffff;
    --pen-text:       #2c3e50;
    --pen-text-muted: #7f8c8d;
    --pen-border:     #dde3ec;
    --pen-radius:     10px;
    --pen-shadow:     0 2px 12px rgba(0,0,0,.08);
    --pen-font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Base ────────────────────────────────────────────────────────────────── */

.pen-widget {
    font-family: var(--pen-font);
    color: var(--pen-text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.pen-loading {
    text-align: center;
    padding: 24px;
    color: var(--pen-text-muted);
    font-size: 13px;
}

.pen-error {
    background: #fef0f0;
    border: 1px solid #fcc;
    border-radius: var(--pen-radius);
    padding: 12px 16px;
    color: var(--pen-danger);
    font-size: 13px;
}

/* ── Card shell ──────────────────────────────────────────────────────────── */

.pen-card {
    background: var(--pen-card-bg);
    border-radius: var(--pen-radius);
    box-shadow: var(--pen-shadow);
    overflow: hidden;
    margin-bottom: 12px;
}

.pen-card-header {
    background: var(--pen-primary);
    color: #fff;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pen-card-header .pen-badge-live {
    background: var(--pen-danger);
    color: #fff;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 10px;
    animation: pen-pulse 1.4s infinite;
}

@keyframes pen-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}

/* ── Live Match widget ───────────────────────────────────────────────────── */

.pen-live-match .pen-match-card {
    padding: 16px;
}

.pen-match-scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.pen-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.pen-team-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: contain;
    background: var(--pen-bg);
    padding: 4px;
}

.pen-team-logo-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pen-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pen-team-name {
    font-weight: 600;
    font-size: 13px;
    max-width: 100px;
    word-break: break-word;
}

.pen-score-block {
    text-align: center;
}

.pen-score-main {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: var(--pen-primary);
    letter-spacing: -2px;
}

.pen-score-sep {
    color: var(--pen-text-muted);
    margin: 0 2px;
}

.pen-score-penalties {
    font-size: 13px;
    color: var(--pen-text-muted);
    margin-top: 4px;
}

/* Shot tracker */
.pen-shots-tracker {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--pen-border);
}

.pen-shot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid transparent;
}

.pen-shot--scored   { background: var(--pen-success); color: #fff; }
.pen-shot--missed   { background: var(--pen-danger);  color: #fff; }
.pen-shot--pending  { background: var(--pen-bg);      color: var(--pen-text-muted); border-color: var(--pen-border); }

.pen-no-live {
    text-align: center;
    padding: 32px 16px;
    color: var(--pen-text-muted);
    font-size: 14px;
}

/* ── Standings widget ────────────────────────────────────────────────────── */

.pen-standings .pen-group-block {
    margin-bottom: 16px;
}

.pen-standings table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.pen-standings thead th {
    background: var(--pen-bg);
    color: var(--pen-text-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 8px 6px;
    text-align: center;
    border-bottom: 1px solid var(--pen-border);
}

.pen-standings thead th.pen-th-team {
    text-align: left;
    padding-left: 12px;
}

.pen-standings tbody tr {
    border-bottom: 1px solid var(--pen-border);
    transition: background .15s;
}

.pen-standings tbody tr:last-child {
    border-bottom: none;
}

.pen-standings tbody tr:hover {
    background: var(--pen-bg);
}

.pen-standings tbody td {
    padding: 10px 6px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pen-standings tbody td.pen-td-pos {
    font-weight: 700;
    color: var(--pen-primary);
    width: 28px;
}

.pen-standings tbody td.pen-td-team {
    text-align: left;
    padding-left: 12px;
    font-weight: 600;
}

.pen-standings tbody td.pen-td-pts {
    font-weight: 800;
    color: var(--pen-primary);
}

/* Qualification indicator strip */
.pen-standings tbody tr:nth-child(1) td:first-child,
.pen-standings tbody tr:nth-child(2) td:first-child {
    border-left: 3px solid var(--pen-success);
}

/* ── Results widget ──────────────────────────────────────────────────────── */

.pen-results .pen-round-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pen-text-muted);
    padding: 10px 16px 4px;
}

.pen-result-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--pen-border);
    gap: 8px;
}

.pen-result-row:last-child { border-bottom: none; }

.pen-result-team {
    font-weight: 600;
    font-size: 13px;
}

.pen-result-team--home { text-align: right; }
.pen-result-team--away { text-align: left; }

.pen-result-score {
    background: var(--pen-primary);
    color: #fff;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -1px;
    white-space: nowrap;
    min-width: 52px;
    text-align: center;
}

/* ── Responsive tweaks ───────────────────────────────────────────────────── */

@media (min-width: 480px) {
    .pen-score-main   { font-size: 52px; }
    .pen-team-logo,
    .pen-team-logo-placeholder { width: 60px; height: 60px; }
    .pen-team-name    { font-size: 14px; max-width: 120px; }
    .pen-shot         { width: 32px; height: 32px; font-size: 12px; }
}

@media (min-width: 768px) {
    .pen-standings table { font-size: 14px; }
    .pen-result-row  { padding: 14px 20px; }
    .pen-result-team { font-size: 14px; }
}