*{box-sizing:border-box}html,body,#app{height:100%;overflow:hidden}body{color:#fff;background:radial-gradient(circle at 50% 35%,#3b2b1a,#12100d 45%,#020617 100%);margin:0;font-family:Arial,Helvetica,sans-serif}body:before{content:"";pointer-events:none;background:radial-gradient(circle at 50% 55%,#ffc1072e,#0000 28%);position:fixed;inset:0}#app{flex-direction:column;gap:8px;height:100dvh;padding:8px;display:flex}.topbar{flex:none;justify-content:space-between;align-items:center;gap:12px;display:flex}.round{color:#fff;cursor:pointer;background:linear-gradient(#ffd76a,#b45309);border:3px solid #b7791f;border-radius:50%;flex-shrink:0;width:48px;height:48px;font-size:22px;box-shadow:0 3px #5b2a05}.title-wrap{text-align:center;flex:1;min-width:0}.ribbon{letter-spacing:1px;text-shadow:2px 2px #000;white-space:nowrap;text-overflow:ellipsis;background:linear-gradient(#9b1c12,#5b100a);border:3px solid #351008;border-radius:10px;max-width:100%;padding:8px 16px;font-size:clamp(16px,3.2vw,32px);font-weight:900;display:inline-block;overflow:hidden;box-shadow:0 4px #270705}.score{background:#151515;border:3px solid #b7791f;border-radius:12px;flex-shrink:0;align-items:center;gap:8px;padding:8px 16px;font-size:clamp(18px,3vw,26px);display:flex}.screen{flex:1;justify-content:center;align-items:center;display:flex;overflow:auto}.menu-card{text-align:center;background:#311b0af0;border:5px solid #c48a28;border-radius:20px;width:min(560px,92vw);padding:24px;box-shadow:0 20px 60px #000}.menu-card h1{color:#ffd76a;margin:0 0 8px;font-size:clamp(24px,4vw,38px)}.menu-card p{margin:0 0 16px;font-size:clamp(14px,2vw,18px);line-height:1.4}.grade-buttons button{color:#fff;cursor:pointer;background:linear-gradient(#45c63f,#167a1f);border:3px solid #0f3f14;border-radius:14px;width:90%;margin:12px auto;padding:14px;font-size:clamp(18px,2.5vw,24px);font-weight:900;display:block;box-shadow:0 5px #06280b}.game{flex:1;grid-template-columns:220px 1fr;gap:10px;min-height:0;display:grid}.left-panel{background:linear-gradient(#3a2513,#1d1209);border:3px solid #b7791f;border-radius:14px;flex-direction:column;gap:10px;padding:12px;display:flex;overflow:hidden;box-shadow:inset 0 0 15px #000}.progress-bar{background:#000;border:2px solid #b7791f;border-radius:10px;height:36px;position:relative;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#f59e0b,#fbbf24);transition:width .4s;position:absolute;inset:0;box-shadow:0 0 12px #ffd000}.progress-text{color:#fff;text-shadow:1px 1px 2px #000;z-index:1;place-items:center;font-size:16px;font-weight:900;display:grid;position:absolute;inset:0}.categories{flex-direction:column;gap:8px;display:flex}.cat{border:2px solid #fff3;border-radius:10px;justify-content:space-between;align-items:center;padding:10px 12px;font-size:14px;font-weight:900;display:flex}.math{background:#3f8d19}.german{background:#12689e}.hsk{background:#a34d08}.parchment{color:#351b08;background:linear-gradient(90deg,#c38b3b 0,#f1d49a 8%,#f7e0ae 50%,#d9a85e 100%);border:3px solid #7c3f09;border-radius:14px;flex-direction:column;min-height:0;padding:16px 20px;display:flex;overflow:hidden;box-shadow:0 12px 30px #000}.parchment-head{flex:none;justify-content:space-between;align-items:center;gap:8px;display:flex}.badge{color:#fff;text-shadow:1px 1px #000;background:linear-gradient(#4ea82e,#266d16);border:3px solid #1f4b12;border-radius:6px;padding:6px 14px;font-size:clamp(12px,1.8vw,18px);font-weight:900;display:inline-block}.counter{color:#351b08;font-size:clamp(14px,2vw,18px);font-weight:900}#questionText{text-align:center;color:#351b08;flex:none;margin:12px 0 6px;font-size:clamp(20px,3.2vw,34px);line-height:1.2}.speak{color:#351b08;cursor:pointer;background:linear-gradient(#ffd76a,#b45309);border:2px solid #5b2a05;border-radius:10px;flex:none;margin:0 auto 8px;padding:8px 14px;font-size:14px;font-weight:900;display:block;box-shadow:0 3px #5b2a05}.choices{flex:1;grid-template-columns:1fr 1fr;align-content:center;gap:10px;min-height:0;display:grid}.choice{color:#fff;cursor:pointer;text-shadow:1px 1px #06340d;background:linear-gradient(#2563eb,#1743a5);border:3px solid #0e2d75;border-radius:14px;min-height:60px;padding:14px;font-size:clamp(16px,2.4vw,22px);font-weight:900;transition:transform .1s;box-shadow:0 5px #071a4c}.choice:hover:not(:disabled){transform:translateY(-2px)}.choice:disabled{opacity:.6;cursor:default}.choice.correct{background:linear-gradient(#39b734,#167a1f);border-color:#0b4913;animation:.6s pulse-good;box-shadow:0 5px #06340d}.choices.shake{animation:.35s shake}@keyframes pulse-good{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.feedback{text-align:center;flex:none;min-height:24px;margin-top:6px;font-size:clamp(13px,1.8vw,17px);font-weight:900}.good{color:#0f5a17}.bad{color:#a01515}.final{z-index:10;text-align:center;color:#fff;text-shadow:3px 3px #000;background:radial-gradient(circle,#fff08a,#f59e0b 38%,#7c2d12 100%);flex-direction:column;justify-content:center;align-items:center;padding:20px;animation:.7s pop;display:flex;position:fixed;inset:0;overflow:auto}.final .treasure{font-size:clamp(60px,12vw,110px);animation:.9s infinite alternate bounce}.final h1{margin:8px;font-size:clamp(36px,7vw,72px)}.final h2{margin:8px;font-size:clamp(20px,4vw,36px)}.final p{font-size:clamp(16px,2.5vw,26px);font-weight:900}.final button{color:#fff;cursor:pointer;background:#22c55e;border:3px solid #06340d;border-radius:16px;margin-top:10px;padding:16px 30px;font-size:clamp(18px,2.5vw,26px);font-weight:900}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}50%{transform:translate(8px)}75%{transform:translate(-5px)}}@keyframes pop{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-20px)}}@media (width<=1024px){.game{grid-template-columns:180px 1fr}.cat{padding:8px;font-size:12px}}@media (width<=640px){#app{gap:6px;padding:6px}.round{width:40px;height:40px;font-size:18px}.score{padding:6px 10px;font-size:16px}.game{grid-template-rows:auto 1fr;grid-template-columns:1fr}.left-panel{flex-direction:row;align-items:center;gap:8px;padding:8px}.progress-bar{flex:1;height:28px}.progress-text{font-size:13px}.categories{flex-direction:row;gap:4px}.cat{text-align:center;flex-direction:column;gap:2px;padding:6px 8px;font-size:11px}.cat span{font-size:10px}.parchment{padding:12px}.choices{grid-template-columns:1fr 1fr;gap:8px}.choice{min-height:50px;padding:10px;font-size:16px}#questionText{margin:8px 0 4px;font-size:20px}}@media (height<=500px){.ribbon{padding:4px 10px;font-size:16px}.round{width:36px;height:36px;font-size:16px}.score{padding:4px 8px;font-size:14px}#questionText{margin:4px 0;font-size:18px}.choice{min-height:44px;padding:8px;font-size:14px}.speak{margin-bottom:4px;padding:4px 10px;font-size:12px}}.galgen-main{flex:1;grid-template-rows:1fr auto auto auto;gap:10px;min-height:0;padding:4px;display:grid}.galgen-stage{justify-content:center;align-items:center;min-height:0;display:flex;overflow:hidden}.galgen-svg{width:auto;max-width:100%;height:100%;max-height:34vh}.galgen-word{flex-wrap:wrap;justify-content:center;gap:6px;padding:0 8px;display:flex}.galgen-word .letter{color:#fff;background:#0b1220;border:2px solid #ffd76a;border-bottom-width:5px;border-radius:6px 6px 0 0;place-items:center;min-width:34px;height:44px;padding:0 6px;font-size:clamp(20px,3.5vw,32px);font-weight:900;display:grid;box-shadow:inset 0 0 8px #0009}.galgen-word .letter.filled{color:#fff;background:linear-gradient(#2563eb,#1743a5);border-color:#0e2d75}.galgen-actions{justify-content:center;gap:10px;display:flex}.galgen-actions .check{width:auto;margin:0;padding:10px 22px;font-size:clamp(14px,2vw,18px)}.galgen-actions .speak{margin:0;padding:10px 22px;font-size:clamp(14px,2vw,18px)}.keyboard{flex-direction:column;gap:5px;padding:4px;display:flex}.key-row{flex-wrap:wrap;justify-content:center;gap:4px;display:flex}.key{color:#351b08;cursor:pointer;background:linear-gradient(#ffd76a,#b45309);border:2px solid #351008;border-radius:8px;width:clamp(28px,5vw,44px);height:clamp(36px,5.5vw,48px);padding:0;font-size:clamp(13px,2vw,18px);font-weight:900;box-shadow:0 3px #5b2a05}.key:disabled{cursor:default;opacity:.55}.key.hit{color:#fff;background:linear-gradient(#39b734,#167a1f);border-color:#0b4913;box-shadow:0 3px #06340d}.key.miss{color:#fff;background:linear-gradient(#dc2626,#7f1d1d);border-color:#3f0a0a;box-shadow:0 3px #3f0a0a}.galgen-result{text-align:center;color:#ffd76a;flex-direction:column;align-items:center;gap:10px;padding:10px;font-size:clamp(16px,2.5vw,22px);font-weight:900;display:flex}.galgen-result.won{color:#4ade80}.galgen-result.lost{color:#f87171}.galgen-result .check{width:auto;margin:0;padding:10px 22px}@media (width<=640px){.galgen-svg{max-height:26vh}.galgen-word .letter{min-width:24px;height:36px;padding:0 3px}.key{width:clamp(24px,7vw,36px);height:36px}}