/* Wspólne style quizów — jedno miejsce dla obu przedmiotów.
   Wydzielone 2026-09-22 z quiz.html i english.html: 97% selektorów było identycznych
   (100 vs 134, wspólnych 97), więc każda poprawka wyglądu musiała być robiona dwa razy
   i regularnie rozjeżdżała się między przedmiotami.
   Rzeczy SPECYFICZNE dla przedmiotu (tła kategorii, kolory pigułek) idą z jego pliku
   w subjects/, nie tutaj. */


    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

    :root {
      --pink:        #FF6B9D;
      --pink-dark:   #D63877;
      --pink-light:  #FFF0F7;
      --purple:      #7A34D4;
      --purple-light:#EDE3FF;
      --purple-dark: #5A1FAA;
      --green:       #2ECC71;
      --green-dark:  #27AE60;
      --red:         #E74C3C;
      --yellow:      #FFD93D;
      --bg:          #FFF5FA;
      --white:       #FFFFFF;
      --text:        #3A1040;
      --text-light:  #A0679A;
    }

    * { box-sizing:border-box; margin:0; padding:0; }

    body {
      font-family:'Nunito',sans-serif;
      background:var(--bg);
      min-height:100vh;
      display:flex;
      align-items:flex-start;
      justify-content:center;
      overflow-x:hidden;
      overflow-y:auto;
      position:relative;
    }

    body::before, body::after {
      content:'';position:fixed;border-radius:50%;opacity:.15;pointer-events:none;
    }
    body::before { width:500px;height:500px;background:var(--pink);top:-160px;left:-160px; }
    body::after  { width:380px;height:380px;background:var(--purple);bottom:-110px;right:-110px; }

    .stars { position:fixed;inset:0;pointer-events:none;z-index:0; }
    .star {
      position:absolute;background:var(--yellow);
      clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
      animation:floatStar linear infinite;opacity:.5;
    }
    @keyframes floatStar {
      0%   {transform:translateY(0)   rotate(0deg);  opacity:.5;}
      50%  {opacity:.85;}
      100% {transform:translateY(-80px) rotate(360deg);opacity:.1;}
    }

    #app {
      position:relative;z-index:1;
      width:100%;max-width:620px;
      padding:24px 20px 40px;
    }

    .screen { display:none; }
    .screen.active { display:block; }

    .card {
      background:var(--white);
      border-radius:28px;
      padding:38px 38px 34px;
      box-shadow:0 12px 48px rgba(255,107,157,.16), 0 2px 8px rgba(0,0,0,.06);
    }

    /* ══ START ══ */
    #start { text-align:center; }

    .mascot { font-size:88px;display:block;margin-bottom:8px;animation:bounce 2s ease-in-out infinite; }
    @keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }

    .title    { font-size:2.1rem;font-weight:900;color:var(--pink);line-height:1.15;margin-bottom:6px; }
    .subtitle { font-size:1rem;color:var(--text-light);font-weight:600;margin-bottom:24px; }

    .info-chips { display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:26px; }
    .chip {
      display:flex;align-items:center;gap:6px;
      background:var(--pink-light);color:var(--pink);
      font-weight:800;font-size:.88rem;padding:7px 14px;border-radius:50px;
    }

    .name-wrap { margin-bottom:20px;text-align:left; }
    .name-label {
      display:block;font-size:.85rem;font-weight:800;color:var(--text-light);
      text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px;
    }
    .name-input {
      width:100%;padding:13px 18px;border:3px solid var(--pink-light);border-radius:16px;
      font-family:'Nunito',sans-serif;font-size:1.1rem;font-weight:700;color:var(--text);
      background:var(--bg);outline:none;transition:border-color .18s,box-shadow .18s;
    }
    .name-input:focus { border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,107,157,.12); }
    .name-input::placeholder { color:#DBAEC8;font-weight:600; }
    .name-input.error { border-color:var(--red);animation:shake .4s ease; }
    .name-error { display:none;color:var(--red);font-size:.82rem;font-weight:700;margin-top:6px; }
    .name-error.visible { display:block; }

    .start-actions { display:flex;flex-direction:column;gap:10px;align-items:center; }
    .start-greeting { font-size:1.15rem;font-weight:800;color:var(--purple);margin:-12px 0 18px; }

    .save-error {
      display:none;background:#FADBD8;color:var(--red);font-weight:800;font-size:.9rem;
      padding:10px 14px;border-radius:14px;margin:-8px 0 16px;
    }
    .save-error.visible { display:block; }

    /* ══ CATEGORIES ══ */
    #categories { text-align:center; }

    .cat-header { margin-bottom:22px; }
    .cat-title {
      font-size:1.8rem;font-weight:900;color:var(--pink);margin-bottom:6px;
    }
    .cat-subtitle { font-size:.95rem;font-weight:600;color:var(--text-light); }
    .cat-player-greeting {
      font-size:1rem;font-weight:800;color:var(--text-light);margin-bottom:4px;
    }

    .cat-grid {
      display:grid;
      grid-template-columns:1fr 1fr 1fr 1fr;
      gap:10px;
      margin-bottom:20px;
    }

    .cat-card {
      border-radius:20px;
      padding:18px 10px 16px;
      cursor:pointer;
      transition:all .2s cubic-bezier(.34,1.56,.64,1);
      border:3px solid transparent;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:7px;
      background:var(--bg);
    }
    .cat-card:hover {
      transform:translateY(-5px) scale(1.04);
      border-color:currentColor;
      box-shadow:0 8px 28px rgba(0,0,0,.1);
    }
    .cat-card:active { transform:scale(.97); }
    .cat-card.selected {
      transform:scale(1.05);
      box-shadow:0 8px 28px rgba(0,0,0,.14);
    }

    .cat-icon { font-size:2.4rem;line-height:1; }
    .cat-name { font-size:.82rem;font-weight:900;text-transform:uppercase;letter-spacing:.5px; }
    .cat-count { font-size:.72rem;font-weight:700;opacity:.75; }

    /* category colour themes */
    .cat-animals  { color:#27AE60; background:#EDFAF1; }
    .cat-animals.selected,  .cat-animals:hover  { background:#D5F5E3;border-color:#27AE60; }
    .cat-body     { color:#E74C3C; background:#FDEDEC; }
    .cat-body.selected,     .cat-body:hover     { background:#FADBD8;border-color:#E74C3C; }
    .cat-colors   { color:#E67E22; background:#FFF8EE; }
    .cat-colors.selected,   .cat-colors:hover   { background:#FDEBD0;border-color:#E67E22; }
    .cat-food     { color:#D35400; background:#FEF9E7; }
    .cat-food.selected,     .cat-food:hover     { background:#FDEBD0;border-color:#D35400; }
    .cat-vehicles { color:#2980B9; background:#EBF5FB; }
    .cat-vehicles.selected, .cat-vehicles:hover { background:#D6EAF8;border-color:#2980B9; }
    .cat-holidays { color:#8E44AD; background:#F5EEF8; }
    .cat-holidays.selected, .cat-holidays:hover { background:#E8DAEF;border-color:#8E44AD; }
    .cat-school   { color:#1A5276; background:#EAF2FF; }
    .cat-school.selected,   .cat-school:hover   { background:#D6EAF8;border-color:#1A5276; }
    .cat-mix      { color:var(--pink); background:var(--pink-light); }
    .cat-mix.selected,      .cat-mix:hover      { background:#FFD6EB;border-color:var(--pink); }

    .cat-back-btn {
      display:inline-flex;align-items:center;gap:6px;
      background:transparent;border:none;
      font-family:'Nunito',sans-serif;font-size:.9rem;font-weight:800;
      color:var(--text-light);cursor:pointer;padding:8px 12px;border-radius:10px;
      transition:color .15s;
    }
    .cat-back-btn:hover { color:var(--pink); }

    /* ══ QUIZ ══ */
    .quiz-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:10px; }
    .progress-wrap { flex:1; }
    .progress-label { font-size:.8rem;font-weight:700;color:var(--text-light);margin-bottom:5px; }
    .progress-bar-bg { background:var(--pink-light);border-radius:50px;height:10px;overflow:hidden; }
    .progress-bar-fill {
      background:linear-gradient(90deg,var(--pink),var(--purple));
      height:100%;border-radius:50px;transition:width .4s cubic-bezier(.4,0,.2,1);
    }
    .quiz-meta { display:flex;align-items:center;gap:8px; }
    .player-badge {
      display:flex;align-items:center;gap:5px;background:var(--pink-light);color:var(--pink);
      font-size:.85rem;font-weight:800;padding:7px 11px;border-radius:50px;max-width:110px;overflow:hidden;
    }
    .player-badge-name { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

    /* category pill shown during quiz */
    .cat-pill {
      display:flex;align-items:center;gap:4px;
      font-size:.78rem;font-weight:800;
      padding:5px 11px;border-radius:50px;
      white-space:nowrap;
    }

    .timer-badge {
      display:flex;align-items:center;gap:5px;background:var(--pink-light);color:var(--pink);
      font-size:.95rem;font-weight:800;padding:7px 13px;border-radius:50px;white-space:nowrap;
      min-width:76px;justify-content:center;
    }
    .timer-badge.pulse { animation:timerPulse .5s ease-in-out; }
    @keyframes timerPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.1);} }

    .question-counter { text-align:center;font-size:.83rem;font-weight:700;color:var(--text-light);margin-bottom:16px; }

    .image-box {
      border-radius:24px;
      padding:28px 20px 22px;
      text-align:center;
      margin-bottom:10px;
      position:relative;
      overflow:hidden;
    }
    .image-box::before {
      content:'';position:absolute;top:-30px;right:-30px;
      width:110px;height:110px;background:rgba(255,255,255,.12);border-radius:50%;
    }
    .image-box::after {
      content:'';position:absolute;bottom:-20px;left:-20px;
      width:80px;height:80px;background:rgba(255,255,255,.08);border-radius:50%;
    }

    /* dynamic gradient per category */
    .image-box.bg-animals  { background:linear-gradient(135deg,#27AE60,#1E8449); }
    .image-box.bg-body     { background:linear-gradient(135deg,#E74C3C,#B03A2E); }
    .image-box.bg-colors   { background:linear-gradient(135deg,#E67E22,#D35400); }
    .image-box.bg-food     { background:linear-gradient(135deg,#D35400,#A04000); }
    .image-box.bg-vehicles { background:linear-gradient(135deg,#2980B9,#1F618D); }
    .image-box.bg-holidays { background:linear-gradient(135deg,#8E44AD,#6C3483); }
    .image-box.bg-school   { background:linear-gradient(135deg,#1A5276,#154360); }
    .image-box.bg-mix      { background:linear-gradient(135deg,var(--pink),var(--pink-dark)); }

    .question-emoji {
      font-size:108px;display:block;line-height:1;
      position:relative;z-index:1;
      animation:emojiPop .4s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes emojiPop {
      from{transform:scale(.5) rotate(-10deg);opacity:0;}
      to  {transform:scale(1)  rotate(0deg);  opacity:1;}
    }
    .question-prompt {
      margin-top:10px;font-size:.95rem;font-weight:800;
      color:rgba(255,255,255,.85);letter-spacing:.5px;
      position:relative;z-index:1;
    }

    .answers-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px; }
    .answer-btn {
      background:var(--white);border:3px solid var(--pink-light);border-radius:18px;
      padding:16px 10px;font-family:'Nunito',sans-serif;font-size:1.25rem;font-weight:900;
      color:var(--text);cursor:pointer;transition:all .18s ease;text-transform:capitalize;
    }
    .answer-btn:hover:not(:disabled) {
      border-color:var(--pink);background:var(--pink-light);
      transform:translateY(-3px);box-shadow:0 6px 20px rgba(255,107,157,.25);
    }
    .answer-btn.correct        { background:var(--green); border-color:var(--green-dark);color:#fff;transform:scale(1.04); }
    .answer-btn.wrong          { background:var(--red);   border-color:#C0392B;color:#fff;animation:shake .4s ease; }
    .answer-btn.reveal-correct { background:var(--green); border-color:var(--green-dark);color:#fff; }
    .answer-btn:disabled { cursor:not-allowed; }

    @keyframes shake {
      0%,100%{transform:translateX(0);}  20%{transform:translateX(-8px);}
      40%{transform:translateX(8px);}    60%{transform:translateX(-5px);}
      80%{transform:translateX(5px);}
    }

    .feedback-overlay {
      position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
      pointer-events:none;z-index:100;
    }
    .feedback-emoji { font-size:100px;animation:feedbackPop .6s ease forwards; }
    @keyframes feedbackPop {
      0%  {transform:scale(0) rotate(-20deg);opacity:0;}
      60% {transform:scale(1.2) rotate(5deg); opacity:1;}
      100%{transform:scale(1)   rotate(0deg); opacity:1;}
    }

    /* ══ RESULT ══ */
    #result { text-align:center; }

    .result-mascot { font-size:80px;display:block;margin-bottom:6px;animation:resultBounce .8s ease-out; }
    @keyframes resultBounce {
      0%  {transform:scale(0) rotate(-15deg);}
      70% {transform:scale(1.15) rotate(5deg);}
      100%{transform:scale(1) rotate(0deg);}
    }

    .result-player-name { font-size:1rem;font-weight:800;color:var(--text-light);margin-bottom:2px; }
    .result-cat-badge {
      display:inline-flex;align-items:center;gap:5px;
      font-size:.8rem;font-weight:800;padding:4px 12px;border-radius:50px;
      margin-bottom:16px;
    }
    .result-title    { font-size:1.85rem;font-weight:900;color:var(--pink);margin-bottom:6px; }
    .result-subtitle { font-size:.98rem;color:var(--text-light);font-weight:600;margin-bottom:22px; }

    /* unicorn */
    .unicorn-banner {
      display:none;
      background:linear-gradient(135deg,#FF6BDF 0%,#A855F7 40%,#6366F1 70%,#38BDF8 100%);
      border-radius:22px;padding:22px 20px 18px;margin-bottom:22px;
      position:relative;overflow:hidden;
      animation:unicornAppear .7s cubic-bezier(.34,1.56,.64,1) both;
    }
    .unicorn-banner.visible { display:block; }
    @keyframes unicornAppear {
      from{transform:scale(.6) rotate(-8deg);opacity:0;}
      to  {transform:scale(1)  rotate(0deg); opacity:1;}
    }
    .unicorn-banner::before {
      content:'';position:absolute;inset:0;
      background:repeating-linear-gradient(
        45deg,rgba(255,255,255,.06) 0px,rgba(255,255,255,.06) 4px,transparent 4px,transparent 12px
      );
    }
    .unicorn-emoji { font-size:58px;display:block;margin-bottom:5px;animation:unicornFloat 2.5s ease-in-out infinite;position:relative;z-index:1; }
    @keyframes unicornFloat { 0%,100%{transform:translateY(0) rotate(-3deg);} 50%{transform:translateY(-10px) rotate(3deg);} }
    .unicorn-title { font-size:1.15rem;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.2);margin-bottom:3px;position:relative;z-index:1; }
    .unicorn-sub   { font-size:.83rem;font-weight:700;color:rgba(255,255,255,.85);position:relative;z-index:1; }
    .unicorn-stars { position:absolute;top:8px;right:14px;font-size:1.3rem;animation:sparkle 1.5s ease-in-out infinite alternate; }
    @keyframes sparkle { 0%{opacity:.4;transform:scale(.8);} 100%{opacity:1;transform:scale(1.2);} }

    /* stats */
    .stats-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px; }
    .stat-card { border-radius:20px;padding:16px 8px;display:flex;flex-direction:column;align-items:center;gap:5px; }
    .stat-card.correct-card { background:#D5F5E3; }
    .stat-card.wrong-card   { background:#FADBD8; }
    .stat-card.time-card    { background:var(--pink-light); }
    .stat-icon  { font-size:1.7rem; }
    .stat-value { font-size:1.9rem;font-weight:900;line-height:1; }
    .stat-card.correct-card .stat-value { color:var(--green-dark); }
    .stat-card.wrong-card   .stat-value { color:var(--red); }
    .stat-card.time-card    .stat-value { color:var(--pink); }
    .stat-label { font-size:.75rem;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px; }

    .score-bar-wrap { margin-bottom:24px; }
    .score-bar-label { display:flex;justify-content:space-between;font-size:.83rem;font-weight:700;color:var(--text-light);margin-bottom:7px; }
    .score-bar-bg   { background:var(--pink-light);border-radius:50px;height:15px;overflow:hidden; }
    .score-bar-fill {
      height:100%;border-radius:50px;
      background:linear-gradient(90deg,var(--pink),var(--purple));
      transition:width 1s cubic-bezier(.4,0,.2,1);
    }

    /* summary */
    .summary-section { margin-bottom:26px;text-align:left; }
    .summary-title {
      font-size:.86rem;font-weight:800;color:var(--text-light);
      text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px;
    }
    .summary-list { display:flex;flex-direction:column;gap:8px; }
    .summary-row {
      display:flex;align-items:center;gap:10px;
      padding:10px 14px;border-radius:14px;
    }
    .summary-row.ok  { background:#D5F5E3;border:2px solid #A9DFBF; }
    .summary-row.err { background:#FADBD8;border:2px solid #F1948A; }
    .summary-emoji { font-size:1.8rem;flex-shrink:0; }
    .summary-icon  { font-size:1.15rem;flex-shrink:0; }
    .summary-word  { flex:1;font-size:1rem;font-weight:800;color:var(--text);text-transform:capitalize; }
    .summary-row.err .summary-word { color:var(--red); }
    .summary-wrong-ans {
      font-size:.78rem;font-weight:700;color:#A93226;
      background:rgba(231,76,60,.1);padding:3px 8px;border-radius:50px;
      white-space:nowrap;flex-shrink:0;text-transform:capitalize;
    }
    .summary-num { font-size:.76rem;font-weight:800;color:var(--text-light);min-width:20px;text-align:right;flex-shrink:0; }

    .result-actions { display:flex;flex-direction:column;gap:10px;align-items:center; }

    /* ══ LEADERBOARD ══ */
    #leaderboard { text-align:center; }
    .lb-header { margin-bottom:20px; }
    .lb-title  { font-size:1.85rem;font-weight:900;color:var(--pink);margin-bottom:4px; }
    .lb-subtitle { font-size:.88rem;color:var(--text-light);font-weight:600; }

    .lb-list {
      display:flex;flex-direction:column;gap:9px;margin-bottom:22px;
      max-height:370px;overflow-y:auto;padding-right:4px;
    }
    .lb-list::-webkit-scrollbar { width:6px; }
    .lb-list::-webkit-scrollbar-thumb { background:var(--pink-light);border-radius:10px; }

    .lb-row {
      display:flex;align-items:center;gap:11px;padding:11px 15px;border-radius:15px;
      background:var(--bg);border:2px solid transparent;transition:transform .15s;
    }
    .lb-row:hover { transform:translateX(4px); }
    .lb-row.lb-me  { background:var(--pink-light);border-color:var(--pink); }
    .lb-row.rank-1 { background:#FFF9E3;border-color:#FFD93D; }
    .lb-row.rank-2 { background:#F0F4F8;border-color:#B0BEC5; }
    .lb-row.rank-3 { background:#FFF0E8;border-color:#FFAB76; }

    .lb-rank     { font-size:1.55rem;width:36px;text-align:center;flex-shrink:0; }
    .lb-rank-num { font-size:.95rem;font-weight:900;color:var(--text-light);width:36px;text-align:center;flex-shrink:0; }
    .lb-info     { flex:1;text-align:left; }
    .lb-name     { font-size:.95rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:5px;flex-wrap:wrap; }
    .lb-you-tag  { font-size:.66rem;font-weight:800;background:var(--pink);color:#fff;padding:2px 7px;border-radius:50px; }
    .lb-cat-tag  { font-size:.66rem;font-weight:800;padding:2px 7px;border-radius:50px;opacity:.85; }
    .lb-date     { font-size:.72rem;font-weight:600;color:var(--text-light);margin-top:1px; }
    .lb-score-col { text-align:right;flex-shrink:0; }
    .lb-score-val  { font-size:1.05rem;font-weight:900;color:var(--pink); }
    .lb-score-time { font-size:.76rem;font-weight:700;color:var(--text-light); }
    .lb-empty { padding:38px 20px;color:var(--text-light);font-size:1rem;font-weight:700; }

    /* buttons */
    .btn {
      display:inline-flex;align-items:center;gap:8px;padding:15px 34px;border-radius:50px;border:none;
      font-family:'Nunito',sans-serif;font-size:1.05rem;font-weight:800;cursor:pointer;
      transition:all .18s ease;text-decoration:none;
    }
    .btn-primary  { background:linear-gradient(135deg,var(--pink),var(--pink-dark));color:#fff;box-shadow:0 6px 24px rgba(255,107,157,.38); }
    .btn-primary:hover { transform:translateY(-3px);box-shadow:0 10px 32px rgba(255,107,157,.48); }
    .btn-primary:active { transform:translateY(0); }
    .btn-secondary { background:var(--pink-light);color:var(--pink);box-shadow:none; }
    .btn-secondary:hover { background:#FFD6EB;transform:translateY(-2px); }
    .btn-home { background:var(--purple-light);color:var(--purple);box-shadow:none; }
    .btn-home:hover { background:#DDD3FF;transform:translateY(-2px); }
    .btn-danger { background:#FADBD8;color:var(--red);box-shadow:none; }
    .btn-danger:hover { background:#F5B7B1;transform:translateY(-2px); }
    .btn-sm { padding:9px 18px;font-size:.86rem; }

    .slide-in { animation:slideIn .35s cubic-bezier(.4,0,.2,1) both; }
    @keyframes slideIn {
      from{opacity:0;transform:translateY(24px);}
      to  {opacity:1;transform:translateY(0);}
    }

    #confetti { position:fixed;inset:0;pointer-events:none;z-index:50; }

    @media(max-width:600px){
      .cat-grid { grid-template-columns:1fr 1fr; }
    }
    @media(max-width:480px){
      .card { padding:26px 20px 22px; }
      .question-emoji { font-size:86px; }
      .answer-btn { font-size:1.1rem;padding:14px 8px; }
      .stats-grid { grid-template-columns:1fr; }
      .title { font-size:1.7rem; }
      .player-badge { display:none; }
    }
  

/* ── reguły pochodzące z quizu matematycznego ── */
.question-text { font-size:2.8rem;font-weight:900;color:var(--white);letter-spacing:2px;position:relative;z-index:1; }
.summary-equation {
      flex: 1; color: var(--text);
    }
.question-box {
      background:linear-gradient(135deg,var(--purple) 0%,var(--purple-dark) 100%);
      border-radius:22px;padding:32px 24px;text-align:center;margin-bottom:28px;
      position:relative;overflow:hidden;
    }