/* Deutschmaak — shared level sections for A1/A2/B1/B2/C1/C2 */
.dm-level-tools{margin-top:46px}
.dm-level-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:6px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025);width:max-content;max-width:100%}
.dm-level-tab{appearance:none;border:0;background:transparent;color:#aeb8c2;padding:12px 18px;border-radius:12px;font:800 12px/1 system-ui;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.18s ease}
.dm-level-tab:hover{background:rgba(255,255,255,.06);color:#fff}
.dm-level-tab.is-active{background:#fff;color:#0c1117}
.dm-level-panel{display:none}
.dm-level-panel.is-active{display:block}
.dm-level-section{margin-top:34px}
.dm-level-intro{max-width:720px;margin-top:10px}
.dm-listening-card{position:relative;overflow:hidden}
.dm-listening-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(239,35,60,.12);border:1px solid rgba(239,35,60,.25);font-size:22px;margin-bottom:13px}
.dm-level-empty{border:1px dashed rgba(255,255,255,.15);background:rgba(255,255,255,.025);border-radius:22px;padding:34px;text-align:center;max-width:760px}
.dm-level-empty-icon{font-size:48px;margin-bottom:10px}
.dm-level-empty h3{font:800 24px/1.1 Space Grotesk;margin:8px 0}
.dm-level-empty p{color:#97a2ad;line-height:1.7;font-size:12px;max-width:620px;margin:0 auto 18px}

/* ==========================================================================
   Deutschmaak interactive games — one engine, two games, any CEFR level.
   Follows the page design tokens (--red/--panel/--line/--muted/--ink) with
   explicit `html.dark` surfaces so Light and Dark never clash.
   ========================================================================== */
.dm-games{max-width:960px}
.dm-games h2{font:800 30px/1.05 Space Grotesk;margin:8px 0 6px}

/* --- Game launcher (three cards on one row) --- */
.dm-game-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.dm-game-select{position:relative;overflow:hidden;appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:20px;padding:18px;text-align:left;cursor:pointer;display:flex;gap:14px;align-items:flex-start;font:inherit;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.dm-game-select>span:last-child{min-width:0}
html.dark .dm-game-select{background:rgba(255,255,255,.03)}
.dm-game-select::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(320px 140px at 50% -10%,rgba(193,39,45,.22),transparent 62%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.dm-game-select:hover{transform:translateY(-3px) scale(1.015);border-color:rgba(193,39,45,.45);box-shadow:0 14px 34px rgba(16,18,22,.10)}
html.dark .dm-game-select:hover{box-shadow:0 16px 38px rgba(0,0,0,.5)}
.dm-game-select:hover::after,.dm-game-select:focus-visible::after{opacity:1}
.dm-game-select:focus-visible{outline:3px solid rgba(193,39,45,.5);outline-offset:2px}
.dm-game-select:active{transform:translateY(-1px) scale(.985);transition-duration:.09s}
.dm-game-select.is-active{border-color:var(--red);box-shadow:0 10px 30px rgba(193,39,45,.14);background:linear-gradient(160deg,rgba(193,39,45,.07),transparent 55%),var(--panel)}
html.dark .dm-game-select.is-active{background:linear-gradient(160deg,rgba(193,39,45,.16),transparent 55%),rgba(255,255,255,.03)}
.dm-game-select-icon{font-size:22px;line-height:1;flex:0 0 auto;margin-top:2px}
/* WortMatch card uses an inline « translate » SVG (not a flag): keep it box-aligned. */
svg.dm-game-select-icon{width:1em;height:1em;display:block}
.dm-game-title-icon{width:1em;height:1em;vertical-align:-.12em}
.dm-game-select strong{display:block;font:800 15px/1.2 Space Grotesk;margin-bottom:5px;overflow-wrap:anywhere}
.dm-game-select small{display:block;color:var(--muted);font-size:11px;line-height:1.55;font-weight:500;overflow-wrap:anywhere}

/* --- Game cards --- */
.dm-game-card{margin-top:20px;border:1px solid var(--line);background:var(--panel);border-radius:22px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.08)}
html.dark .dm-game-card{background:rgba(255,255,255,.03);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.dm-game-card[hidden]{display:none}
.dm-game-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.dm-game-top h3{font:800 24px/1.05 Space Grotesk;margin:9px 0 0}
.dm-game-score{font:900 15px/1 Space Grotesk;padding:10px 13px;border:1px solid var(--line);border-radius:12px;white-space:nowrap;color:var(--ink)}
html.dark .dm-game-score{color:#fff}
.dm-game-status{min-height:18px;margin-top:12px}
.dm-game-zone{margin-top:8px}

/* --- Game 1 : word chips + answer tray --- */
.dm-game-words{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0 14px}
.dm-game-word{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);padding:11px 14px;border-radius:12px;font:800 13px/1 system-ui;cursor:pointer;transition:.16s ease;touch-action:manipulation}
html.dark .dm-game-word{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.dm-game-word:hover{transform:translateY(-2px);border-color:rgba(193,39,45,.5)}
.dm-game-word:focus-visible{outline:3px solid rgba(193,39,45,.5);outline-offset:2px}
.dm-game-word.is-used{opacity:.35;pointer-events:none;text-decoration:line-through}
.dm-game-answer{min-height:64px;border:1px dashed var(--line);border-radius:16px;padding:10px;display:flex;gap:7px;flex-wrap:wrap;align-items:center;background:rgba(0,0,0,.03)}
html.dark .dm-game-answer{background:rgba(0,0,0,.25)}
.dm-game-answer .dm-game-word{cursor:pointer}
.dm-game-placeholder{color:var(--muted);font:500 12px/1 system-ui;opacity:.85}
.dm-game-placeholder[hidden]{display:none}

/* --- Feedback results --- */
.dm-game-result{min-height:24px;margin-top:14px;font:800 13px/1.6 system-ui;color:var(--muted)}
.dm-game-result[hidden]{display:none}
.dm-game-result .dm-game-expected{display:block;font-weight:600;line-height:1.7;margin-top:6px;color:var(--ink)}
html.dark .dm-game-result .dm-game-expected{color:#f5f6f8}
.dm-game-result.is-ok{color:#1f8a4c}
html.dark .dm-game-result.is-ok{color:#71d19a}
.dm-game-result.is-ko{color:#d64550}
html.dark .dm-game-result.is-ko{color:#ff8b98}
.dm-game-result.dm-pop{animation:dmPop .45s cubic-bezier(.2,1.4,.4,1)}

/* --- Buttons --- */
.dm-game-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.dm-game-actions .btn{margin-top:0}
.dm-game-actions[hidden]{display:none}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* --- Game 2 : language choice --- */
.dm-game-langs{margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.02)}
html.dark .dm-game-langs{background:rgba(255,255,255,.02)}
.dm-game-langs-label{display:block;font:900 10px/1.2 system-ui;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:10px}
.dm-game-langs-opts{display:flex;gap:8px;flex-wrap:wrap}
.dm-lang-opt{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 13px;border-radius:12px;font:800 12px/1 system-ui;cursor:pointer;transition:.16s ease}
html.dark .dm-lang-opt{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.dm-lang-opt:hover{border-color:rgba(193,39,45,.5)}
.dm-lang-opt.is-active{border-color:var(--red);background:var(--red);color:#fff}
.dm-game-langs[hidden]{display:none}

/* --- Game 2 : word panel --- */
.dm-game-word-row{animation:dmFadeIn .25s ease}
.dm-game-round{font:900 11px/1.4 system-ui;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:16px 0 4px}
.dm-game-de{font:900 34px/1.15 Space Grotesk;color:var(--ink);margin:10px 0 18px;direction:ltr;text-align:left;unicode-bidi:isolate}
html.dark .dm-game-de{color:#fff}
.dm-game-input-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dm-game-input{flex:1 1 240px;min-width:0;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:12px 14px;font:600 15px/1.2 system-ui;transition:border-color .16s ease}
html.dark .dm-game-input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.dm-game-input:focus{outline:none;border-color:var(--red)}
.dm-game-input[dir="rtl"]{text-align:right;direction:rtl}
.dm-game-summary{text-align:center;padding:26px 10px 8px}
.dm-game-summary-icon{font-size:52px;line-height:1;margin-bottom:8px}
.dm-game-summary h4{font:800 24px/1.1 Space Grotesk;color:var(--ink);margin:8px 0}
.dm-game-summary p{color:var(--muted);font-size:13px;line-height:1.7;margin:4px 0 18px}

/* --- Success confetti (lightweight, DeutchMaak-made) --- */
.dm-confetti{position:absolute;top:-8px;width:8px;height:8px;border-radius:2px;pointer-events:none;animation:dmConfettiFall 1s cubic-bezier(.3,.4,.6,1) forwards;opacity:.9}
.dm-game-card{position:relative;overflow:hidden}
@keyframes dmConfettiFall{to{transform:translateY(120px) rotate(320deg);opacity:0}}
@keyframes dmPop{0%{transform:scale(.95)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes dmFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.dm-game-word-row.dm-correct{border:1px solid rgba(31,138,76,.45);border-radius:16px;padding:16px;background:rgba(31,138,76,.06)}
html.dark .dm-game-word-row.dm-correct{border-color:rgba(113,209,154,.4);background:rgba(113,209,154,.08)}

/* ==========================================================================
   Game modal — accessible in-page dialog (no redirection, no reload).
   Reuses the shared card shell; adds the overlay, sticky header, ✕ button
   and light/dark surfaces. Scroll of the page is locked by the JS class
   `html.dm-game-modal-open` and restored on close.
   ========================================================================== */
html.dm-game-modal-open{overflow:hidden}
.dm-game-modal{position:fixed;inset:0;z-index:10100;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vw,32px)}
.dm-game-modal[hidden]{display:none}
.dm-game-modal-backdrop{position:absolute;inset:0;background:rgba(6,9,13,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:dmGameFade .22s ease}
html.dark .dm-game-modal-backdrop{background:rgba(0,0,0,.72)}
.dm-game-modal-dialog{position:relative;z-index:1;width:min(920px,100%);max-height:min(92dvh,900px);display:flex;flex-direction:column;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 80px rgba(10,14,20,.35);overflow:hidden;animation:dmGamePop .26s cubic-bezier(.2,1.2,.35,1)}
html.dark .dm-game-modal-dialog{background:#0f141c;border-color:rgba(255,255,255,.12);box-shadow:0 30px 90px rgba(0,0,0,.6)}
.dm-game-modal-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(193,39,45,.06),transparent)}
html.dark .dm-game-modal-head{background:linear-gradient(180deg,rgba(193,39,45,.13),transparent)}
.dm-game-modal-kicker{font:900 10px/1.2 system-ui;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.dm-game-modal-close{appearance:none;flex:0 0 auto;width:44px;height:44px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);font:800 18px/1 system-ui;cursor:pointer;display:grid;place-items:center;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
html.dark .dm-game-modal-close{background:rgba(255,255,255,.06)}
.dm-game-modal-close:hover{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(90deg)}
.dm-game-modal-close:focus-visible{outline:3px solid rgba(193,39,45,.5);outline-offset:2px}
.dm-game-modal-body{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:clamp(14px,2.4vw,24px)}
.dm-game-modal-body .dm-game-card{margin:0}
.dm-game-modal-body .dm-game-card[hidden]{display:none}
@keyframes dmGameFade{from{opacity:0}to{opacity:1}}
@keyframes dmGamePop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  .dm-game-select,.dm-game-word,.dm-lang-opt{transition:none}
  .dm-game-select:hover,.dm-game-word:hover{transform:none}
  .dm-game-select:active{transform:none}
  .dm-game-result.dm-pop,.dm-game-word-row{animation:none}
  .dm-confetti{animation-duration:.001s}
  .dm-game-modal-backdrop,.dm-game-modal-dialog{animation:none}
  .dm-game-modal-close:hover{transform:none}
}

/* --- Responsive --- */
@media(max-width:800px){
  .dm-level-tabs{width:100%}
  .dm-level-tab{flex:1 1 0;justify-content:center;min-width:0}
  .dm-game-selector{grid-template-columns:1fr}
  .dm-game-card{padding:18px}
  .dm-game-top{flex-direction:column}
  .dm-game-actions .btn{width:100%;text-align:center}
  .dm-game-de{font-size:28px}
  .dm-game-modal{padding:8px}
  .dm-game-modal-dialog{max-height:96dvh;border-radius:18px}
  .dm-game-modal-body{padding:14px}
}
@media(max-width:520px){
  .dm-level-tab{font-size:11px;padding:11px 9px}
  .dm-game-top h3{font-size:22px}
  .dm-game-word{padding:10px 12px;font-size:12px}
  .dm-game-answer{min-height:58px}
  .dm-game-input-row .btn{width:100%;justify-content:center}
}

/* ==========================================================================
 * WortMatch (Deutsch ↔ العربية) — click-to-match vocabulary game.
 * Reuses the shared .dm-game-card shell; only the board/controls are new.
 * ======================================================================== */
.dm-wm-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:14px}
.dm-wm-field{display:flex;flex-direction:column;gap:5px;min-width:140px}
.dm-wm-field>span{font:800 10px/1.2 system-ui;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.dm-wm-field select{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:11px 12px;font:700 13px/1.2 system-ui;cursor:pointer;min-height:44px}
html.dark .dm-wm-field select{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.dm-wm-field select:focus-visible{outline:3px solid rgba(193,39,45,.5);outline-offset:2px}
.dm-wm-controls .btn{margin-top:0;min-height:44px}

.dm-wm-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.dm-wm-stat{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:12px;padding:8px 11px;min-width:72px;background:rgba(0,0,0,.02)}
html.dark .dm-wm-stat{background:rgba(255,255,255,.03)}
.dm-wm-stat-label{font:800 9px/1.2 system-ui;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.dm-wm-stat strong{font:900 15px/1.1 Space Grotesk,system-ui;color:var(--ink)}
html.dark .dm-wm-stat strong{color:#fff}

.dm-wm-bar{height:10px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden;margin:14px 0 4px}
html.dark .dm-wm-bar{background:rgba(255,255,255,.1)}
.dm-wm-bar>span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#c1272d,#e8a33d);transition:width .35s ease}

.dm-wm-board{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;align-items:start}
.dm-wm-col{display:flex;flex-direction:column;gap:9px;min-width:0}
.dm-wm-card{appearance:none;font:inherit;width:100%;box-sizing:border-box;text-align:left;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:14px;padding:12px 14px;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:48px;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;touch-action:manipulation}
html.dark .dm-wm-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff}
.dm-wm-card:hover{transform:translateY(-2px);border-color:rgba(193,39,45,.5)}
.dm-wm-card:focus-visible{outline:3px solid rgba(193,39,45,.5);outline-offset:2px}
.dm-wm-card.is-selected{border-color:var(--red);box-shadow:0 0 0 3px rgba(193,39,45,.18);background:linear-gradient(160deg,rgba(193,39,45,.10),transparent 60%),#fff}
html.dark .dm-wm-card.is-selected{background:linear-gradient(160deg,rgba(193,39,45,.22),transparent 60%),rgba(255,255,255,.05)}
.dm-wm-card.is-correct{border-color:rgba(31,138,76,.65);background:rgba(31,138,76,.12);color:#1f8a4c;cursor:default;pointer-events:none;animation:dmWmPop .35s cubic-bezier(.2,1.4,.4,1)}
html.dark .dm-wm-card.is-correct{background:rgba(113,209,154,.14);border-color:rgba(113,209,154,.5);color:#8ee0b0}
.dm-wm-card.is-wrong{border-color:rgba(214,69,80,.8);background:rgba(214,69,80,.12);animation:dmWmShake .4s cubic-bezier(.36,.07,.19,.97)}
html.dark .dm-wm-card.is-wrong{background:rgba(255,90,100,.16);border-color:rgba(255,120,130,.7)}
.dm-wm-card.dm-wm-glow{box-shadow:0 0 0 4px rgba(31,138,76,.3)}
html.dark .dm-wm-card.dm-wm-glow{box-shadow:0 0 0 4px rgba(113,209,154,.34)}
.dm-wm-card.is-done{opacity:.5}
.dm-wm-art{flex:0 0 auto;font:800 10px/1 system-ui;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 6px}
html.dark .dm-wm-art{color:#c9d0d7}
.dm-wm-de{font:800 15px/1.25 Space Grotesk,system-ui;direction:ltr;unicode-bidi:isolate}
.dm-wm-card--ar{justify-content:flex-start}
.dm-wm-ar{font:700 17px/1.7 "Noto Naskh Arabic","Segoe UI","Arial",system-ui;direction:rtl;unicode-bidi:isolate;width:100%;text-align:right}

.dm-wm-feedback{margin-top:14px;min-height:18px;font:800 13px/1.5 system-ui}
.dm-wm-feedback[hidden]{display:none}
.dm-wm-feedback.is-ok{color:#1f8a4c}
html.dark .dm-wm-feedback.is-ok{color:#8ee0b0}
.dm-wm-feedback.is-ko{color:#d64550}
html.dark .dm-wm-feedback.is-ko{color:#ff8b98}

.dm-wm-summary{margin-top:18px;border:1px solid var(--line);border-radius:18px;padding:20px;text-align:center;background:rgba(0,0,0,.02)}
html.dark .dm-wm-summary{background:rgba(255,255,255,.03)}
.dm-wm-summary[hidden]{display:none}
.dm-wm-summary-icon{font-size:48px;line-height:1}
.dm-wm-summary h4{font:800 24px/1.1 Space Grotesk,system-ui;margin:8px 0 2px;color:var(--ink)}
html.dark .dm-wm-summary h4{color:#fff}
.dm-wm-summary>p{color:var(--muted);font-size:13px;line-height:1.7;margin:4px 0}
.dm-wm-summary-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:14px 0}
.dm-wm-summary-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.dm-wm-summary-actions .btn{margin-top:0}
.dm-wm-review{text-align:left;max-width:540px;margin:16px auto 0}
.dm-wm-review h5{font:800 11px/1.3 system-ui;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 8px}
.dm-wm-review ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.dm-wm-review li{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13px;color:var(--ink)}
html.dark .dm-wm-review li{color:#f5f6f8}
.dm-wm-review .r-ar{direction:rtl;unicode-bidi:isolate;font-family:"Noto Naskh Arabic","Segoe UI",system-ui}
.dm-wm-review .r-count{flex:0 0 auto;font:800 11px/1 system-ui;color:var(--muted)}

@keyframes dmWmShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes dmWmPop{0%{transform:scale(1)}50%{transform:scale(1.045)}100%{transform:scale(1)}}

@media (prefers-reduced-motion: reduce){
  .dm-wm-card,.dm-wm-bar>span{transition:none}
  .dm-wm-card:hover{transform:none}
  .dm-wm-card.is-correct,.dm-wm-card.is-wrong{animation:none}
}
@media(max-width:640px){
  .dm-wm-board{gap:9px}
  .dm-wm-card{padding:10px 11px;min-height:46px}
  .dm-wm-de{font-size:13.5px}
  .dm-wm-ar{font-size:15px}
  .dm-wm-field{min-width:0;flex:1 1 130px}
  .dm-wm-controls .btn{width:100%;justify-content:center}
  .dm-wm-summary{padding:16px}
}

/* ==========================================================================
   « Ma progression » — personal dashboard (one panel, per level).
   Server-rendered; JS only swaps the inner HTML after a completed game.
   Reuses the page tokens (--panel/--line/--ink/--muted/--red) in both themes.
   ======================================================================== */
.dm-prog{margin-top:0;border:1px solid var(--line);border-radius:24px;padding:22px;background:
  linear-gradient(180deg,rgba(193,39,45,.045),transparent 140px),var(--panel);box-shadow:0 18px 50px rgba(16,18,22,.06)}
html.dark .dm-prog{background:linear-gradient(180deg,rgba(193,39,45,.10),transparent 140px),rgba(255,255,255,.02);box-shadow:0 18px 50px rgba(0,0,0,.35)}
/* Dashboard sits first; give the « Practice Game » heading room to breathe below it. */
.dm-prog+.ey{margin-top:30px}
.dm-prog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dm-prog-kicker{font:900 10px/1.2 system-ui;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.dm-prog-head h3{font:800 22px/1.1 Space Grotesk,system-ui;margin:6px 0 0;color:var(--ink)}
html.dark .dm-prog-head h3{color:#fff}
.dm-prog-level{flex:0 0 auto;font:900 11px/1 system-ui;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:var(--red);border-radius:999px;padding:8px 12px}

.dm-prog-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin-top:16px;padding:22px 16px;border:1px dashed var(--line);border-radius:18px;background:rgba(0,0,0,.02)}
html.dark .dm-prog-empty{background:rgba(255,255,255,.025)}
.dm-prog-empty-icon{font-size:34px;line-height:1}
.dm-prog-empty strong{font:800 15px/1.3 Space Grotesk,system-ui;color:var(--ink)}
html.dark .dm-prog-empty strong{color:#fff}
.dm-prog-empty span{font-size:12px;line-height:1.7;color:var(--muted);max-width:520px}

.dm-prog-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:18px}
.dm-prog-stat{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:rgba(0,0,0,.02)}
html.dark .dm-prog-stat{background:rgba(255,255,255,.03)}
.dm-prog-stat-label{display:block;font:800 9.5px/1.3 system-ui;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:6px}
.dm-prog-stat strong{font:900 20px/1 Space Grotesk,system-ui;color:var(--ink)}
html.dark .dm-prog-stat strong{color:#fff}

.dm-prog-games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px;align-items:stretch}
.dm-prog-game{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;padding:16px;background:var(--panel);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
html.dark .dm-prog-game{background:rgba(255,255,255,.03)}
.dm-prog-game:hover{transform:translateY(-2px);border-color:rgba(193,39,45,.35);box-shadow:0 12px 30px rgba(16,18,22,.08)}
html.dark .dm-prog-game:hover{box-shadow:0 14px 32px rgba(0,0,0,.45)}
.dm-prog-game header{display:flex;align-items:center;gap:9px}
.dm-prog-game-icon{font-size:20px;line-height:1;flex:0 0 auto}
svg.dm-prog-game-icon{width:1em;height:1em}
svg.dm-prog-play-icon{width:15px;height:15px;flex:0 0 auto}
.dm-prog-game h4{font:800 13.5px/1.25 Space Grotesk,system-ui;margin:0;color:var(--ink);overflow-wrap:anywhere}
html.dark .dm-prog-game h4{color:#fff}
.dm-prog-game-hint{color:var(--muted);font-size:11px;line-height:1.55;margin:8px 0 12px}
.dm-prog-game-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.dm-prog-game-grid>div{display:flex;flex-direction:column;gap:2px}
.dm-prog-game-grid span{font:800 9px/1.2 system-ui;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.dm-prog-game-grid strong{font:900 15px/1.1 Space Grotesk,system-ui;color:var(--ink)}
html.dark .dm-prog-game-grid strong{color:#fff}
.dm-prog-trend{display:flex;align-items:flex-end;gap:3px;height:34px;margin:12px 0 4px}
.dm-prog-trend>span{flex:1;min-height:3px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,rgba(193,39,45,.85),rgba(193,39,45,.35));transition:height .35s ease}
.dm-prog-game .dm-prog-play{margin-top:auto;width:100%;justify-content:center;text-align:center}

.dm-prog-chart{margin-top:22px;border-top:1px dashed var(--line);padding-top:18px}
.dm-prog-chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dm-prog-chart-head h4{font:800 15px/1.2 Space Grotesk,system-ui;margin:0;color:var(--ink)}
html.dark .dm-prog-chart-head h4{color:#fff}
.dm-prog-chart-head span{font:700 11px/1.3 system-ui;color:var(--muted)}
.dm-prog-chart-empty{color:var(--muted);font-size:12px;line-height:1.7;margin:12px 0 0}
.dm-prog-bars{display:flex;align-items:flex-end;gap:4px;height:130px;margin-top:14px;padding:8px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.03)}
html.dark .dm-prog-bars{background:rgba(0,0,0,.22)}
.dm-prog-bar{flex:1 1 0;min-width:4px;min-height:3px;border-radius:4px 4px 0 0;transition:height .35s ease;background:#c1272d}
.dm-prog-bar--sentence_reorder{background:linear-gradient(180deg,#e0504f,#c1272d)}
.dm-prog-bar--word_translation{background:linear-gradient(180deg,#4f8fe0,#2f6fc0)}
.dm-prog-bar--wort_match{background:linear-gradient(180deg,#5aa87b,#3d8b5f)}
.dm-prog-bars-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;font:700 10.5px/1.4 system-ui;color:var(--muted)}
.dm-prog-bars-legend em{font-style:normal;opacity:.8}
.dm-prog-dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:middle}
.dm-prog-dot--sentence_reorder{background:#c1272d}
.dm-prog-dot--word_translation{background:#2f6fc0}
.dm-prog-dot--wort_match{background:#3d8b5f}

.dm-prog-goals{margin-top:22px}
.dm-prog-goals h4{font:800 15px/1.2 Space Grotesk,system-ui;margin:0;color:var(--ink)}
html.dark .dm-prog-goals h4{color:#fff}
.dm-prog-goal-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.dm-prog-goal-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.dm-prog-goal-top span:first-child{font:700 12px/1.4 system-ui;color:var(--ink)}
html.dark .dm-prog-goal-top span:first-child{color:#f5f6f8}
.dm-prog-goal-top span:last-child{font:800 11px/1;color:var(--muted);white-space:nowrap}
.dm-prog-goal-bar{height:10px;border-radius:999px;background:rgba(0,0,0,.09);overflow:hidden}
html.dark .dm-prog-goal-bar{background:rgba(255,255,255,.1)}
.dm-prog-goal-bar>span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#c1272d,#e8a33d);transition:width .4s ease}

@media (prefers-reduced-motion: reduce){
  .dm-prog-game,.dm-prog-trend>span,.dm-prog-bar,.dm-prog-goal-bar>span{transition:none}
  .dm-prog-game:hover{transform:none}
}
@media(max-width:800px){
  .dm-prog{padding:18px;border-radius:20px}
  .dm-prog-games{grid-template-columns:1fr}
  .dm-prog-goal-list{grid-template-columns:1fr}
  .dm-prog-bars{height:110px}
}
@media(max-width:520px){
  .dm-prog-stats{grid-template-columns:1fr 1fr}
  .dm-prog-stat strong{font-size:18px}
}