*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}:root{--bg:#0b1018;--card:#171e2b;--card2:#222c3d;--txt:#f6f7fa;--muted:#929daf;--gold:#f2b72c;--yellow:#ffd43b;--green:#35c46a;--red:#ff5c62}body{margin:0;background:radial-gradient(circle at top,#172238,#0b1018 45%);color:var(--txt);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.app{max-width:900px;margin:auto;padding:calc(18px + env(safe-area-inset-top)) 14px 35px}header{display:flex;justify-content:space-between;align-items:center}header small{color:var(--gold);font-weight:900;letter-spacing:2px}h1{margin:2px 0 14px}button{font:inherit}header button,.panelhead button{border:0;background:var(--card2);color:white;border-radius:12px;width:44px;height:44px;font-size:20px}nav{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:#111722;padding:5px;border-radius:15px}nav button,.seg button{border:0;background:transparent;color:var(--muted);padding:10px 4px;border-radius:10px;font-weight:800}nav .active,.seg .active{background:var(--card2);color:white}.card{background:linear-gradient(#192231,#141b27);border:1px solid #ffffff0c;border-radius:20px;padding:15px;margin:12px 0;box-shadow:0 12px 30px #0003}.challenge{text-align:center}.challenge label{font-size:11px;letter-spacing:2px;color:var(--muted);font-weight:900}#challenge{font-size:72px;font-weight:900;line-height:1.1;margin:3px}#sub{color:var(--muted);font-size:14px;margin:4px 0 10px}#feedback{display:block;min-height:24px}.good{color:var(--green)}.wrong{color:var(--red)}.primary{border:0;background:var(--gold);font-weight:900;border-radius:11px;padding:10px 16px;margin-top:8px}.hide{display:none!important}.boardhead{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-bottom:9px}.scroll{overflow-x:auto}#board{display:grid;min-width:100%;border-radius:10px;overflow:hidden;background:linear-gradient(90deg,#352419,#724d31,#432c1e)}.head,.slabel{height:27px;background:#101620;display:flex;align-items:center;justify-content:center;color:#9aa5b6;font-size:11px}.slabel{height:48px;font-weight:900;color:white}.cell{height:48px;position:relative;border-right:3px solid #cbd0d8;display:flex;align-items:center;justify-content:center}.cell.open{border-right:5px solid #eee5d6;background:#0002}.cell:before{content:"";position:absolute;left:0;right:0;height:var(--sw);background:#d9d4c8;box-shadow:0 1px 1px #0009}.dot{z-index:2;width:27px;height:27px;border-radius:50%;border:2px solid #e3e8ef;background:#202938;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:#111}.dot.tap{background:var(--yellow);border-color:#fff0a2}.dot.ok{background:var(--green);border-color:#a8f3bf}.dot.bad{background:var(--red);border-color:#ffb0b3;color:white}.legend{color:var(--muted);font-size:11px;margin-top:11px}.stats{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}.stats div{display:flex;flex-direction:column}.stats b{font-size:22px}.stats span{font-size:11px;color:var(--muted)}.overlay{position:fixed;inset:0;background:#000a;z-index:10;display:flex;align-items:flex-end;justify-content:center}.panel{width:min(900px,100%);background:#171e2b;border-radius:24px 24px 0 0;padding:18px 16px calc(25px + env(safe-area-inset-bottom))}.panelhead{display:flex;justify-content:space-between}.panel h2{margin:5px 0 18px}.panel>label,.panel>p{display:block;color:var(--muted);font-weight:800}.panel input[type=range]{width:100%;margin-top:12px}.seg{display:flex;background:#101620;padding:4px;border-radius:12px}.seg button{flex:1}.strings button.active{background:var(--gold);color:#17120a}.check{display:flex!important;justify-content:space-between;margin:20px 0}.danger{width:100%;border:0;border-radius:11px;padding:12px;background:#3b1d25;color:#ff9498;font-weight:900}#choices{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}#choices button{border:0;background:var(--card2);color:white;padding:9px 12px;border-radius:9px;font-weight:900}@media(max-width:600px){nav button{font-size:11px}#challenge{font-size:62px}}
.headActions{display:flex;align-items:center;gap:8px}.langSwitch{display:flex;background:#111722;padding:3px;border-radius:12px}.langSwitch button{width:38px;height:38px;border:0;border-radius:9px;background:transparent;font-size:19px;opacity:.5}.langSwitch button.active{background:var(--card2);opacity:1}

.headActions{display:flex;align-items:center;gap:8px}.langSwitch{display:flex;gap:2px;flex-wrap:wrap;max-width:240px;justify-content:flex-end}.langSwitch a{font-size:20px;text-decoration:none;padding:5px;border-radius:8px}.langSwitch a:hover{background:var(--card2)}.seo h2{font-size:19px;margin:0 0 8px}.seo p{color:var(--muted);line-height:1.55;margin:0}@media(max-width:600px){.langSwitch{max-width:180px}.langSwitch a{font-size:17px;padding:3px}}
.freeBadge{margin-top:3px;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--green);line-height:1.3}

/* v2.4 compact language selector */
.headActions{display:flex;align-items:center;gap:8px}
.langSwitch{display:none!important}
.langDropdown{position:relative;z-index:30}
.langDropdown summary{
  list-style:none;cursor:pointer;user-select:none;white-space:nowrap;
  min-width:132px;height:42px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 12px;border-radius:11px;background:#111722;
  color:var(--text);font-size:14px;font-weight:700
}
.langDropdown summary::-webkit-details-marker{display:none}
.langDropdown summary::after{content:"▾";font-size:11px;color:var(--muted)}
.langDropdown[open] summary::after{content:"▴"}
.langMenu{
  position:absolute;right:0;top:48px;width:205px;max-height:360px;overflow:auto;
  padding:6px;background:#111722;border:1px solid rgba(255,255,255,.08);
  border-radius:12px;box-shadow:0 16px 38px rgba(0,0,0,.35)
}
.langMenu a{
  display:block;padding:9px 10px;border-radius:8px;text-decoration:none;
  color:var(--text);font-size:14px;white-space:nowrap
}
.langMenu a:hover,.langMenu a.current{background:var(--card2)}
.langMenu a.current{font-weight:800}
@media(max-width:600px){
  .langDropdown summary{min-width:0;max-width:150px}
  .langMenu{position:fixed;right:12px;top:70px;width:min(240px,calc(100vw - 24px));max-height:65vh}
}

.germanNotation{margin-top:18px}
.germanNotation>span{display:block;margin-bottom:10px;color:var(--muted);font-weight:700}
.germanNoteButtons{display:grid;grid-template-columns:1fr 1fr;background:#0f1622;border-radius:12px;padding:3px}
.germanNoteButtons button{border:0;background:transparent;color:var(--muted);font:inherit;font-weight:700;padding:11px 10px;border-radius:9px;cursor:pointer}
.germanNoteButtons button.active{background:#263247;color:var(--text)}