:root{
  --de-black:#000000; --de-red:#DD0000; --de-gold:#FFCE00;
  --ink:#111; --muted:#666; --radius:18px;
  --shadow-soft:0 8px 20px rgba(0,0,0,.08);
  --ok:#16a34a; --ok-b:#a7f3d0; --ok-soft:#ecfdf5; /* ✅ keep German green reveal */
}

/* Reset */
*{ box-sizing:border-box }
html,body{ height:100% }

/* Page frame */
body{
  margin:0; font-family:Arial,Helvetica,sans-serif; color:var(--ink);
  background:#fff; border:10px solid var(--de-red); text-align:center;
  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
}

.flag-bar{ position:sticky; top:0; z-index:10; height:10px; background:var(--de-black); box-shadow:var(--shadow-soft) }

.header-pill{
  display:block; width:max-content; margin:12px auto 36px;
  background:#fff; border:2px solid #222; border-radius:999px; padding:8px 14px;
  font-weight:800; font-size:18px; letter-spacing:.2px;
}
.brand-de{ color:var(--de-black) } .brand-en{ color:var(--de-red) }

/* Container */
.container{
  position:relative; max-width:760px; margin: clamp(28px, 6vh, 60px) auto;
  padding:20px 18px; background:#fff; border-radius:22px; border:3px solid var(--de-black);
  text-align:center; box-shadow: 0 0 0 6px #fff, 0 12px 30px rgba(0,0,0,.08);
}
.container::before{
  content:""; position:absolute; inset:-22px; border-radius: calc(22px + 22px); z-index:-1;
  background: linear-gradient(90deg, var(--de-black) 0%, var(--de-red) 50%, var(--de-gold) 100%);
  filter: blur(20px); opacity:.85;
}
.container::after{
  content:""; position:absolute; inset:-8px; border-radius: calc(22px + 8px); z-index:-2;
  background:#fff; filter: blur(8px); opacity:.9;
}

/* Timer */
.timer-wrap{ height:6px; background:#f8f9fb; border-radius:999px; overflow:hidden; margin:-4px 0 14px }
.timer-fill{ height:100%; width:100%; background:var(--de-black) }
@keyframes shrink-7s{ from{width:100%} to{width:0} }

/* Question pill */
.question{ display:flex; justify-content:center; align-items:center; margin:6px 0 10px }
.qtext{
  font-family:"Montserrat", Arial, Helvetica, sans-serif;
  font-size:22px; line-height:1.35; font-weight:800;
  padding:10px 14px; border-radius:14px;
  background:var(--de-red); color:#fff; border:2px solid #b00000;
  box-shadow:0 2px 10px rgba(221,0,0,.25);

  /* ✅ mobile-friendly wrapping (improvement) */
  display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px;
  max-width:min(94vw, 760px); box-sizing:border-box;
  white-space:normal; overflow-wrap:anywhere; word-break:normal; hyphens:auto;
}

/* Input row */
.input-wrap{
  margin:16px auto 10px; max-width:620px; display:flex; flex-direction:column; gap:12px;
  align-items:stretch; justify-content:center;
}

/* ✅ Multiline, auto-growing textarea */
.answer-input{
  display:block; width:90%; margin:0 auto;
  padding:12px 14px; font-size:18px; line-height:1.4;
  min-height:54px; max-height:240px;
  border:2px solid #e2e8f0; border-radius:12px; text-align:center;
  resize:none; overflow:hidden; white-space:pre-wrap; word-break:normal; overflow-wrap:break-word;
  transition: border-color .2s, box-shadow .2s, background .2s, color .2s;
}
.answer-input:focus{ border-color:#94a3b8; box-shadow:0 0 0 3px rgba(148,163,184,.22) }
.answer-input::placeholder{ text-align:center }

/* ✅ Keep German green “OK” reveal styling */
.answer-input.autofill{
  color:#065f46; background:var(--ok-soft); border-color:var(--ok-b); font-weight:800;
  animation:pulseGlow 1.2s ease-in-out 2;
}
/* Prevent mobile dimming when disabled */
.answer-input.autofill:disabled{
  opacity:1; -webkit-opacity:1; -webkit-text-fill-color:inherit; caret-color:transparent; appearance:none;
}

@keyframes pulseGlow{
  0%{ box-shadow:0 0 0 0 rgba(22,163,74,.40) }
  70%{ box-shadow:0 0 0 12px rgba(22,163,74,0) }
  100%{ box-shadow:0 0 0 0 rgba(22,163,74,0) }
}

/* Button */
.action-btn{
  border:0; cursor:pointer; border-radius:12px; padding:12px 18px; font-weight:800; min-width:120px;
  background:var(--de-black); color:#fff; box-shadow:var(--shadow-soft); transition:transform .08s ease;
}
.action-btn:active{ transform:scale(.98) }

/* Feedback & note */
.feedback{ margin:10px auto 0; max-width:620px; padding:12px 14px; border-radius:12px; text-align:center; display:none }
.feedback.ok{ background:#ecfdf5; border:2px solid #a7f3d0; color:#065f46; display:block }
.feedback.bad{ background:#fef2f2; border:2px solid #fecaca; color:#7f1d1d; display:block }

.flag-inline{ width:18px; height:auto; vertical-align:-3px; margin-right:6px; border-radius:2px }
.flag-list b{ font-weight:700 }

.note{ margin:14px auto 0; max-width:620px; text-align:center }
.note-label{ color:#f97316; font-weight:800; display:block; margin-top:8px; margin-bottom:6px }
.note-langs{ display:flex; flex-direction:column; align-items:center; gap:4px }
.note-lang{ font-weight:600 }
.muted{ color:#6b6b6b; font-size:13px; text-align:center; margin-top:10px }

/* Hidden flags bar */
.bar.hidden-bar{ display:none }
.chip{ display:inline-flex; align-items:center; gap:6px }
.flag-img{ width:24px; height:auto; border-radius:3px; display:block }

/* Controls */
.controls{ max-width:760px; margin:12px auto 26px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center }
.goto-box{ display:flex; align-items:center; gap:6px }
.goto-input{ width:64px; padding:6px 8px; border:1px solid #e2e8f0; border-radius:8px; text-align:center; font-weight:700 }
.goto-btn{ padding:6px 10px; border-radius:8px; border:1px solid #333; cursor:pointer; background:#eee; font-weight:700 }
.goto-btn:hover{ background:#ddd }
.reset-btn{
  background:#fef2f2; color:#7f1d1d; border:2px solid #fecaca; padding:6px 12px; border-radius:10px; cursor:pointer; font-weight:700;
  transition:all .2s;
}
.reset-btn:hover{ background:#fee2e2 }
.progress{ font-weight:800; color:#1f2937; font-size:14px }

/* Footer */
.quiz-footer{ max-width:760px; margin:18px auto 26px; padding:16px; text-align:center; font-size:14px; color:#333 }
.quiz-footer .socials-img img{ max-width:320px; height:auto }

/* Mobile tuning */
@media(max-width:480px){
  .qtext{ font-size:clamp(16px, 4.5vw, 22px) }
  .answer-input{ font-size:17px }
  .action-btn{ min-width:110px }
  .container{ border-radius:20px }
  .container::before{ inset:-18px; filter:blur(18px) }
}