:root{
    /* German flag colors */
    --de-black:#000000; --de-red:#DD0000; --de-gold:#FFCE00;

    --ink:#111; --muted:#666; --radius:18px;
    --shadow:0 14px 35px rgba(0,0,0,.12);
    --shadow-soft:0 8px 20px rgba(0,0,0,.08);
    --ok:#16a34a; --bad:#b91c1c;

    --soft:#f7faff;
    --soft-border:#cfd8ff;
    --card-border:#89f2a0;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; font-family:Arial,Helvetica,sans-serif; color:var(--ink);
    background:#fff; border:10px solid var(--de-red); text-align:center;
  }

  .container {
    max-width: 760px;
    margin: 28px auto;
    padding: 26px 20px;
    background: #fff;
    border-radius: var(--radius);
    text-align: left;
    border: 2px solid var(--de-black);
    box-shadow: 0 0 15px var(--de-red), 0 0 25px var(--de-gold);
  }

  .toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
  .meta{display:flex;gap:16px;align-items:center;color:#334;font-size:14px;flex-wrap:wrap}
  .select, .btn{
    border:2px solid var(--card-border);border-radius:12px;padding:10px 12px;background:#fff;cursor:pointer;font-weight:700
  }
  .btn.primary{background:var(--de-black);color:#fff;border-color:var(--de-black)}
  .btn.ghost{background:#fff}
  .btn:active{transform:scale(.98)}
  .grid{display:grid;grid-template-columns:1fr;gap:14px}
  @media(min-width:600px){ .grid{grid-template-columns:1fr 1fr} }

  .card {
    border: 1px solid transparent;
    border-radius: 25px;
    padding: 12px;
    text-align: center;
    background: #fff;
    border-image: linear-gradient(to right, var(--de-black), var(--de-red), var(--de-gold)) 1;
    border-width: 2px;
    border-style: solid;
  }

  .prompt{
    font-weight:800;font-size:20px;line-height:1.35;margin:0 0 8px;text-wrap:balance;
    text-align:center;
    display:inline-flex;align-items:center;gap:8px;justify-content:center;
  }
  .subtle{color:#667; font-size:12px}
  .input-row{
    display:flex;gap:10px;align-items:flex-start;margin-top:6px;justify-content:center;
  }

  /* flags */
  .flag {
    width: 18px; height: 12px; object-fit: cover;
    border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.15);
    margin-top: 6px;
  }

  .badge{display:inline-block;font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid #ddd;background:#fff;color:#333}

  .feedback{margin-top:8px;font-size:14px;display:none}
  .feedback.ok{display:block;color:#065f46;background:#ecfdf5;border:2px solid #a7f3d0;padding:8px;border-radius:10px}
  .feedback.bad{display:block;color:#7f1d1d;background:#fef2f2;border:2px solid #fecaca;padding:8px;border-radius:10px}
  .feedback.hidden{display:none !important}

  /* === Autosizing textarea answer === */
  .input-with-flag{ width:100%; display:inline-flex; align-items:flex-start; gap:8px; }
  .answer-input{
    width:100%;
    min-height:46px;
    max-height:40vh;        /* cap growth; becomes scrollable after */
    padding:12px 14px;
    font-size:17px;
    line-height:1.4;
    font-weight:500;
    border:2px solid var(--card-border);
    border-radius:12px;
    background:#fff;
    color:#111;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
    outline:none;
    resize:none;            /* user can’t drag resize */
    overflow:hidden;        /* we auto-grow instead */
    white-space:pre-wrap;   /* keep line breaks */
    word-break:break-word;
    overflow-wrap:anywhere;
    transition:border-color .2s, box-shadow .2s;
    text-align:center;      /* keep your centered look */
  }
  .answer-input:focus {
    border-color: var(--de-red);
    box-shadow: 0 0 0 4px rgba(221,0,0,0.2);
  }
  .answer-input.ok,
  .answer-input.revealed{
    color:#065f46;background:#ecfdf5;border-color:#a7f3d0;font-weight:700;
  }

  .pagebar{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
  .score{font-weight:800;color:#111}
  .muted{color:#6b6b6b;font-size:13px;text-align:center;margin-top:16px}
  .tiny{font-size:12px;color:#6b6b6b}

  .quiz-footer { max-width: 760px; margin: 0 auto; padding: 0; text-align: center; font-size: 14px; color: #333; line-height: 0; }
  .quiz-footer .socials-img { display: inline-block; }
  .quiz-footer .socials-img img { display: block; max-width: 350px; height: auto; margin: 0 auto; }

  /* German articles coloring */
  .article-der { color: var(--de-black); font-weight: 800; }
  .article-die { color: var(--de-red);   font-weight: 800; }
  .article-das { color: var(--de-gold);  font-weight: 800; }

  /* Pager */
  .pager{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; }
  .pager .pp{
    width:36px; height:36px; border-radius:10px; border:2px solid var(--card-border);
    background:#fff; font-weight:800; line-height:1; display:flex; align-items:center; justify-content:center;
  }
  .pager .pp:active{ transform:scale(.98); }
  .pager .num{
    width:64px; height:36px; border-radius:999px; border:1px solid #ddd; text-align:center; font-weight:800;
  }
  .pager .sep{ font-weight:700; padding:0 4px; }
  .pager .total{ min-width:24px; text-align:center; font-weight:800; }
  .pager .go{ padding:8px 10px; border-radius:10px; border:2px solid var(--card-border); background:#fff; font-weight:800; }

  @media(max-width:599px){
    #pageInfo{ display:none; }
  }

  /* Record-mode animations (optional) */
  .record-mode .answer-input,
  .record-mode .btn.primary,
  .record-mode #revealBtn,
  .record-mode #hideBtn,
  .record-mode #resetBtn {
    animation: breathe 2.2s ease-in-out infinite;
  }
  @keyframes breathe {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
    50%      { transform: scale(1.015); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
  }