:root{color:#edf6ff;background:#050914;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{overscroll-behavior:none;scrollbar-gutter:stable;min-height:100svh;margin:0;line-height:1.4;overflow:hidden}button,input{touch-action:manipulation}.app{background:radial-gradient(circle at 50% 20%,#192842,#050914 60%);flex-direction:column;height:100vh;min-height:100svh;display:flex}header{z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#07101acc;border-bottom:1px solid #263a5c;flex-wrap:wrap;align-items:center;gap:18px;height:auto;min-height:52px;padding:8px 16px;display:flex;position:sticky;top:0;box-shadow:0 0 24px #000}header b{color:#9be7ff;letter-spacing:.16em;text-shadow:0 0 12px #4dabf7;text-wrap:balance;margin-right:auto}header b,h1,h2,.sub,.unit b,.unit span{text-wrap:balance}header span{color:#dffaff;white-space:normal;overflow-wrap:anywhere;background:#08111c;border:1px solid #ffffff12;border-radius:999px;min-width:0;padding:.28rem .52rem;line-height:1.2}main{flex:1;min-height:0;display:flex}#game{touch-action:none;flex:1;justify-content:center;align-items:center;min-width:0;max-width:100%;display:flex}canvas{border:1px solid #2b436a;border-radius:14px;box-shadow:0 0 30px #000}aside{scrollbar-gutter:stable;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#324b75 #081120e6;background:#081120e6;border-left:1px solid #263a5c;width:340px;padding:12px;overflow:auto}aside,main,#app{min-width:0}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}@media (width<=960px){main{flex-direction:column}#game{min-height:58svh}aside{border-top:1px solid #263a5c;border-left:0;width:100%;max-height:38svh}header{gap:10px}header b{width:100%;margin-right:0}header span{width:100%}}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}#app,main,aside{min-width: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{line-height:1.2;display:block}.classBtn span small{white-space:normal}.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;word-break:break-word;background:#f7f7f2;border:1px solid #b9b9b0;border-radius:6px;width:448px;max-width:min(448px,100vw - 16px);max-height:min(390px,100svh - 16px);padding:8px;font-size:13px;position:absolute;overflow:auto;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:8px}.spellPopup th{background:#eeeee8}.spellPopup button{color:#111827;white-space:normal;background:#fff;border-color:#bbb;margin:2px 0;padding:6px}.spellPopup button:disabled{opacity:.45}.spellPopup small{color:#4b5563;line-height:1.25}.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:repeat(3,1fr);gap:4px;display:grid}.spellPopup .hint{color:#374151;margin:6px 2px 0;font-size:11px}@media (width<=760px){.spellPopup{width:auto;max-width:calc(100vw - 16px);max-height:calc(100svh - 16px);top:8px!important;left:8px!important;right:8px!important}.specChoices{grid-template-columns:1fr}}.gameOver{z-index:30;color:#edf6ff;text-align:center;background:#090d18ee;border:1px solid #ff6b7a;border-radius:16px;min-width:260px;max-width:calc(100% - 16px);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}.prepOverlay{z-index:18;color:#edf6ff;text-align:center;background:#07101ae8;border:1px solid #9be7ff88;border-radius:14px;gap:4px;min-width:300px;max-width:calc(100% - 16px);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;max-width:calc(100% - 16px);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:normal;background:#061018f2;border:1px solid #9be7ff66;border-radius:10px;max-width:calc(100vw - 24px);padding:8px 11px;font-weight:850;line-height:1.15;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}button:focus-visible,input:focus-visible{outline-offset:2px;outline:2px solid #9be7ff}@media (width<=900px){body{overflow:auto}.app{height:auto;min-height:100svh}header{flex-wrap:wrap;gap:8px;height:auto;min-height:52px;padding:8px 10px}header b{order:2;width:100%;margin-right:0;font-size:.86rem}header span{white-space:normal;font-size:.82rem}main{flex-direction:column;overflow:visible}#game,.gameWrap{min-height:420px}aside{border-top:1px solid #263a5c;border-left:0;width:auto}.row{grid-template-columns:1fr}.spellPopup{max-height:calc(100svh - 16px);width:calc(100% - 16px)!important;max-width:none!important;position:fixed!important;top:8px!important;left:8px!important}.prepOverlay,.nameNotice{min-width:0;max-width:calc(100% - 16px)}}@media (width<=520px){header{gap:6px}header span{padding:.2rem .42rem;font-size:.74rem;line-height:1.25}.homeLink{padding:7px 9px}header b{letter-spacing:.08em}.classes{grid-template-columns:1fr}.classBtn{min-height:54px}.goldBox b{font-size:16px}.cooldowns label{font-size:11px}.prepOverlay{top:8px}.nameNotice{width:calc(100% - 16px)}.spellPopup{padding:7px;font-size:12px}.classBtn span{line-height:1.25}}aside::-webkit-scrollbar{width:10px}aside::-webkit-scrollbar-thumb{background:#1d536f;border-radius:99px}@media (width>=1051px){aside{scrollbar-gutter:stable}}.app,.gameWrap,.spellPopup,.gameOver,.prepOverlay,.nameNotice{position:relative}.app:before,.gameWrap:before,.spellPopup:before,.gameOver:before,.prepOverlay:before,.nameNotice:before{content:"";pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,#ffffff0a,#0000 42%);position:absolute;inset:0}.spellPopup{box-shadow:0 18px 42px #000c}.prepOverlay,.gameOver,.nameNotice{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.classes button{min-height:58px}@media (width<=760px){header,.classGroups{gap:8px}.spellPopup{max-width:calc(100vw - 16px)}.prepOverlay,.nameNotice{min-width:0}.homeLink{top:8px;left:8px}.homeLink:hover{transform:translateY(-1px)}.classes button{min-height:52px}.spellPopup{width:auto;max-width:none;max-height:calc(100svh - 16px);position:fixed;top:8px;left:8px}}@media (width<=520px){header span{padding:.22rem .46rem}.classBtn{min-height:54px}.classBtn img{width:38px;height:38px}.specChoices{grid-template-columns:1fr}.spellPopup{font-size:12px}.spellPopup button{padding:7px}.gameOver,.nameNotice{padding:16px}.prepOverlay{padding:9px 12px}}button,a{touch-action:manipulation}main{padding-bottom:clamp(40px,4vw,60px)}.homeLink{align-items:center;min-height:44px;display:inline-flex}@media (width<=760px){header{gap:8px}.homeLink{padding:7px 9px}.spellPopup{box-shadow:0 16px 36px #000c}}header span{line-height:1.25}.classBtn{align-items:center}.panel{scrollbar-gutter:stable}@media (width<=960px){.spellPopup table{max-width:100%;display:block;overflow:auto}.spellPopup th,.spellPopup td{white-space:normal}}@media (width<=520px){.row{grid-template-columns:1fr}.startBig{width:100%}}@media (pointer:coarse){button{min-height:48px}.classBtn{min-height:64px}}aside,.log{-webkit-overflow-scrolling:touch}footer span{overflow-wrap:anywhere}#app{overflow-x:hidden}header span,.classBtn span,.synergyBox li,.prepOverlay small,.nameNotice small{overflow-wrap:anywhere}.nameNotice,.gameOver,.prepOverlay{width:min(100%,420px)}.spellPopup{scrollbar-gutter:stable}aside{scrollbar-width:thin;scrollbar-color:#263a5c #081120}@media (width<=760px){.gameWrap{min-height:52svh}.nameNotice,.gameOver{inset:auto 8px 8px}}@media (pointer:coarse){.classBtn span{line-height:1.15}}@media (width<=520px){.spellPopup{width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:calc(100svh - 16px);padding:7px}.specChoices{grid-template-columns:1fr}}@media (width<=960px){header{gap:8px}header span{justify-content:flex-start;width:100%}}@media (width<=560px){.loadout button span{white-space:normal}.scoreRow span,.scoreRow small{white-space:normal;text-overflow:clip;overflow:visible}}.classBtn span small{overflow-wrap:anywhere;white-space:normal}button,input,.homeLink{min-height:44px}button,a,input{touch-action:manipulation}@media (width<=960px){header{gap:8px}header span{white-space:normal;justify-content:flex-start;width:100%}main{flex-direction:column}#game{min-height:56svh}aside{border-top:1px solid #263a5c;border-left:0;width:100%;max-height:38svh}}header b,header span,.hint,.goldBox,.players .p,.loadout button span{text-wrap:balance}@media (width<=520px){.hint,.goldBox,.players .p{line-height:1.35}header{align-items:flex-start}.classGroups{gap:8px}.classBtn{min-height:60px}.spellPopup{max-width:calc(100vw - 16px);max-height:calc(100svh - 16px)}}