/* ──────────────────────────────────────────────────────────────────────────
   penalty-game.css — Penalty Shootout mini-game styles
   ────────────────────────────────────────────────────────────────────────── */

/* ── Section wrapper ────────────────────────────────────────────────────── */
.pg-section {
    background: #0e1116;
    border-top: 1px solid #21262d;
    border-bottom: 1px solid #21262d;
    padding-bottom: 24px;
}

.pg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 10px;
}

.pg-header-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.pg-title {
    font-size: 15px;
    font-weight: 700;
    color: #e6edf3;
}

.pg-subtitle {
    font-size: 12px;
    color: #8b949e;
}

.pg-toggle {
    background: none;
    border: 1px solid #30363d;
    color: #8b949e;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.pg-body {
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* ── Scoreboard ─────────────────────────────────────────────────────────── */
.pg-board {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 440px;
    background: rgba(255,255,255,0.04);
    border: 1px solid #21262d;
    border-radius: 10px;
    padding: 10px 20px;
}

.pg-score-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pg-score-num {
    font-size: 28px;
    font-weight: 800;
    color: #4493f8;
    line-height: 1;
}

.pg-score-lbl {
    font-size: 10px;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Arena ──────────────────────────────────────────────────────────────── */
.pg-arena {
    width: 100%;
    max-width: 440px;
    position: relative;
}

/* Goal */
.pg-goal {
    position: relative;
    width: 100%;
    height: 160px;
    background: linear-gradient(170deg, #060e06 0%, #0a1c0a 100%);
    border: 4px solid #e0e0e0;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
}

/* Net crosshatch pattern */
.pg-net {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.065) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

/* Goalkeeper */
.pg-keeper {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40px;
    line-height: 1;
    z-index: 3;
    pointer-events: none;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.pg-keeper.lean-left  { transform: translateX(-82%); }
.pg-keeper.lean-right { transform: translateX(-18%); }

/* Goal/Save result flash */
.pg-flash {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.04em;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
}

.pg-flash-goal {
    opacity: 1;
    background: rgba(34, 197, 94, 0.22);
    color: #4ade80;
    text-shadow: 0 0 20px rgba(34,197,94,0.8);
    animation: pg-pop 0.18s ease-out;
}

.pg-flash-save {
    opacity: 1;
    background: rgba(248, 81, 73, 0.18);
    color: #f87171;
    text-shadow: 0 0 20px rgba(248,81,73,0.7);
    animation: pg-pop 0.18s ease-out;
}

.pg-flash-over {
    opacity: 1;
    font-size: 19px;
    background: rgba(240, 180, 41, 0.18);
    color: #f0b429;
    text-shadow: 0 0 20px rgba(240,180,41,0.7);
    animation: pg-pop 0.18s ease-out;
}

@keyframes pg-pop {
    from { transform: scale(0.55); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* Goal end-game result overlay */
.pg-result[hidden] { display: none !important; }

.pg-result {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 12;
    animation: pg-result-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.pg-result-win  { background: rgba(22, 101, 52,  0.92); }
.pg-result-ok   { background: rgba(120, 83,  0,  0.92); }
.pg-result-fail { background: rgba(127, 29,  29, 0.92); }

.pg-result-icon  { font-size: 36px; line-height: 1; }
.pg-result-line  {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.pg-result-score {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    font-weight: 600;
    letter-spacing: 0.06em;
}

@keyframes pg-result-in {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1);    }
}

.pg-result-btn {
    margin-top: 6px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.50);
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.12s, transform 0.08s;
    -webkit-tap-highlight-color: transparent;
}

.pg-result-btn:hover  { background: rgba(255,255,255,0.28); }
.pg-result-btn:active { transform: scale(0.95); }

/* ── Pitch (deep perspective view) ─────────────────────────────────────── */
.pg-pitch {
    position: relative;
    width: 100%;
    height: 220px;
    background: linear-gradient(
        to bottom,
        #081808 0%,
        #0d2e0d 18%,
        #114211 45%,
        #165216 72%,
        #1a5e1a 100%
    );
    border-left:   3px solid rgba(255,255,255,0.10);
    border-right:  3px solid rgba(255,255,255,0.10);
    border-bottom: 3px solid rgba(255,255,255,0.10);
    border-radius: 0 0 8px 8px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 16px;
}

/* Mowing stripes */
.pg-pitch::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        180deg,
        rgba(0,0,0,0.07)  0px,
        rgba(0,0,0,0.07)  24px,
        transparent       24px,
        transparent       48px
    );
    pointer-events: none;
}

/* Penalty box */
.pg-penalty-box {
    position: absolute;
    top: 0;
    left: 16%;
    right: 16%;
    height: 52%;
    border: 2px solid rgba(255,255,255,0.20);
    border-top: none;
    pointer-events: none;
}

/* The D arc */
.pg-d-arc {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 56px;
    border: 2px solid rgba(255,255,255,0.16);
    border-top: none;
    border-radius: 0 0 50% 50%;
    pointer-events: none;
}

/* Penalty spot */
.pg-spot-mark {
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    background: rgba(255,255,255,0.55);
    border-radius: 50%;
    pointer-events: none;
}

/* Direction arrow SVG overlay — spans full arena (goal + pitch) */
.pg-arrow-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 6;
}

/* Ball */
.pg-ball-wrap {
    position: relative;
    z-index: 5;
}

.pg-ball {
    font-size: 34px;
    line-height: 1;
    display: block;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.65));
}

/* ── Direction controls ──────────────────────────────────────────────────── */
.pg-controls {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pg-dir-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 8px;
    width: 100%;
}

.pg-dir-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 11px 6px;
    background: #161b22;
    border: 1.5px solid #30363d;
    border-radius: 8px;
    color: #e6edf3;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
    min-height: 60px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.pg-dir-btn:hover:not(:disabled) {
    background: rgba(68, 147, 248, 0.12);
    border-color: rgba(68, 147, 248, 0.45);
}

.pg-dir-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.pg-dir-btn.pg-dir-btn-active {
    background: rgba(68, 147, 248, 0.18);
    border-color: #4493f8;
    box-shadow: 0 0 0 1px #4493f8;
}

.pg-dir-btn:disabled {
    opacity: 0.40;
    cursor: default;
}

.pg-dir-arrow {
    font-size: 24px;
    line-height: 1;
}

.pg-dir-lbl {
    font-size: 10px;
    color: #8b949e;
    white-space: nowrap;
}

/* ── Speed / Power meter ─────────────────────────────────────────────────── */
.pg-speed-wrap {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pg-speed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pg-speed-label {
    font-size: 12px;
    font-weight: 700;
    color: #e6edf3;
    letter-spacing: 0.06em;
}

.pg-speed-hint {
    font-size: 11px;
    color: #8b949e;
    font-style: italic;
}

.pg-speed-track {
    position: relative;
    height: 22px;
    background: #0d1117;
    border: 1.5px solid #30363d;
    border-radius: 11px;
    overflow: hidden;
}

.pg-speed-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: 11px;
    pointer-events: none;
}

.pg-speed-needle {
    position: absolute;
    top: 2px;
    bottom: 2px;
    width: 5px;
    border-radius: 3px;
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(255,255,255,0.55);
    pointer-events: none;
}

.pg-speed-zones {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.28);
    pointer-events: none;
    text-transform: uppercase;
}

/* Kick button */
.pg-kick-btn {
    width: 100%;
    max-width: 260px;
    padding: 14px 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: #1c2128;
    color: #4d5566;
    border: 2px solid #2d333b;
    border-radius: 10px;
    cursor: default;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.pg-kick-btn.pg-kick-btn-ready {
    background: #4493f8;
    border-color: #4493f8;
    color: #ffffff;
    cursor: pointer;
    animation: pg-kick-pulse 1.4s ease-in-out infinite;
}

.pg-kick-btn.pg-kick-btn-ready:active {
    transform: scale(0.97);
    animation: none;
}

.pg-kick-btn.pg-kick-btn-again {
    background: #238636;
    border-color: #2ea043;
    color: #ffffff;
    cursor: pointer;
}

.pg-kick-btn.pg-kick-btn-again:hover { opacity: 0.88; }
.pg-kick-btn.pg-kick-btn-again:active { transform: scale(0.97); }

@keyframes pg-kick-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(68, 147, 248, 0.55); }
    55%      { box-shadow: 0 0 0 10px rgba(68, 147, 248, 0);    }
}

/* ── Message ─────────────────────────────────────────────────────────────── */
.pg-msg {
    font-size: 13px;
    color: #8b949e;
    text-align: center;
    margin: 0;
    min-height: 18px;
    font-style: italic;
    max-width: 440px;
    line-height: 1.4;
}


/* ── First-load direction hint ──────────────────────────────────────────── */
@keyframes pg-hint-glow {
    0%, 100% { box-shadow: 0 0 0 0   rgba(68, 147, 248, 0.0); }
    50%      { box-shadow: 0 0 0 6px rgba(68, 147, 248, 0.38); }
}

.pg-dir-grid.pg-dir-hint .pg-dir-btn {
    animation: pg-hint-glow 1.6s ease-in-out infinite;
}

.pg-dir-grid.pg-dir-hint .pg-dir-btn:nth-child(2) { animation-delay: 0.27s; }
.pg-dir-grid.pg-dir-hint .pg-dir-btn:nth-child(3) { animation-delay: 0.54s; }
.pg-dir-grid.pg-dir-hint .pg-dir-btn:nth-child(4) { animation-delay: 0.13s; }
.pg-dir-grid.pg-dir-hint .pg-dir-btn:nth-child(5) { animation-delay: 0.40s; }
.pg-dir-grid.pg-dir-hint .pg-dir-btn:nth-child(6) { animation-delay: 0.67s; }

/* ── Team selection screen ──────────────────────────────────────────────── */
.pg-ts-title {
    font-size: 14px;
    font-weight: 700;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 6px;
    text-align: center;
}

.pg-team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 440px;
}

.pg-team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 8px 12px;
    background: #161b22;
    border: 1.5px solid #30363d;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.pg-team-card:hover {
    background: rgba(68, 147, 248, 0.10);
    border-color: rgba(68, 147, 248, 0.40);
}

.pg-team-card:active {
    transform: scale(0.96);
}

.pg-team-flag {
    font-size: 32px;
    line-height: 1;
}

.pg-team-name {
    font-size: 13px;
    font-weight: 700;
    color: #e6edf3;
}

.pg-team-gk {
    font-size: 10px;
    color: #8b949e;
}

.pg-team-strong {
    font-size: 10px;
    font-weight: 600;
    color: #f0b429;
    background: rgba(240, 180, 41, 0.12);
    border: 1px solid rgba(240, 180, 41, 0.25);
    border-radius: 4px;
    padding: 1px 6px;
    margin-top: 2px;
}

/* ── Opponent info in scoreboard ─────────────────────────────────────────── */
.pg-kick-cell {
    flex: 2;
    text-align: center;
    font-size: 13px;
    color: #8b949e;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pg-opp-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.pg-opp-flag {
    font-size: 22px;
    line-height: 1;
}

.pg-opp-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.pg-opp-name {
    font-size: 12px;
    font-weight: 700;
    color: #e6edf3;
    line-height: 1;
}

.pg-opp-gk {
    font-size: 10px;
    color: #f0b429;
    line-height: 1;
}

.pg-kick-counter {
    font-size: 11px;
    color: #8b949e;
}

/* ── Mobile tweaks ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .pg-goal     { height: 130px; }
    .pg-keeper   { font-size: 32px; bottom: 5px; }
    .pg-flash    { font-size: 21px; }
    .pg-pitch    { height: 185px; }
    .pg-ball     { font-size: 28px; }
    .pg-score-num { font-size: 24px; }
    .pg-dir-btn   { min-height: 54px; padding: 9px 4px; }
    .pg-dir-arrow { font-size: 20px; }
    .pg-kick-btn  { font-size: 15px; padding: 12px 0; }
}

@media (max-width: 360px) {
    .pg-goal  { height: 115px; }
    .pg-pitch { height: 165px; }
    .pg-dir-lbl { display: none; }
    .pg-dir-arrow { font-size: 24px; }
}