:root{color:#edf6ff;background:#050914;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;overflow:hidden}.app{background:radial-gradient(circle at 50% 20%,#192842,#050914 60%);flex-direction:column;height:100vh;display:flex}header{background:#07101acc;border-bottom:1px solid #263a5c;align-items:center;gap:18px;height:52px;padding:0 16px;display:flex;box-shadow:0 0 24px #000}header b{color:#9be7ff;letter-spacing:.16em;text-shadow:0 0 12px #4dabf7;margin-right:auto}main{flex:1;min-height:0;display:flex}#game{flex:1;justify-content:center;align-items:center;min-width:0;display:flex}canvas{border:1px solid #2b436a;border-radius:14px;box-shadow:0 0 30px #000}aside{background:#081120e6;border-left:1px solid #263a5c;width:340px;padding:12px;overflow:auto}h2{color:#9be7ff;letter-spacing:.12em;margin:14px 0 8px;font-size:13px}button,input{color:#edf6ff;width:100%;font:inherit;background:#0d1830;border:1px solid #324b75;border-radius:10px;margin:4px 0;padding:9px 10px}button{cursor:pointer;text-align:left}button:hover{border-color:#9be7ff;box-shadow:0 0 12px #4dabf755}button:disabled{opacity:.4;cursor:not-allowed}.row{grid-template-columns:1fr 90px 70px;gap:5px;display:grid}.players{gap:5px;display:grid}.p{background:#0b1529;border:1px solid #324b75;border-radius:8px;padding:6px}.red{color:#ff6b7a}.yellow{color:#ffd166}.green{color:#58d68d}.blue{color:#4dabf7}.classes{grid-template-columns:1fr 1fr;gap:6px;display:grid}.classes button small,button small{color:#9aabc4;margin-top:2px;font-size:11px;display:block}.hint{color:#9aabc4}.app:before{content:"";pointer-events:none;mix-blend-mode:screen;opacity:.25;background:linear-gradient(#ffffff05 1px,#0000 1px) 0 0/100% 4px;position:fixed;inset:0}.startBig{text-align:center;background:linear-gradient(90deg,#244f35,#1d6b45);font-weight:800;box-shadow:0 0 18px #58d68d44;border-color:#58d68d!important}.startBig:before{content:"Host: ";color:#9be7ff}.players:empty:after{content:"Lobby wird erstellt…";color:#9aabc4}.classes button:first-child{box-shadow:0 0 14px #6ee06e55}.goldBox{color:#ffd166;background:#2a210855;border:1px solid #ffd16666;border-radius:10px;margin:6px 0 8px;padding:8px 10px}.goldBox b{font-size:18px}.classBtn{text-align:left;align-items:center;gap:8px;min-height:58px;padding:6px;display:flex}.classBtn img{object-fit:cover;border-radius:50%;width:42px;height:42px;box-shadow:0 0 10px #000}.classBtn span{display:block}.classBtn:hover img{transition:all .12s;transform:scale(1.06)}.classGroups{gap:10px;display:grid}.classGroup{background:#07101a88;border:1px solid #243b5a;border-radius:12px;padding:8px}.classGroup h3{color:#9be7ff;letter-spacing:.08em;margin:0 0 6px;font-size:12px}.classBtn.locked{opacity:.38;filter:grayscale(.85);cursor:not-allowed;background:#111827}.classBtn.locked:hover{box-shadow:none;border-color:#324b75!important}.classBtn.selected:not(.locked){background:#10223d;box-shadow:0 0 16px #9be7ff77}.invalid{border-color:#ff6b7a!important;box-shadow:0 0 10px #ff6b7a55!important}.cooldowns{gap:6px;margin:8px 0;display:grid}.cooldowns label{background:#0a1426;border:1px solid #324b75;border-radius:8px;padding:5px 8px;font-size:12px;display:block;position:relative;overflow:hidden}.cooldowns label span{float:right;color:#9aabc4}.cooldowns i{background:#64d8ff;height:3px;position:absolute;bottom:0;left:0;box-shadow:0 0 8px #64d8ff}.cooldowns .ultiBar{background:#ffb3d9;box-shadow:0 0 8px #ffb3d9}.cooldowns .xpBar{background:#ffd166;box-shadow:0 0 8px #ffd166}.synergyBox{background:#09241566;border:1px solid #58d68d66;border-radius:12px;margin:10px 0;padding:9px}.synergyBox b{color:#58d68d}.synergyBox ul{color:#d8ffe8;margin:6px 0 0 18px;padding:0;font-size:12px}.synergyBox li{margin:3px 0}.gameWrap{flex:1;justify-content:center;align-items:center;min-width:0;display:flex;position:relative}.spellPopup{z-index:20;color:#111827;background:#f7f7f2;border:1px solid #b9b9b0;border-radius:6px;width:340px;max-width:36vw;padding:8px;font-size:13px;position:absolute;box-shadow:0 12px 32px #000b}.spellPopup table{border-collapse:collapse;width:100%}.spellPopup th,.spellPopup td{text-align:left;vertical-align:top;border:1px solid #d4d4cc;padding:6px}.spellPopup th{background:#eeeee8}.spellPopup button{color:#111827;background:#fff;border-color:#bbb;margin:2px 0;padding:6px}.spellPopup button:disabled{opacity:.45}.spellPopup small{color:#4b5563}.popupClose{top:4px;right:6px;text-align:center!important;color:#fff!important;background:#111827!important;border-radius:50%!important;width:24px!important;height:24px!important;padding:0!important;position:absolute!important}.specChoices{grid-template-columns:1fr 1fr 1fr;gap:4px;display:grid}.spellPopup .hint{color:#374151;margin:6px 2px 0;font-size:11px}.gameOver{z-index:30;color:#edf6ff;text-align:center;background:#090d18ee;border:1px solid #ff6b7a;border-radius:16px;min-width:260px;padding:18px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 20px 50px #000}.gameOver b{color:#ff6b7a;letter-spacing:.08em;margin-bottom:12px;font-size:22px;display:block}.spellPopup{max-height:min(390px,100% - 16px);overflow:auto;width:448px!important;max-width:min(448px,100% - 16px)!important}.spellPopup th,.spellPopup td{padding:8px}.spellPopup button{white-space:normal}.specChoices{grid-template-columns:1fr!important}.prepOverlay{z-index:18;color:#edf6ff;text-align:center;background:#07101ae8;border:1px solid #9be7ff88;border-radius:14px;gap:4px;min-width:300px;padding:10px 14px;display:grid;position:absolute;top:16px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #000a}.prepOverlay b{color:#9be7ff;letter-spacing:.08em}.prepOverlay small{color:#9aabc4}.nameNotice{z-index:25;color:#edf6ff;text-align:center;background:#090d18ee;border:1px solid #ffd166aa;border-radius:16px;min-width:320px;padding:16px 18px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 18px 45px #000b}.nameNotice b{color:#ffd166;letter-spacing:.08em;margin-bottom:6px;font-size:20px;display:block}.nameNotice span{display:block}.nameNotice small{color:#9aabc4;margin-top:6px;display:block}.homeLink{color:#dffaff;white-space:nowrap;background:#061018f2;border:1px solid #9be7ff66;border-radius:10px;padding:8px 11px;font-weight:850;text-decoration:none;box-shadow:0 0 18px #4dabf722}.homeLink:hover,.homeLink:focus-visible{border-color:#9be7ff;outline:none;box-shadow:0 0 22px #4dabf744}