:root{--grund: #10131a;--flaeche: #171b24;--flaeche-2: #1e2430;--tinte: #dde3ec;--tinte-leise: #8b94a6;--linie: #2a3240;--gold: #c9a227;--blut: #c25a53;--stahl: #6fa3bc;--gruen: #6f9a63}*{box-sizing:border-box}body{margin:0;background:var(--grund);color:var(--tinte);font:400 14px/1.5 ui-sans-serif,system-ui,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none}canvas{display:block;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.beitritt{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:var(--grund);text-align:center;padding:1.5rem}.beitritt h1{font:700 clamp(2.5rem,9vw,4rem)/1 Georgia,serif;letter-spacing:.04em;margin:0}.unterzeile{color:var(--tinte-leise);margin:0 0 1rem;font-style:italic}.beitritt form{display:flex;flex-direction:column;gap:.75rem;width:min(22rem,100%)}.beitritt input,.beitritt button{font:inherit;padding:.7rem .9rem;background:var(--flaeche);color:var(--tinte);border:1px solid var(--linie);border-radius:3px}.beitritt button{background:var(--gold);color:#10131a;border-color:var(--gold);font-weight:600;cursor:pointer}.beitritt button:hover{filter:brightness(1.1)}.rollen{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.rollen label{padding:.55rem;border:1px solid var(--linie);border-radius:3px;cursor:pointer;background:var(--flaeche);font-size:.9rem}.rollen input{display:none}.rollen label.gewaehlt{border-color:var(--gold);color:var(--gold)}.hinweis{color:var(--tinte-leise);font-size:.8rem;margin-top:1.5rem}.verborgen{display:none!important}#oberflaeche{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.rahmen-reihe{position:absolute;top:1rem;left:1rem;display:flex;gap:.75rem}.rahmen{width:13rem;padding:.5rem .65rem;background:color-mix(in srgb,var(--flaeche) 88%,transparent);border:1px solid var(--linie);border-radius:3px}.rahmen.leer{visibility:hidden}.rahmen .kopf{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:.3rem}.rahmen .kopf small{color:var(--tinte-leise)}.balken{height:.55rem;background:var(--flaeche-2);border-radius:2px;overflow:hidden}.balken i{display:block;height:100%;background:var(--gruen);transition:width .12s linear}.balken.ressource{height:.3rem;margin-top:.2rem}.balken.ressource i{background:var(--stahl)}.gruppe{position:absolute;top:6.5rem;left:1rem;display:flex;flex-direction:column;gap:.35rem}.gruppe .rahmen{width:10rem;padding:.35rem .5rem}.castleiste{position:absolute;left:50%;bottom:8rem;transform:translate(-50%);width:18rem;height:1.4rem;background:var(--flaeche-2);border:1px solid var(--linie);border-radius:3px;overflow:hidden}.castleiste b{position:absolute;inset:0 auto 0 0;background:var(--gold);opacity:.75}.castleiste span{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:.8rem;z-index:1}.aktionsleiste{position:absolute;left:50%;bottom:1.5rem;transform:translate(-50%);display:flex;gap:.4rem;pointer-events:auto}.taste{width:3.2rem;height:3.2rem;border-radius:3px;background:var(--flaeche);border:1px solid var(--linie);display:grid;place-items:center;position:relative;cursor:pointer;font-size:.72rem;text-align:center;line-height:1.15;padding:.2rem}.taste .nummer{position:absolute;top:2px;left:4px;font-size:.62rem;color:var(--tinte-leise)}.taste.gesperrt{opacity:.4}.taste.an{border-color:var(--gold);color:var(--gold)}.verlauf{position:absolute;right:1rem;bottom:1.5rem;width:17rem;display:flex;flex-direction:column-reverse;gap:.15rem;font-size:.78rem;color:var(--tinte-leise)}.verlauf div{opacity:.9}.verlauf .schaden b{color:var(--blut)}.verlauf .heilung b{color:var(--gruen)}.verlauf .abgewiesen{color:var(--blut)}