/* Kreuzwort 1.5 — ruhiges, mobiles Spielinterface mit semantischen Tag/Nacht-Farben */
:root{
  font-family:ui-rounded, "Segoe UI Variable", "SF Pro Rounded", Inter, system-ui,-apple-system,sans-serif;
  font-synthesis:none;
  --bg:#f7f8f6;--ink:#142c36;--muted:#79888b;--line:#dae2df;
  --tile:#fff;--tile-edge:#d1dedc;--tile-text:#203f49;--tile-number:#6b9294;
  --active:#e1f5ef;--active-edge:#91cfc0;--focused:#c6ece2;--focused-edge:#168f87;
  --good:#daf4e7;--good-edge:#62b894;--bad:#fbe5e6;--bad-edge:#db8b95;--hint:#fff0c7;
  --accent:#149980;--accent-strong:#057c71;--aura:rgba(67,161,139,.075);
  --shade:rgba(9,27,34,.52);--toast:#e8f4ef;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#101923;--ink:#eaf5f4;--muted:#96aaad;--line:#30414a;
  --tile:#21313d;--tile-edge:#3b505b;--tile-text:#ecf7f6;--tile-number:#93b4b6;
  --active:#265151;--active-edge:#438c81;--focused:#326e69;--focused-edge:#6be0bb;
  --good:#255548;--good-edge:#55bb93;--bad:#59363d;--bad-edge:#d27980;--hint:#62512e;
  --accent:#6be0ba;--accent-strong:#84efd0;--aura:rgba(47,160,154,.075);
  --shade:rgba(0,0,0,.68);--toast:#26433f;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;color:var(--ink);background:radial-gradient(ellipse 80% 42% at 50% 32%,var(--aura),transparent 95%),var(--bg);overflow-x:hidden}
button,select,input{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button:disabled{opacity:.48;cursor:default}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.progress-top{position:fixed;top:0;right:0;left:0;height:2px;z-index:1000;pointer-events:none}
.progress-top span{display:block;width:0;height:100%;background:#4cca91;transition:width .25s ease}
.app-shell{max-width:1120px;margin:auto;padding:env(safe-area-inset-top) 12px calc(24px + env(safe-area-inset-bottom))}
.topbar{height:52px;display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:env(safe-area-inset-top);z-index:150;isolation:isolate;background:var(--bg);border-bottom:1px solid var(--line)}
.game-identity{display:flex;gap:12px;align-items:center;min-width:0}
.mark{width:28px;height:28px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:3px;transform:rotate(-7deg)}
.mark>span{background:var(--ink);border-radius:3px;opacity:.85}
.mark>span:nth-child(2),.mark>span:nth-child(3){background:var(--accent)}
.mode-tag{font-size:10px;letter-spacing:1.6px;font-weight:850;color:var(--muted)}
.top-actions{display:flex;align-items:center;gap:2px}
.icon-button,.tool,.close-btn{border:0;background:transparent;color:var(--ink);display:grid;place-items:center;border-radius:12px;transition:background .15s ease,color .15s ease,transform .12s ease}
.icon-button{width:43px;height:43px}
.icon-button svg,.tool svg,.close-btn svg,.start-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.icon-button:hover,.tool:hover,.close-btn:hover{background:var(--active)}
.icon-button:active,.tool:active{transform:scale(.92)}
.new-btn{color:var(--accent-strong)}
.new-btn svg{width:25px;height:25px;stroke-width:2.2}
.clue-hud{position:absolute;inset:1px 0 1px 0;z-index:3;display:flex;align-items:center;gap:12px;min-width:0;padding:0 6px;background:var(--bg);color:var(--ink);pointer-events:none;opacity:0;transform:translateY(-5px);transition:opacity .23s ease,transform .23s ease}
.clue-hud[hidden]{display:none}
.clue-hud.is-visible{opacity:1;transform:translateY(0)}
.clue-hud-index{flex:0 0 auto;font-size:11px;font-weight:850;color:var(--accent-strong);white-space:nowrap;letter-spacing:.4px}
.clue-hud-text{font-size:clamp(12px,3.2vw,14px);font-weight:670;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
.play-area{min-width:0;display:flex;flex-direction:column;align-items:center}
.puzzle-board-wrap{max-width:100%;width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior-inline:contain;touch-action:pan-x pan-y;padding:2px 0 8px;margin:clamp(23px,6vh,56px) 0 12px}
.puzzle-board{--cell-size:31px;--cell-gap:3px;display:grid;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size));gap:var(--cell-gap);width:max-content;margin:0 auto}
.cell{position:relative;width:var(--cell-size);height:var(--cell-size);display:grid;place-items:center;border-radius:5px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--tile-edge);transition:background .12s ease,box-shadow .12s ease;overflow:hidden}
.cell.empty{background:transparent;box-shadow:none;pointer-events:none}
.cell.is-active-word{background:var(--active);box-shadow:inset 0 0 0 1px var(--active-edge)}
.cell.is-selected{z-index:1;background:var(--focused);box-shadow:inset 0 0 0 2px var(--focused-edge)}
.cell.correct{background:var(--good);box-shadow:inset 0 0 0 1px var(--good-edge)}
.cell.wrong{background:var(--bad);box-shadow:inset 0 0 0 1px var(--bad-edge)}
.cell.hint-cell:not(.is-selected){background:var(--hint)}
.cell-number{position:absolute;top:3px;left:4px;font-size:clamp(8px,calc(var(--cell-size) * .25),10px);line-height:1;font-weight:800;color:var(--tile-number);pointer-events:none}
.cell input{width:100%;height:100%;min-width:0;display:block;border:0;outline:0!important;border-radius:0;padding:4px 0 0;background:transparent;text-align:center;font-size:clamp(14px,calc(var(--cell-size)*.49),23px);line-height:1;font-weight:850;letter-spacing:-.03em;text-transform:uppercase;color:var(--tile-text);caret-color:var(--accent);-webkit-tap-highlight-color:transparent}
.cell input:focus{outline:none!important}
.cell input{scroll-margin-top:calc(70px + env(safe-area-inset-top));scroll-margin-bottom:20px}
.toolbar{display:flex;align-items:center;justify-content:center;gap:clamp(8px,5vw,28px);width:100%;margin:12px 0 16px}
.tool{width:49px;height:49px;flex:0 0 auto;color:var(--muted)}
.tool:active{background:var(--active)}
.tool svg{width:23px;height:23px;stroke-width:1.75}
.tool-divider{height:21px;width:1px;background:var(--line);margin-inline:1px}
#showCluesBtn{color:var(--accent-strong)}
.clues-backdrop{display:none}
.clues-panel{min-width:0}
.clue-head{display:flex;align-items:center;gap:12px;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px}
.clue-head h2{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:0}
.clue-head>span{margin-left:auto;font-size:12px;color:var(--muted)}
.close-clues{display:none}
.clue-columns{display:grid;grid-template-columns:1fr;gap:10px}
.clue-columns h3{font-size:11px;letter-spacing:.04em;font-weight:800;text-transform:uppercase;margin:18px 0 9px;color:var(--muted)}
.clue-columns h3 span{color:var(--accent);font-size:16px;margin-right:6px;vertical-align:-1px}
.clue-list{display:grid;gap:1px}
.clue{width:100%;border:0;border-left:2px solid transparent;background:transparent;text-align:left;display:flex;align-items:baseline;gap:9px;padding:11px 8px;color:var(--ink);font-size:13px;line-height:1.35;min-height:42px;border-radius:0}
.clue:hover{background:var(--active)}
.clue.is-active{border-left-color:var(--accent);background:var(--active)}
.clue.is-solved .clue-label{text-decoration:line-through;opacity:.52}
.clue-num{flex:0 0 18px;color:var(--accent-strong);font-weight:850}
.clue-label{flex:1;overflow-wrap:anywhere}
.clue-length{font-size:11px;color:var(--muted)}
.message{position:fixed;z-index:900;left:50%;bottom:max(20px,calc(env(safe-area-inset-bottom) + 14px));transform:translate(-50%,24px);max-width:min(440px,calc(100vw - 24px));width:max-content;padding:11px 17px;border-radius:40px;text-align:center;font-size:12px;font-weight:750;line-height:1.4;color:var(--ink);background:var(--toast);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.message.info,.message.warn{transform:translate(-50%,0);opacity:1}
.message.warn{background:var(--bad);color:var(--ink)}
.settings-dialog{width:min(460px,calc(100vw - 22px));max-height:calc(100dvh - 30px);overflow:auto;border:1px solid var(--line);border-radius:20px;background:var(--bg);color:var(--ink);padding:22px;overscroll-behavior:contain;box-shadow:none}
.settings-dialog::backdrop{background:var(--shade)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px}
.dialog-head h2{margin:0;font-size:20px;font-weight:850;letter-spacing:-.5px}
.close-btn{width:38px;height:38px}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 12px}
.settings-grid label{display:grid;gap:7px;align-content:start;font-size:11px;font-weight:800;color:var(--muted)}
.settings-grid select{width:100%;min-width:0;min-height:45px;background:var(--tile);border:1px solid var(--tile-edge);border-radius:10px;color:var(--ink);font-size:12px;padding:9px 7px}
.extra-settings{margin:20px 0;border-top:1px solid var(--line);padding-top:13px}
.extra-settings summary{cursor:pointer;font-size:12px;font-weight:750;color:var(--muted)}
.extra-settings p{font-size:12px;color:var(--muted);line-height:1.45}
.file-import-line{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.file-import-line input[type=file]{position:absolute;width:1px;height:1px;opacity:0;left:-9999px}
.file-btn{padding:9px 11px;border:1px solid var(--line);border-radius:9px;color:var(--accent-strong);font-size:12px;font-weight:750;cursor:pointer}
#listCount{color:var(--muted);font-size:11px}
.start-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;width:100%;background:var(--accent-strong);color:var(--bg);border:0;border-radius:11px;font-size:15px;font-weight:800}
:root[data-theme="dark"] .start-btn{color:#11282d}
.start-btn svg{width:20px;height:20px}
.dialog-footer{display:flex;justify-content:space-evenly;gap:10px;margin-top:15px}
.footer-action{color:var(--muted);background:transparent;border:0;font-size:12px;padding:9px}
.install-help{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
@media(max-width:759px){
  .clues-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:600;background:var(--shade);border:0;padding:0}
  .clues-panel{visibility:hidden;pointer-events:none;position:fixed;z-index:601;left:0;right:0;bottom:0;max-height:min(78dvh,740px);overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border-top:1px solid var(--line);border-radius:18px 18px 0 0;padding:18px 17px calc(24px + env(safe-area-inset-bottom));transform:translateY(104%);transition:transform .25s cubic-bezier(.2,.8,.2,1),visibility .25s}
  body.clues-open{overflow:hidden}
  body.clues-open .clues-panel{visibility:visible;pointer-events:auto;transform:translateY(0)}
  .close-clues{display:grid}
  .clue-columns{grid-template-columns:1fr 1fr;gap:12px}
  .clue{font-size:12px;min-height:38px;padding:9px 4px;gap:5px}
  .clue-num{flex-basis:16px}
}
@media(max-width:420px){
  .app-shell{padding-inline:10px}
  .topbar{height:49px}
  .puzzle-board-wrap{margin-top:clamp(20px,5vh,37px)}
  .clue-columns{grid-template-columns:1fr;gap:0}
}
@media(min-width:760px){
  .app-shell{padding-inline:32px}
  .topbar{height:64px}
  .game-layout{grid-template-columns:minmax(0,1.15fr) minmax(255px,.85fr);gap:42px;padding-top:18px}
  .puzzle-board-wrap{margin:24px 0 20px}
  .toolbar{margin-top:6px}
  .clues-panel{padding-top:18px;max-height:calc(100dvh - 105px);overflow:auto;scrollbar-width:thin}
  .clue-columns{gap:9px}
  #showCluesBtn{display:none}
  .tool-divider{display:none}
  .clue-hud-text{font-size:14px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{
  :root,:root[data-theme="dark"]{--bg:white;--ink:#111;--line:#aaa;--tile:white;--tile-edge:#111;--tile-number:#111;--muted:#555;--active:white;--tile-text:#111;color-scheme:light}
  body{background:white!important;color:#111}
  .topbar,.toolbar,.progress-top,.message,.settings-dialog,.clues-backdrop{display:none!important}
  .app-shell{max-width:none;padding:0}
  .game-layout{display:block;padding:0}
  .puzzle-board-wrap{overflow:visible;page-break-inside:avoid;margin:0 auto 16px}
  .puzzle-board{--cell-size:26px!important;--cell-gap:1px!important}
  .cell,.cell.is-active-word,.cell.is-selected,.cell.correct,.cell.wrong,.cell.hint-cell{background:white!important;box-shadow:inset 0 0 0 1px #111!important}
  .cell.empty{background:transparent!important;box-shadow:none!important}
  .cell input{color:transparent!important}
  .clues-panel{display:block!important;position:static!important;max-height:none!important;overflow:visible!important;transform:none!important;visibility:visible!important;border:0!important;padding:0!important}
  .clue-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .clue{color:#111!important;background:transparent!important;border:0!important;padding:4px 0;min-height:0}
  .clue.is-solved .clue-label{text-decoration:none;opacity:1}
  .close-clues{display:none}
}

/* 1.4 — sparsame Spiel-Akzente, Punkte und Feuerwerk */
:root{
  --gold:#c88717;--gold-soft:#fff2cd;--mint:#10a88b;--blue:#3174cf;
}
:root[data-theme="dark"]{
  --gold:#ffd36b;--gold-soft:#423b27;--mint:#65e6b8;--blue:#8aabff;
}
.top-actions{gap:4px}
.score-chip{display:flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--gold);font-weight:850;letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:13px;min-height:40px;padding:6px 9px;margin-right:4px;border-radius:11px}
.score-chip:active{background:var(--gold-soft)}
.score-chip svg{height:17px;width:17px;fill:currentColor;stroke:none;flex:none}
#scoreValue{max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell.correct{--good-edge:var(--mint)}
.clue.is-solved .clue-num{color:var(--mint)}
#hintBtn{color:var(--gold)}
#checkBtn{color:var(--mint)}
#clearBtn{color:var(--muted)}
.fireworks{position:fixed;inset:0;width:100%;height:100%;z-index:1020;pointer-events:none}
.victory-dialog,.stats-dialog{border:1px solid var(--line);border-radius:22px;background:var(--bg);color:var(--ink);padding:26px 22px;width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 28px);text-align:center;box-shadow:none}
.victory-dialog::backdrop,.stats-dialog::backdrop{background:var(--shade)}
.victory-dialog{z-index:1000}
.victory-spark{width:70px;height:70px;border:2px solid var(--gold);border-radius:50%;color:var(--gold);display:grid;place-items:center;font-size:42px;margin:1px auto 18px;animation:pop-spark .65s cubic-bezier(.2,1.4,.5,1) both}
.victory-dialog h2{margin:0;font-size:clamp(26px,6vw,33px);font-weight:900;letter-spacing:-1.1px}
.victory-award{margin:6px 0;font-size:23px;letter-spacing:-.6px;font-weight:900;color:var(--gold)}
.victory-tally{display:flex;justify-content:space-around;gap:8px;margin:22px 0 25px;font-weight:650;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.victory-next{background:var(--accent-strong)}
.victory-later{border:0;background:transparent;color:var(--muted);font-weight:750;padding:15px;margin-top:8px;width:100%}
.stats-dialog .dialog-head{margin-bottom:8px;text-align:left}
.stats-big{display:flex;justify-content:center;align-items:baseline;gap:10px;margin:14px 0 0;color:var(--gold);font-size:34px;font-weight:900;font-variant-numeric:tabular-nums}
.stats-big strong{font-size:48px;letter-spacing:-2px}
.stats-caption{color:var(--ink);margin:2px 0 19px;font-size:15px;font-weight:750}
.stats-note{color:var(--muted);font-size:12px;line-height:1.6;margin:0}
.install-help{white-space:pre-line;line-height:1.7}
@keyframes pop-spark{0%{transform:scale(.1) rotate(-45deg);opacity:.1}70%{transform:scale(1.1) rotate(8deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.victory-spark{animation:none}}
@media (max-width:420px){.score-chip{font-size:12px;padding-inline:6px}.score-chip svg{width:15px;height:15px}}
@media print{.fireworks,.victory-dialog,.stats-dialog{display:none!important}}

/* 1.5 – automatisch gelöste Wörter und diskreter Musikschalter */
.cell.word-solved,.cell.word-solved.is-active-word,.cell.word-solved.correct{
  background:var(--good);box-shadow:inset 0 0 0 1px var(--good-edge);
}
.cell.word-solved.is-selected{background:var(--good);box-shadow:inset 0 0 0 2px var(--good-edge)}
.cell.word-solved:not(.is-selected) .cell-number{color:var(--accent-strong)}
.music-button{color:var(--muted)}
.music-button.is-playing{color:var(--accent-strong);background:var(--active)}
.music-button.is-playing svg{filter:drop-shadow(0 0 3px rgba(31,174,135,.16))}
.music-settings{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.music-settings summary{cursor:pointer;font-size:12px;font-weight:750;color:var(--muted)}
.music-controls{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}
.music-controls label{font-size:12px;font-weight:650;display:grid;gap:7px;flex:1;min-width:0}
.music-controls input{width:100%;accent-color:var(--accent-strong)}
.music-status{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.45;overflow-wrap:anywhere}
@media(max-width:360px){
  .topbar .icon-button{width:37px;height:40px}
  .topbar .score-chip{min-height:38px;padding:4px;max-width:64px}
  .game-identity{gap:7px}
  .top-actions{gap:0}
}
@media print{.music-settings,#bgMusic{display:none!important}}

/* 1.6 — sichtbarer Hinweis auch bei Samsung-Internet-Tastatur.
   Die Wolke liegt fix im visuellen Viewport, niemals im Header. */
.clue-hud{
  position:fixed;inset:auto auto auto 50%;left:50%;top:12px;right:auto;
  z-index:550;isolation:isolate;display:flex;align-items:center;gap:11px;
  width:max-content;max-width:min(580px,calc(100vw - 22px));min-width:min(220px,calc(100vw - 22px));
  padding:11px 15px;min-height:47px;border-radius:20px;
  background:rgba(240,249,245,.96);border:1px solid #b4e2d0;
  color:#17352e;box-shadow:0 8px 24px rgba(22,93,74,.14);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  pointer-events:none;opacity:0;transform:translate(-50%,7px) scale(.98);
  transition:opacity .22s ease,transform .22s ease;
}
:root[data-theme="dark"] .clue-hud{background:rgba(27,50,50,.96);color:#e9fff7;border-color:#426e63;box-shadow:0 8px 25px rgba(0,0,0,.32)}
.clue-hud.is-visible{opacity:1;transform:translate(-50%,0) scale(1)}
.clue-hud[data-anchor="bottom"]{transform:translate(-50%,-7px) scale(.98)}
.clue-hud[data-anchor="bottom"].is-visible{transform:translate(-50%,0) scale(1)}
.clue-hud-index{flex:0 0 auto;color:#00866c;background:rgba(37,174,126,.11);padding:5px 8px;border-radius:10px;font-size:12px}
:root[data-theme="dark"] .clue-hud-index{color:#79f2c2;background:rgba(77,234,167,.12)}
.clue-hud-text{font-size:clamp(13px,3.5vw,15px);line-height:1.34;font-weight:690;-webkit-line-clamp:3;line-clamp:3;overflow-wrap:anywhere}
.clue-hud[hidden]{display:none!important}
.diag-copy{display:block;margin:8px 0 0 auto;color:var(--accent-strong);font-weight:700;border:1px solid var(--line);border-radius:9px}
.diag-copy[hidden]{display:none!important}
@media print{.clue-hud{display:none!important}}

/* 1.7 — flache Wortaufdeckung und bebilderte Vokabelkarten. */
.toolbar{gap:clamp(2px,1.6vw,16px);justify-content:space-around}
.toolbar .tool{flex:1 1 0;min-width:0;width:auto;max-width:55px;height:48px}
.toolbar .tool-divider{flex:0 0 1px}
#revealWordBtn{color:var(--gold)}
#learnBtn{color:var(--blue)}
.clue.is-revealed .clue-num{color:var(--gold)}
.victory-study{display:block;width:100%;background:transparent;border:1px solid var(--line);border-radius:12px;padding:13px 12px;margin-top:10px;color:var(--accent-strong);font-weight:850;font-size:13px}
.learn-dialog{width:min(460px,calc(100vw - 20px));max-height:calc(100dvh - 22px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:21px;background:var(--bg);color:var(--ink);padding:16px 17px calc(16px + env(safe-area-inset-bottom));box-shadow:none}
.learn-dialog::backdrop{background:var(--shade)}
.learn-head{margin:0 0 10px}
.learn-head h2{font-size:18px;letter-spacing:-.4px}
.learn-switches{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:12px}
.learn-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);min-width:0;flex:1}
.learn-tabs button{border:0;border-bottom:2px solid transparent;padding:9px 8px;background:transparent;color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}
.learn-tabs button.is-current{border-bottom-color:var(--accent-strong);color:var(--accent-strong)}
.learn-scope-label{flex:0 0 auto;min-width:0}
.learn-scope-label select{padding:8px 22px 8px 7px;font-size:11px;max-width:135px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink)}
.learn-progress{height:3px;background:var(--line);border-radius:6px;overflow:hidden}
.learn-progress span{display:block;height:100%;width:0%;background:var(--mint);transition:width .2s}
.study-counter{text-align:center;margin:10px 0 8px;color:var(--muted);font-size:11px;font-weight:750;font-variant-numeric:tabular-nums}
.study-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:248px;width:100%;padding:17px 14px;gap:8px;white-space:normal;text-align:center;border:1px solid var(--line);border-radius:18px;color:var(--ink);background:linear-gradient(140deg,rgba(75,185,162,.10),rgba(80,127,219,.08) 51%,rgba(240,181,91,.08)),var(--bg);transition:background .2s,border-color .2s}
:root[data-theme="dark"] .study-card{background:linear-gradient(145deg,rgba(43,143,128,.19),rgba(54,86,163,.16) 50%,rgba(124,88,43,.12)),var(--bg)}
.study-card.is-flipped{border-color:var(--good-edge)}
.study-prompt{font-size:clamp(16px,4.5vw,20px);line-height:1.4;font-weight:850;letter-spacing:-.2px;overflow-wrap:anywhere}
.study-answer{color:var(--accent-strong);font-size:clamp(24px,7vw,34px);font-weight:950;letter-spacing:.02em;overflow-wrap:anywhere;animation:card-reveal .18s ease-out}
.study-answer[hidden]{display:none!important}
.study-small{font-size:11px;color:var(--muted);font-weight:650;margin-top:2px}
.study-form{margin:13px 0 0}
.study-form[hidden]{display:none}
.study-form label{font-size:11px;font-weight:750;color:var(--muted);display:block;margin-bottom:6px}
.study-input-row{display:flex;gap:8px}
.study-input-row input{min-width:0;flex:1;border:1px solid var(--line);border-radius:11px;background:var(--tile);color:var(--ink);padding:12px;font-weight:750;font-size:16px;outline-offset:1px}
.study-input-row button{background:var(--accent-strong);color:var(--bg);border:0;border-radius:11px;padding:9px 13px;font-weight:800}
:root[data-theme="dark"] .study-input-row button{color:#11282d}
.study-feedback{font-size:12px;text-align:center;margin:10px 0 0;min-height:18px;font-weight:750;color:var(--muted)}
.study-feedback.is-good{color:var(--accent-strong)}
.study-feedback.is-miss{color:var(--gold)}
.study-buttons{display:flex;gap:8px;justify-content:stretch;margin-top:13px}
.study-buttons button{flex:1;min-width:0;min-height:45px;border-radius:11px;padding:9px 12px;font-size:13px;font-weight:850}
.study-buttons button[hidden]{display:none!important}
.study-primary{border:0;background:var(--accent-strong);color:var(--bg)}
:root[data-theme="dark"] .study-primary{color:#11282d}
.study-muted{background:transparent;border:1px solid var(--line);color:var(--ink)}
.study-note{margin:12px 4px 0;font-size:10px;line-height:1.4;text-align:center;color:var(--muted)}
@keyframes card-reveal{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:370px){.learn-dialog{padding-inline:12px}.learn-tabs button{padding-inline:5px}.learn-scope-label select{max-width:112px;font-size:10px}.toolbar .tool{height:44px}.toolbar .tool svg{width:21px;height:21px}}
@media print{.learn-dialog{display:none!important}}

/* 1.8 – schlichte, nachvollziehbare Punkteanzeige und Wortstufen. */
.grade-note,.score-rule,.victory-breakdown{font-size:11px;color:var(--muted);line-height:1.45;margin:8px 0 3px;text-align:center}
.victory-breakdown{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700;margin:0 0 10px}
.score-rule{font-size:12px;font-weight:700;color:var(--gold)}

/* 1.9 – reine Text-Lernkarten, ruhiger Erfolgs-Sound statt störendem Hinweis-Toast. */
.study-card{min-height:195px;padding:26px 18px;gap:16px}
.study-prompt{font-size:clamp(19px,5vw,25px);line-height:1.45;max-width:32ch}
.study-answer{font-size:clamp(29px,7vw,37px)}
.sfx-option{display:flex;align-items:center;gap:9px;margin-top:12px;color:var(--muted);font-size:12px;font-weight:730}
.sfx-option input{width:17px;height:17px;accent-color:var(--accent-strong)}
@media(min-width:760px){.message{max-width:min(250px,calc(100vw - 28px));font-size:11px;right:14px;left:auto;bottom:14px;transform:translateY(15px)}.message.info,.message.warn{transform:translateY(0)}}