:root{font-family:ui-rounded,"Avenir Next","Segoe UI",system-ui,sans-serif;color:#4e405b;font-synthesis:none;--ink:#4e405b;--cream:#fff9ed;--violet:#8b6bad;--mint:#91cbb8;--coral:#ed957e;--shadow:0 8px 30px #4633421a;--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#c394a0}button{font:inherit;color:inherit;cursor:pointer;border:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,canvas:focus-visible{outline:3px solid #65488e;outline-offset:4px}button{transition:transform .16s,background .16s,box-shadow .16s}button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.035)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:default;opacity:.56}button[aria-pressed=true]{outline:2px solid #9676b4;outline-offset:1px}[hidden]{display:none!important}#app{height:100dvh;min-height:320px;width:100vw;position:relative;isolation:isolate}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 35%,#51424e26 100%)}.glass{background:#fff8edeb;border:1px solid #ffffffb0;box-shadow:var(--shadow);backdrop-filter:blur(14px)}.topbar{position:absolute;top:22px;left:26px;right:26px;display:flex;align-items:flex-start;gap:16px;pointer-events:none}.topbar>*{pointer-events:auto}.hero-card{display:flex;align-items:center;gap:13px;border-radius:20px;padding:14px 18px;min-width:305px}.hero-avatar{width:55px;height:57px;display:grid;place-items:center;font-size:35px;background:#e1d7e8;border-radius:16px;box-shadow:inset 0 0 0 1px #d2c1db}.hero-info{flex:1}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.7px;color:#968094}.blue-dot{display:inline-block;width:7px;height:7px;background:#619af1;border-radius:50%;margin-left:3px}.hero-title{font-weight:800;font-size:17px;margin:6px 0 9px;display:flex;gap:20px;align-items:baseline;white-space:nowrap}#hp-value{font-size:16px;color:#618b79;margin-left:auto}#hp-value small{font-size:10px;color:#9d9696;font-weight:500}.hp-track{height:8px;border-radius:8px;background:#e0d9d4;overflow:hidden}#hp-fill{height:100%;width:100%;background:linear-gradient(90deg,#a1d0b9,#76bca6);border-radius:8px;transition:width .25s}.wave-card{position:absolute;left:50%;transform:translateX(-50%);width:212px;padding:13px 21px;border-radius:0 0 23px 23px;top:-22px;border-top:0;padding-top:18px}.wave-card .eyebrow{font-size:8px;letter-spacing:1.5px}.wave-title{display:flex;gap:7px;align-items:baseline;font-size:21px;font-weight:700;margin:6px 0 8px}.wave-title strong{font-size:27px}.wave-title>span:not(.sun-icon){font-size:13px;color:#a4939e}.sun-icon{margin-left:auto;color:#c68b70;font-size:27px}#wave-dots{display:flex;gap:5px}#wave-dots span{height:5px;flex:1;background:#e4d9d3;border-radius:4px}#wave-dots .past{background:#b3c8a2}#wave-dots .current{background:#b38bac}.top-actions{margin-left:auto;display:flex;gap:9px}.round-button{width:47px;height:47px;border-radius:15px;font-size:23px;font-weight:600}.enemy-card{position:absolute;top:123px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:8px 14px;border-radius:20px;font-size:12px;font-weight:700;background:#fff7ecdb}.enemy-dot{width:7px;height:7px;background:#e88787;border-radius:50%;box-shadow:0 0 0 3px #eaa3a229}#enemy-hp{font-size:11px;font-weight:500;color:#a58088;border-left:1px solid #ded0cc;padding-left:8px}.world-caption{position:absolute;top:132px;left:30px;display:flex;flex-direction:column;gap:6px;pointer-events:none;text-shadow:0 1px 6px #fff5e444}.world-caption span{font-size:10px;letter-spacing:2.8px;font-weight:700;color:#645267}.world-caption i{font-size:12px;font-style:normal;color:#776173}.spell-panel{position:absolute;right:26px;bottom:133px;width:242px;padding:17px;border-radius:20px}.panel-heading{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:800;gap:10px}.small-chip{background:#e9dfed;color:#977da5;font-size:9px;border-radius:5px;padding:4px 6px;white-space:nowrap}.spell-panel>p{font-size:11px;color:#aa91a0;margin:6px 0 13px}.spell-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.spell-button{height:69px;position:relative;border-radius:12px;background:#f4ece8;border:1px solid #e7dad644;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.spell-symbol{font-size:28px;font-family:system-ui,sans-serif;line-height:1}.spell-label{font-size:9px;font-weight:700;white-space:nowrap}.spell-cooldown{position:absolute;inset:0;border-radius:12px;background:#f5eff2d6;display:grid;place-items:center;font-size:19px;font-weight:800;color:#8a6b9b}.spell-button[data-spell=plus]{background:#e0eee0}.spell-button[data-spell=purple]{background:#e9dcef}.spell-button[data-spell=heart]{background:#f5dfe3}.spell-button[data-spell=u]{background:#e0ecf4}.spell-button[data-spell=circle],.spell-button[data-spell=smiley]{background:#f7ecd3}.inventory{position:absolute;bottom:139px;left:26px;width:250px;padding:14px 16px;border-radius:19px}.text-button{font-size:11px;color:#9982aa;padding:5px;background:transparent;min-height:30px}#weapon-slots{display:flex;gap:8px;margin:10px 0}.weapon-slot{flex:1;position:relative;border-radius:10px;background:#f0e6e3;min-width:0;height:65px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px}.weapon-slot.active{background:#e5d8eb;border:1px solid #b49ac7}.weapon-slot>span{font-size:24px}.weapon-slot>small{font-size:10px;font-weight:600}.weapon-slot kbd{position:absolute;top:5px;left:6px;background:#fff8ed88;color:#9b879f;padding:1px 4px;font-size:8px}.weapon-detail{display:flex;justify-content:space-between;font-size:11px;font-weight:700}.weapon-detail span:last-child{color:#a18b94;font-weight:500}.bottom-bar{position:absolute;bottom:calc(23px + var(--safe-bottom));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;width:530px;max-width:70vw}.primary-actions{display:flex;gap:13px}.action{height:61px;min-width:192px;padding:0 24px;border-radius:17px;box-shadow:0 5px 0 #56435529,0 10px 25px #77505225;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid #ffffff55}.action>span{font-size:28px}.action kbd{margin-left:8px;background:#fff4e741;color:#775674;font-size:8px;font-weight:600;padding:4px 5px}.attack{background:#f3b19a;color:#674552}.draw{background:#ded1ed;color:#715088}.keyboard-hint{font-size:10px;font-weight:650;color:#594d5d;text-shadow:0 1px 5px #fff3db99}.keyboard-hint span{font-weight:400;margin-right:5px}.tutorial{display:flex;align-items:center;gap:10px;padding:8px 9px 8px 14px;border:1px solid #ffffff65;border-radius:14px;background:#fff7e8df;box-shadow:var(--shadow);font-size:12px;max-width:100%;min-height:44px}.tutorial p{margin:0;line-height:1.5}.tutorial strong{font-weight:800}.tutorial-bulb{font-size:24px;color:#b58c75}.tutorial button{width:33px;height:32px;flex-shrink:0;background:#e8dce8;border-radius:9px;font-size:19px;color:#9872aa}.save-status{position:absolute;bottom:18px;left:28px;font-size:9px;color:#65536f}.toast{position:absolute;top:180px;left:50%;transform:translate(-50%,-10px);background:#4c3b60ed;color:#fff5e4;box-shadow:var(--shadow);border:1px solid #fff2dd40;padding:13px 20px;border-radius:16px;font-size:16px;line-height:1.45;font-weight:600;max-width:min(630px,85vw);text-align:center;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;z-index:4}.toast.show{opacity:1;transform:translate(-50%,0)}.transition-banner{position:absolute;left:50%;top:23%;transform:translateX(-50%);text-align:center;color:#fff3db;text-shadow:0 3px 18px #775177;pointer-events:none;width:85vw}.transition-banner>span{font-size:45px;color:#ffe6b2}.transition-banner h1{font-size:clamp(28px,4vw,49px);margin:8px 0}.transition-banner p{font-size:17px;margin:0}.touch-pad{position:absolute;left:30px;bottom:330px;width:150px;height:104px;display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:5px;opacity:.8}.touch-pad button{border-radius:13px;background:#fff3dfc9;box-shadow:var(--shadow);font-size:24px;border:1px solid #ffffff7a;touch-action:none;user-select:none}.touch-pad [data-move=up]{grid-column:2}.touch-pad [data-move=left]{grid-row:2;grid-column:1}.touch-pad [data-move=down]{grid-row:2;grid-column:2}.touch-pad [data-move=right]{grid-row:2;grid-column:3}#danger-controls{margin-top:12px;padding-top:10px;border-top:1px solid #d7bdae}#danger-warning{font-size:11px;line-height:1.5;color:#a65f57;font-weight:700;margin-bottom:8px}.danger-button,.cancel-button{width:100%;min-height:41px;border-radius:10px;font-size:12px;font-weight:750;margin-top:5px}.danger-button{background:#f6cfb4;color:#a05a52}.cancel-button{background:#e4dce8;color:#796183}.cancel-button kbd{margin-left:8px}.modal-layer{position:absolute;inset:0;background:#42304f63;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:10;overflow:auto}.modal{background:#fff9ef;border:1px solid #ffffffd9;border-radius:29px;box-shadow:0 30px 100px #3321394d;padding:30px;max-height:calc(100dvh - 40px);overflow:auto}.modal h1{font-size:30px;letter-spacing:-.7px;margin:7px 0;color:#594465}.modal h2{font-size:16px;margin:20px 0 12px}.modal p{font-size:14px;line-height:1.7;color:#9a8597;margin:10px 0 20px}.modal-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.modal-close{height:44px;width:44px;background:#eee4ed;border-radius:50%;font-size:18px;flex-shrink:0}.drawing-modal{width:780px}.compact-modal{width:450px}.help-modal{width:760px}.canvas-wrap{position:relative;height:300px;background:#faf4f5;border:2px dashed #d9c9de;border-radius:17px;overflow:hidden}#drawing-canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}#drawing-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;pointer-events:none;color:#b5a0ba;font-size:16px}#drawing-placeholder span{font-size:48px;font-weight:400}.drawing-toolbar{display:flex;align-items:center;gap:10px;margin-top:14px}#recognition{flex:1;font-size:13px;color:#94729e;line-height:1.5}.primary,.secondary{padding:13px 20px;min-height:48px;border-radius:13px;font-size:14px;font-weight:750}.primary{background:#9d7eb6;color:#fffaf0;box-shadow:0 4px 0 #76558822}.secondary{background:#eee5ec;color:#927799}.full{width:100%;margin-top:10px}.drawing-legend{display:flex;gap:14px;flex-wrap:wrap;margin:17px 0 0;color:#a28b9f;font-size:11px}.drawing-fallbacks{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin-top:14px}.drawing-fallbacks .spell-button{height:54px}.drawing-fallbacks .spell-symbol{font-size:23px}.flag-preview-wrap{display:flex;justify-content:center;background:#eee4eb;border-radius:18px;padding:18px;margin-top:17px}#flag-preview{width:180px;height:120px;filter:drop-shadow(0 8px 9px #725b7730);border-radius:4px 14px 14px 4px}.flag-colors,.flag-symbols{display:flex;justify-content:space-between;gap:10px}.flag-colors button{width:51px;height:46px;border-radius:12px;border:4px solid #fff9ef}.flag-colors button.selected{outline:2px solid #9c7da7}.flag-symbols button{flex:1;height:50px;border-radius:11px;background:#ede2eb;font-size:27px}.flag-symbols button.selected{background:#d7c2e3;outline:2px solid #ab8abd}.modal-art{font-size:50px;color:#b598c3}.modal .muted{font-size:12px;text-align:center;color:#aa98a6}.ending{text-align:center;padding:37px}.ending-icon{font-size:65px;color:#c8a6cc;line-height:1.3}.ending .eyebrow{font-size:9px;margin-top:15px}.ending h1{font-size:34px}.victory-stars{font-size:29px;color:#e4b765;letter-spacing:10px;margin:20px 0}.all-weapons{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.all-weapons button{background:#eee2ea;border-radius:13px;min-height:80px;padding:12px;font-size:14px;font-weight:700}.all-weapons small{display:block;font-weight:500;font-size:12px;color:#997f9c;margin-top:7px}.help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 24px}.help-grid h2{color:#80638f}.help-grid p{margin-top:0;font-size:13px}.loading,.error-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:linear-gradient(140deg,#f6d4b9,#c8a7cc);z-index:30;padding:30px}.loading h1{font-size:38px;letter-spacing:-1.5px;margin:15px}.loading p{color:#8d7197;font-size:16px}.loading-spider{font-size:65px;animation:breathe 1.5s infinite alternate}.error-panel p{max-width:650px;line-height:1.6;overflow-wrap:anywhere}.ending-icon{animation:breathe 3s infinite alternate}@keyframes breathe{to{transform:translateY(-7px)}}
@media(min-width:1500px){.hero-card{min-width:340px}.spell-panel{width:270px}.spell-button{height:77px}.spell-label{font-size:11px}.panel-heading{font-size:15px}.inventory{width:275px}.action{min-width:218px;height:67px;font-size:20px}.tutorial{font-size:14px}.touch-pad{bottom:346px}.keyboard-hint{font-size:11px}}
@media(max-width:1050px){.topbar{left:16px;right:16px;top:16px}.hero-card{min-width:260px;padding:12px}.hero-avatar{width:46px;height:50px;font-size:29px}.hero-title{font-size:15px;gap:8px}.wave-card{top:-16px;width:175px;padding:15px}.wave-card .eyebrow{font-size:7px}.spell-panel{right:16px;bottom:150px;width:217px;padding:13px}.spell-button{height:62px}.spell-label{font-size:8px}.inventory{left:16px;width:225px;bottom:150px}.world-caption{left:19px;top:122px}.bottom-bar{bottom:20px}.save-status{display:none}.touch-pad{left:20px;bottom:334px}.toast{font-size:14px;max-width:75vw}.tutorial{font-size:11px}}
@media(max-width:760px){.topbar{gap:8px;top:10px;left:10px;right:10px}.hero-card{min-width:0;width:215px;border-radius:15px;padding:10px;gap:8px}.hero-avatar{width:37px;height:43px;font-size:25px;border-radius:11px}.hero-title{font-size:12px;margin:4px 0 7px;gap:5px}.eyebrow{font-size:8px;letter-spacing:1px}#hp-value{font-size:12px}#hp-value small{font-size:8px}.wave-card{position:static;transform:none;top:auto;margin-left:auto;width:108px;padding:8px 10px;border-radius:13px}.wave-card .eyebrow{display:none}.wave-title{font-size:14px;margin:0 0 4px;gap:5px}.wave-title strong{font-size:19px}.wave-title>span:not(.sun-icon){font-size:11px}.sun-icon{font-size:20px}.top-actions{gap:5px;margin-left:0}.round-button{width:35px;height:36px;border-radius:11px;font-size:20px}.enemy-card{top:90px;max-width:90vw;font-size:10px;white-space:nowrap;padding:7px 12px}#enemy-hp{font-size:9px}.world-caption{display:none}.spell-panel{right:10px;bottom:153px;width:187px;padding:11px;border-radius:15px}.panel-heading{font-size:11px}.small-chip{font-size:8px}.spell-panel>p{font-size:10px;margin:4px 0 9px}.spell-grid{gap:5px}.spell-button{height:56px;border-radius:9px}.spell-symbol{font-size:24px}.spell-label{font-size:8px}.inventory{left:10px;bottom:151px;width:183px;padding:11px}.weapon-slot{height:52px}.weapon-slot>span{font-size:20px}.weapon-slot>small{font-size:9px}.weapon-detail{font-size:9px}.text-button{font-size:9px}.touch-pad{bottom:295px;left:20px;grid-template-columns:repeat(3,43px);grid-template-rows:repeat(2,43px);width:139px;height:91px}.bottom-bar{bottom:calc(14px + var(--safe-bottom));max-width:calc(100vw - 20px);width:450px;gap:10px}.action{min-width:170px;height:56px;padding:0 17px;font-size:16px;border-radius:15px}.action>span{font-size:24px}.action kbd{font-size:7px;margin-left:1px}.tutorial{font-size:10px;min-height:39px;padding:6px 8px 6px 12px}.tutorial-bulb{font-size:22px}.keyboard-hint{font-size:8px}.toast{top:127px;max-width:90vw;width:max-content;font-size:13px;padding:10px 15px}.modal{padding:22px;border-radius:23px}.modal h1{font-size:25px}.modal p{font-size:12px}.canvas-wrap{height:245px}.drawing-toolbar{flex-wrap:wrap}#recognition{min-width:100%;font-size:12px}.drawing-toolbar button{flex:1}.drawing-legend{display:none}.drawing-fallbacks{grid-template-columns:repeat(4,1fr)}.help-grid{grid-template-columns:1fr}.modal-layer{padding:10px}.modal{max-height:calc(100dvh - 20px)}.transition-banner{top:23%}.transition-banner p{font-size:14px}.flag-symbols button{font-size:25px}}
@media(max-width:440px){.hero-card{width:191px}.hero-avatar{width:30px;font-size:22px}.hero-title{font-size:11px}.hero-info>.eyebrow{font-size:7px}#hp-value{font-size:11px}.wave-card{width:89px}.sun-icon{display:none}.top-actions{display:grid;grid-template-columns:repeat(2,31px);gap:4px}.round-button{width:31px;height:31px;font-size:18px}#sound-toggle{display:none}.spell-panel{width:171px;bottom:145px;padding:9px}.spell-panel .small-chip{display:none}.inventory{width:163px;bottom:145px;padding:10px}.panel-heading{font-size:10px}.weapon-detail{font-size:8px}#weapon-slots{gap:5px}.action{min-width:153px;font-size:15px;padding:0 12px}.action kbd{display:none}.touch-pad{left:15px;bottom:277px}.toast{font-size:12px}.tutorial{font-size:10px}.keyboard-hint{font-size:7px}.spell-button{height:53px}.spell-symbol{font-size:22px}.spell-label{font-size:7px}}
@media(max-height:650px) and (min-width:761px){.topbar{top:10px}.hero-card{padding:8px 12px}.wave-card{padding-top:18px}.enemy-card{top:95px}.world-caption{display:none}.spell-panel{bottom:104px;padding:11px}.spell-button{height:53px}.spell-panel>p{display:none}.spell-grid{margin-top:9px}.inventory{bottom:104px}.touch-pad{bottom:270px}.bottom-bar{bottom:10px;gap:6px}.action{height:49px}.tutorial{min-height:35px;padding-top:4px;padding-bottom:4px}.toast{top:129px}.keyboard-hint{display:none}.canvas-wrap{height:180px}.drawing-modal p{margin-bottom:12px}.drawing-legend{display:none}.drawing-fallbacks .spell-button{height:43px}.modal{padding:20px}.modal h1{font-size:24px}}
@media(max-height:520px){.hero-card{padding:7px}.hero-avatar{display:none}.hero-title{margin:2px 0 5px}.wave-card{padding:7px 12px}.enemy-card{top:70px}.spell-panel{bottom:82px;width:177px;padding:9px}.spell-panel>p,.spell-panel .small-chip{display:none}.spell-grid{margin-top:8px;gap:4px}.spell-button{height:45px}.spell-symbol{font-size:21px}.inventory{bottom:81px;width:183px;padding:9px}.weapon-slot{height:42px}#weapon-slots{margin:7px 0}.weapon-slot>span{font-size:19px}.weapon-slot>small{font-size:8px}.touch-pad{bottom:213px;left:20px;transform:scale(.8);transform-origin:bottom left}.bottom-bar{bottom:8px;gap:5px}.action{height:43px;min-width:145px;font-size:14px}.tutorial{min-height:30px;font-size:9px;padding:2px 7px}.tutorial-bulb{display:none}.keyboard-hint,.save-status{display:none}.toast{top:107px;font-size:12px}.transition-banner{top:17%}.transition-banner>span{font-size:28px}.transition-banner h1{font-size:27px}.canvas-wrap{height:150px}.drawing-modal p{display:none}.drawing-toolbar{flex-wrap:nowrap}#recognition{min-width:0}.drawing-fallbacks{grid-template-columns:repeat(8,1fr)}.drawing-fallbacks .spell-button{height:42px}.modal{padding:16px}.modal h1{font-size:23px}.modal p{font-size:12px}.modal-layer{padding:8px}}
@media(prefers-reduced-motion:reduce){button,.toast,#hp-fill{transition:none}.loading-spider,.ending-icon{animation:none}}
/* Zaubersymbole bleiben auch auf kleinen Displays gut lesbar und groß antippbar. */
.spell-label{font-size:11px}.spell-panel>p{font-size:12px}.spell-button{min-height:58px}.spell-panel .panel-heading{font-size:14px}.weapon-detail{font-size:12px}.tutorial{font-size:13px}.keyboard-hint{font-size:11px}
@media(max-width:1050px){.spell-label{font-size:10px}.spell-panel .panel-heading{font-size:12px}.weapon-detail{font-size:11px}.tutorial{font-size:12px}.keyboard-hint{font-size:10px}}
@media(max-width:760px){.spell-panel{width:193px}.spell-label{font-size:10px}.spell-panel>p{font-size:10px}.spell-panel .panel-heading{font-size:12px}.spell-grid{gap:4px}.spell-symbol{font-size:25px}.spell-button{min-height:55px}.inventory{width:164px}.weapon-detail{font-size:9px}.tutorial{font-size:11px}.keyboard-hint{font-size:9px}.small-chip{display:none}}
@media(max-width:390px){.spell-panel{width:182px;right:7px}.inventory{width:153px;left:7px}.spell-label{font-size:9px}.spell-panel .panel-heading{font-size:11px}.primary-actions{gap:10px}.action{min-width:147px}.spell-panel>p{font-size:10px}}
@media(max-height:520px){.spell-panel{width:187px}.spell-button{min-height:45px}.spell-symbol{font-size:21px}.spell-label{font-size:9px}.tutorial{font-size:10px}.weapon-detail{font-size:9px}}