/* ===== Deutsch Lernen — styles ===== */
:root { --amber: #fbbf24; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Cairo', system-ui, -apple-system, sans-serif; -webkit-tap-highlight-color: transparent; }
.de-text { font-family: 'Cairo', system-ui, sans-serif; letter-spacing: .2px; }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* German flag */
.flag { display:inline-flex; flex-direction:column; width:26px; height:18px; border-radius:4px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.1); }
.flag i { flex:1; display:block; }
.flag i:nth-child(1){background:#000}.flag i:nth-child(2){background:#dd0000}.flag i:nth-child(3){background:#ffce00}

/* nav */
.nav-link { padding:.4rem .75rem; border-radius:.6rem; color:#cbd5e1; transition:.15s; }
.nav-link:hover, .nav-link.active { background:rgba(251,191,36,.12); color:#fbbf24; }
.mnav { display:flex; flex-direction:column; align-items:center; gap:3px; padding:.55rem 0 .45rem; color:#94a3b8; }
.mnav i { font-size:1.15rem; }
.mnav.active { color:#fbbf24; }
.streak-badge,.xp-badge { font-size:.75rem; font-weight:800; padding:.25rem .55rem; border-radius:999px; background:#1e293b; border:1px solid #334155; color:#e2e8f0; white-space:nowrap; }
.streak-badge i{color:#f97316}.xp-badge i{color:#fbbf24}

/* hero */
.hero { position:relative; border-radius:1.5rem; overflow:hidden; background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#0f172a 100%); border:1px solid #1e293b; }
.hero-bg { position:absolute; inset:0; background:
  radial-gradient(600px 300px at 20% 10%, rgba(251,191,36,.18), transparent 60%),
  radial-gradient(500px 300px at 80% 90%, rgba(221,0,0,.18), transparent 60%); }
.stat { background:rgba(15,23,42,.6); border:1px solid #334155; border-radius:1rem; padding:.75rem .5rem; }
.stat b { display:block; font-size:1.5rem; color:#fbbf24; font-weight:900; }
.stat span { font-size:.75rem; color:#94a3b8; }

/* buttons */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:.25rem; background:#fbbf24; color:#0f172a; font-weight:900; padding:.8rem 1.5rem; border-radius:1rem; transition:.15s; box-shadow:0 8px 24px -8px rgba(251,191,36,.5); }
.btn-primary:hover { background:#fcd34d; transform:translateY(-1px); }
.btn-primary:active { transform:scale(.98); }
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; background:#1e293b; color:#e2e8f0; font-weight:700; padding:.8rem 1.25rem; border-radius:1rem; border:1px solid #334155; transition:.15s; }
.btn-ghost:hover { background:#334155; }
.btn-success { background:#22c55e; color:#052e16; font-weight:900; padding:1rem; border-radius:1rem; font-size:1.1rem; transition:.15s; }
.btn-success:active { transform:scale(.97); }
.btn-danger { background:#1e293b; border:1px solid #f87171; color:#fca5a5; font-weight:900; padding:1rem; border-radius:1rem; font-size:1.1rem; transition:.15s; }
.btn-danger:active { transform:scale(.97); }
.btn-icon { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:rgba(251,191,36,.15); color:#fbbf24; transition:.15s; }
.btn-icon:hover { background:rgba(251,191,36,.3); }
.btn-icon.ghost { background:transparent; color:#64748b; }
.btn-icon.ghost.on { color:#22c55e; }
.btn-icon.speaking { animation:pulse 1s infinite; }
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* cards */
.card { background:#0f172a; border:1px solid #1e293b; border-radius:1.25rem; padding:1.25rem; }
.gradient-card { background:linear-gradient(135deg,#1e293b,#0f172a); border-color:#334155; }
.tip-card { background:linear-gradient(135deg,rgba(251,191,36,.08),rgba(15,23,42,.6)); border-color:rgba(251,191,36,.3); }
.lesson-card { position:relative; display:block; background:#0f172a; border:1px solid #1e293b; border-radius:1.25rem; padding:1rem; transition:.2s; }
.lesson-card:hover { border-color:#fbbf24; transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(251,191,36,.3); }
.feature-card { display:block; text-align:right; background:#0f172a; border:1px solid #1e293b; border-radius:1.25rem; padding:1.25rem; transition:.2s; width:100%; }
.feature-card:hover { border-color:#fbbf24; transform:translateY(-2px); }
.feature-card i { font-size:1.75rem; color:#fbbf24; }
.feature-card h3 { font-weight:900; font-size:1.1rem; margin-top:.5rem; }
.feature-card p { color:#94a3b8; font-size:.85rem; }
.level { font-size:.65rem; font-weight:900; padding:.1rem .45rem; border-radius:999px; }
.level-A1 { background:rgba(34,197,94,.15); color:#4ade80; }
.level-A2 { background:rgba(59,130,246,.15); color:#60a5fa; }
.done-check { position:absolute; top:.75rem; left:.75rem; color:#22c55e; display:none; }
.done-check.show { display:block; }
.best-score { display:block; font-size:.7rem; color:#fbbf24; margin-top:.25rem; min-height:1em; }

.progress { height:6px; background:#1e293b; border-radius:999px; overflow:hidden; }
.progress-bar { height:100%; width:0; background:linear-gradient(90deg,#fbbf24,#f59e0b); border-radius:999px; transition:width .4s; }

/* word rows */
.word-row { display:flex; align-items:flex-start; gap:.75rem; background:#0f172a; border:1px solid #1e293b; border-radius:1rem; padding:.85rem 1rem; transition:.15s; }
.word-row:hover { border-color:#334155; }
.word-row.learned { border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.04); }

/* flashcards */
.flashcard { position:relative; height:300px; perspective:1200px; cursor:pointer; user-select:none; }
.fc-face { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1.5rem; border-radius:1.5rem; backface-visibility:hidden; -webkit-backface-visibility:hidden; transition:transform .55s cubic-bezier(.4,.2,.2,1); border:1px solid #334155; }
.fc-front { background:linear-gradient(145deg,#1e293b,#0f172a); }
.fc-back { background:linear-gradient(145deg,#422006,#1c1917); border-color:rgba(251,191,36,.4); transform:rotateY(180deg); }
.flashcard.flipped .fc-front { transform:rotateY(180deg); }
.flashcard.flipped .fc-back { transform:rotateY(360deg); }
.flashcard.swipe-left { animation:swl .35s forwards; }
.flashcard.swipe-right { animation:swr .35s forwards; }
@keyframes swl{to{transform:translateX(-120%) rotate(-10deg);opacity:0}}
@keyframes swr{to{transform:translateX(120%) rotate(10deg);opacity:0}}

/* quiz */
.q-opt { display:block; width:100%; text-align:center; background:#0f172a; border:2px solid #1e293b; border-radius:1rem; padding:1rem; font-weight:700; font-size:1.05rem; transition:.15s; }
.q-opt:hover { border-color:#475569; }
.q-opt.correct { border-color:#22c55e; background:rgba(34,197,94,.15); }
.q-opt.wrong { border-color:#ef4444; background:rgba(239,68,68,.15); }
.q-opt:disabled { cursor:default; }
.timer b { display:inline-block; min-width:1.5em; }
.timer.low b { color:#ef4444; animation:pulse .5s infinite; }
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.shake{animation:shake .3s}
@keyframes pop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
.animate-pop{animation:pop .4s ease-out}

/* games */
.match-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.match-tile { background:#0f172a; border:2px solid #1e293b; border-radius:.9rem; padding:.9rem .5rem; font-weight:800; text-align:center; transition:.15s; min-height:58px; }
.match-tile.sel { border-color:#fbbf24; background:rgba(251,191,36,.1); }
.match-tile.ok { border-color:#22c55e; background:rgba(34,197,94,.15); opacity:.5; pointer-events:none; }
.match-tile.bad { border-color:#ef4444; animation:shake .3s; }
.artikel-btn { font-size:1.5rem; font-weight:900; padding:1.1rem; border-radius:1rem; border:2px solid #1e293b; background:#0f172a; transition:.15s; }
.artikel-btn:hover{border-color:#475569}
.artikel-btn.correct{border-color:#22c55e;background:rgba(34,197,94,.15)}
.artikel-btn.wrong{border-color:#ef4444;background:rgba(239,68,68,.15)}
.type-input { width:100%; background:#0f172a; border:2px solid #334155; border-radius:1rem; padding:1rem; font-size:1.4rem; text-align:center; font-weight:800; color:#fff; outline:none; }
.type-input:focus{border-color:#fbbf24}

/* ads */
.ad-slot { position:relative; background:rgba(30,41,59,.4); border:1px dashed #334155; border-radius:.9rem; padding:1.25rem .5rem .5rem; text-align:center; overflow:hidden; }
.ad-label { position:absolute; top:.25rem; right:.5rem; font-size:.6rem; color:#64748b; letter-spacing:.5px; }
.ad-inner { display:flex; justify-content:center; }
.ad-inner iframe, .ad-inner img { max-width:100%; }
.ad-sticky { position:fixed; bottom:calc(58px + env(safe-area-inset-bottom)); inset-inline:0; z-index:35; margin:0; border-radius:0; background:#0f172a; border-top:1px solid #334155; padding:.9rem .25rem .25rem; }
@media (min-width:640px){ .ad-sticky{ bottom:0; } }
.ad-sticky .ad-close { position:absolute; top:.1rem; left:.4rem; color:#94a3b8; font-size:1rem; padding:.2rem .4rem; }

/* prose */
.prose-dark h2 { font-size:1.3rem; font-weight:900; margin:1.5rem 0 .5rem; color:#fbbf24; }
.prose-dark p, .prose-dark li { color:#cbd5e1; line-height:1.9; }
.prose-dark ul { padding-right:1.25rem; }
.prose-dark a { color:#fbbf24; text-decoration:underline; }

/* toast */
.toast { position:fixed; bottom:calc(80px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%) translateY(20px); background:#fbbf24; color:#0f172a; font-weight:900; padding:.7rem 1.25rem; border-radius:999px; opacity:0; pointer-events:none; transition:.3s; z-index:60; box-shadow:0 10px 30px -10px rgba(0,0,0,.6); white-space:nowrap; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
@media (min-width:640px){ .toast{ bottom:30px; } }

/* confetti */
.confetti { position:fixed; top:-10px; width:8px; height:14px; z-index:70; pointer-events:none; animation:fall linear forwards; }
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.8}}

/* grammar tables */
.gtable { width:100%; border-collapse:collapse; font-size:.9rem; }
.gtable th { background:#1e293b; padding:.5rem .75rem; text-align:right; color:#fbbf24; font-weight:900; white-space:nowrap; }
.gtable td { padding:.5rem .75rem; border-top:1px solid #1e293b; }
.gtable tr:nth-child(even) td { background:rgba(30,41,59,.3); }
.example-row { display:flex; align-items:flex-start; gap:.75rem; background:rgba(30,41,59,.4); border-radius:.75rem; padding:.6rem .75rem; }
.ex-item { padding:1rem 0; border-top:1px solid #1e293b; }
.done-check.static { position:static; }

/* dialogue bubbles */
.bubble { max-width:92%; border-radius:1.25rem; padding:.85rem 1rem; border:1px solid #1e293b; }
.bubble-A { background:#0f172a; margin-inline-start:0; margin-inline-end:auto; border-bottom-right-radius:.3rem; }
.bubble-B { background:linear-gradient(135deg,rgba(251,191,36,.12),#0f172a); margin-inline-start:auto; margin-inline-end:0; border-bottom-left-radius:.3rem; border-color:rgba(251,191,36,.25); }
.bubble.active { border-color:#fbbf24; box-shadow:0 0 0 3px rgba(251,191,36,.15); }
.hide-ar .bubble-ar { filter:blur(6px); cursor:pointer; transition:.2s; }
.hide-ar .bubble-ar.peek { filter:none; }
.role-B .bubble-B .de-text { filter:blur(7px); cursor:pointer; }
.role-B .bubble-B .de-text.peek { filter:none; }

/* badges */
.badge-item { background:#0f172a; border:1px solid #1e293b; border-radius:1rem; padding:.75rem .25rem; }
.badge-item.locked { opacity:.35; filter:grayscale(1); }
.badge-item span { display:block; font-size:2rem; } .badge-item small { font-size:.65rem; color:#94a3b8; }

/* ===== Light theme ===== */
html.light body { background:#f8fafc; color:#0f172a; }
html.light #site-header { background:rgba(255,255,255,.85); border-color:#e2e8f0; }
html.light #mobile-menu, html.light #mobile-nav { background:rgba(255,255,255,.97); border-color:#e2e8f0; }
html.light #site-footer { border-color:#e2e8f0; color:#64748b; }
html.light .card, html.light .lesson-card, html.light .feature-card, html.light .word-row, html.light .q-opt, html.light .match-tile, html.light .artikel-btn, html.light .bubble-A, html.light .badge-item, html.light .stat { background:#fff; border-color:#e2e8f0; color:#0f172a; }
html.light .gradient-card { background:linear-gradient(135deg,#fff7ed,#fff); border-color:#fde68a; }
html.light .tip-card { background:linear-gradient(135deg,#fffbeb,#fff); border-color:#fcd34d; }
html.light .hero { background:linear-gradient(135deg,#fff 0%,#fef3c7 100%); border-color:#fde68a; }
html.light .hero-bg { opacity:.4; }
html.light .text-slate-100, html.light .text-slate-200 { color:#1e293b; }
html.light .text-slate-300 { color:#334155; } html.light .text-slate-400, html.light .text-slate-500 { color:#64748b; }
html.light .btn-ghost { background:#f1f5f9; color:#0f172a; border-color:#e2e8f0; } html.light .btn-ghost:hover { background:#e2e8f0; }
html.light .btn-danger { background:#fff; color:#b91c1c; }
html.light .nav-link { color:#475569; } html.light .mnav { color:#64748b; } html.light .nav-link.active, html.light .mnav.active { color:#b45309; }
html.light .streak-badge, html.light .xp-badge { background:#f1f5f9; border-color:#e2e8f0; color:#0f172a; }
html.light .progress { background:#e2e8f0; }
html.light .fc-front { background:linear-gradient(145deg,#fff,#f1f5f9); border-color:#e2e8f0; color:#0f172a; }
html.light .fc-back { background:linear-gradient(145deg,#fef3c7,#fff); color:#0f172a; }
html.light .gtable th { background:#f1f5f9; color:#b45309; } html.light .gtable td { border-color:#e2e8f0; } html.light .gtable tr:nth-child(even) td { background:#f8fafc; }
html.light .example-row { background:#f8fafc; } html.light .ex-item { border-color:#e2e8f0; }
html.light .bubble-B { background:linear-gradient(135deg,#fef3c7,#fff); }
html.light .type-input { background:#fff; color:#0f172a; border-color:#cbd5e1; }
html.light .ad-slot { background:#f1f5f9; border-color:#cbd5e1; } html.light .ad-sticky { background:#fff; }
html.light .prose-dark p, html.light .prose-dark li { color:#334155; }
html.light .toast { background:#0f172a; color:#fff; }
html.light .bg-slate-950 { background:#f8fafc; }
html.light .text-amber-400 { color:#b45309; } html.light .text-amber-300 { color:#b45309; }

/* ===== Ad units: full width on mobile, centered & capped on desktop ===== */
.ad-slot { padding:1.1rem .25rem .35rem; }
.ad-inner > div { width:100% !important; }
.ad-inner iframe { width:100% !important; min-height:60px; }
@media (min-width:640px){ .ad-inner iframe { width:100% !important; max-width:728px; } }
.ad-header { margin-top:.5rem !important; }