:root{
    --bg:#0B0906;
    --panel:#1C1712;
    --panel-2:#241D15;
    --panel-border:#3A2E20;
    --text:#F2EDE1;
    --muted:#A79C87;
    --accent:#E2801A;
    --accent-dim:#8C5316;
    --track:#A6431C;
    --track-dim:#5C2A12;
    --floodlight:#BFE4F0;
    --gold:#E8B84B;
    --danger:#C23B22;
    --green:#6E8F4E;
    --lane:#1C1712;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:#000;
    color:var(--text);
    font-family: ui-monospace, "Courier New", monospace;
    min-height:100vh;
    font-size:16px;
  }
  .wrap{max-width:820px;margin:0 auto;padding:32px 22px 80px;position:relative;z-index:1;}
  h1,h2{
    font-family:"Arial Black",Impact,sans-serif;
    text-transform:uppercase;
    letter-spacing:0.03em;
    margin:0 0 14px 0;
    font-size:23px;
  }
  h1{font-size:30px;border-bottom:3px solid var(--track);padding-bottom:10px;display:inline-block;}
  p{font-size:16px;line-height:1.6;color:var(--text);}
  .card{
    background:linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
    border:1px solid var(--panel-border);
    border-top:3px solid var(--track-dim);
    border-radius:3px;
    padding:26px;
    margin-bottom:18px;
    box-shadow:0 4px 14px rgba(0,0,0,0.35);
  }
  /* ---- Karta-trofeum: sygnaturowy element dla wielkich wygranych (mistrzostwa, awanse, tytuły) ---- */
    .card-training-hero{
    background:
      linear-gradient(180deg, rgba(11,9,6,0.35) 0%, rgba(11,9,6,0.80) 65%, rgba(11,9,6,0.96) 100%),
      url("images/bg-training.jpg") center 30%/cover no-repeat;
    border-top:3px solid var(--track);
  }
  .card-training-hero h2{
    text-shadow:0 2px 10px rgba(0,0,0,0.9);
  }
  .card-venue-hero{
    background:
      linear-gradient(180deg, rgba(11,9,6,0.30) 0%, rgba(11,9,6,0.82) 70%, rgba(11,9,6,0.97) 100%),
      url("images/bg-venue.jpg") center 35%/cover no-repeat;
    border-top:3px solid var(--track);
    padding:34px 26px 22px;
  }
  .card-venue-hero h2{
    text-shadow:0 2px 10px rgba(0,0,0,0.9);
    font-size:26px;
  }
  .card-venue-hero p{
    text-shadow:0 1px 6px rgba(0,0,0,0.8);
  }
  .card-table-hero{
    background:
      linear-gradient(180deg, rgba(11,9,6,0.35) 0%, rgba(11,9,6,0.85) 68%, rgba(11,9,6,0.97) 100%),
      url("images/bg-table.jpg") center 30%/cover no-repeat;
    border-top:3px solid var(--track);
  }
  .card-table-hero h2{
    text-shadow:0 2px 10px rgba(0,0,0,0.9);
  }
  .card-table-hero p{
    text-shadow:0 1px 6px rgba(0,0,0,0.8);
  }
  .card-podium{
    background:
      linear-gradient(180deg, rgba(11,9,6,0.30) 0%, rgba(11,9,6,0.82) 68%, rgba(11,9,6,0.97) 100%),
      url("images/bg-podium.jpg") center 25%/cover no-repeat;
    border-top:3px solid var(--gold);
    text-align:center;
  }
  .card-podium h2{
    text-shadow:0 2px 10px rgba(0,0,0,0.9);
    color:var(--gold);
  }
  .card-podium p{
    text-shadow:0 1px 6px rgba(0,0,0,0.8);
  }
  .card-farewell{
    background:
      linear-gradient(180deg, rgba(11,9,6,0.35) 0%, rgba(11,9,6,0.85) 68%, rgba(11,9,6,0.97) 100%),
      url("images/bg-farewell.jpg") center 30%/cover no-repeat;
    border-top:3px solid var(--track);
  }
  .card-farewell h2{
    text-shadow:0 2px 10px rgba(0,0,0,0.9);
  }
  .card-farewell p{
    text-shadow:0 1px 6px rgba(0,0,0,0.8);
  }
  .card-contract-hero{
    background:
      linear-gradient(180deg, rgba(11,9,6,0.35) 0%, rgba(11,9,6,0.85) 68%, rgba(11,9,6,0.97) 100%),
      url("images/bg-contract.jpg") center 28%/cover no-repeat;
    border-top:3px solid var(--gold);
  }
  .card-contract-hero h2{
    text-shadow:0 2px 10px rgba(0,0,0,0.9);
  }
  .card-contract-hero p{
    text-shadow:0 1px 6px rgba(0,0,0,0.8);
  }
    .card-injury-hero{
    background:
      linear-gradient(180deg, rgba(11,9,6,0.55) 0%, rgba(11,9,6,0.90) 75%, rgba(11,9,6,0.98) 100%),
      url("images/bg-injury.jpg") center 30%/cover no-repeat;
    border-top:3px solid var(--danger);
    min-height:170px;
  }
  .card-injury-hero h2{
    text-shadow:0 2px 10px rgba(0,0,0,0.9);
  }
  .card-injury-hero p{
    text-shadow:0 1px 6px rgba(0,0,0,0.8);
  }
.card-profile-hero{
    background:
      linear-gradient(180deg, rgba(11,9,6,0.55) 0%, rgba(11,9,6,0.90) 75%, rgba(11,9,6,0.98) 100%),
      url("images/bg-profile.jpg") center 25%/cover no-repeat;
    border-top:3px solid var(--gold);
    min-height:180px;
  }
  .card-profile-hero h2{
    text-shadow:0 2px 10px rgba(0,0,0,0.9);
    font-size:22px;
  }
  .card-profile-hero p{
    text-shadow:0 1px 6px rgba(0,0,0,0.8);
  }
.card-trophy{
    background:
      radial-gradient(ellipse at top, rgba(191,228,240,0.10) 0%, transparent 60%),
      linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
    border:1px solid var(--gold);
    border-top:3px solid var(--floodlight);
    border-radius:3px;
    padding:30px 26px;
    margin-bottom:18px;
    box-shadow:0 0 0 1px rgba(232,184,75,0.25), 0 0 34px rgba(191,228,240,0.16), 0 6px 18px rgba(0,0,0,0.4);
    text-align:center;
  }
  .card-trophy h2{color:var(--gold);font-size:26px;}
  .card-trophy .big-stat{color:var(--gold);font-size:40px;text-shadow:0 0 22px rgba(232,184,75,0.5);}
  @media (prefers-reduced-motion: no-preference){
    .card-trophy{animation:trophyGlow 2.6s ease-in-out infinite;}
  }
  @keyframes trophyGlow{
    0%,100%{ box-shadow:0 0 0 1px rgba(232,184,75,0.25), 0 0 34px rgba(191,228,240,0.16), 0 6px 18px rgba(0,0,0,0.4); }
    50%{ box-shadow:0 0 0 1px rgba(232,184,75,0.4), 0 0 48px rgba(191,228,240,0.28), 0 6px 18px rgba(0,0,0,0.4); }
  }
  .btn{
    background:linear-gradient(180deg, #F09A3E 0%, var(--accent) 100%);
    color:#150F08;
    border:none;
    font-family:"Arial Black",Impact,sans-serif;
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-size:16px;
    padding:18px 20px;
    border-radius:4px;
    cursor:pointer;
    box-shadow:0 3px 0 var(--accent-dim);
    transition:transform 0.08s ease;
  }
  .btn:hover{background:linear-gradient(180deg, #FFB25C 0%, #F09A3E 100%);}
  .btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-dim);}
  .btn:disabled{background:#4A3B26;color:#8A7C63;cursor:not-allowed;box-shadow:none;}
  .btn-go{background:linear-gradient(180deg,#83A863 0%, var(--green) 100%)!important;box-shadow:0 3px 0 #4C6536!important;}
  .btn-secondary{
    background:transparent;
    border:1px solid var(--accent);
    color:var(--accent);
    font-family:"Arial Black",Impact,sans-serif;
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-size:16px;
    padding:18px 20px;
    border-radius:4px;
    cursor:pointer;
    transition:background 0.12s ease;
  }
  .btn-secondary:hover{background:rgba(226,128,26,0.12);}
  .btn-mini{
    background:#33291B;
    border:1px solid var(--panel-border);
    color:var(--text);
    font-size:13px;
    padding:8px 12px;
    border-radius:4px;
    cursor:pointer;
  }
  .btn-mini:disabled{opacity:0.35;cursor:not-allowed;}
  .btn-mini-active{background:var(--accent);color:#fff;border-color:var(--accent);}
  input[type=text]{
    width:100%;padding:14px;margin:16px 0;
    background:#0F0D0A;border:1px solid var(--panel-border);
    color:var(--text);font-family:inherit;border-radius:4px;font-size:16px;
  }
  .field-error{color:var(--danger);font-size:13px;margin:-8px 0 12px;}
  .stat-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
  .stat-label{width:170px;font-size:13px;color:var(--muted);flex-shrink:0;}
  .stat-bar-bg{
    flex:1;height:13px;background:#0F0D0A;border:1px solid var(--panel-border);border-radius:3px;overflow:hidden;
    background-image:repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 10%);
  }
  .stat-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent));box-shadow:0 0 8px rgba(226,128,26,0.5) inset;}
  .stat-val{width:44px;text-align:right;font-weight:bold;font-size:15px;flex-shrink:0;}
  .light-row{display:flex;gap:14px;justify-content:center;margin:26px 0;}
  .light{width:32px;height:32px;border-radius:50%;background:#3A2E20;border:2px solid #0E0C09;}
  .light.on{background:var(--accent);box-shadow:0 0 16px var(--accent);}
  .eyebrow{color:var(--track);letter-spacing:0.2em;font-size:12px;margin-bottom:20px;font-weight:bold;}
  .row{display:flex;gap:12px;flex-wrap:wrap;}
  .row>*{flex:1;min-width:120px;}

  /* ---- Dostosowanie do wąskich ekranów (telefony) - marginesy, etykiety i czcionki skalowane w dół,
     żeby nic nie wychodziło poza ekran ani nie ściskało się nieczytelnie. ---- */
  @media (max-width:480px){
    .wrap{padding:16px 12px 60px;}
    .card{padding:16px;}
    h1{font-size:22px;}
    .eyebrow{font-size:10px;margin-bottom:14px;}
    .stat-label{width:100px;font-size:11px;}
    .stat-val{width:36px;font-size:13px;}
    .big-stat{font-size:24px;}
    .card-trophy .big-stat{font-size:28px;}
    .card-trophy h2{font-size:20px;}
    .btn{padding:14px 10px;font-size:13px;}
    .btn-secondary{padding:12px 10px;font-size:13px;}
    .row>*{min-width:100px;}
    .list-row, .list-row-sm{font-size:12px;}
  }

  /* ---- Klasy pomocnicze (zastępują najczęściej powtarzane style inline) ---- */
  .u-w100{width:100%;}
  .u-center{text-align:center;}
  .u-muted{color:var(--muted);}
  .u-danger{color:var(--danger);}
  .u-accent{color:var(--accent);}
  .u-small{font-size:11px;}
  .u-mt10{margin-top:10px;}
  .u-mb8{margin:0 0 8px;}
  .row-between{display:flex;justify-content:space-between;}
  .list-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--panel-border);font-size:13px;}
  .list-row-sm{padding:4px 0;border-bottom:1px solid var(--panel-border);font-size:13px;}
  .big-stat{font-size:32px;font-weight:bold;color:var(--accent);margin:6px 0;text-shadow:0 0 14px rgba(226,128,26,0.35);}
  .score-line{color:var(--accent);font-weight:bold;margin:0 0 6px;}
  .border-accent{border-color:var(--accent);}