*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#07111f;color:#f1f4f7}body{background:radial-gradient(circle at top,#0b2d5c 0,#08182e 42%,#040b16 100%) fixed}.shell{width:min(1180px,100%);margin:auto;padding:16px}.card{background:rgba(8,23,43,.94);border:1px solid #1f5f9f;border-radius:14px;box-shadow:0 14px 40px #0008}.auth{max-width:520px;margin:6vh auto;padding:24px}.brand{text-align:center;margin-bottom:18px}.brand h1{margin:6px 0;color:#fff}.brand p{color:#b8d7f5}.tabs{display:flex;gap:8px;margin-bottom:16px}.tabs button,.btn{border:0;border-radius:9px;padding:11px 16px;font-weight:700;cursor:pointer;background:#1769aa;color:white}.tabs button.secondary,.btn.secondary{background:#173653}.field{margin:12px 0}.field label{display:block;margin-bottom:6px;color:#c8def3}.field input,.field select,.field textarea{width:100%;padding:11px;border-radius:8px;border:1px solid #2c6292;background:#071a2d;color:#fff}.notice{padding:10px 12px;border-radius:8px;background:#123d68;margin:10px 0}.chat-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px;height:calc(100vh - 32px)}.chat-main{display:grid;grid-template-rows:auto 1fr auto;min-height:0}.topbar{padding:13px 16px;border-bottom:1px solid #1c507f;display:flex;align-items:center;justify-content:space-between;gap:10px}.messages{padding:14px;overflow:auto;min-height:0}.msg{padding:8px 10px;margin:5px 0;border-radius:10px;background:#0d2741;word-break:break-word}.msg.mine{background:#123f69}.msg .meta{font-size:12px;color:#aac9e5;margin-bottom:4px}.composer{display:flex;gap:8px;padding:12px;border-top:1px solid #1c507f}.composer input{flex:1;padding:12px;border-radius:9px;border:1px solid #2c6292;background:#061421;color:#fff}.sidebar{padding:14px;overflow:auto}.user{padding:9px;border-bottom:1px solid #173f64}.online{display:inline-block;width:9px;height:9px;border-radius:50%;background:#46d17d;margin-right:7px}.navlinks a{color:#fff;text-decoration:none;margin-left:10px}.mobile-users{display:none}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:9px;border-bottom:1px solid #214e74;text-align:left}.muted{color:#aac7df;font-size:13px}@media(max-width:760px){.shell{padding:0}.chat-layout{display:block;height:100dvh}.chat-main{height:100dvh;border-radius:0}.sidebar{display:none;position:fixed;z-index:20;inset:0 0 0 25%;background:#07182a}.sidebar.open{display:block}.mobile-users{display:inline-block}.topbar{padding:10px}.composer{padding:8px}.composer .btn{padding:10px}.admin-grid{grid-template-columns:1fr}.auth{margin:0;min-height:100dvh;border-radius:0}}
/* Compact radio player and categorized smileys */
.radio-player{margin:0 0 10px;padding:8px 10px;overflow:hidden;max-width:520px}
.player-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;font-size:.9rem}
.player-badge{font-size:.65rem;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.1)}
.radio-player .stream-audio{display:block;width:100%;height:36px}
.radio-player .azura-embed{display:block;width:100%;height:92px;border:0;border-radius:8px;background:#111}
.smiley-panel{display:none;border-top:1px solid rgba(255,255,255,.09);padding:10px 12px;background:rgba(0,0,0,.18)}
.smiley-panel.open{display:block}.smiley-tabs{display:flex;flex-wrap:wrap;gap:6px;overflow-x:visible;padding-bottom:8px}.smiley-tabs button{border:0;border-radius:999px;padding:6px 10px;cursor:pointer;white-space:nowrap;background:rgba(255,255,255,.08);color:inherit}.smiley-tabs button.active{background:rgba(255,255,255,.2)}.smiley-list{display:flex;gap:6px;flex-wrap:wrap;max-height:125px;overflow:auto}.smiley{font-size:1.45rem;line-height:1;border:0;background:transparent;border-radius:8px;padding:7px;cursor:pointer}.smiley:hover{background:rgba(255,255,255,.12)}.composer{grid-template-columns:minmax(0,1fr) auto auto}
@media(max-width:700px){.radio-player{margin:6px;max-width:none;padding:7px 8px}.radio-player .azura-embed{height:86px}.radio-player .stream-audio{height:34px}.smiley-list{max-height:115px}.composer{gap:6px}.composer .btn{padding-left:11px;padding-right:11px}}
/* Smiley upload administration */
.admin-card{padding:16px}.admin-section{margin-top:16px}.form-actions{margin-top:12px}.notice.error{background:#154d7d;border:1px solid #2e79b8}.sidebar-head{display:flex;justify-content:space-between}.smiley-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.smiley-admin-item{padding:12px;border:1px solid #214e74;border-radius:10px;background:#081a2d}.smiley-admin-item>img{display:block;width:64px;height:64px;object-fit:contain;margin:0 auto 10px;background:#fff1;border-radius:8px}.smiley-admin-actions{display:flex;gap:8px;margin-top:10px}.btn.danger{background:#155a94}.user-admin-form{display:flex;gap:6px;min-width:330px}.smiley img{display:block;width:30px;height:30px;object-fit:contain}.chat-smiley{display:inline-block;width:32px;height:32px;object-fit:contain;vertical-align:middle;margin:0 2px}.msg .text{white-space:pre-wrap}
@media(max-width:600px){.smiley-admin-grid{grid-template-columns:1fr}.chat-smiley{width:28px;height:28px}}
/* Schreibleiste dauerhaft sichtbar */
html,body{height:100%;overflow:hidden}
body{min-height:100dvh}
.shell{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.radio-player{flex:0 0 auto}
.chat-layout{flex:1 1 auto;min-height:0;height:auto}
.chat-main{grid-template-rows:auto minmax(0,1fr) auto auto;min-height:0;overflow:hidden}
.messages{min-height:0;overscroll-behavior:contain;padding-bottom:18px}
.smiley-panel{position:relative;z-index:4;max-height:190px;overflow:hidden}
.composer{position:sticky;bottom:0;z-index:5;flex:0 0 auto;background:rgba(8,23,43,.99);padding-bottom:max(12px,env(safe-area-inset-bottom));box-shadow:0 -8px 22px rgba(0,0,0,.3)}
.composer input{min-width:0}
.sidebar{min-height:0}
@media(max-width:760px){
html,body{height:100%;overflow:hidden}
.shell{height:100dvh;min-height:100dvh;padding:0}
.radio-player{margin:0;border-radius:0;max-width:none}
.chat-layout{height:auto;min-height:0;flex:1 1 auto;display:block}
.chat-main{height:100%;min-height:0;border-radius:0;grid-template-rows:auto minmax(0,1fr) auto auto}
.composer{padding:8px 8px max(8px,env(safe-area-inset-bottom));}
.messages{padding-bottom:14px}
.smiley-panel{max-height:170px}
}
/* Extra grosse Schrift fuer den kompletten Chat – Desktop und Mobil */
body.chat-page,
body.chat-page .chat-layout,
body.chat-page .chat-main,
body.chat-page .sidebar{font-size:20px!important}
body.chat-page .messages .msg .text,
body.chat-page .messages .msg .text *{font-size:24px!important;line-height:1.6!important}
body.chat-page .messages .msg .meta,
body.chat-page .message-username,
body.chat-page .message-time{font-size:18px!important;line-height:1.45!important}
body.chat-page .topbar,
body.chat-page .topbar strong,
body.chat-page .topbar .muted,
body.chat-page .topbar a,
body.chat-page .topbar button,
body.chat-page .topbar select{font-size:18px!important}
body.chat-page .sidebar-head,
body.chat-page .sidebar h2,
body.chat-page #users .user,
body.chat-page #users .user-display-name,
body.chat-page #users .muted,
body.chat-page #users button{font-size:18px!important;line-height:1.4!important}
body.chat-page .radio-player,
body.chat-page .radio-player *,
body.chat-page .compact-player #nowPlayingTitle,
body.chat-page .compact-player .moderator-line,
body.chat-page .compact-player .now-playing-label{font-size:16px!important}
body.chat-page .format-toolbar,
body.chat-page .format-toolbar label,
body.chat-page .format-toolbar select,
body.chat-page .format-toolbar button{font-size:17px!important}
body.chat-page .composer input#message{font-size:22px!important;min-height:52px!important}
body.chat-page .composer button,
body.chat-page .composer .btn{font-size:18px!important;min-height:50px!important;padding:12px 18px!important}
body.chat-page .games-tab-menu button,
body.chat-page .smiley-tabs button{font-size:18px!important}
body.chat-page .status-control,
body.chat-page .chat-status,
body.chat-page .send-status{font-size:16px!important}
@media(max-width:760px){
body.chat-page,body.chat-page .chat-layout,body.chat-page .chat-main,body.chat-page .sidebar{font-size:18px!important}
body.chat-page .messages .msg .text,body.chat-page .messages .msg .text *{font-size:22px!important}
body.chat-page .messages .msg .meta,body.chat-page .message-username,body.chat-page .message-time{font-size:17px!important}
body.chat-page .topbar,body.chat-page .topbar strong,body.chat-page .topbar .muted,body.chat-page .topbar a,body.chat-page .topbar button,body.chat-page .topbar select{font-size:16px!important}
body.chat-page .composer input#message{font-size:20px!important}
body.chat-page .composer button,body.chat-page .composer .btn{font-size:16px!important;padding:10px 13px!important}
}
/* Uploadbare Login- und Chatgrafiken */
.login-page{background-image:linear-gradient(rgba(4,11,22,.58),rgba(4,11,22,.78)),var(--login-bg,none),radial-gradient(circle at top,#0b2d5c 0,#08182e 42%,#040b16 100%);background-size:cover;background-position:center;background-attachment:fixed}
.login-page .auth{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.chat-page .messages{position:relative;background-image:linear-gradient(rgba(7,17,31,.78),rgba(7,17,31,.78)),var(--chat-bg,none);background-size:cover;background-position:center;background-repeat:no-repeat}
.chat-page .messages>.msg{position:relative;z-index:1}
.design-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.design-upload-box{padding:14px;border:1px solid #214e74;border-radius:10px;background:#081a2d}.design-preview{display:block;width:100%;height:160px;object-fit:cover;border-radius:9px;border:1px solid #2c6292;background:#080a0d}.design-empty{height:160px;display:grid;place-items:center;border:1px dashed #2c6292;border-radius:9px;color:#aac7df;background:#061421}.inline-delete{display:inline-block;margin-top:8px}.design-upload-box h3{margin-top:0}
@media(max-width:760px){.design-upload-grid{grid-template-columns:1fr}.design-preview,.design-empty{height:135px}.login-page{background-attachment:scroll}}
/* Adminbereich darf unabhängig vom fixierten Chat vollständig scrollen */
html:has(body.admin-page),html:has(body.admin-page) body{height:auto;min-height:100%;overflow:auto}
body.admin-page{min-height:100vh;overflow-y:auto;overflow-x:hidden;background-attachment:fixed}
body.admin-page .admin-shell{height:auto;min-height:100vh;display:block;overflow:visible;padding-bottom:40px}
body.admin-page .admin-grid{align-items:start}
body.admin-page .admin-card{min-width:0}
/* Sichere Anzeige der hochgeladenen Hintergründe */
.login-page{background-repeat:no-repeat;background-color:#040b16}
.chat-page .messages{background-color:#07111f;background-attachment:local}
.design-preview{background-color:#061421}
@media(max-width:760px){body.admin-page .admin-shell{padding:10px 10px 36px}.user-admin-form{min-width:280px}}
/* Grafiken automatisch und proportional an ihre Bereiche anpassen */
.login-page{
background-image:radial-gradient(circle at top,#0b2d5c 0,#08182e 42%,#040b16 100%);
background-size:cover;
background-position:center;
}
.login-page .auth{
position:relative;
overflow:hidden;
isolation:isolate;
background-color:rgba(8,23,43,.94);
}
.login-page .auth::before{
content:"";
position:absolute;
inset:0;
z-index:-2;
background-image:var(--login-bg,none);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.login-page .auth::after{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:linear-gradient(rgba(6,18,32,.55),rgba(6,18,32,.78));
pointer-events:none;
}
.chat-page .messages{
isolation:isolate;
background-image:none;
overflow:auto;
}
.chat-page .messages::before{
content:"";
position:absolute;
inset:0;
z-index:0;
background-image:var(--chat-bg,none);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
pointer-events:none;
}
.chat-page .messages::after{
content:"";
position:absolute;
inset:0;
z-index:0;
background:rgba(7,17,31,.72);
pointer-events:none;
}
.chat-page .messages>.msg{position:relative;z-index:1}
.design-preview{
width:100%;
height:clamp(135px,22vw,220px);
object-fit:contain;
object-position:center;
}
@media(max-width:760px){
.login-page .auth{min-height:100dvh}
.login-page .auth::before,.chat-page .messages::before{background-size:cover;background-position:center}
}
@media(orientation:portrait) and (max-width:760px){
.login-page .auth::before{background-size:cover}
.chat-page .messages::before{background-size:cover}
}
/* Zuverlaessige Bildanzeige ueber design-image.php */
body.login-page .auth::before,
body.chat-page .messages::before{
opacity:1;
visibility:visible;
display:block;
}
body.login-page .auth::before{background-color:transparent}
body.chat-page .messages::before{background-color:transparent}
/* Sichtbare echte Bildebenen statt verdeckter CSS-Pseudoelemente */
.login-page .auth{position:relative;isolation:isolate;overflow:hidden}
.login-design-image{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
z-index:0;
pointer-events:none;
}
.login-page .auth::before,.login-page .auth::after{display:none!important;content:none!important}
.login-page .auth>*:not(.login-design-image){position:relative;z-index:2}
.login-page .auth{background:rgba(8,23,43,.62)}
.login-page .auth:has(.login-design-image){box-shadow:inset 0 0 0 9999px rgba(5,15,27,.38),0 14px 40px #0008}
.chat-page .messages{position:relative;isolation:isolate;background:#07111f;overflow:auto}
.chat-page .messages::before,.chat-page .messages::after{display:none!important;content:none!important}
.chat-design-image{
position:sticky;
top:0;
display:block;
width:100%;
height:100%;
min-height:100%;
object-fit:cover;
object-position:center;
z-index:0;
pointer-events:none;
margin-bottom:-100%;
opacity:.55;
}
.chat-page .messages>.msg{position:relative;z-index:2}
@media(max-width:760px){
.login-design-image,.chat-design-image{object-position:center center}
}
/* Login-Hintergrund im Aussenbereich und breiter Chat */
body.login-page{
background-image:
linear-gradient(rgba(4,11,22,.48),rgba(4,11,22,.72)),
var(--login-page-bg,none),
radial-gradient(circle at top,#0b2d5c 0,#08182e 42%,#040b16 100%) !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
background-attachment:fixed !important;
}
body.login-page .shell{
width:100%;
min-height:100dvh;
display:grid;
place-items:center;
padding:24px;
overflow:auto;
}
body.login-page .auth{
width:min(520px,100%);
min-height:auto;
margin:0;
background:rgba(8,23,43,.84) !important;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
overflow:visible;
}
body.login-page .auth::before,
body.login-page .auth::after,
body.login-page .login-design-image{
display:none !important;
content:none !important;
}
body.chat-page .shell{
width:min(1800px,96vw);
max-width:none;
padding:12px;
}
body.chat-page .chat-layout{
grid-template-columns:minmax(0,1fr) clamp(250px,18vw,330px);
gap:12px;
}
body.chat-page .radio-player{
max-width:620px;
}
@media(max-width:760px){
body.login-page{background-attachment:scroll !important}
body.login-page .shell{padding:12px;place-items:center}
body.login-page .auth{min-height:auto;border-radius:14px}
body.chat-page .shell{width:100%;padding:0}
body.chat-page .chat-layout{display:block}
}
/* Smiley-Leiste nach breitem Layout wieder dauerhaft erreichbar */
body.chat-page .chat-main{
grid-template-rows:auto minmax(0,1fr) auto auto;
}
body.chat-page .smiley-panel{
display:none;
position:relative;
z-index:8;
flex:0 0 auto;
width:100%;
max-height:190px;
overflow:hidden;
background:rgba(7,22,39,.98);
border-top:1px solid rgba(255,255,255,.12);
}
body.chat-page .smiley-panel.open{display:block}
body.chat-page .smiley-tabs,
body.chat-page .smiley-list{position:relative;z-index:9}
body.chat-page .smiley-list{min-height:48px}
body.chat-page .smiley{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:42px;
min-height:42px;
}
body.chat-page .composer{position:relative;z-index:10}
body.chat-page #smileyToggle{flex:0 0 auto;min-width:46px;font-size:20px}
@media(max-width:760px){
body.chat-page .chat-main{grid-template-rows:auto minmax(0,1fr) auto auto}
body.chat-page .smiley-panel{max-height:175px;padding:8px}
body.chat-page .smiley-list{max-height:104px;overflow:auto}
body.chat-page .smiley{min-width:40px;min-height:40px;padding:5px}
}
/* Standard-Smileys serverseitig ausgeben, damit die Leiste nie leer bleibt */
body.chat-page .smiley-lists{position:relative;z-index:9}
body.chat-page .smiley-category[hidden]{display:none!important}
body.chat-page .smiley-category:not([hidden]){display:flex}
body.chat-page .smiley button img,body.chat-page button.smiley img{pointer-events:none}
/* Robuster Smiley-Fix: Standard-Smileys immer sichtbar und anklickbar */
body.chat-page .smiley-panel{
display:block !important;
visibility:visible !important;
opacity:1 !important;
min-height:112px;
max-height:210px;
overflow:hidden;
flex-shrink:0;
}
body.chat-page .smiley-lists{
display:block !important;
min-height:52px;
}
body.chat-page .smiley-category:not([hidden]){
display:flex !important;
visibility:visible !important;
opacity:1 !important;
}
body.chat-page .smiley-tabs button,
body.chat-page button.smiley{
pointer-events:auto !important;
touch-action:manipulation;
}
body.chat-page button.smiley{
color:#fff;
font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
}
body.chat-page .smiley-panel:not(.open){display:none !important}
@media(max-width:760px){
body.chat-page .smiley-panel{min-height:104px;max-height:178px}
}
/* Schreib- und Sendefunktion robust sichtbar halten */
body.chat-page .composer{align-items:center;position:relative!important;pointer-events:auto!important}
body.chat-page .composer input#message{position:relative;z-index:12;pointer-events:auto!important;user-select:text!important;-webkit-user-select:text!important}
body.chat-page .composer button{position:relative;z-index:12;pointer-events:auto!important}
.send-status{position:absolute;left:12px;right:12px;bottom:2px;font-size:11px;color:#d4ebff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
body.chat-page .composer{padding-bottom:max(18px,env(safe-area-inset-bottom))}
@media(max-width:760px){.send-status{left:8px;right:8px}.composer input#message{font-size:16px}}
/* Moderator-Status */
.status-control{display:inline-flex;align-items:center;gap:6px;margin-left:8px;color:#c8def3;font-size:12px}.status-control select{max-width:130px;padding:7px 28px 7px 9px;border:1px solid #2c6292;border-radius:8px;background:#071a2d;color:#fff;font-weight:700}.chat-status{display:inline-block;margin-left:7px;padding:3px 7px;border-radius:999px;font-size:11px;font-weight:800;line-height:1.2;background:#173653;color:#fff}.status-online{background:#17683a}.status-chatwache{background:#916c00}.status-abwesend{background:#656565}.status-techniker{background:#145f8c}.status-admin{background:#256ea8}.status-onair{background:#1476c9;color:#fff;animation:onairBlink 1s steps(2,end) infinite;box-shadow:0 0 10px rgba(0,128,255,.75)}@keyframes onairBlink{0%,48%{opacity:1;transform:scale(1)}49%,100%{opacity:.35;transform:scale(.97)}}@media(max-width:760px){.status-control span{display:none}.status-control{margin-left:0}.status-control select{max-width:112px;padding:7px}}
/* Hochgeladene animierte GIF-Smileys deutlich groesser anzeigen */
body.chat-page button.smiley .custom-smiley-image{
width:38px;
height:38px;
max-width:100%;
object-fit:contain;
}
body.chat-page button.smiley .gif-smiley-image{
width:72px;
height:72px;
object-fit:contain;
}
body.chat-page button.smiley:has(.gif-smiley-image){
min-width:82px;
min-height:82px;
padding:5px;
}
body.chat-page .chat-smiley.chat-gif{
width:auto;
height:auto;
max-width:min(220px,70vw);
max-height:220px;
object-fit:contain;
vertical-align:middle;
margin:4px 3px;
border-radius:8px;
}
body.chat-page .smiley-panel{
max-height:300px;
}
body.chat-page .smiley-list{
max-height:205px;
align-items:center;
}
@media(max-width:760px){
body.chat-page button.smiley .gif-smiley-image{
width:60px;
height:60px;
}
body.chat-page button.smiley:has(.gif-smiley-image){
min-width:68px;
min-height:68px;
}
body.chat-page .chat-smiley.chat-gif{
max-width:min(160px,62vw);
max-height:160px;
}
body.chat-page .smiley-panel{max-height:250px}
body.chat-page .smiley-list{max-height:165px}
}
/* Oberen Chatbereich dauerhaft sichtbar halten */
html,body.chat-page{height:100%;overflow:hidden}
body.chat-page{min-height:100dvh;padding:0}
body.chat-page .shell{
height:100dvh;
max-height:100dvh;
display:grid;
grid-template-rows:auto minmax(0,1fr);
align-content:stretch;
overflow:hidden;
padding-top:max(12px,env(safe-area-inset-top));
padding-bottom:max(12px,env(safe-area-inset-bottom));
}
body.chat-page .radio-player{
position:relative;
z-index:25;
flex:none;
min-height:0;
}
body.chat-page .chat-layout{
height:100%;
min-height:0;
overflow:hidden;
}
body.chat-page .chat-main,
body.chat-page .sidebar{
height:100%;
min-height:0;
}
body.chat-page .chat-main{
overflow:hidden;
}
body.chat-page .topbar{
position:relative;
z-index:24;
flex:0 0 auto;
min-height:64px;
background:rgba(8,23,43,.99);
}
body.chat-page .messages{
min-height:0;
overflow-y:auto;
overflow-x:hidden;
}
@media(max-width:760px){
body.chat-page .shell{
height:100dvh;
max-height:100dvh;
padding-top:max(6px,env(safe-area-inset-top));
padding-bottom:0;
}
body.chat-page .chat-layout{height:100%;min-height:0}
body.chat-page .chat-main{height:100%;min-height:0}
body.chat-page .topbar{min-height:58px;padding-top:10px}
body.chat-page .radio-player{margin:0 6px 6px}
}
/* Korrekte Darstellung hochgeladener GIFs im Nachrichtenbereich */
body.chat-page .msg .text{
overflow:visible;
line-height:1.35;
}
body.chat-page .msg .text .custom-chat-image{
display:inline-block;
width:auto !important;
height:auto !important;
max-width:96px;
max-height:96px;
object-fit:contain;
vertical-align:middle;
}
body.chat-page .msg .text .chat-gif{
display:block;
width:auto !important;
height:auto !important;
max-width:min(360px,90%);
max-height:360px;
object-fit:contain;
margin:8px 0 4px;
border-radius:10px;
background:transparent;
}
body.chat-page button.smiley.smiley-gif-button{
min-width:88px;
min-height:88px;
display:grid;
place-items:center;
}
body.chat-page button.smiley.smiley-gif-button .gif-smiley-image{
display:block;
width:auto !important;
height:auto !important;
max-width:78px;
max-height:78px;
object-fit:contain;
}
@media(max-width:760px){
body.chat-page .msg .text .chat-gif{
max-width:min(260px,88vw);
max-height:260px;
}
body.chat-page button.smiley.smiley-gif-button{
min-width:72px;
min-height:72px;
}
body.chat-page button.smiley.smiley-gif-button .gif-smiley-image{
max-width:64px;
max-height:64px;
}
}
/* Nachrichtenbereich eigenstaendig scrollbar; neue GIFs bleiben sichtbar */
body.chat-page .chat-main{
min-height:0 !important;
overflow:hidden !important;
}
body.chat-page .messages{
min-height:0 !important;
height:100%;
overflow-y:scroll !important;
overflow-x:hidden !important;
scrollbar-gutter:stable;
overscroll-behavior-y:contain;
-webkit-overflow-scrolling:touch;
touch-action:pan-y;
scroll-behavior:smooth;
padding-bottom:28px;
}
body.chat-page .messages .msg:last-of-type{
margin-bottom:12px;
}
body.chat-page .msg .text .chat-gif{
width:auto !important;
height:auto !important;
max-width:min(520px,100%) !important;
max-height:none !important;
}
body.chat-page .chat-design-image{
pointer-events:none;
}
@media(max-width:760px){
body.chat-page .messages{padding-bottom:22px}
body.chat-page .msg .text .chat-gif{max-width:100% !important;max-height:none !important}
}
/* Transparente Chatnachrichten: keine roten Nachrichtenboxen */
body.chat-page .messages .msg,
body.chat-page .messages .msg.mine{
background:transparent!important;
border:0!important;
box-shadow:none!important;
border-radius:0!important;
padding:7px 4px!important;
margin:3px 0!important;
}
body.chat-page .messages .msg .meta{
color:#dbeeff!important;
text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.7);
font-weight:700;
}
body.chat-page .messages .msg .text{
/* Farbe kommt aus der pro Nachricht gespeicherten Formatierung. */
text-shadow:0 1px 3px rgba(0,0,0,.98),0 0 7px rgba(0,0,0,.75);
line-height:1.45;
}
body.chat-page .messages .msg+.msg{
border-top:1px solid rgba(255,255,255,.08)!important;
}
body.chat-page .messages .msg img,
body.chat-page .messages .msg .message-smiley,
body.chat-page .messages .msg .message-gif{
background:transparent!important;
box-shadow:none!important;
border:0!important;
}
/* Chatnachrichten komplett ohne weisse Linien und Rahmen */
body.chat-page .messages .msg,
body.chat-page .messages .msg.mine,
body.chat-page .messages .msg + .msg,
body.chat-page .messages .msg:first-child,
body.chat-page .messages .msg:last-child {
border:0 !important;
border-top:0 !important;
border-right:0 !important;
border-bottom:0 !important;
border-left:0 !important;
outline:0 !important;
box-shadow:none !important;
background:transparent !important;
}
body.chat-page .messages .msg + .msg {
margin-top:8px !important;
padding-top:8px !important;
}
body.chat-page .messages .msg img,
body.chat-page .messages .msg .chat-smiley,
body.chat-page .messages .msg .chat-gif,
body.chat-page .messages .msg .message-smiley,
body.chat-page .messages .msg .message-gif {
border:0 !important;
outline:0 !important;
box-shadow:none !important;
background:transparent !important;
}
body.chat-page .messages hr,
body.chat-page .messages table,
body.chat-page .messages tr,
body.chat-page .messages td,
body.chat-page .messages th {
border:0 !important;
outline:0 !important;
}
/* Original-Smileys deutlich groesser; eigene Bilder und GIFs bleiben unveraendert */
body.chat-page button.smiley:not(:has(img)) {
min-width: 58px;
min-height: 58px;
padding: 5px;
font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
font-size: 3rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
body.chat-page .builtin-chat-smiley {
display: inline-block;
font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
font-size: 2.75rem;
line-height: 1;
vertical-align: -0.22em;
margin: 0 .1em;
text-shadow: none;
max-width: none;
max-height: none;
}
body.chat-page button.smiley:not(:has(img)):hover {
transform: scale(1.08);
}
body.chat-page .smiley-list {
gap: 9px;
max-height: 220px;
}
body.chat-page .smiley-panel {
max-height: 310px;
}
@media (max-width: 760px) {
body.chat-page button.smiley:not(:has(img)) {
min-width: 50px;
min-height: 50px;
font-size: 2.55rem;
}
body.chat-page .builtin-chat-smiley {
font-size: 2.35rem;
}
body.chat-page .smiley-list {
max-height: 175px;
}
body.chat-page .smiley-panel {
max-height: 265px;
}
}
/* Erweiterter kompakter Player mit Titelanzeige und Modibild */
.enhanced-player{display:grid!important;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:center;padding:10px 14px!important;max-width:760px;margin-left:auto;margin-right:auto}
.modi-picture-wrap{width:88px;height:88px;border-radius:14px;overflow:hidden;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center}
.modi-picture{width:100%;height:100%;object-fit:cover;display:block}
.modi-placeholder{font-size:2.2rem}
.player-content{min-width:0}
.enhanced-player .player-head{margin-bottom:5px}
.moderator-line{font-size:.84rem;color:var(--muted,#d8cbd0);margin-top:2px}
.now-playing{display:flex;align-items:baseline;gap:8px;min-width:0;margin:3px 0 7px}
.now-playing-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;opacity:.72;flex:0 0 auto}
#nowPlayingTitle{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:#fff}
.enhanced-player .stream-audio{width:100%;height:34px}
.enhanced-player .azura-embed{width:100%;height:78px;border:0}
.moderator-admin-preview{display:block;width:160px;height:160px;object-fit:cover;border-radius:16px;margin:10px 0 14px}
@media(max-width:600px){.enhanced-player{grid-template-columns:64px minmax(0,1fr);gap:10px;padding:8px!important}.modi-picture-wrap{width:64px;height:64px;border-radius:11px}.now-playing{display:block}.now-playing-label{display:block;margin-bottom:1px}.enhanced-player .azura-embed{height:72px}}
/* Player vollständig sichtbar: Titel, Modibild und AzuraCast-Bedienelemente */
body.chat-page .radio-player.enhanced-player{
width:min(980px,100%);
max-width:980px !important;
min-height:118px;
overflow:visible !important;
flex:0 0 auto;
grid-template-columns:96px minmax(0,1fr);
align-items:center;
gap:14px;
padding:12px 14px !important;
}
body.chat-page .enhanced-player .modi-picture-wrap{
width:96px;
height:96px;
flex:0 0 96px;
}
body.chat-page .enhanced-player .player-content{
width:100%;
min-width:0;
overflow:visible;
}
body.chat-page .enhanced-player .player-head{
display:flex;
flex-wrap:wrap;
gap:6px 10px;
align-items:flex-start;
}
body.chat-page .enhanced-player #nowPlayingTitle{
white-space:normal;
overflow:visible;
text-overflow:clip;
overflow-wrap:anywhere;
}
body.chat-page .enhanced-player .stream-audio{
display:block;
width:100%;
min-width:0;
height:42px;
}
body.chat-page .enhanced-player .azura-embed{
display:block;
width:100%;
min-width:0;
height:150px !important;
min-height:150px;
overflow:visible;
border:0;
}
@media(max-width:760px){
body.chat-page .radio-player.enhanced-player{
width:calc(100% - 12px);
max-width:none !important;
grid-template-columns:72px minmax(0,1fr);
min-height:104px;
gap:9px;
margin:0 6px 6px;
padding:9px !important;
}
body.chat-page .enhanced-player .modi-picture-wrap{
width:72px;
height:72px;
flex-basis:72px;
}
body.chat-page .enhanced-player .azura-embed{
height:145px !important;
min-height:145px;
}
}
@media(max-width:480px){
body.chat-page .radio-player.enhanced-player{
grid-template-columns:58px minmax(0,1fr);
gap:8px;
}
body.chat-page .enhanced-player .modi-picture-wrap{
width:58px;
height:58px;
flex-basis:58px;
}
body.chat-page .enhanced-player .player-badge{
display:none;
}
body.chat-page .enhanced-player .azura-embed{
height:140px !important;
min-height:140px;
}
}
/* Player platzsparend ausserhalb des Nachrichtenbereichs */
body.chat-page .shell{grid-template-rows:auto minmax(0,1fr)}
body.chat-page .radio-player.compact-player{
width:100%;
max-width:none;
min-height:62px;
margin:0 0 8px;
padding:6px 10px!important;
grid-template-columns:54px minmax(0,1fr);
gap:10px;
border-radius:12px;
}
body.chat-page .compact-player .modi-picture-wrap{width:54px;height:54px;border-radius:10px}
body.chat-page .compact-player .player-content{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head control" "title control" "details details";column-gap:10px;align-items:center;min-width:0}
body.chat-page .compact-player .player-head{grid-area:head;margin:0;min-width:0}
body.chat-page .compact-player .player-ident{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden}
body.chat-page .compact-player .player-ident strong{overflow:hidden;text-overflow:ellipsis}
body.chat-page .compact-player .moderator-line{font-size:.76rem;opacity:.78;overflow:hidden;text-overflow:ellipsis}
body.chat-page .compact-player .now-playing{grid-area:title;margin:1px 0 0;display:flex;gap:6px;min-width:0;white-space:nowrap;overflow:hidden}
body.chat-page .compact-player #nowPlayingTitle{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.chat-page .compact-player .now-playing-label{font-size:.68rem}
body.chat-page .compact-player .player-toggle{grid-area:control;padding:8px 10px;white-space:nowrap;font-size:.78rem}
body.chat-page .compact-player .stream-audio{grid-area:control;width:min(360px,34vw);height:34px}
body.chat-page .compact-player .player-details{grid-area:details;margin-top:7px}
body.chat-page .compact-player .player-details[hidden]{display:none}
body.chat-page .compact-player .azura-embed{display:block;width:100%;height:92px;border:0;border-radius:8px}
body.chat-page .chat-layout{min-height:0}
@media(max-width:760px){
body.chat-page .radio-player.compact-player{min-height:56px;margin:0;border-radius:0;grid-template-columns:46px minmax(0,1fr);padding:5px 7px!important}
body.chat-page .compact-player .modi-picture-wrap{width:46px;height:46px;border-radius:8px}
body.chat-page .compact-player .player-content{grid-template-columns:minmax(0,1fr) auto;column-gap:6px}
body.chat-page .compact-player .player-ident strong{font-size:.84rem}
body.chat-page .compact-player .moderator-line,.compact-player .player-badge{display:none}
body.chat-page .compact-player .now-playing-label{display:none}
body.chat-page .compact-player #nowPlayingTitle{font-size:.8rem}
body.chat-page .compact-player .player-toggle{padding:7px 8px;font-size:.72rem}
body.chat-page .compact-player .stream-audio{width:145px;height:32px}
body.chat-page .compact-player .azura-embed{height:86px}
}
/* Player kompakt in der Benutzerliste */
body.chat-page .chat-layout{
grid-template-columns:minmax(0,1fr) 390px;
}
body.chat-page .sidebar{
display:flex;
flex-direction:column;
gap:10px;
padding:10px;
overflow:auto;
}
body.chat-page .sidebar .radio-player.compact-player{
flex:0 0 auto;
width:100%;
max-width:none;
min-height:0;
margin:0;
padding:8px!important;
grid-template-columns:58px minmax(0,1fr);
gap:8px;
border-radius:10px;
box-shadow:none;
}
body.chat-page .sidebar .compact-player .modi-picture-wrap{
width:58px;
height:58px;
}
body.chat-page .sidebar .compact-player .player-content{
display:block;
min-width:0;
}
body.chat-page .sidebar .compact-player .player-head{
margin:0 0 4px;
}
body.chat-page .sidebar .compact-player .player-ident{
display:block;
min-width:0;
white-space:normal;
}
body.chat-page .sidebar .compact-player .player-ident strong,
body.chat-page .sidebar .compact-player .moderator-line,
body.chat-page .sidebar .compact-player #nowPlayingTitle{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
body.chat-page .sidebar .compact-player .moderator-line{
margin-top:2px;
}
body.chat-page .sidebar .compact-player .now-playing{
display:block;
margin:4px 0 6px;
white-space:normal;
}
body.chat-page .sidebar .compact-player .now-playing-label{
display:block;
margin-bottom:2px;
}
body.chat-page .sidebar .compact-player .player-toggle{
width:100%;
padding:7px 8px;
font-size:.76rem;
}
body.chat-page .sidebar .compact-player .stream-audio{
width:100%;
height:34px;
}
body.chat-page .sidebar .compact-player .player-details{
margin-top:7px;
}
body.chat-page .sidebar .compact-player .azura-embed{
width:100%;
height:92px;
}
body.chat-page .sidebar-head{
flex:0 0 auto;
}
body.chat-page #users{
flex:1 1 auto;
min-height:0;
}
@media(max-width:760px){
body.chat-page .chat-layout{display:block}
body.chat-page .sidebar{
padding:10px;
gap:10px;
}
body.chat-page .sidebar .radio-player.compact-player{
grid-template-columns:54px minmax(0,1fr);
border-radius:10px;
}
body.chat-page .sidebar .compact-player .modi-picture-wrap{
width:54px;
height:54px;
}
body.chat-page .sidebar .compact-player .azura-embed{
height:86px;
}
}
/* Player in der Benutzerliste dauerhaft sichtbar */
body.chat-page .sidebar .compact-player .player-toggle{display:none!important}
body.chat-page .sidebar .compact-player .player-details,
body.chat-page .sidebar .compact-player .player-details[hidden],
body.chat-page .sidebar .compact-player .player-details-visible{
display:block!important;
width:100%;
margin-top:7px;
}
body.chat-page .sidebar .compact-player .azura-embed{
display:block;
width:100%;
height:92px;
min-height:92px;
border:0;
border-radius:8px;
}
@media(max-width:760px){
body.chat-page .sidebar .compact-player .azura-embed{height:86px;min-height:86px}
}
/* Finaler Login-Hintergrund-Fix: echtes Vollseitenbild, nicht ueberschreibbar */
body.login-page{
position:relative;
isolation:isolate;
background:#040b16 !important;
}
body.login-page .login-fullpage-background{
position:fixed;
inset:0;
z-index:-2;
display:block !important;
width:100vw;
height:100vh;
height:100dvh;
max-width:none;
max-height:none;
object-fit:cover;
object-position:center center;
opacity:1;
visibility:visible;
pointer-events:none;
}
body.login-page::before{
content:"";
position:fixed;
inset:0;
z-index:-1;
background:linear-gradient(rgba(4,11,22,.30),rgba(4,11,22,.58));
pointer-events:none;
}
body.login-page .shell{
position:relative;
z-index:1;
}
body.login-page .auth{
background:rgba(8,23,43,.78) !important;
}
@media(max-width:760px){
body.login-page .login-fullpage-background{object-position:center center}
}
/* Smileys und GIFs aus Chatnachrichten erneut in die Schreibleiste uebernehmen */
body.chat-page .clickable-chat-smiley {
cursor: pointer !important;
user-select: none;
-webkit-user-drag: none;
transition: transform .16s ease, filter .16s ease;
}
body.chat-page .clickable-chat-smiley:hover,
body.chat-page .clickable-chat-smiley:focus-visible {
transform: scale(1.08);
filter: brightness(1.12);
outline: 2px solid rgba(255,255,255,.55) !important;
outline-offset: 3px !important;
}
body.chat-page .clickable-chat-smiley.smiley-reused {
transform: scale(.92);
filter: brightness(1.3);
}
/* Mobile Benutzerliste: abschliessende Prioritaetsregeln */
body.chat-page .sidebar-overlay{
display:none;
position:fixed;
inset:0;
z-index:89;
border:0;
padding:0;
margin:0;
background:rgba(0,0,0,.58);
cursor:pointer;
}
@media(max-width:760px){
body.chat-page .chat-main{
display:grid;
grid-template-rows:auto minmax(0,1fr) auto auto;
width:100%;
height:100dvh;
}
body.chat-page .messages{
display:block;
min-height:0;
width:100%;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
body.chat-page .sidebar{
display:flex !important;
position:fixed !important;
z-index:90 !important;
top:0 !important;
right:0 !important;
bottom:0 !important;
left:auto !important;
width:min(86vw,360px) !important;
max-width:360px !important;
height:100dvh !important;
padding-top:max(10px,env(safe-area-inset-top)) !important;
padding-bottom:max(10px,env(safe-area-inset-bottom)) !important;
border-radius:14px 0 0 14px !important;
transform:translateX(105%);
visibility:hidden;
pointer-events:none;
transition:transform .22s ease,visibility 0s linear .22s;
box-shadow:-16px 0 36px rgba(0,0,0,.55);
overflow-y:auto !important;
overscroll-behavior:contain;
}
body.chat-page .sidebar.open{
transform:translateX(0);
visibility:visible;
pointer-events:auto;
transition:transform .22s ease;
}
body.chat-page.users-open .sidebar-overlay{
display:block;
}
body.chat-page .sidebar-head{
position:sticky;
top:0;
z-index:3;
align-items:center;
padding:4px 0 8px;
background:rgba(8,23,43,.98);
}
body.chat-page #closeUsers{
display:inline-flex !important;
align-items:center;
justify-content:center;
min-width:44px;
min-height:44px;
}
}
/* Mobile composer fix */
@media (max-width:760px){
.chat-main{display:flex;flex-direction:column;height:100dvh;}
.messages{flex:1;overflow-y:auto;padding-bottom:90px;}
.composer{
display:flex !important;
position:sticky;
bottom:0;
left:0;
right:0;
z-index:1000;
background:#07182a;
border-top:1px solid #1c507f;
}
.composer input{min-width:0;}
.sidebar{z-index:900;}
}
/* Mobile Chat 2026: feste Schreibleiste, Tastatur- und Smiley-Anpassung */
@media (max-width:760px){
html,body.chat-page{height:100%;height:100dvh;overflow:hidden}
body.chat-page{--mobile-vh:100dvh;--keyboard-offset:0px}
body.chat-page .shell{
width:100%;height:var(--mobile-vh);min-height:0;padding:0;overflow:hidden;
}
body.chat-page .chat-layout{height:100%;min-height:0;display:block;overflow:hidden}
body.chat-page .chat-main{
display:grid!important;
grid-template-rows:auto minmax(0,1fr) auto auto!important;
height:100%!important;min-height:0!important;overflow:hidden!important;
border:0;border-radius:0;
}
body.chat-page .topbar{flex:0 0 auto;min-height:56px;overflow:visible}
body.chat-page .messages{
min-height:0!important;height:auto!important;overflow-y:auto!important;
padding:10px 10px 14px!important;scroll-padding-bottom:16px;
overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
}
body.chat-page .smiley-panel{
display:none!important;position:relative!important;inset:auto!important;
width:100%;max-height:min(34vh,220px)!important;overflow:hidden;
z-index:30;background:#07182a;border-top:1px solid #1c507f;
padding:7px 8px!important;
}
body.chat-page .smiley-panel.open{display:block!important}
body.chat-page .smiley-tabs{padding-bottom:5px}
body.chat-page .smiley-list{max-height:min(24vh,150px)!important;overflow-y:auto}
body.chat-page .composer{
display:grid!important;grid-template-columns:minmax(0,1fr) 46px auto!important;
align-items:center!important;gap:6px!important;
position:relative!important;bottom:auto!important;left:auto!important;right:auto!important;
z-index:40!important;width:100%;min-height:60px;margin:0!important;
padding:7px 8px max(7px,env(safe-area-inset-bottom))!important;
background:#07182a!important;border-top:1px solid #1c507f;
box-shadow:0 -5px 18px rgba(0,0,0,.38);
}
body.chat-page .composer input#message{
width:100%;height:44px;min-width:0!important;font-size:16px!important;
padding:10px 12px!important;border-radius:22px!important;
}
body.chat-page .composer .btn{height:44px;min-width:44px;padding:8px 11px!important;border-radius:22px}
body.chat-page #smileyToggle{font-size:1.2rem;padding:0!important}
body.chat-page .send-status{position:absolute;left:10px;bottom:100%;font-size:12px}
body.chat-page.keyboard-open #smileyToggle{opacity:1}
body.chat-page.users-open{overflow:hidden}
}
/* Chatregeln und Datenschutz beim Login */
.guest-form{margin-top:12px}.legal-check{display:flex;align-items:flex-start;gap:9px;margin:14px 0;color:#d4e7f8;font-size:14px;line-height:1.4}.legal-check input{width:18px;height:18px;margin:1px 0 0;flex:0 0 auto;accent-color:#1769aa}.text-link{display:inline;padding:0;border:0;background:none;color:#74b9f2;text-decoration:underline;cursor:pointer;font:inherit}.text-link:hover{color:#fff}.legal-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.legal-buttons .btn{width:100%}.legal-modal[hidden]{display:none}.legal-modal{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.78)}.legal-dialog{position:relative;width:min(680px,100%);max-height:min(82dvh,760px);overflow:auto;padding:24px 26px;border:1px solid #28689e;border-radius:14px;background:#081a2d;box-shadow:0 18px 60px #000;color:#f1f4f7}.legal-dialog h2{margin:0 42px 16px 0}.legal-dialog p,.legal-dialog li{line-height:1.55}.legal-dialog ol{padding-left:22px}.modal-close{position:absolute;top:12px;right:14px;width:38px;height:38px;border:0;border-radius:50%;background:#173653;color:#fff;font-size:27px;line-height:1;cursor:pointer}.modal-close:hover{background:#1769aa}.modal-open{overflow:hidden!important}@media(max-width:520px){.legal-buttons{grid-template-columns:1fr}.legal-dialog{padding:21px 18px}.legal-modal{padding:10px}}
/* Profile nur fuer registrierte Benutzer */
.profile-page{min-height:100vh;background:#040b16;color:#f1f4f7}.profile-card{max-width:900px;margin:28px auto}.profile-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;padding-top:20px}.profile-preview{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}.profile-preview img,.profile-placeholder{width:150px;height:150px;border-radius:50%;object-fit:cover;border:3px solid #33608e;box-shadow:0 10px 28px rgba(0,0,0,.45)}.profile-placeholder{display:grid;place-items:center;background:#16283b;font-size:64px;font-weight:800}.profile-form small{display:block;margin-top:7px}.notice.success{border-color:#287a4a;background:rgba(28,110,63,.24)}
.message-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}.message-avatar,.user-avatar{display:inline-grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:50%;overflow:hidden;background:#243f5b;color:#fff;font-weight:800;border:1px solid #3279ad}.message-avatar img,.user-avatar{object-fit:cover}.message-avatar img{width:100%;height:100%;object-fit:cover}.user{display:flex!important;align-items:center;gap:9px}.user-avatar{width:40px;height:40px}.user-avatar-placeholder{display:inline-grid}.user-info{min-width:0;flex:1}
@media(max-width:680px){.profile-card{margin:0;min-height:100dvh;border-radius:0}.profile-grid{grid-template-columns:1fr;gap:20px}.profile-preview img,.profile-placeholder{width:120px;height:120px}}
/* Profilbild-Vorschau: klein vor dem Namen, gross bei Hover oder Fingertipp */
body.chat-page .message-head{position:relative;overflow:visible}
body.chat-page .message-avatar{width:28px;height:28px;overflow:visible;position:relative;z-index:8;cursor:zoom-in}
body.chat-page .message-avatar img,
body.chat-page img.user-avatar{
width:28px;height:28px;border-radius:50%;object-fit:cover;
border:1px solid #3279ad;background:#243f5b;
transform-origin:left center;transition:transform .18s ease,box-shadow .18s ease,border-radius .18s ease;
cursor:zoom-in;position:relative;z-index:8;
}
body.chat-page .user{position:relative;overflow:visible}
body.chat-page img.user-avatar{flex:0 0 28px}
@media (hover:hover) and (pointer:fine){
body.chat-page .message-avatar:hover img,
body.chat-page .message-avatar:focus img,
body.chat-page img.user-avatar:hover,
body.chat-page img.user-avatar:focus{
transform:scale(5.7);z-index:200;border-radius:10px;
box-shadow:0 12px 34px rgba(0,0,0,.72);cursor:zoom-out;
}
}
body.chat-page .message-avatar img.avatar-expanded,
body.chat-page img.user-avatar.avatar-expanded{
transform:scale(5.7);z-index:200;border-radius:10px;
box-shadow:0 12px 34px rgba(0,0,0,.72);cursor:zoom-out;
}
@media(max-width:760px){
body.chat-page .message-avatar img.avatar-expanded,
body.chat-page img.user-avatar.avatar-expanded{transform:scale(4.6)}
}
/* Korrektur: Profilbild wirklich klein und direkt vor dem Namen */
body.chat-page .messages .message-head{
display:inline-flex!important;
align-items:center!important;
justify-content:flex-start!important;
gap:5px!important;
width:auto!important;
max-width:100%!important;
margin:0 0 3px 0!important;
vertical-align:middle!important;
overflow:visible!important;
}
body.chat-page .messages .message-head .meta{
display:inline!important;
width:auto!important;
margin:0!important;
line-height:18px!important;
white-space:nowrap!important;
}
body.chat-page .messages .message-avatar,
body.chat-page .messages .message-avatar img{
width:18px!important;
height:18px!important;
min-width:18px!important;
max-width:18px!important;
min-height:18px!important;
max-height:18px!important;
}
body.chat-page .messages .message-avatar{
display:inline-grid!important;
flex:0 0 18px!important;
margin:0!important;
padding:0!important;
font-size:10px!important;
line-height:18px!important;
border-radius:50%!important;
vertical-align:middle!important;
}
body.chat-page .sidebar .user{
gap:6px!important;
}
body.chat-page .sidebar .user-avatar,
body.chat-page .sidebar img.user-avatar{
width:20px!important;
height:20px!important;
min-width:20px!important;
max-width:20px!important;
min-height:20px!important;
max-height:20px!important;
flex:0 0 20px!important;
font-size:11px!important;
line-height:20px!important;
}
@media (hover:hover) and (pointer:fine){
body.chat-page .messages .message-avatar:hover img,
body.chat-page .messages .message-avatar:focus img{
transform:scale(7)!important;
}
body.chat-page .sidebar img.user-avatar:hover,
body.chat-page .sidebar img.user-avatar:focus{
transform:scale(6)!important;
}
}
body.chat-page .messages .message-avatar img.avatar-expanded{
transform:scale(7)!important;
}
body.chat-page .sidebar img.user-avatar.avatar-expanded{
transform:scale(6)!important;
}
/* Bearbeitbare Rechtstexte */
.legal-copy{white-space:normal;line-height:1.6;overflow-wrap:anywhere}.ai-generated-notice{padding:10px 12px;border:1px solid #8b5f21;border-radius:9px;background:rgba(139,95,33,.22);color:#ffe0a3;font-size:13px}.legal-buttons{flex-wrap:wrap}.admin-card textarea[name=privacy_text],.admin-card textarea[name=imprint_text]{min-height:220px;resize:vertical;line-height:1.45}
/* Endgueltige Avatar-Position: direkt in der Namenszeile */
body.chat-page .messages .msg .message-head{
display:block!important;
width:100%!important;
margin:0 0 3px!important;
padding:0!important;
}
body.chat-page .messages .msg .message-head .meta{
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
gap:4px!important;
width:100%!important;
min-height:16px!important;
line-height:16px!important;
white-space:nowrap!important;
}
body.chat-page .messages .msg .message-username{
display:inline!important;
font-weight:700!important;
line-height:16px!important;
}
body.chat-page .messages .msg .message-time{
display:inline!important;
line-height:16px!important;
}
body.chat-page .messages .msg .message-avatar,
body.chat-page .messages .msg .message-avatar img{
display:inline-grid!important;
width:16px!important;
height:16px!important;
min-width:16px!important;
max-width:16px!important;
min-height:16px!important;
max-height:16px!important;
flex:0 0 16px!important;
margin:0!important;
padding:0!important;
border-radius:50%!important;
object-fit:cover!important;
vertical-align:middle!important;
}
body.chat-page .messages .msg .message-avatar{
place-items:center!important;
font-size:9px!important;
line-height:16px!important;
overflow:visible!important;
}
body.chat-page .sidebar .user{
display:flex!important;
align-items:center!important;
}
body.chat-page .sidebar .user-avatar,
body.chat-page .sidebar img.user-avatar{
width:18px!important;
height:18px!important;
min-width:18px!important;
max-width:18px!important;
min-height:18px!important;
max-height:18px!important;
flex:0 0 18px!important;
}
/* 2026-08-04: Initialen-Fallback entfernt; nur kleine Profilbilder vor dem Namen */
body.chat-page .user-avatar-placeholder{display:none!important}
body.chat-page .messages .message-avatar,
body.chat-page .messages .message-avatar img{
width:16px!important;
height:16px!important;
min-width:16px!important;
min-height:16px!important;
border-radius:50%!important;
font-size:0!important;
line-height:0!important;
}
body.chat-page .sidebar img.user-avatar{
width:18px!important;
height:18px!important;
min-width:18px!important;
min-height:18px!important;
border-radius:50%!important;
}
/* Vereinfachte Smiley-Verwaltung */
.smiley-admin-grid.compact{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.smiley-admin-item.compact{padding:12px;gap:8px}
.smiley-admin-item.compact .field{margin:0}
.smiley-admin-preview{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.smiley-admin-preview img{width:44px!important;height:44px!important;object-fit:contain}
.smiley-admin-preview strong{font-size:14px;overflow:hidden;text-overflow:ellipsis}
.smiley-active{display:flex;align-items:center;gap:6px;margin:2px 0}
.smiley-admin-actions{display:flex;gap:8px;flex-wrap:wrap}
.smiley-admin-actions .btn{padding:8px 12px}
@media(max-width:600px){.smiley-admin-grid.compact{grid-template-columns:1fr 1fr}.smiley-admin-item.compact{padding:9px}.smiley-admin-preview img{width:36px!important;height:36px!important}}
@media(max-width:420px){.smiley-admin-grid.compact{grid-template-columns:1fr}}
/* Moderationswerkzeuge in der Benutzerliste */
.moderation-tools{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:5px}
.mod-btn,.ban-select{font:inherit;font-size:12px;line-height:1.2;border:1px solid rgba(255,255,255,.22);border-radius:7px;background:rgba(15,15,20,.75);color:inherit;padding:5px 7px}
.mod-btn{cursor:pointer;background:#1d548b;color:#fff;border-color:#326da9}
.mod-btn:hover{filter:brightness(1.12)}
.ban-select{max-width:110px}
@media(max-width:760px){.moderation-tools{width:100%}.mod-btn,.ban-select{min-height:34px}}
/* Kompaktes Moderationsmenue direkt neben dem Benutzernamen */
.user{display:flex;align-items:flex-start;gap:7px;position:relative}
.user-info{min-width:0;flex:1}
.user-name-row{display:flex;align-items:center;gap:4px;min-width:0;position:relative}
.moderation-menu-wrap{position:relative;margin-left:auto;flex:0 0 auto}
.moderation-menu-toggle{width:28px;height:28px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:7px;background:rgba(12,16,20,.78);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center}
.moderation-menu-toggle:hover,.moderation-menu-toggle[aria-expanded="true"]{background:#1d548b;border-color:#3b78b6}
.moderation-menu{position:absolute;z-index:60;right:0;top:32px;min-width:190px;padding:5px;border:1px solid #2c6292;border-radius:9px;background:#07182a;box-shadow:0 10px 28px rgba(0,0,0,.55)}
.moderation-menu[hidden]{display:none!important}
.moderation-action{display:block;width:100%;padding:9px 10px;border:0;border-radius:6px;background:transparent;color:#fff;text-align:left;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.moderation-action:hover{background:#123d68}
.moderation-action.danger{color:#b3d9ff}
@media(max-width:760px){.moderation-menu{position:fixed;right:12px;left:auto;top:auto;min-width:min(250px,calc(100vw - 24px))}.moderation-action{padding:12px 11px;font-size:14px}}
/* Textformatierung: Schriftgröße, Farbe, Fett und Kursiv */
body.chat-page .chat-main{grid-template-rows:auto minmax(0,1fr) auto auto auto}
.text-format-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;background:rgba(7,22,39,.98);border-top:1px solid rgba(255,255,255,.12);position:relative;z-index:11}
.text-format-toolbar label{font-size:12px;color:#bdcbd9}
.format-select{min-height:36px;border:1px solid #2c6292;border-radius:8px;background:#0c1116;color:#fff;padding:5px 8px}
.format-color{width:42px;height:36px;padding:2px;border:1px solid #2c6292;border-radius:8px;background:#0c1116;cursor:pointer}
.format-button{min-width:38px;min-height:36px;border:1px solid #2c6292;border-radius:8px;background:#111a24;color:#fff;cursor:pointer;font-size:16px}
.format-button:hover,.format-button.active{background:#26598d;border-color:#5a99d8}
.format-button.active{box-shadow:0 0 0 2px rgba(90,153,216,.25)}
.format-reset{width:auto;padding:0 10px;font-size:12px}
.messages .msg .text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.35}
@media(max-width:760px){body.chat-page .chat-main{grid-template-rows:auto minmax(0,1fr) auto auto auto}.text-format-toolbar{gap:6px;padding:7px 8px}.text-format-toolbar label{display:none}.format-select{max-width:105px}.format-reset{padding:0 8px}.composer input#message{min-width:0}}
/* Würfel- und Glücksradspiele */
.game-top-button{margin-left:7px;padding:8px 11px!important;white-space:nowrap}.chat-game-modal[hidden]{display:none!important}.chat-game-modal{position:fixed;z-index:1500;inset:0;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.82)}.chat-game-dialog{position:relative;width:min(470px,100%);padding:25px;border:1px solid #39618a;border-radius:18px;background:linear-gradient(160deg,#101d2a,#090f15);box-shadow:0 25px 75px #000;text-align:center}.chat-game-dialog h2{margin:0 42px 7px}.chat-game-close{position:absolute;right:12px;top:11px;width:38px;height:38px;border:0;border-radius:50%;background:#173653;color:#fff;font-size:27px;cursor:pointer}.chat-game-close:hover{background:#1769aa}.chat-game-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:20px}.dice-result{display:grid;place-items:center;min-height:150px;margin:18px auto;font-size:94px;font-weight:700;filter:drop-shadow(0 7px 12px #000)}.dice-result.rolling{transform:rotate(8deg) scale(1.05)}.wheel-wrap{position:relative;width:270px;height:285px;margin:12px auto 0}.wheel-pointer{position:absolute;z-index:2;top:-3px;left:50%;transform:translateX(-50%);font-size:34px;color:#fff;text-shadow:0 2px 5px #000}.fortune-wheel{position:absolute;left:7px;top:16px;width:256px;height:256px;border:8px solid #eee;border-radius:50%;background:conic-gradient(#1769aa 0 45deg,#f0a12a 45deg 90deg,#176fa6 90deg 135deg,#6ca832 135deg 180deg,#8a2c91 180deg 225deg,#d35d24 225deg 270deg,#207c75 270deg 315deg,#b48b18 315deg 360deg);box-shadow:0 10px 26px #000,inset 0 0 0 4px #101d2a;transition:transform 3s cubic-bezier(.12,.62,.08,1)}.fortune-wheel span{position:absolute;left:50%;top:50%;font-size:20px;font-weight:800;text-shadow:0 1px 4px #000;transform-origin:0 0}.fortune-wheel span:nth-child(1){transform:rotate(22.5deg) translate(72px) rotate(-22.5deg)}.fortune-wheel span:nth-child(2){transform:rotate(67.5deg) translate(72px) rotate(-67.5deg)}.fortune-wheel span:nth-child(3){transform:rotate(112.5deg) translate(72px) rotate(-112.5deg)}.fortune-wheel span:nth-child(4){transform:rotate(157.5deg) translate(72px) rotate(-157.5deg)}.fortune-wheel span:nth-child(5){transform:rotate(202.5deg) translate(72px) rotate(-202.5deg)}.fortune-wheel span:nth-child(6){transform:rotate(247.5deg) translate(72px) rotate(-247.5deg)}.fortune-wheel span:nth-child(7){transform:rotate(292.5deg) translate(72px) rotate(-292.5deg)}.fortune-wheel span:nth-child(8){transform:rotate(337.5deg) translate(72px) rotate(-337.5deg)}.wheel-result{min-height:28px;font-size:20px;font-weight:700}.game-modal-open{overflow:hidden!important}@media(max-width:760px){.topbar{align-items:flex-start}.navlinks{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.game-top-button{margin-left:0!important;font-size:0;width:42px;height:42px;padding:0!important}.game-top-button::first-letter{font-size:20px}.chat-game-dialog{padding:21px 14px}.wheel-wrap{transform:scale(.9);margin-top:-2px;margin-bottom:-18px}}
/* Einstellbare Wunschbox- und Homepage-Buttons */
.chat-link-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none!important;white-space:nowrap;margin-left:7px;padding:8px 11px!important}
@media(max-width:760px){.chat-link-button{margin-left:0!important;padding:8px 9px!important;font-size:13px}}
/* Wunschbox als kleines eingebettetes Popup direkt im Chat */
.wunschbox-modal[hidden]{display:none!important}
.wunschbox-modal{position:fixed;z-index:1700;inset:0;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.72)}
.wunschbox-dialog{display:flex;flex-direction:column;width:390px;max-width:calc(100vw - 24px);height:370px;max-height:calc(100vh - 24px);overflow:hidden;border:1px solid #39618a;border-radius:14px;background:#090f16;box-shadow:0 25px 80px #000}
.wunschbox-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:8px 10px 8px 14px;border-bottom:1px solid #314c67;background:linear-gradient(160deg,#132435,#0b131c)}
.wunschbox-dialog-head h2{margin:0;font-size:18px}
.wunschbox-close{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:#173653;color:#fff;font-size:25px;cursor:pointer}
.wunschbox-close:hover{background:#1769aa}
.wunschbox-dialog iframe{display:block;flex:1;width:100%;height:320px;border:0;background:#fff}
.wunschbox-open{overflow:hidden!important}
@media(max-width:430px){.wunschbox-modal{padding:8px}.wunschbox-dialog{width:100%;height:min(370px,calc(100vh - 16px));max-width:none}.wunschbox-dialog iframe{height:auto}}
/* Wunschbox: Moderator-Verwaltung sichtbar und erreichbar */
.wunschbox-head-actions{display:flex;align-items:center;gap:8px}
.wunschbox-modi-link{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 10px;border:1px solid #46688a;border-radius:8px;background:#1d334a;color:#fff!important;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}
.wunschbox-modi-link:hover{background:#26517d}
.wunschbox-dialog.wunschbox-modi-dialog{width:620px;height:520px}
.wunschbox-dialog.wunschbox-modi-dialog iframe{height:470px;overflow:auto}
@media(max-width:680px){.wunschbox-dialog.wunschbox-modi-dialog{width:calc(100vw - 16px);height:calc(100vh - 24px)}.wunschbox-modi-link{font-size:0;width:36px;padding:0}.wunschbox-modi-link::before{content:"⚙";font-size:18px}.wunschbox-dialog.wunschbox-modi-dialog iframe{height:auto}}
/* Breitere Benutzerliste und sichere Darstellung langer Namen */
body.chat-page .user-name-row{
width:100%;
flex-wrap:nowrap;
}
body.chat-page .user-name-row .online{
flex:0 0 9px;
}
body.chat-page .user-display-name{
min-width:0;
flex:1 1 auto;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
body.chat-page .user-name-row .chat-status,
body.chat-page .user-name-row .moderation-menu-wrap{
flex:0 0 auto;
}
@media(max-width:760px){
body.chat-page .sidebar{
width:min(94vw,430px)!important;
max-width:430px!important;
}
}
/* Benutzerliste: feste Flaeche mit eigener Scrollbar */
body.chat-page .sidebar{
overflow:hidden!important;
}
body.chat-page .sidebar-head{
position:sticky;
top:0;
z-index:12;
background:rgba(8,23,43,.99);
padding:4px 2px 8px;
}
body.chat-page #users{
flex:1 1 auto;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
scrollbar-width:thin;
scrollbar-color:#1769aa #0d2741;
padding-right:4px;
}
body.chat-page #users::-webkit-scrollbar{
width:9px;
}
body.chat-page #users::-webkit-scrollbar-track{
background:#0d2741;
border-radius:8px;
}
body.chat-page #users::-webkit-scrollbar-thumb{
background:#1769aa;
border-radius:8px;
border:2px solid #0d2741;
}
body.chat-page #users::-webkit-scrollbar-thumb:hover{
background:#297ccf;
}
body.chat-page #users .user:last-child{
border-bottom:0;
}
@media(max-width:760px){
body.chat-page #users{
-webkit-overflow-scrolling:touch;
padding-bottom:max(12px,env(safe-area-inset-bottom));
}
}
/* Adminbereich: ausgeglichene zweispaltige Anordnung */
body.admin-page .admin-dashboard-grid{grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);align-items:start}
body.admin-page .admin-settings-card{grid-column:1;grid-row:1 / span 2}
body.admin-page .admin-smiley-upload-card{grid-column:2;grid-row:1}
body.admin-page .admin-design-card{grid-column:2;grid-row:2}
body.admin-page .admin-design-card .design-upload-grid{grid-template-columns:1fr}
body.admin-page .admin-design-card .design-preview,body.admin-page .admin-design-card .design-empty{height:125px}
body.admin-page .admin-smiley-upload-card h2,body.admin-page .admin-design-card h2{margin-top:0}
@media(max-width:900px){body.admin-page .admin-dashboard-grid{grid-template-columns:1fr}body.admin-page .admin-settings-card,body.admin-page .admin-smiley-upload-card,body.admin-page .admin-design-card{grid-column:1;grid-row:auto}body.admin-page .admin-design-card .design-upload-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){body.admin-page .admin-design-card .design-upload-grid{grid-template-columns:1fr}}
/* Adminbereich: Smiley-Verwaltung und Design-Grafiken fest untereinander rechts */
.admin-dashboard-grid{align-items:start;}
.admin-right-stack{display:flex;flex-direction:column;gap:18px;min-width:0;}
.admin-right-stack .admin-card{width:100%;margin:0;}
.admin-right-stack .design-upload-grid{grid-template-columns:1fr;}
@media (max-width:900px){.admin-right-stack{display:flex;gap:14px;}}
/* Modernes Glücksrad */
#wheelGameModal .chat-game-dialog{width:min(520px,100%);overflow:hidden;background:radial-gradient(circle at 50% 5%,rgba(38,111,185,.22),transparent 38%),linear-gradient(155deg,#101c29 0%,#12080d 72%);border-color:rgba(255,255,255,.18);box-shadow:0 28px 90px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.08)}
.wheel-stage{position:relative;width:324px;height:338px;margin:12px auto 2px;display:grid;place-items:center;isolation:isolate}
.wheel-glow{position:absolute;width:285px;height:285px;border-radius:50%;background:radial-gradient(circle,rgba(255,194,75,.3),rgba(24,99,175,.14) 48%,transparent 72%);filter:blur(18px);animation:wheelGlow 2.2s ease-in-out infinite alternate}
.wheel-pointer{position:absolute;z-index:8;top:0;left:50%;width:52px;height:64px;transform:translateX(-50%);filter:drop-shadow(0 7px 7px rgba(0,0,0,.65))}
.wheel-pointer:before{content:"";position:absolute;left:8px;top:0;width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,#fff6d9,#e9b93f);border:4px solid #1b3b5b;box-shadow:inset 0 2px 4px rgba(255,255,255,.8)}
.wheel-pointer span{position:absolute;left:14px;top:26px;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:29px solid #f5c747}
.fortune-wheel{position:relative!important;left:auto!important;top:auto!important;width:286px!important;height:286px!important;border:10px solid #f3d780!important;background:conic-gradient(#3d92e8 0 45deg,#ffae3d 45deg 90deg,#408fdf 90deg 135deg,#55b86c 135deg 180deg,#9c59d1 180deg 225deg,#ef7040 225deg 270deg,#2eb4aa 270deg 315deg,#d8ad32 315deg 360deg)!important;box-shadow:0 18px 42px rgba(0,0,0,.58),0 0 0 5px #254362,0 0 0 9px rgba(255,255,255,.08),inset 0 0 0 3px rgba(255,255,255,.28)!important;transition:transform 4.45s cubic-bezier(.08,.63,.06,1)!important;will-change:transform}
.fortune-wheel:before{content:"";position:absolute;inset:8px;border-radius:50%;border:2px dashed rgba(255,255,255,.52);pointer-events:none}
.fortune-wheel:after{content:"";position:absolute;inset:-2px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.9) 0 1.2deg,transparent 1.2deg 45deg);opacity:.42;pointer-events:none}
.fortune-wheel>span{z-index:2;font-size:22px!important;line-height:1;font-weight:900!important;color:#fff;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));transform-origin:0 0!important}
.fortune-wheel>span:nth-child(1){transform:rotate(22.5deg) translate(91px) rotate(-22.5deg)!important}.fortune-wheel>span:nth-child(2){transform:rotate(67.5deg) translate(91px) rotate(-67.5deg)!important}.fortune-wheel>span:nth-child(3){transform:rotate(112.5deg) translate(91px) rotate(-112.5deg)!important}.fortune-wheel>span:nth-child(4){transform:rotate(157.5deg) translate(91px) rotate(-157.5deg)!important}.fortune-wheel>span:nth-child(5){transform:rotate(202.5deg) translate(91px) rotate(-202.5deg)!important}.fortune-wheel>span:nth-child(6){transform:rotate(247.5deg) translate(91px) rotate(-247.5deg)!important}.fortune-wheel>span:nth-child(7){transform:rotate(292.5deg) translate(91px) rotate(-292.5deg)!important}.fortune-wheel>span:nth-child(8){transform:rotate(337.5deg) translate(91px) rotate(-337.5deg)!important}
.wheel-center{position:absolute;z-index:5;left:50%;top:50%;width:72px;height:72px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#fff7dc,#e7b83e);border:7px solid #264a6e;box-shadow:0 8px 18px rgba(0,0,0,.55),inset 0 2px 5px rgba(255,255,255,.9)}
.wheel-center span{position:static!important;transform:none!important;font-size:18px!important;color:#203a55!important;text-shadow:none!important;letter-spacing:.08em}
.fortune-wheel.is-spinning .wheel-center span{animation:wheelPulse .45s ease-in-out infinite alternate}
.wheel-result{display:flex!important;flex-direction:column;justify-content:center;min-height:66px!important;margin:5px auto 0;padding:10px 18px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.wheel-result small{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:#a9c0d7}.wheel-result strong{font-size:23px;color:#fff3c4;text-shadow:0 2px 10px rgba(255,193,58,.18)}
.wheel-spin-button{min-width:155px;background:linear-gradient(135deg,#277ed6,#165a9e)!important;box-shadow:0 8px 22px rgba(21,100,180,.34)}
.wheel-spin-button:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.08)}
.wheel-confetti{position:absolute;z-index:10;left:50%;top:48%;width:1px;height:1px;pointer-events:none}.wheel-confetti i{position:absolute;width:7px;height:12px;border-radius:2px;background:hsl(calc(var(--n,1)*47),85%,60%);opacity:0}.wheel-confetti i:nth-child(3n){width:10px;height:6px}.wheel-confetti.play i{animation:wheelConfetti 1.05s ease-out var(--d) both}.wheel-confetti i:nth-child(1){--n:1}.wheel-confetti i:nth-child(2){--n:2}.wheel-confetti i:nth-child(3){--n:3}.wheel-confetti i:nth-child(4){--n:4}.wheel-confetti i:nth-child(5){--n:5}.wheel-confetti i:nth-child(6){--n:6}.wheel-confetti i:nth-child(7){--n:7}.wheel-confetti i:nth-child(8){--n:8}
@keyframes wheelGlow{to{transform:scale(1.08);opacity:.72}}@keyframes wheelPulse{to{transform:scale(1.12)}}@keyframes wheelConfetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),180px) rotate(var(--r))}}
@media(max-width:520px){#wheelGameModal .chat-game-dialog{padding:19px 10px}.wheel-stage{width:286px;height:302px;transform:scale(.9);margin:-2px auto -18px}.wheel-result{margin-inline:6px}.wheel-spin-button{min-width:138px}}
@media(prefers-reduced-motion:reduce){.fortune-wheel,.wheel-glow,.wheel-center span,.wheel-confetti i{animation:none!important;transition-duration:.01ms!important}}
/* Modernes Würfelspiel */
.dice-stage{position:relative;display:grid;place-items:center;width:210px;height:190px;margin:14px auto 0;perspective:700px}
.dice-shadow{position:absolute;left:50%;bottom:18px;width:128px;height:30px;transform:translateX(-50%);border-radius:50%;background:rgba(0,0,0,.58);filter:blur(10px);transition:transform .3s,opacity .3s}
.modern-die{position:relative;width:128px;height:128px;border:3px solid rgba(255,255,255,.82);border-radius:27px;background:linear-gradient(145deg,#fff 0%,#f1f3f6 58%,#c8ced8 100%);box-shadow:inset 8px 8px 14px rgba(255,255,255,.9),inset -9px -10px 15px rgba(83,91,104,.25),0 16px 28px rgba(0,0,0,.5);transform:rotate(-4deg);transition:transform .35s cubic-bezier(.2,.75,.25,1.25)}
.modern-die::before{content:"";position:absolute;inset:8px;border-radius:20px;border:1px solid rgba(255,255,255,.8);pointer-events:none}
.pip{position:absolute;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#5f6875 0 10%,#20242a 42%,#08090b 100%);box-shadow:inset 2px 2px 4px rgba(255,255,255,.22),0 2px 3px rgba(0,0,0,.38);opacity:0;transform:scale(.4);transition:opacity .12s,transform .12s}
.p1{left:22px;top:22px}.p2{left:53px;top:22px}.p3{right:22px;top:22px}.p4{left:22px;top:53px}.p5{left:53px;top:53px}.p6{right:22px;top:53px}.p7{left:22px;bottom:22px}.p8{left:53px;bottom:22px}.p9{right:22px;bottom:22px}
.modern-die[data-face="1"] .p5,
.modern-die[data-face="2"] .p1,.modern-die[data-face="2"] .p9,
.modern-die[data-face="3"] .p1,.modern-die[data-face="3"] .p5,.modern-die[data-face="3"] .p9,
.modern-die[data-face="4"] .p1,.modern-die[data-face="4"] .p3,.modern-die[data-face="4"] .p7,.modern-die[data-face="4"] .p9,
.modern-die[data-face="5"] .p1,.modern-die[data-face="5"] .p3,.modern-die[data-face="5"] .p5,.modern-die[data-face="5"] .p7,.modern-die[data-face="5"] .p9,
.modern-die[data-face="6"] .p1,.modern-die[data-face="6"] .p3,.modern-die[data-face="6"] .p4,.modern-die[data-face="6"] .p6,.modern-die[data-face="6"] .p7,.modern-die[data-face="6"] .p9{opacity:1;transform:scale(1)}
.modern-die.rolling{animation:modern-dice-roll .95s cubic-bezier(.22,.7,.2,1)}
.modern-die.rolling+.dice-number{opacity:.7}
.modern-die.landed{animation:dice-land-pop .42s cubic-bezier(.2,.85,.25,1.3)}
.dice-stage:has(.modern-die.rolling) .dice-shadow{transform:translateX(-50%) scale(.68);opacity:.45}
.dice-number{min-height:34px;margin-top:-3px;font-size:22px;font-weight:800;letter-spacing:.2px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.dice-roll-button{min-width:150px}
@keyframes modern-dice-roll{0%{transform:translateY(0) rotate(-4deg) rotateX(0) rotateY(0) scale(1)}22%{transform:translateY(-42px) rotate(22deg) rotateX(140deg) rotateY(110deg) scale(1.08)}52%{transform:translateY(-18px) rotate(-18deg) rotateX(310deg) rotateY(245deg) scale(1.04)}76%{transform:translateY(-34px) rotate(13deg) rotateX(470deg) rotateY(390deg) scale(1.07)}100%{transform:translateY(0) rotate(-4deg) rotateX(720deg) rotateY(540deg) scale(1)}}
@keyframes dice-land-pop{0%{transform:rotate(-4deg) scale(.88)}55%{transform:rotate(3deg) scale(1.08)}100%{transform:rotate(-4deg) scale(1)}}
@media(max-width:520px){.dice-stage{width:180px;height:168px}.modern-die{width:112px;height:112px;border-radius:24px}.pip{width:19px;height:19px}.p1{left:19px;top:19px}.p2{left:45px;top:19px}.p3{right:19px;top:19px}.p4{left:19px;top:45px}.p5{left:45px;top:45px}.p6{right:19px;top:45px}.p7{left:19px;bottom:19px}.p8{left:45px;bottom:19px}.p9{right:19px;bottom:19px}.dice-number{font-size:19px}}
@media(prefers-reduced-motion:reduce){.modern-die.rolling,.modern-die.landed{animation-duration:.01ms!important}}
/* Adminpanel: Login-Designgrafik und Chatinneres nebeneinander */
body.admin-page .admin-right-stack .admin-design-card .design-upload-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:16px;
align-items:start;
}
body.admin-page .admin-right-stack .admin-design-card .design-upload-box{
min-width:0;
height:100%;
}
@media (max-width:720px){
body.admin-page .admin-right-stack .admin-design-card .design-upload-grid{
grid-template-columns:1fr;
}
}
/* Adminpanel ohne Spaltenluecke: zwei unabhaengige Kartenstapel */
body.admin-page .admin-dashboard-grid{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
gap:18px;
align-items:start;
}
body.admin-page .admin-left-stack,
body.admin-page .admin-right-stack{
display:flex;
flex-direction:column;
gap:18px;
min-width:0;
}
body.admin-page .admin-left-stack > .admin-card,
body.admin-page .admin-right-stack > .admin-card{
width:100%;
margin:0;
grid-column:auto;
grid-row:auto;
}
body.admin-page .admin-left-stack .admin-design-card .design-upload-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:16px;
align-items:start;
}
body.admin-page .admin-left-stack .admin-design-card .design-upload-box{
min-width:0;
height:100%;
}
@media(max-width:900px){
body.admin-page .admin-dashboard-grid{grid-template-columns:1fr;}
}
@media(max-width:720px){
body.admin-page .admin-left-stack .admin-design-card .design-upload-grid{grid-template-columns:1fr;}
}
/* Korrigierte Smileyverwaltung: volle Breite unter dem Hauptbereich */
body.admin-page .admin-smiley-management-grid{
display:grid;
grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr);
gap:18px;
align-items:start;
margin-top:18px;
width:100%;
}
body.admin-page .admin-smiley-management-grid > .admin-card{
width:100%;
min-width:0;
margin:0;
height:auto;
}
body.admin-page .admin-smiley-management-grid .smiley-admin-grid.compact{
grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
@media(max-width:1050px){
body.admin-page .admin-smiley-management-grid{grid-template-columns:1fr;}
}
/* Kompakte Smileyverwaltung: viele Smileys nebeneinander, eigene Scrollbar */
body.admin-page .admin-smiley-list-card{min-width:0;}
body.admin-page .smiley-admin-toolbar{
display:grid;
grid-template-columns:minmax(180px,1fr) minmax(150px,.65fr);
gap:10px;
margin:0 0 10px;
}
body.admin-page .smiley-admin-toolbar input,
body.admin-page .smiley-admin-toolbar select{width:100%;margin:0;}
body.admin-page .admin-smiley-list-card .smiley-admin-grid.compact{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
gap:10px;
max-height:520px;
overflow-y:auto;
overflow-x:hidden;
padding:4px 8px 4px 2px;
align-content:start;
scrollbar-width:thin;
scrollbar-color:#2866a5 #0d131a;
}
body.admin-page .admin-smiley-list-card .smiley-admin-grid.compact::-webkit-scrollbar{width:9px;}
body.admin-page .admin-smiley-list-card .smiley-admin-grid.compact::-webkit-scrollbar-track{background:#0d131a;border-radius:10px;}
body.admin-page .admin-smiley-list-card .smiley-admin-grid.compact::-webkit-scrollbar-thumb{background:#2866a5;border-radius:10px;border:2px solid #0d131a;}
body.admin-page .admin-smiley-list-card .smiley-admin-item.compact{
min-width:0;
padding:9px;
display:flex;
flex-direction:column;
gap:7px;
}
body.admin-page .admin-smiley-list-card .smiley-admin-preview{display:flex;align-items:center;gap:8px;min-width:0;}
body.admin-page .admin-smiley-list-card .smiley-admin-preview img{width:42px!important;height:42px!important;flex:0 0 42px;object-fit:contain;}
body.admin-page .admin-smiley-list-card .smiley-admin-preview strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;}
body.admin-page .admin-smiley-list-card .smiley-admin-item .field label{font-size:12px;}
body.admin-page .admin-smiley-list-card .smiley-admin-item input[type="text"],
body.admin-page .admin-smiley-list-card .smiley-admin-item input:not([type]){padding:7px 8px;font-size:13px;}
body.admin-page .admin-smiley-list-card .smiley-admin-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto;}
body.admin-page .admin-smiley-list-card .smiley-admin-actions .btn{padding:7px 6px;font-size:12px;}
body.admin-page .admin-smiley-list-card .smiley-admin-item[hidden]{display:none!important;}
@media(max-width:1050px){
body.admin-page .admin-smiley-list-card .smiley-admin-grid.compact{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));max-height:460px;}
}
@media(max-width:600px){
body.admin-page .smiley-admin-toolbar{grid-template-columns:1fr;}
body.admin-page .admin-smiley-list-card .smiley-admin-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));max-height:420px;}
}
@media(max-width:390px){
body.admin-page .admin-smiley-list-card .smiley-admin-grid.compact{grid-template-columns:1fr;}
}
/* Admin: Smiley-Upload direkt unter der Benutzerverwaltung */
body.admin-page .admin-right-stack > .admin-smiley-upload-card{
width:100%;
margin:0;
grid-column:auto;
grid-row:auto;
}
body.admin-page .admin-smiley-management-grid{
grid-template-columns:1fr;
}
body.admin-page .admin-smiley-management-grid > .admin-smiley-list-card{
width:100%;
}
/* Finale Smiley-Anordnung: maximal fünf Smileys nebeneinander */
body.chat-page .smiley-category:not([hidden]){
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:9px;
align-items:center;
}
body.chat-page .smiley-category .smiley{
width:100%;
min-width:0!important;
box-sizing:border-box;
}
@media(max-width:420px){
body.chat-page .smiley-category:not([hidden]){gap:6px;}
body.chat-page .smiley-category .smiley{padding:5px;}
}
/* Chatnachrichten: Smileys und GIF-Smileys inline, bis zu 5 pro Zeile */
body.chat-page .msg .text .chat-smiley,
body.chat-page .msg .text .custom-chat-image,
body.chat-page .msg .text .chat-gif{
display:inline-block !important;
width:calc((100% - 32px) / 5) !important;
height:72px !important;
max-width:96px !important;
max-height:96px !important;
margin:4px 4px !important;
object-fit:contain !important;
vertical-align:middle !important;
}
body.chat-page .msg .text .builtin-chat-smiley{
display:inline-flex !important;
width:calc((100% - 32px) / 5) !important;
max-width:72px !important;
min-height:52px;
margin:4px 4px !important;
align-items:center;
justify-content:center;
vertical-align:middle !important;
}
@media(max-width:480px){
body.chat-page .msg .text .chat-smiley,
body.chat-page .msg .text .custom-chat-image,
body.chat-page .msg .text .chat-gif{
height:56px !important;
max-height:72px !important;
}
body.chat-page .msg .text .builtin-chat-smiley{
min-height:46px;
}
}
/* Privatnachrichten: Auswahl und Nachrichten stehen sauber untereinander. */
body.chat-page .private-recipient-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid rgba(255,255,255,.12);background:rgba(7,22,39,.98)}
body.chat-page .private-recipient-row label{font-size:12px;font-weight:700;color:#c8def3;white-space:nowrap}
body.chat-page #recipientUser{min-width:0;max-width:280px;padding:8px 10px;border:1px solid #2c6292;border-radius:8px;background:#071a2d;color:#fff}
body.chat-page .private-reset{padding:8px 10px;margin-left:auto}
body.chat-page .private-message{display:block!important;width:100%;margin:8px 0!important;border-left:4px solid #8bb1d8;background:linear-gradient(90deg,rgba(29,58,87,.96),rgba(19,33,48,.96))!important}
body.chat-page .private-message.mine{background:linear-gradient(90deg,rgba(31,66,101,.98),rgba(22,44,67,.98))!important}
body.chat-page .private-label{display:inline-flex;align-items:center;margin-left:6px;padding:2px 7px;border-radius:999px;background:#236ba8;color:#fff;font-size:11px;font-weight:700}
body.chat-page .user-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:3px}
body.chat-page .private-message-button{border:1px solid #3279ad;border-radius:7px;padding:4px 8px;background:#173653;color:#fff;font-size:12px;font-weight:700;cursor:pointer}
body.chat-page .private-message-button:hover{background:#1769aa}
body.chat-page.private-compose-active .composer{border-top-color:#3c82b9;background:rgba(12,48,79,.98)}
@media(max-width:760px){body.chat-page .private-recipient-row{padding:7px 8px;flex-wrap:wrap}body.chat-page .private-recipient-row label{width:100%}body.chat-page #recipientUser{flex:1;max-width:none}body.chat-page .private-reset{margin-left:0}}
/* Radio Dardesheim Sammelupdate: responsive Chat, Nachrichten-Hintergrund und moderne Spiele */
/* Radiochat 1.0.9: Chat vollstaendig an Browserfenster anpassen */
body.chat-page .shell{
width:100vw;
max-width:none;
margin:0;
padding:8px;
}
body.chat-page .chat-layout{
width:100%;
grid-template-columns:minmax(0,1fr) clamp(260px,20vw,360px);
gap:8px;
}
body.chat-page .chat-main,
body.chat-page .sidebar{
border-radius:10px;
}
body.chat-page .topbar{
gap:8px;
padding:10px 12px;
}
body.chat-page .navlinks{
display:flex;
align-items:center;
justify-content:flex-end;
gap:6px;
flex-wrap:wrap;
}
body.chat-page .navlinks a{
margin-left:0;
}
body.chat-page .messages{
width:100%;
}
body.chat-page .composer{
width:100%;
}
body.chat-page .sidebar{
width:100%;
overflow-y:auto;
overflow-x:hidden;
}
@media(max-width:1100px){
body.chat-page .chat-layout{
grid-template-columns:minmax(0,1fr) clamp(220px,24vw,300px);
}
body.chat-page .topbar{font-size:14px}
body.chat-page .navlinks .btn,
body.chat-page .navlinks a{padding:8px 10px}
}
@media(max-width:760px){
body.chat-page .shell{
width:100%;
padding:0;
}
body.chat-page .chat-layout{
display:block;
width:100%;
height:100%;
}
body.chat-page .chat-main{
width:100%;
height:100%;
border-radius:0;
}
body.chat-page .topbar{
min-height:0;
flex-wrap:wrap;
align-items:flex-start;
}
body.chat-page .navlinks{
width:100%;
justify-content:flex-start;
}
body.chat-page .sidebar{
width:auto;
height:auto;
border-radius:0;
}
}
/* Radiochat 1.0.11: Nachrichten sichtbar ueber dem Chat-Hintergrund */
body.chat-page .messages{position:relative!important;isolation:isolate}
body.chat-page .chat-design-image{position:absolute!important;inset:0!important;top:0!important;left:0!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;object-fit:cover!important;object-position:center center!important;z-index:0!important;pointer-events:none!important}
body.chat-page .messages>.msg{position:relative!important;z-index:2!important}
/* Radiochat 1.0.12 - modernes Würfelspiel und Glücksrad */
.game-top-button{position:relative;overflow:hidden;border-color:rgba(255,255,255,.12)!important;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.22);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.game-top-button:hover{transform:translateY(-1px);border-color:rgba(99,181,246,.45)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 22px rgba(0,0,0,.3),0 0 0 1px rgba(23,105,170,.16)}
.chat-game-modal{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:radial-gradient(circle at 50% 40%,rgba(18,69,112,.24),rgba(0,0,0,.86) 62%)!important;animation:gameModalFade .2s ease both}
.game-dialog-modern{isolation:isolate;width:min(520px,calc(100vw - 24px))!important;overflow:hidden;padding:28px 28px 24px!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:26px!important;background:linear-gradient(145deg,rgba(9,31,54,.98),rgba(16,10,14,.98))!important;box-shadow:0 30px 90px rgba(0,0,0,.65),0 0 0 1px rgba(23,105,170,.14),inset 0 1px 0 rgba(255,255,255,.06)!important;animation:gameDialogIn .3s cubic-bezier(.2,.8,.2,1) both}
.game-dialog-modern:before{content:"";position:absolute;z-index:-1;inset:-140px -70px auto;height:260px;background:radial-gradient(circle,rgba(35,117,180,.2),transparent 68%);pointer-events:none}.game-kicker{margin-bottom:5px;color:#8aa9c8;font-size:10px;font-weight:800;letter-spacing:.18em}.game-dialog-modern h2{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 42px 5px!important;font-size:25px;letter-spacing:-.02em}.game-title-icon{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.game-subtitle{margin:0 auto 18px;color:#bca9ae;font-size:13px}.game-dialog-modern .chat-game-close{z-index:5;right:14px;top:14px;width:39px;height:39px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);font-size:24px;line-height:1;transition:.18s ease}.game-dialog-modern .chat-game-close:hover{transform:rotate(5deg);border-color:rgba(99,181,246,.45);background:rgba(23,105,170,.42)}
.dice-stage{position:relative;display:grid;place-items:center;min-height:205px;margin:4px 0 12px}.dice-glow{position:absolute;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(36,121,184,.28),rgba(20,78,126,.08) 45%,transparent 72%);filter:blur(5px);animation:diceGlow 2.4s ease-in-out infinite}.dice-result{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:center;width:170px;height:170px;min-height:0!important;margin:0!important;border:1px solid rgba(255,255,255,.18);border-radius:36px;background:linear-gradient(145deg,#fff,#d9d9dc);box-shadow:0 22px 45px rgba(0,0,0,.5),inset 0 2px 2px rgba(255,255,255,.9),inset 0 -10px 24px rgba(80,80,90,.12);filter:none!important;color:#11161b;transform:rotate(-2deg);transition:transform .18s ease,box-shadow .18s ease}.dice-result .dice-face{font-size:105px;line-height:.88;font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif;color:#151c24;text-shadow:0 2px 0 rgba(255,255,255,.7)}.dice-result .dice-number{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 10px;border-radius:999px;background:#151c24;color:#fff;font-size:11px;font-weight:800;letter-spacing:.03em}.dice-result.rolling{animation:diceRollModern .15s linear infinite;box-shadow:0 28px 60px rgba(0,0,0,.58),0 0 32px rgba(36,121,184,.28)}.dice-result.landed{animation:diceLand .6s cubic-bezier(.2,.8,.2,1)}.game-status{min-height:39px;display:flex;align-items:center;justify-content:center;margin:0 auto 5px;padding:8px 14px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.035);color:#d5c8cc;font-size:12px}
.wheel-dialog{width:min(560px,calc(100vw - 24px))!important}.wheel-stage{position:relative;display:grid;place-items:center;min-height:330px;margin:-4px 0 0}.wheel-halo{position:absolute;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(35,117,180,.22),rgba(17,91,158,.12) 38%,transparent 70%);filter:blur(9px)}.wheel-wrap{position:relative!important;width:306px!important;height:315px!important;margin:0 auto!important;transform:none!important}.wheel-pointer{z-index:8!important;top:-1px!important;left:50%!important;width:42px;height:47px;transform:translateX(-50%)!important;font-size:0!important;color:transparent!important;filter:drop-shadow(0 5px 6px rgba(0,0,0,.55))}.wheel-pointer:before{content:"";position:absolute;left:50%;top:0;width:28px;height:28px;transform:translateX(-50%) rotate(45deg);border-radius:7px 7px 13px 7px;background:linear-gradient(145deg,#fff,#d9d9df);box-shadow:inset 0 1px 0 #fff}.wheel-pointer span{position:absolute;z-index:2;left:50%;top:8px;width:8px;height:8px;transform:translateX(-50%);border-radius:50%;background:#1769aa}.fortune-wheel{left:8px!important;top:18px!important;width:290px!important;height:290px!important;border:7px solid #e7e7ea!important;background:conic-gradient(#2479b8 0 45deg,#e9a02f 45deg 90deg,#2479b8 90deg 135deg,#67a43d 135deg 180deg,#783f94 180deg 225deg,#d65d32 225deg 270deg,#238c81 270deg 315deg,#c49a27 315deg 360deg)!important;box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 0 5px rgba(255,255,255,.05),inset 0 0 0 2px rgba(0,0,0,.25)!important;transition:transform 3s cubic-bezier(.12,.62,.08,1)!important}.fortune-wheel:after{content:"";position:absolute;inset:11px;border:1px solid rgba(255,255,255,.18);border-radius:50%;pointer-events:none}.fortune-wheel span{left:50%!important;top:50%!important;width:75px;color:#fff;font-size:10px!important;font-weight:900!important;line-height:1.05;text-align:center;text-transform:uppercase;letter-spacing:.025em;text-shadow:0 2px 5px rgba(0,0,0,.7)!important;transform-origin:0 0!important}.fortune-wheel span b{display:block;transform:translate(-50%,-50%);font:inherit}.fortune-wheel span:nth-child(1){transform:rotate(22.5deg) translate(92px) rotate(-22.5deg)!important}.fortune-wheel span:nth-child(2){transform:rotate(67.5deg) translate(92px) rotate(-67.5deg)!important}.fortune-wheel span:nth-child(3){transform:rotate(112.5deg) translate(92px) rotate(-112.5deg)!important}.fortune-wheel span:nth-child(4){transform:rotate(157.5deg) translate(92px) rotate(-157.5deg)!important}.fortune-wheel span:nth-child(5){transform:rotate(202.5deg) translate(92px) rotate(-202.5deg)!important}.fortune-wheel span:nth-child(6){transform:rotate(247.5deg) translate(92px) rotate(-247.5deg)!important}.fortune-wheel span:nth-child(7){transform:rotate(292.5deg) translate(92px) rotate(-292.5deg)!important}.fortune-wheel span:nth-child(8){transform:rotate(337.5deg) translate(92px) rotate(-337.5deg)!important}.wheel-center{position:absolute;z-index:3;left:50%;top:50%;display:grid;place-items:center;width:58px;height:58px;transform:translate(-50%,-50%);border:5px solid #f1f1f3;border-radius:50%;background:radial-gradient(circle at 35% 30%,#155b96,#0c3154 70%);box-shadow:0 5px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25);color:#fff;font-style:normal;font-size:24px}.fortune-wheel.spinning{filter:saturate(1.12) brightness(1.06)}.modern-result{display:flex!important;align-items:center;justify-content:space-between;gap:16px;min-height:58px!important;margin:0 auto;padding:10px 14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));font-size:14px!important}.modern-result .result-label{color:#9f8f94;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.modern-result strong{color:#fff;font-size:18px}.modern-result.winner-pop{animation:winnerPop .6s cubic-bezier(.2,.9,.3,1)}
.modern-game-actions{margin-top:15px!important}.modern-game-actions .btn{min-height:44px;padding:10px 16px!important;border-radius:12px!important;font-weight:800}.game-primary{border-color:#2d7fbd!important;background:linear-gradient(180deg,#2275b4,#15588e)!important;box-shadow:0 8px 20px rgba(19,91,148,.28),inset 0 1px 0 rgba(255,255,255,.15)!important}.game-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}.game-primary:disabled{filter:grayscale(.5);opacity:.55;transform:none}.game-share{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.1)!important}.game-share:not(:disabled):hover{background:rgba(255,255,255,.09)!important}.game-share:disabled{opacity:.38}.modern-game-actions .btn span{margin-right:5px}
@keyframes gameModalFade{from{opacity:0}to{opacity:1}}@keyframes gameDialogIn{from{opacity:0;transform:translateY(12px) scale(.975)}to{opacity:1;transform:none}}@keyframes diceGlow{0%,100%{transform:scale(.92);opacity:.65}50%{transform:scale(1.08);opacity:1}}@keyframes diceRollModern{0%{transform:rotate(-5deg) translateY(0) scale(.98)}50%{transform:rotate(5deg) translateY(-5px) scale(1.02)}100%{transform:rotate(-5deg) translateY(0) scale(.98)}}@keyframes diceLand{0%{transform:scale(.88) rotate(-8deg)}55%{transform:scale(1.08) rotate(3deg)}100%{transform:rotate(-2deg)}}@keyframes winnerPop{0%{transform:scale(.96);box-shadow:0 0 0 rgba(36,121,184,0)}50%{transform:scale(1.025);box-shadow:0 0 26px rgba(36,121,184,.22)}100%{transform:none;box-shadow:none}}
@media(max-width:560px){.game-dialog-modern{padding:23px 15px 18px!important;border-radius:20px!important}.game-dialog-modern h2{font-size:21px}.game-kicker{font-size:9px}.dice-stage{min-height:178px}.dice-result{width:145px;height:145px;border-radius:30px}.dice-result .dice-face{font-size:88px}.wheel-stage{min-height:282px}.wheel-wrap{width:268px!important;height:276px!important}.fortune-wheel{left:7px!important;width:254px!important;height:254px!important}.fortune-wheel span{font-size:8px!important;width:64px}.fortune-wheel span:nth-child(1){transform:rotate(22.5deg) translate(80px) rotate(-22.5deg)!important}.fortune-wheel span:nth-child(2){transform:rotate(67.5deg) translate(80px) rotate(-67.5deg)!important}.fortune-wheel span:nth-child(3){transform:rotate(112.5deg) translate(80px) rotate(-112.5deg)!important}.fortune-wheel span:nth-child(4){transform:rotate(157.5deg) translate(80px) rotate(-157.5deg)!important}.fortune-wheel span:nth-child(5){transform:rotate(202.5deg) translate(80px) rotate(-202.5deg)!important}.fortune-wheel span:nth-child(6){transform:rotate(247.5deg) translate(80px) rotate(-247.5deg)!important}.fortune-wheel span:nth-child(7){transform:rotate(292.5deg) translate(80px) rotate(-292.5deg)!important}.fortune-wheel span:nth-child(8){transform:rotate(337.5deg) translate(80px) rotate(-337.5deg)!important}.modern-game-actions{display:grid!important;grid-template-columns:1fr!important}.modern-game-actions .btn{width:100%}.modern-result{min-height:52px!important}.modern-result strong{font-size:16px}}
/* v6: Chat-Hintergrund bleibt dauerhaft im sichtbaren Chatfenster */
body.chat-page .messages{
background-image:linear-gradient(rgba(7,17,31,.42),rgba(7,17,31,.42)),var(--chat-fixed-bg,none)!important;
background-size:cover!important;
background-position:center center!important;
background-repeat:no-repeat!important;
background-attachment:local!important;
}
body.chat-page .chat-design-image{display:none!important}
/* v7: Chat-Innenflaeche interaktiv halten; Hintergrund darf keine Eingaben abfangen */
body.chat-page .messages{
position:relative!important;
z-index:1!important;
pointer-events:auto!important;
touch-action:pan-y!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior:contain!important;
-webkit-overflow-scrolling:touch;
background-image:linear-gradient(rgba(7,17,31,.42),rgba(7,17,31,.42)),var(--chat-fixed-bg,none)!important;
background-size:cover!important;
background-position:center center!important;
background-repeat:no-repeat!important;
background-attachment:local!important;
}
body.chat-page .messages::before,
body.chat-page .messages::after,
body.chat-page .chat-design-image{
pointer-events:none!important;
}
body.chat-page .messages>.msg,
body.chat-page .messages>.msg *,
body.chat-page .clickable-chat-smiley,
body.chat-page .message-avatar{
pointer-events:auto!important;
}
body.chat-page .chat-main{
min-height:0!important;
overflow:hidden!important;
}
body.chat-page .composer,
body.chat-page .text-format-toolbar,
body.chat-page .private-recipient-row,
body.chat-page .smiley-panel{
position:relative;
z-index:20!important;
pointer-events:auto!important;
}
body.chat-page .composer input,
body.chat-page .composer button,
body.chat-page .text-format-toolbar input,
body.chat-page .text-format-toolbar select,
body.chat-page .text-format-toolbar button,
body.chat-page .private-recipient-row select,
body.chat-page .private-recipient-row button,
body.chat-page .smiley-panel button{
pointer-events:auto!important;
}
/* Moderator-Freischaltung im Adminbereich */
.mod-role-form{margin-top:7px}.mod-role-form .btn{width:100%;white-space:nowrap}.btn.mod-promote{background:#2f7d46}.user-admin-form{align-items:center}
/* Einheitliche Smiley-Groesse: Vorschau und Chatdarstellung */
body.chat-page button.smiley,
body.chat-page button.smiley.smiley-gif-button {
width:58px !important;
height:58px !important;
min-width:58px !important;
min-height:58px !important;
padding:5px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
}
body.chat-page button.smiley img,
body.chat-page button.smiley .custom-smiley-image,
body.chat-page button.smiley .gif-smiley-image,
body.chat-page button.smiley.smiley-gif-button .gif-smiley-image {
width:46px !important;
height:46px !important;
max-width:46px !important;
max-height:46px !important;
object-fit:contain !important;
}
body.chat-page button.smiley:not(:has(img)) {
font-size:2.7rem !important;
}
body.chat-page .chat-smiley,
body.chat-page .chat-smiley.chat-gif,
body.chat-page .builtin-chat-smiley,
body.chat-page .messages .msg .message-smiley {
width:42px !important;
height:42px !important;
max-width:42px !important;
max-height:42px !important;
font-size:2.45rem !important;
line-height:42px !important;
object-fit:contain !important;
display:inline-block !important;
vertical-align:middle !important;
margin:0 3px !important;
}
@media(max-width:760px){
body.chat-page button.smiley,
body.chat-page button.smiley.smiley-gif-button {
width:52px !important;height:52px !important;min-width:52px !important;min-height:52px !important;
}
body.chat-page button.smiley img,
body.chat-page button.smiley .custom-smiley-image,
body.chat-page button.smiley .gif-smiley-image,
body.chat-page button.smiley.smiley-gif-button .gif-smiley-image {
width:40px !important;height:40px !important;max-width:40px !important;max-height:40px !important;
}
body.chat-page .chat-smiley,
body.chat-page .chat-smiley.chat-gif,
body.chat-page .builtin-chat-smiley,
body.chat-page .messages .msg .message-smiley {
width:36px !important;height:36px !important;max-width:36px !important;max-height:36px !important;
font-size:2.1rem !important;line-height:36px !important;
}
}
/* Smileys groesser: Auswahl und Chatdarstellung */
body.chat-page button.smiley,
body.chat-page button.smiley.smiley-gif-button {
width:76px !important;
height:76px !important;
min-width:76px !important;
min-height:76px !important;
padding:6px !important;
}
body.chat-page button.smiley img,
body.chat-page button.smiley .custom-smiley-image,
body.chat-page button.smiley .gif-smiley-image,
body.chat-page button.smiley.smiley-gif-button .gif-smiley-image {
width:64px !important;
height:64px !important;
max-width:64px !important;
max-height:64px !important;
}
body.chat-page button.smiley:not(:has(img)) {
font-size:3.7rem !important;
}
body.chat-page .chat-smiley,
body.chat-page .chat-smiley.chat-gif,
body.chat-page .builtin-chat-smiley,
body.chat-page .messages .msg .message-smiley {
width:56px !important;
height:56px !important;
max-width:56px !important;
max-height:56px !important;
font-size:3.2rem !important;
line-height:56px !important;
}
@media(max-width:760px){
body.chat-page button.smiley,
body.chat-page button.smiley.smiley-gif-button {
width:68px !important;height:68px !important;min-width:68px !important;min-height:68px !important;
}
body.chat-page button.smiley img,
body.chat-page button.smiley .custom-smiley-image,
body.chat-page button.smiley .gif-smiley-image,
body.chat-page button.smiley.smiley-gif-button .gif-smiley-image {
width:56px !important;height:56px !important;max-width:56px !important;max-height:56px !important;
}
body.chat-page .chat-smiley,
body.chat-page .chat-smiley.chat-gif,
body.chat-page .builtin-chat-smiley,
body.chat-page .messages .msg .message-smiley {
width:48px !important;height:48px !important;max-width:48px !important;max-height:48px !important;
font-size:2.8rem !important;line-height:48px !important;
}
}
/* Smileys XL: deutlich groesser und auf allen Geraeten einheitlich */
body.chat-page button.smiley,
body.chat-page button.smiley.smiley-gif-button {
width:104px !important;
height:104px !important;
min-width:104px !important;
min-height:104px !important;
padding:7px !important;
}
body.chat-page button.smiley img,
body.chat-page button.smiley .custom-smiley-image,
body.chat-page button.smiley .gif-smiley-image,
body.chat-page button.smiley.smiley-gif-button .gif-smiley-image {
width:90px !important;
height:90px !important;
max-width:90px !important;
max-height:90px !important;
object-fit:contain !important;
}
body.chat-page button.smiley:not(:has(img)) {
font-size:5.2rem !important;
line-height:1 !important;
}
body.chat-page .chat-smiley,
body.chat-page .chat-smiley.chat-gif,
body.chat-page .builtin-chat-smiley,
body.chat-page .messages .msg .message-smiley {
width:78px !important;
height:78px !important;
max-width:78px !important;
max-height:78px !important;
font-size:4.5rem !important;
line-height:78px !important;
object-fit:contain !important;
}
@media(max-width:760px){
body.chat-page button.smiley,
body.chat-page button.smiley.smiley-gif-button {
width:92px !important;height:92px !important;min-width:92px !important;min-height:92px !important;
}
body.chat-page button.smiley img,
body.chat-page button.smiley .custom-smiley-image,
body.chat-page button.smiley .gif-smiley-image,
body.chat-page button.smiley.smiley-gif-button .gif-smiley-image {
width:78px !important;height:78px !important;max-width:78px !important;max-height:78px !important;
}
body.chat-page button.smiley:not(:has(img)) {font-size:4.5rem !important;}
body.chat-page .chat-smiley,
body.chat-page .chat-smiley.chat-gif,
body.chat-page .builtin-chat-smiley,
body.chat-page .messages .msg .message-smiley {
width:68px !important;height:68px !important;max-width:68px !important;max-height:68px !important;
font-size:3.9rem !important;line-height:68px !important;
}
}
/* Smiley XXL final: sichtbar gross, ohne 5er-Verkleinerung */
body.chat-page .smiley-category:not([hidden]){
grid-template-columns:repeat(4,minmax(110px,1fr)) !important;
gap:12px !important;
}
body.chat-page .smiley-category .smiley,
body.chat-page button.smiley,
body.chat-page button.smiley.smiley-gif-button{
width:100% !important;
height:128px !important;
min-height:128px !important;
padding:8px !important;
}
body.chat-page button.smiley img,
body.chat-page button.smiley .custom-smiley-image,
body.chat-page button.smiley .gif-smiley-image,
body.chat-page button.smiley.smiley-gif-button .gif-smiley-image{
width:112px !important;
height:112px !important;
max-width:112px !important;
max-height:112px !important;
object-fit:contain !important;
}
body.chat-page button.smiley:not(:has(img)){font-size:6rem !important;line-height:1 !important;}
body.chat-page .msg .text .chat-smiley,
body.chat-page .msg .text .custom-chat-image,
body.chat-page .msg .text .chat-gif{
display:inline-block !important;
width:120px !important;
height:120px !important;
min-width:120px !important;
min-height:120px !important;
max-width:120px !important;
max-height:120px !important;
object-fit:contain !important;
margin:6px !important;
}
body.chat-page .msg .text .builtin-chat-smiley{
display:inline-flex !important;
width:120px !important;
height:120px !important;
min-width:120px !important;
min-height:120px !important;
max-width:120px !important;
max-height:120px !important;
font-size:6rem !important;
line-height:1 !important;
align-items:center !important;
justify-content:center !important;
margin:6px !important;
}
@media(max-width:760px){
body.chat-page .smiley-category:not([hidden]){grid-template-columns:repeat(3,minmax(92px,1fr)) !important;gap:8px !important;}
body.chat-page .smiley-category .smiley,
body.chat-page button.smiley,
body.chat-page button.smiley.smiley-gif-button{height:108px !important;min-height:108px !important;}
body.chat-page button.smiley img,
body.chat-page button.smiley .custom-smiley-image,
body.chat-page button.smiley .gif-smiley-image,
body.chat-page button.smiley.smiley-gif-button .gif-smiley-image{width:94px !important;height:94px !important;max-width:94px !important;max-height:94px !important;}
body.chat-page button.smiley:not(:has(img)){font-size:5rem !important;}
body.chat-page .msg .text .chat-smiley,
body.chat-page .msg .text .custom-chat-image,
body.chat-page .msg .text .chat-gif{width:96px !important;height:96px !important;min-width:96px !important;min-height:96px !important;max-width:96px !important;max-height:96px !important;}
body.chat-page .msg .text .builtin-chat-smiley{width:96px !important;height:96px !important;min-width:96px !important;min-height:96px !important;max-width:96px !important;max-height:96px !important;font-size:5rem !important;}
}
/* Smiley XXXL: nochmals groesser */
body.chat-page .smiley-category:not([hidden]){
grid-template-columns:repeat(3,minmax(150px,1fr)) !important;
}
body.chat-page .smiley-category .smiley,
body.chat-page button.smiley,
body.chat-page button.smiley.smiley-gif-button{
height:168px !important;
min-height:168px !important;
}
body.chat-page button.smiley img,
body.chat-page button.smiley .custom-smiley-image,
body.chat-page button.smiley .gif-smiley-image,
body.chat-page button.smiley.smiley-gif-button .gif-smiley-image{
width:150px !important;
height:150px !important;
max-width:150px !important;
max-height:150px !important;
}
body.chat-page button.smiley:not(:has(img)){font-size:8rem !important;}
body.chat-page .msg .text .chat-smiley,
body.chat-page .msg .text .custom-chat-image,
body.chat-page .msg .text .chat-gif,
body.chat-page .msg .text .builtin-chat-smiley{
width:150px !important;
height:150px !important;
min-width:150px !important;
min-height:150px !important;
max-width:150px !important;
max-height:150px !important;
}
body.chat-page .msg .text .builtin-chat-smiley{font-size:7.5rem !important;}
@media(max-width:760px){
body.chat-page .smiley-category:not([hidden]){grid-template-columns:repeat(2,minmax(130px,1fr)) !important;}
body.chat-page .smiley-category .smiley,
body.chat-page button.smiley,
body.chat-page button.smiley.smiley-gif-button{height:148px !important;min-height:148px !important;}
body.chat-page button.smiley img,
body.chat-page button.smiley .custom-smiley-image,
body.chat-page button.smiley .gif-smiley-image,
body.chat-page button.smiley.smiley-gif-button .gif-smiley-image{width:130px !important;height:130px !important;max-width:130px !important;max-height:130px !important;}
body.chat-page button.smiley:not(:has(img)){font-size:7rem !important;}
body.chat-page .msg .text .chat-smiley,
body.chat-page .msg .text .custom-chat-image,
body.chat-page .msg .text .chat-gif,
body.chat-page .msg .text .builtin-chat-smiley{width:120px !important;height:120px !important;min-width:120px !important;min-height:120px !important;max-width:120px !important;max-height:120px !important;}
body.chat-page .msg .text .builtin-chat-smiley{font-size:6rem !important;}
}
/* Radio Dardesheim: radio-themed fortune wheel */
.fortune-wheel span{width:88px!important;font-size:9px!important;line-height:1.08!important;letter-spacing:0!important;text-transform:none!important}
.fortune-wheel span b{white-space:normal;overflow-wrap:normal;hyphens:auto}
.wheel-center{font-size:25px!important}
@media(max-width:560px){.fortune-wheel span{width:74px!important;font-size:7.5px!important;line-height:1.05!important}}
/* Radiochat 1.0.13 - Radio-Kniffel */
.kniffel-dialog{width:min(760px,96vw)!important;max-height:min(92vh,860px);overflow:auto;text-align:left!important}.kniffel-dialog h2,.kniffel-dialog .game-kicker,.kniffel-dialog .game-subtitle{text-align:center}.kniffel-topline{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:14px 0 9px;padding:9px 12px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.04);font-size:13px}.kniffel-topline strong{color:#fff;font-size:16px}.kniffel-dice{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:11px 0 12px}.kniffel-die{min-width:0;padding:8px 4px 7px;border:2px solid rgba(255,255,255,.14);border-radius:16px;background:linear-gradient(145deg,#fff,#d8d8dc);box-shadow:0 8px 18px rgba(0,0,0,.32);color:#121921;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}.kniffel-die span{display:block;font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif;font-size:58px;line-height:1}.kniffel-die small{display:block;margin-top:4px;font-size:8px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.kniffel-die:hover{transform:translateY(-2px)}.kniffel-die.held{border-color:#efb44b;box-shadow:0 0 0 2px rgba(239,180,75,.2),0 8px 18px rgba(0,0,0,.36);transform:translateY(-4px)}.kniffel-die.held small{color:#8b5d05}.kniffel-die.inactive{opacity:.72;cursor:default}.kniffel-dice.rolling .kniffel-die:not(.held){animation:kniffelShake .14s linear infinite}.kniffel-roll-info{display:flex;justify-content:space-between;gap:10px;margin:-1px 2px 10px;color:#bfaeb4;font-size:11px}.kniffel-scorecard{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:0 0 13px}.kniffel-score{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:38px;padding:7px 10px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.045);color:#eee;text-align:left;cursor:pointer}.kniffel-score:not(:disabled):hover{border-color:rgba(239,180,75,.65);background:rgba(239,180,75,.08)}.kniffel-score strong{display:grid;place-items:center;min-width:34px;height:25px;padding:0 6px;border-radius:8px;background:#132435;color:#fff}.kniffel-score.used{opacity:.58;background:rgba(255,255,255,.025);cursor:default}.kniffel-score.used strong{background:#18251c;color:#8fd19f}.kniffel-actions{margin-top:12px!important}.kniffel-actions .btn{flex:1 1 150px}.kniffel-dialog .game-status{margin:2px 0 7px!important;text-align:center}.kniffel-dialog .game-subtitle{margin-bottom:6px}@keyframes kniffelShake{0%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(5deg) translateY(-3px)}100%{transform:rotate(-4deg) translateY(0)}}
@media(max-width:620px){.kniffel-dialog{width:min(97vw,520px)!important;padding:20px 11px 15px!important}.kniffel-dice{gap:4px}.kniffel-die{padding:5px 1px;border-radius:11px}.kniffel-die span{font-size:41px}.kniffel-die small{font-size:0}.kniffel-die small:after{content:'halten';font-size:7px}.kniffel-die.held small:after{content:'gehalten'}.kniffel-scorecard{grid-template-columns:1fr 1fr;gap:4px}.kniffel-score{min-height:34px;padding:5px 7px;font-size:11px}.kniffel-score strong{min-width:29px;height:23px}.kniffel-roll-info{font-size:9px}.kniffel-actions{grid-template-columns:1fr!important}.kniffel-actions .btn{width:100%}}
/* Radio-Quiz */
.quiz-dialog{width:min(560px,calc(100vw - 24px))!important}.quiz-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 13px;padding:10px 13px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.04);color:#c2cdd8;font-size:13px}.quiz-progress strong{color:#fff}.quiz-card{padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(0,0,0,.2)}.quiz-question{min-height:52px;display:grid;place-items:center;margin-bottom:14px;font-size:19px;font-weight:800;line-height:1.35}.quiz-answers{display:grid;grid-template-columns:1fr 1fr;gap:9px}.quiz-answer{min-height:52px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.06);color:#fff;font:inherit;font-weight:700;cursor:pointer;transition:.16s ease}.quiz-answer:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(99,181,246,.48);background:rgba(23,105,170,.2)}.quiz-answer.correct{border-color:#4bc47b;background:rgba(34,139,78,.28)}.quiz-answer.wrong{border-color:#5ca2e9;background:rgba(30,98,166,.32)}.quiz-answer:disabled{cursor:default;opacity:.88}.quiz-feedback{margin-top:12px!important}.quiz-feedback.quiz-good{color:#91e3ae}.quiz-feedback.quiz-bad{color:#9eceff}@media(max-width:560px){.quiz-answers{grid-template-columns:1fr}.quiz-question{font-size:17px}.quiz-card{padding:12px}.quiz-answer{min-height:46px}}
/* Hangman Modern */
.hangman-dialog{width:min(620px,calc(100vw - 24px))!important}.hangman-topline{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:5px 0 12px;padding:10px 13px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.04);color:#c2cdd8;font-size:13px}.hangman-topline strong{color:#fff}.hangman-stage{display:flex;align-items:center;gap:14px;margin:0 auto 15px;max-width:420px;padding:10px 14px;border-radius:16px;background:rgba(0,0,0,.18)}.hangman-figure{font-size:38px;filter:drop-shadow(0 5px 12px rgba(0,0,0,.35))}.hangman-meter{height:10px;flex:1;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.09)}.hangman-meter i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#efb44b,#509ce9);transition:width .25s ease}.hangman-word{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:15px 0 18px}.hangman-word span:not(.space){display:grid;place-items:center;width:34px;height:43px;border-bottom:3px solid rgba(255,255,255,.7);font-size:24px;font-weight:900}.hangman-word .space{width:16px}.hangman-keyboard{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin:0 auto 13px}.hangman-keyboard button{min-width:0;height:38px;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:rgba(255,255,255,.06);color:#fff;font-weight:900;cursor:pointer}.hangman-keyboard button:hover:not(:disabled){transform:translateY(-1px);background:rgba(23,105,170,.24);border-color:rgba(99,181,246,.5)}.hangman-keyboard button.hit{background:rgba(34,139,78,.28);border-color:#4bc47b}.hangman-keyboard button.miss{background:rgba(30,98,166,.3);border-color:#5ca2e9;opacity:.6}.hangman-keyboard button:disabled{cursor:default}.hangman-dialog .game-status{text-align:center;margin:10px 0!important}@media(max-width:560px){.hangman-keyboard{grid-template-columns:repeat(7,1fr);gap:5px}.hangman-keyboard button{height:36px;font-size:12px}.hangman-word{gap:5px}.hangman-word span:not(.space){width:27px;height:37px;font-size:19px}.hangman-stage{padding:8px 10px}.hangman-figure{font-size:32px}}
/* Smiley-Kategoriebuttons: mehrere Zeilen, keine horizontale Scroll-Leiste */
body.chat-page #smileyTabs.smiley-tabs{
display:flex !important;
flex-flow:row wrap !important;
align-items:center !important;
align-content:flex-start !important;
gap:6px !important;
width:100% !important;
max-width:100% !important;
overflow-x:hidden !important;
overflow-y:visible !important;
white-space:normal !important;
scrollbar-width:none !important;
}
body.chat-page #smileyTabs.smiley-tabs::-webkit-scrollbar{
display:none !important;
}
body.chat-page #smileyTabs.smiley-tabs > button{
flex:0 0 auto !important;
width:auto !important;
min-width:0 !important;
white-space:nowrap !important;
}
/* Admin-Benutzerverwaltung: alle Funktionen sichtbar, ohne den Chat zu verändern */
body.admin-page .admin-shell{width:min(1600px,98vw);max-width:none;}
body.admin-page .admin-dashboard-grid{grid-template-columns:minmax(360px,.85fr) minmax(0,1.45fr);}
body.admin-page .admin-users-card{margin-top:0;min-width:0;}
body.admin-page .admin-users-table-wrap{overflow-x:auto;}
body.admin-page .admin-users-table{min-width:980px;}
body.admin-page .admin-users-table th,
body.admin-page .admin-users-table td{vertical-align:top;}
body.admin-page .admin-users-table .user-admin-form{display:grid;grid-template-columns:1fr 1fr;gap:6px;min-width:220px;}
body.admin-page .admin-users-table .user-admin-form .btn{grid-column:1 / -1;}
body.admin-page .admin-users-table select,
body.admin-page .admin-users-table input[type="password"]{width:100%;min-width:0;padding:9px;border-radius:8px;border:1px solid #2c6292;background:#071a2d;color:#fff;}
body.admin-page .admin-users-table .admin-password-form{display:grid;gap:6px;min-width:180px;}
body.admin-page .admin-users-table .mod-role-form,
body.admin-page .admin-users-table .delete-user-form{margin:0;}
body.admin-page .admin-users-table .btn{width:100%;white-space:normal;padding:9px 10px;}
@media(max-width:1100px){
body.admin-page .admin-dashboard-grid{grid-template-columns:1fr;}
body.admin-page .admin-left-stack,body.admin-page .admin-right-stack{grid-column:1;}
}
@media(max-width:760px){
body.admin-page .admin-shell{width:100%;padding:10px;}
body.admin-page .admin-users-card{padding:14px;}
body.admin-page .admin-users-table-wrap{overflow:visible;}
body.admin-page .admin-users-table{display:block;min-width:0;width:100%;}
body.admin-page .admin-users-table thead{display:none;}
body.admin-page .admin-users-table tbody{display:block;width:100%;}
body.admin-page .admin-users-table tr{display:block;width:100%;margin:0 0 14px;border:1px solid #214e74;border-radius:10px;background:#081a2d;overflow:hidden;}
body.admin-page .admin-users-table td{display:grid;grid-template-columns:115px minmax(0,1fr);align-items:start;gap:10px;width:100%;padding:10px;border-bottom:1px solid #214e74;overflow-wrap:anywhere;}
body.admin-page .admin-users-table td:last-child{border-bottom:0;}
body.admin-page .admin-users-table td::before{content:attr(data-label);font-weight:700;color:#c8def3;font-size:13px;line-height:1.3;}
body.admin-page .admin-users-table td > form,
body.admin-page .admin-users-table td > span{min-width:0;width:100%;}
body.admin-page .admin-users-table .user-admin-form{display:grid;grid-template-columns:1fr;min-width:0;width:100%;}
body.admin-page .admin-users-table .user-admin-form .btn{grid-column:auto;}
body.admin-page .admin-users-table .admin-password-form{min-width:0;width:100%;}
body.admin-page .admin-users-table .btn{width:100%;}
}
@media(max-width:420px){
body.admin-page .admin-users-table td{grid-template-columns:1fr;gap:6px;}
}
/* 2026-08-11: robuster Fix fuer hochgeladenen Chat-Hintergrund */
body.chat-page .messages{
position:relative!important;
isolation:isolate!important;
background:#07111f!important;
background-image:none!important;
}
body.chat-page .messages>.chat-design-image-fixed{
display:block!important;
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
min-height:100%!important;
margin:0!important;
object-fit:cover!important;
object-position:center center!important;
opacity:.58!important;
z-index:0!important;
pointer-events:none!important;
}
body.chat-page .messages>.msg{
position:relative!important;
z-index:2!important;
}
/* Sprachnachrichten */
.voice-panel{padding:10px 12px;border-top:1px solid #1c507f;background:rgba(9,16,24,.98);position:relative;z-index:11}.voice-recording-state{display:flex;align-items:center;gap:9px}.voice-recording-state strong{flex:1}.voice-dot{width:10px;height:10px;border-radius:50%;background:#777}.voice-button.recording,.voice-panel:not([hidden]) .voice-dot{background:#1f6ab5;box-shadow:0 0 0 4px rgba(31,106,181,.18)}.voice-button.recording{animation:voicePulse 1.1s ease-in-out infinite}.voice-panel audio{width:100%;height:40px;margin-top:9px}.voice-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}@keyframes voicePulse{50%{transform:scale(1.06)}}.voice-message{display:flex;align-items:center;gap:9px;max-width:520px}.voice-message-icon{font-size:20px}.voice-message audio{width:min(360px,70vw);height:40px}.voice-message-duration{font-size:12px;opacity:.75;white-space:nowrap}@media(max-width:760px){.voice-panel{padding:8px}.voice-message{max-width:100%}.voice-message audio{width:min(260px,62vw)}body.chat-page .chat-main{grid-template-rows:auto minmax(0,1fr) auto auto auto auto}.composer .voice-button{flex:0 0 auto}}
/* Mobile Smiley Upload / Touch Fix */
body.admin-page .visually-hidden-file{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.admin-page .smiley-dropzone{display:flex;min-height:130px;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:18px;border:2px dashed rgba(255,255,255,.24);border-radius:16px;background:rgba(255,255,255,.035);text-align:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body.admin-page .smiley-dropzone:hover,body.admin-page .smiley-dropzone:focus-visible,body.admin-page .smiley-dropzone.dragover,body.admin-page .smiley-dropzone.has-files{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);outline:none}
body.admin-page .smiley-dropzone-icon{font-size:2rem;line-height:1}
body.admin-page .smiley-category-chips{display:flex;gap:8px;overflow-x:auto;padding:8px 2px 4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;touch-action:pan-x}
body.admin-page .smiley-category-chips button{flex:0 0 auto;min-height:42px;padding:8px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.06);color:inherit;font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body.admin-page .smiley-category-chips button.active{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.42)}
@media(max-width:760px){body.admin-page .smiley-dropzone{min-height:150px}body.admin-page .smiley-category-chips button{min-height:46px;padding:10px 16px}}
body.chat-page #smileyTabs.smiley-tabs>button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;pointer-events:auto;min-height:40px}
body.chat-page #smileyTabs.smiley-tabs{touch-action:pan-x;pointer-events:auto}
/* v8 Mobile-Touch-Fix: Kategorien und Smileys auf Touchgeraeten direkt bedienbar */
body.chat-page .smiley-tabs,
body.chat-page .smiley-lists,
body.chat-page .smiley-category{
pointer-events:auto!important;
position:relative!important;
}
body.chat-page .smiley-tabs button,
body.chat-page button.smiley{
position:relative!important;
z-index:60!important;
pointer-events:auto!important;
touch-action:manipulation!important;
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
body.chat-page button.smiley img{
pointer-events:none!important;
}
@media(max-width:760px){
body.chat-page .smiley-tabs{
overflow-x:auto!important;
overflow-y:hidden!important;
flex-wrap:nowrap!important;
-webkit-overflow-scrolling:touch;
touch-action:pan-x!important;
}
body.chat-page .smiley-tabs button{
flex:0 0 auto!important;
min-height:42px!important;
}
body.chat-page .smiley-list{
touch-action:pan-y!important;
}
}
/* v9 Mobile Smiley: echte Touch-Ziele, keine Gesten-Uebernahme durch Eltern */
body.chat-page #smileyTabs [data-smiley-category],
body.chat-page #smileyLists [data-smiley-value]{
pointer-events:auto!important;
touch-action:none!important;
-webkit-tap-highlight-color:rgba(255,255,255,.12)!important;
user-select:none!important;
-webkit-user-select:none!important;
}
body.chat-page #smileyPanel,
body.chat-page #smileyLists,
body.chat-page .smiley-category{
touch-action:auto!important;
}
@media(max-width:760px){
body.chat-page #smileyPanel{z-index:100!important;isolation:isolate!important;}
body.chat-page #smileyTabs{z-index:101!important;position:relative!important;}
body.chat-page #smileyLists{z-index:101!important;position:relative!important;}
body.chat-page #smileyTabs [data-smiley-category],
body.chat-page #smileyLists [data-smiley-value]{z-index:102!important;}
}
/* v4 mobile smiley hard fallback: bewusst einfach und browserkompatibel */
@media (max-width:760px){
body.chat-page #smileyPanel{
position:relative!important;
z-index:99999!important;
isolation:isolate!important;
pointer-events:auto!important;
touch-action:manipulation!important;
}
body.chat-page #smileyPanel[hidden]{display:none!important;}
body.chat-page #smileyPanel.open:not([hidden]){display:block!important;}
body.chat-page #smileyTabs{
position:relative!important;
z-index:100000!important;
display:flex!important;
overflow-x:auto!important;
overflow-y:hidden!important;
-webkit-overflow-scrolling:touch!important;
pointer-events:auto!important;
touch-action:pan-x manipulation!important;
}
body.chat-page #smileyTabs button,
body.chat-page #smileyLists button.smiley{
position:relative!important;
z-index:100001!important;
pointer-events:auto!important;
touch-action:manipulation!important;
-webkit-tap-highlight-color:rgba(255,255,255,.18)!important;
}
body.chat-page #smileyLists,
body.chat-page #smileyLists .smiley-category:not([hidden]){
position:relative!important;
z-index:100000!important;
pointer-events:auto!important;
}
body.chat-page #smileyLists button.smiley img{pointer-events:none!important;}
}
/* Mobile Smiley Fix V5: geoeffnetes Panel darf auch waehrend VisualViewport/Keyboard-Uebergang sichtbar sein. */
@media(max-width:760px){
body.chat-page .smiley-panel.open,
body.chat-page.keyboard-open .smiley-panel.open{
display:block!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
}
body.chat-page #smileyToggle{
pointer-events:auto!important;
touch-action:manipulation!important;
-webkit-tap-highlight-color:transparent;
}
}
/* Mobile Smiley Fix V6: native Kategorien ohne JavaScript-Tabs */
body.chat-page .smiley-mobile-native{display:none;}
@media(max-width:760px){
body.chat-page #smileyTabs,
body.chat-page #smileyLists{display:none!important;}
body.chat-page .smiley-mobile-native{
display:block!important;
position:relative!important;
z-index:100002!important;
pointer-events:auto!important;
touch-action:auto!important;
max-height:min(52vh,430px);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding:4px 0;
}
body.chat-page .smiley-mobile-category{
display:block!important;
position:relative!important;
margin:0 0 7px!important;
border:1px solid rgba(255,255,255,.14)!important;
border-radius:10px!important;
overflow:visible!important;
pointer-events:auto!important;
}
body.chat-page .smiley-mobile-category > summary{
display:list-item!important;
position:relative!important;
min-height:48px!important;
padding:13px 14px!important;
cursor:pointer!important;
pointer-events:auto!important;
touch-action:manipulation!important;
user-select:none!important;
-webkit-user-select:none!important;
font-weight:700!important;
list-style-position:inside!important;
}
body.chat-page .smiley-mobile-category > summary::marker{font-size:1.1em;}
body.chat-page .smiley-mobile-list{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:7px!important;
padding:8px!important;
pointer-events:auto!important;
}
body.chat-page .smiley-mobile-list .smiley{
min-width:0!important;
min-height:46px!important;
pointer-events:auto!important;
touch-action:manipulation!important;
}
body.chat-page .smiley-mobile-list .smiley img{pointer-events:none!important;}
}
/* Mobile Smiley Fix V7: Accordion darf wirklich aufklappen.
Alte Regeln setzten am Elternpanel max-height + overflow:hidden und schnitten
den geoeffneten Kategorieinhalt unsichtbar ab. */
@media(max-width:760px){
body.chat-page #smileyPanel.smiley-panel.open:not([hidden]){
display:block!important;
height:auto!important;
min-height:0!important;
max-height:min(62dvh,520px)!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior:contain!important;
-webkit-overflow-scrolling:touch!important;
padding:8px!important;
position:relative!important;
z-index:99999!important;
pointer-events:auto!important;
}
body.chat-page #smileyMobileNative.smiley-mobile-native{
display:block!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
overflow:visible!important;
position:relative!important;
z-index:100002!important;
pointer-events:auto!important;
}
body.chat-page details.smiley-mobile-category{
display:block!important;
height:auto!important;
max-height:none!important;
overflow:visible!important;
pointer-events:auto!important;
}
body.chat-page details.smiley-mobile-category > summary{
position:relative!important;
z-index:100010!important;
display:block!important;
width:100%!important;
min-height:50px!important;
padding:14px 44px 14px 14px!important;
border:0!important;
border-radius:9px!important;
background:rgba(255,255,255,.07)!important;
color:inherit!important;
cursor:pointer!important;
pointer-events:auto!important;
touch-action:manipulation!important;
-webkit-tap-highlight-color:rgba(255,255,255,.18)!important;
list-style:none!important;
}
body.chat-page details.smiley-mobile-category > summary::-webkit-details-marker{display:none!important;}
body.chat-page details.smiley-mobile-category > summary:after{
content:'+';
position:absolute;
right:15px;
top:50%;
transform:translateY(-50%);
font-size:24px;
line-height:1;
pointer-events:none!important;
}
body.chat-page details.smiley-mobile-category[open] > summary:after{content:'−';}
body.chat-page details.smiley-mobile-category[open] > .smiley-mobile-list{
display:grid!important;
}
body.chat-page .smiley-mobile-list{
position:relative!important;
z-index:100005!important;
pointer-events:auto!important;
}
}
/* Mobile Smiley Fix V9 FINAL: clean CSS, no escaped newlines */
body.chat-page .mobile-smiley-browser { display: none; }
@media (max-width: 760px) {
body.chat-page #smileyTabs,
body.chat-page #smileyLists,
body.chat-page #smileyMobileNative {
display: none !important;
}
body.chat-page #smileyPanel.smiley-panel.open:not([hidden]) {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 2147483000 !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: 62vh !important;
overflow-x: hidden !important;
overflow-y: auto !important;
padding: 8px !important;
pointer-events: auto !important;
-webkit-overflow-scrolling: touch !important;
}
body.chat-page #mobileSmileyBrowser.mobile-smiley-browser {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 2147483001 !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
pointer-events: auto !important;
}
body.chat-page .mobile-smiley-group {
display: block !important;
width: 100% !important;
height: auto !important;
overflow: visible !important;
margin: 0 0 8px !important;
pointer-events: auto !important;
}
body.chat-page button.mobile-smiley-category-button {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
min-height: 50px !important;
padding: 12px 14px !important;
margin: 0 !important;
border: 1px solid rgba(255,255,255,.20) !important;
border-radius: 10px !important;
background: rgba(255,255,255,.09) !important;
color: inherit !important;
font: inherit !important;
font-weight: 800 !important;
text-align: left !important;
position: relative !important;
z-index: 2147483002 !important;
pointer-events: auto !important;
touch-action: manipulation !important;
cursor: pointer !important;
}
body.chat-page button.mobile-smiley-category-button span {
pointer-events: none !important;
}
body.chat-page .mobile-smiley-items {
display: none !important;
visibility: hidden !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
padding: 8px 0 2px !important;
pointer-events: none !important;
}
body.chat-page .mobile-smiley-items.is-open:not([hidden]) {
display: grid !important;
visibility: visible !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
pointer-events: auto !important;
}
body.chat-page button.mobile-smiley-item {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: 100% !important;
height: 84px !important;
min-width: 0 !important;
min-height: 84px !important;
padding: 5px !important;
margin: 0 !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-radius: 10px !important;
background: rgba(255,255,255,.05) !important;
color: inherit !important;
font-size: 3rem !important;
line-height: 1 !important;
position: relative !important;
z-index: 2147483003 !important;
overflow: visible !important;
pointer-events: auto !important;
touch-action: manipulation !important;
}
body.chat-page button.mobile-smiley-item img {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 70px !important;
height: 70px !important;
min-width: 70px !important;
min-height: 70px !important;
max-width: 70px !important;
max-height: 70px !important;
object-fit: contain !important;
position: relative !important;
z-index: 2147483004 !important;
pointer-events: none !important;
}
}
/* V12: 80er Retro-Fussball */
.soccer-dialog{width:min(820px,calc(100vw - 24px))!important}.soccer-score{display:flex;align-items:center;justify-content:center;gap:18px;margin:8px 0 10px;font-family:monospace}.soccer-score strong{font-size:30px;color:#fff}.soccer-score span{font-weight:800;letter-spacing:2px;color:#ffd34d}.soccer-dialog canvas{display:block;width:100%;height:auto;max-height:52vh;aspect-ratio:12/7;background:#08752d;border:4px solid #e7e7e7;border-radius:8px;box-shadow:0 0 0 3px #111,0 10px 30px rgba(0,0,0,.35);image-rendering:pixelated;touch-action:none}.soccer-touch{display:flex;justify-content:center;gap:12px;margin:12px 0 4px}.soccer-touch button{min-width:120px;min-height:48px;border:1px solid #53708e;border-radius:10px;background:#121e2a;color:#fff;font-weight:900;font-size:16px;touch-action:none}.soccer-touch button:active{transform:translateY(1px);background:#26496d}@media(min-width:900px){.soccer-touch{opacity:.72}}@media(max-width:600px){.soccer-dialog{padding:14px 10px!important}.soccer-dialog h2{margin-bottom:2px}.soccer-dialog .game-subtitle{font-size:12px;margin:3px 0 6px}.soccer-score{margin:3px 0 6px}.soccer-score strong{font-size:24px}.soccer-dialog canvas{max-height:38vh}.soccer-touch{margin-top:8px}.soccer-touch button{flex:1;min-width:0}.soccer-dialog .game-status{font-size:12px}}
/* V14 Multiplayer-Fussball */
.soccer-mode-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}.soccer-mode{min-width:165px}.soccer-mode.active{background:#1769aa!important;border-color:#5897d7!important;color:#fff!important}.soccer-lobby{margin:6px auto 10px;padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(0,0,0,.18)}.soccer-lobby>select{min-width:min(330px,100%);min-height:42px;margin:0 7px 7px 0;padding:8px 10px;border:1px solid #415870;border-radius:9px;background:#0c1219;color:#fff}.soccer-invite-box{margin-top:8px;padding:10px;border:1px solid #4a81b8;border-radius:10px;background:rgba(23,105,170,.18)}.soccer-invite-box strong{display:block;margin-bottom:9px}.soccer-invite-box div{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}@media(max-width:600px){.soccer-mode{min-width:0;flex:1}.soccer-lobby>select{width:100%;margin-right:0}.soccer-lobby>#soccerInviteBtn{width:100%}}
/* V15: Alle Spiele unter einem einzigen Reiter */
.games-tab{position:relative;display:inline-flex;z-index:120}.games-tab-button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.games-tab-arrow{font-size:11px;transition:transform .18s ease}.games-tab.open .games-tab-arrow{transform:rotate(180deg)}.games-tab-menu[hidden]{display:none!important}.games-tab-menu{position:absolute;z-index:1600;top:calc(100% + 8px);left:0;display:grid;grid-template-columns:1fr;gap:5px;width:210px;padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:linear-gradient(155deg,rgba(20,33,46,.99),rgba(10,15,20,.99));box-shadow:0 18px 45px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)}.games-tab-menu:before{content:"";position:absolute;top:-6px;left:22px;width:11px;height:11px;transform:rotate(45deg);border-left:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12);background:#141f2b}.games-tab-menu .game-top-button{display:flex!important;align-items:center;gap:9px;width:100%!important;height:auto!important;min-height:40px;margin:0!important;padding:9px 11px!important;text-align:left;font-size:13px!important;border-radius:9px!important}.games-tab-menu .game-top-button span{font-size:13px}.games-tab-menu .game-top-button:hover{transform:none!important;background:rgba(23,105,170,.28)!important}@media(max-width:760px){.games-tab{position:relative}.games-tab-button{min-height:40px}.games-tab-menu{position:fixed;left:10px;right:10px;top:auto;bottom:72px;width:auto;max-height:65dvh;overflow:auto;grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;border-radius:16px}.games-tab-menu:before{display:none}.games-tab-menu .game-top-button{min-height:48px!important}.games-tab-menu .game-top-button span{font-size:12px}}@media(max-width:420px){.games-tab-menu{grid-template-columns:1fr}}
/* V16 Mensch aergere dich nicht - gemeinsames Chat-Spiel */
.maedn-dialog{width:min(760px,96vw);max-height:94vh;overflow:auto}.maedn-lobby-actions,.maedn-controls,.maedn-room-head{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}.maedn-open-games{display:grid;gap:8px;margin-top:12px}.maedn-open-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.04)}.maedn-game-area{display:grid;gap:10px}.maedn-players{display:flex;gap:8px;flex-wrap:wrap}.maedn-player-chip{display:inline-flex;gap:7px;align-items:center;padding:6px 9px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(0,0,0,.2)}.maedn-player-chip i{width:11px;height:11px;border-radius:50%;background:var(--seat-color);box-shadow:0 0 0 2px rgba(255,255,255,.25)}#maednCanvas{display:block;width:min(100%,620px);height:auto;aspect-ratio:1;margin:0 auto;border-radius:16px;border:2px solid rgba(255,255,255,.14);background:#f5ecd7}.maedn-die{font-size:44px;line-height:1;min-width:54px;text-align:center}.maedn-pawn-chooser{padding:10px;border:1px solid rgba(255,255,255,.15);border-radius:10px;text-align:center}.maedn-pawn-chooser div{display:flex;justify-content:center;gap:8px;margin-top:8px}.maedn-pawn-chooser button{width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:#24476b;color:#fff;font-weight:800;cursor:pointer}.maedn-pawn-chooser button:disabled{opacity:.25;cursor:not-allowed}@media(max-width:600px){.maedn-dialog{padding:14px}.maedn-open-row{align-items:flex-start;flex-direction:column}.maedn-open-row .btn{width:100%}.maedn-controls .btn{flex:1}.maedn-room-head{align-items:flex-start;flex-direction:column}}
/* V17: Mensch aergere dich nicht - groessere Spielansicht */
.maedn-dialog{width:min(980px,98vw)!important;max-height:96vh!important;padding:24px!important}
#maednCanvas{width:min(100%,800px)!important;max-width:800px!important}
.maedn-players{justify-content:center}
.maedn-controls{max-width:800px;margin-left:auto;margin-right:auto}
@media(max-width:700px){
.chat-game-modal:has(.maedn-dialog){padding:5px!important}
.maedn-dialog{width:99vw!important;max-height:98vh!important;padding:12px 7px!important;border-radius:15px!important}
#maednCanvas{width:100%!important;max-width:none!important;border-radius:10px!important}
.maedn-dialog .game-subtitle{margin-bottom:8px!important}
.maedn-player-chip{padding:4px 7px;font-size:11px}
.maedn-controls{gap:6px}
}
/* V18: Mensch aergere dich nicht - komplette Ansicht mit allen 4 Plaetzen */
.maedn-dialog{width:min(1180px,99vw)!important;max-height:98dvh!important;overflow:hidden!important;padding:18px!important}
.maedn-game-area{gap:7px!important}
.maedn-game-layout{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:14px;align-items:start;min-height:0}
.maedn-board-wrap{display:grid;place-items:center;min-width:0;min-height:0}
#maednCanvas{width:min(100%,calc(98dvh - 132px),820px)!important;max-width:820px!important;max-height:calc(98dvh - 132px)!important;height:auto!important}
.maedn-side{display:grid;gap:9px;align-content:start;min-width:0;padding:10px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(0,0,0,.18)}
.maedn-side-title{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#bac9d8;text-align:left}
.maedn-players{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;justify-content:stretch!important}
.maedn-player-chip{display:grid!important;grid-template-columns:14px 1fr;gap:8px!important;align-items:center!important;width:100%;padding:8px 9px!important;border-radius:11px!important;text-align:left}
.maedn-player-chip i{width:12px!important;height:12px!important}
.maedn-player-chip span{display:grid;line-height:1.12;min-width:0}.maedn-player-chip b{font-size:12px}.maedn-player-chip small{margin-top:3px;color:#fff;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.maedn-player-chip.empty{opacity:.55}.maedn-player-chip.empty small{color:#bbaeb2}
.maedn-controls{display:grid!important;grid-template-columns:58px 1fr;gap:7px!important;max-width:none!important;margin:0!important}.maedn-controls #maednStartBtn{grid-column:1/-1}.maedn-controls .btn{min-width:0}
.maedn-die{display:grid;place-items:center;min-width:54px;min-height:48px;font-size:40px!important}
.maedn-pawn-chooser{padding:8px!important}.maedn-pawn-chooser div{gap:5px!important;margin-top:5px!important}.maedn-pawn-chooser button{width:38px!important;height:38px!important}
.maedn-side .game-status{min-height:0!important;margin:0!important;padding:8px!important;font-size:12px!important}
.maedn-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin-top:0!important}.maedn-actions .btn{width:100%;min-width:0;padding-left:7px!important;padding-right:7px!important;font-size:11px!important}
@media(max-width:850px){
.chat-game-modal:has(.maedn-dialog){padding:3px!important}
.maedn-dialog{width:100vw!important;max-height:100dvh!important;height:100dvh!important;border-radius:0!important;padding:8px 7px!important;display:flex;flex-direction:column}
.maedn-dialog .game-kicker{display:none}.maedn-dialog h2{font-size:18px!important;margin:0 38px 2px!important}.maedn-dialog .game-title-icon{width:30px;height:30px}.maedn-dialog .game-subtitle{display:none}
.maedn-game-area{display:flex!important;flex:1;flex-direction:column;min-height:0;gap:5px!important}.maedn-game-area[hidden]{display:none!important}
.maedn-room-head{flex-direction:row!important;align-items:center!important;gap:6px!important;font-size:11px;min-height:25px}
.maedn-game-layout{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:5px;flex:1;min-height:0}
.maedn-side{grid-row:1;padding:5px 6px;gap:5px;border-radius:9px}.maedn-side-title{display:none}
.maedn-players{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important}.maedn-player-chip{grid-template-columns:9px 1fr!important;gap:4px!important;padding:4px!important;border-radius:7px!important}.maedn-player-chip i{width:8px!important;height:8px!important}.maedn-player-chip b{font-size:9px}.maedn-player-chip small{font-size:9px;margin-top:1px}
.maedn-controls{grid-template-columns:42px 1fr auto!important;gap:4px!important}.maedn-controls #maednStartBtn{grid-column:auto}.maedn-controls .btn{min-height:35px!important;padding:5px 7px!important;font-size:11px!important}.maedn-die{min-width:38px;min-height:35px;font-size:30px!important}
.maedn-pawn-chooser{padding:4px!important;font-size:10px}.maedn-pawn-chooser div{display:inline-flex!important;margin:0 0 0 5px!important}.maedn-pawn-chooser button{width:28px!important;height:28px!important;font-size:10px}
.maedn-side .game-status{padding:4px 6px!important;font-size:10px!important;line-height:1.2}.maedn-actions{grid-template-columns:1fr 1fr!important}.maedn-actions .btn{min-height:31px!important;padding:4px!important;font-size:10px!important}
.maedn-board-wrap{grid-row:2;min-height:0;overflow:hidden}.maedn-board-wrap #maednCanvas{width:auto!important;height:min(100%,calc(100vw - 14px))!important;max-width:100%!important;max-height:100%!important;aspect-ratio:1!important;margin:auto!important}
}
@media(max-width:420px) and (max-height:740px){
.maedn-dialog h2{font-size:16px!important}.maedn-player-chip b{display:none}.maedn-player-chip small{font-size:8px}.maedn-controls .btn{font-size:10px!important}.maedn-actions .btn{font-size:9px!important}
}
/* V19: Mensch aergere dich nicht - Spielfeld auf kleinen Displays immer komplett sichtbar */
.maedn-board-wrap{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
#maednCanvas{box-sizing:border-box!important;object-fit:contain!important}
@media(max-width:850px){
.maedn-dialog{overflow-y:auto!important;overflow-x:hidden!important}
.maedn-game-layout{display:flex!important;flex-direction:column!important;min-width:0!important;overflow:visible!important}
.maedn-board-wrap{order:1!important;display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important;overflow:visible!important;padding:0!important}
.maedn-board-wrap #maednCanvas{
display:block!important;
width:calc(100vw - 28px)!important;
max-width:620px!important;
height:auto!important;
max-height:none!important;
aspect-ratio:1/1!important;
margin:0 auto!important;
flex:0 0 auto!important;
}
.maedn-side{order:2!important;width:100%!important;box-sizing:border-box!important}
}
@media(max-width:520px){
.maedn-dialog{padding-left:6px!important;padding-right:6px!important}
.maedn-board-wrap #maednCanvas{width:calc(100vw - 18px)!important}
.maedn-player-chip{min-width:0!important}
.maedn-player-chip span{min-width:0!important}
}
/* V20: MADS - Canvas richtet sich nach der echten Dialogbreite, nicht nach 100vw.
Dadurch wird das Brett auch in schmalen Chat-/Browserfenstern nie rechts abgeschnitten. */
.maedn-dialog{
box-sizing:border-box!important;
max-width:calc(100vw - 8px)!important;
}
.maedn-game-layout,.maedn-game-area,.maedn-board-wrap,.maedn-side{
box-sizing:border-box!important;
min-width:0!important;
max-width:100%!important;
}
.maedn-board-wrap{
overflow:hidden!important;
}
.maedn-board-wrap #maednCanvas{
display:block!important;
width:100%!important;
height:auto!important;
max-width:820px!important;
max-height:none!important;
aspect-ratio:1 / 1!important;
margin:0 auto!important;
box-sizing:border-box!important;
}
@media(max-width:850px){
.chat-game-modal:has(.maedn-dialog){
padding:2px!important;
overflow:hidden!important;
}
.maedn-dialog{
width:calc(100vw - 4px)!important;
max-width:calc(100vw - 4px)!important;
margin:0!important;
padding-left:6px!important;
padding-right:6px!important;
overflow-x:hidden!important;
}
.maedn-game-layout{
width:100%!important;
overflow:hidden!important;
}
.maedn-board-wrap{
width:100%!important;
max-width:620px!important;
align-self:center!important;
padding:0!important;
overflow:hidden!important;
}
.maedn-board-wrap #maednCanvas{
width:100%!important;
max-width:100%!important;
min-width:0!important;
}
.maedn-side{
width:100%!important;
}
}
/* V21: harter Breiten-Fix fuer Mensch aergere dich nicht.
JavaScript setzt die sichtbare Canvas-Groesse zusaetzlich exakt auf die im Dialog verfuegbare Breite. */
.maedn-board-wrap{display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important}
.maedn-board-wrap #maednCanvas{display:block!important;flex:0 0 auto!important;object-fit:contain!important;transform:none!important;box-sizing:border-box!important}
@media(max-width:850px){
.maedn-game-layout{width:100%!important;max-width:100%!important;min-width:0!important;padding:0!important;margin:0!important;overflow:visible!important}
.maedn-board-wrap{width:100%!important;max-width:100%!important;overflow:visible!important}
.maedn-dialog{overflow-x:hidden!important}
}
/* V23: Neustart immer gut sichtbar + stabile mobile Kopfzeile */
.maedn-room-head{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important}
.maedn-room-head #maednTurnLabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.maedn-restart-button{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:38px!important;padding:7px 12px!important;font-weight:800!important;white-space:nowrap!important;border:1px solid rgba(255,255,255,.3)!important;background:#24476b!important;color:#fff!important;box-shadow:0 2px 8px rgba(0,0,0,.25)!important}
.maedn-restart-button[hidden]{display:none!important}
@media(max-width:850px){
.maedn-room-head{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"title restart" "turn restart"!important;gap:2px 6px!important;padding-right:36px!important}
.maedn-room-head #maednRoomTitle{grid-area:title!important}
.maedn-room-head #maednTurnLabel{grid-area:turn!important;font-size:10px!important}
.maedn-restart-button{grid-area:restart!important;min-height:42px!important;padding:7px 10px!important;font-size:11px!important;position:relative!important;z-index:3!important}
}
/* V24: komplette MADS-Spielansicht auf dem Handy ohne vertikales Scrollen */
@media(max-width:850px){
.chat-game-modal:has(.maedn-dialog){
height:100dvh!important;
max-height:100dvh!important;
padding:2px!important;
overflow:hidden!important;
align-items:stretch!important;
}
.maedn-dialog{
height:calc(100dvh - 4px)!important;
max-height:calc(100dvh - 4px)!important;
min-height:0!important;
padding:5px 6px!important;
overflow:hidden!important;
}
.maedn-dialog h2{
flex:0 0 auto!important;
font-size:18px!important;
line-height:1.05!important;
margin:0 38px 1px!important;
}
.maedn-dialog .game-title-icon{width:26px!important;height:26px!important}
.maedn-room-head{
flex:0 0 auto!important;
min-height:34px!important;
margin:0!important;
padding:0 34px 0 2px!important;
gap:0 5px!important;
}
.maedn-room-head #maednRoomTitle{font-size:12px!important;line-height:1.05!important}
.maedn-room-head #maednTurnLabel{font-size:10px!important;line-height:1.05!important}
.maedn-restart-button{
min-height:31px!important;
height:31px!important;
padding:3px 8px!important;
font-size:10px!important;
}
.maedn-game-layout{
flex:1 1 auto!important;
min-height:0!important;
gap:3px!important;
overflow:hidden!important;
}
.maedn-board-wrap{
flex:0 0 auto!important;
min-height:0!important;
max-height:none!important;
overflow:hidden!important;
}
.maedn-side{
flex:0 0 auto!important;
width:100%!important;
padding:3px 4px!important;
gap:3px!important;
border-radius:7px!important;
overflow:hidden!important;
}
.maedn-side-title{
display:block!important;
margin:0!important;
font-size:10px!important;
line-height:1!important;
letter-spacing:0!important;
text-transform:none!important;
text-align:center!important;
}
.maedn-players{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:2px!important;
}
.maedn-player-chip{
display:flex!important;
width:100%!important;
min-width:0!important;
gap:2px!important;
padding:2px 3px!important;
border-radius:5px!important;
white-space:nowrap!important;
overflow:hidden!important;
}
.maedn-player-chip i{width:6px!important;height:6px!important;flex:0 0 6px!important}
.maedn-player-chip span{display:flex!important;align-items:baseline!important;gap:1px!important;min-width:0!important;overflow:hidden!important}
.maedn-player-chip b,.maedn-player-chip small{font-size:8px!important;line-height:1!important;margin:0!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}
.maedn-controls{
display:grid!important;
grid-template-columns:32px minmax(0,1fr) auto!important;
gap:3px!important;
min-height:0!important;
}
.maedn-die{min-width:30px!important;min-height:29px!important;height:29px!important;font-size:23px!important}
.maedn-controls .btn{min-height:29px!important;height:29px!important;padding:2px 6px!important;font-size:10px!important}
.maedn-pawn-chooser{padding:2px!important;font-size:9px!important;line-height:1!important}
.maedn-pawn-chooser div{gap:3px!important;margin:0 0 0 3px!important}
.maedn-pawn-chooser button{width:24px!important;height:24px!important;font-size:9px!important}
.maedn-side .game-status{
min-height:24px!important;
margin:0!important;
padding:3px 5px!important;
font-size:9px!important;
line-height:1.15!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.maedn-actions{gap:3px!important}
.maedn-actions .btn{min-height:27px!important;height:27px!important;padding:2px 4px!important;font-size:9px!important}
}
@media(max-width:420px){
.maedn-dialog h2{font-size:16px!important}
.maedn-player-chip b,.maedn-player-chip small{font-size:7px!important}
}
/* V25: MADS - auf hohen/breiten Mobilgeraeten wirklich ALLE Funktionen im Viewport */
@media(max-width:850px) and (orientation:portrait){
.chat-game-modal:has(.maedn-dialog){
place-items:stretch!important;
overflow:hidden!important;
}
.maedn-dialog{
height:100dvh!important;
max-height:100dvh!important;
padding:4px 6px!important;
overflow:hidden!important;
}
.maedn-dialog h2{
font-size:17px!important;
line-height:1!important;
margin:0 38px!important;
}
.maedn-room-head{
min-height:30px!important;
padding:0 34px 0 2px!important;
}
.maedn-restart-button{
min-height:29px!important;
height:29px!important;
padding:2px 8px!important;
}
.maedn-game-layout{
flex:1 1 auto!important;
display:flex!important;
flex-direction:column!important;
justify-content:flex-start!important;
gap:4px!important;
min-height:0!important;
overflow:hidden!important;
}
.maedn-board-wrap{
flex:0 0 auto!important;
max-height:52dvh!important;
overflow:hidden!important;
}
.maedn-board-wrap #maednCanvas{
width:auto!important;
height:auto!important;
max-width:100%!important;
max-height:52dvh!important;
}
.maedn-side{
flex:0 0 auto!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
grid-template-areas:
"title title"
"players players"
"controls controls"
"chooser chooser"
"status status"
"actions actions"!important;
gap:3px 5px!important;
padding:3px 5px!important;
overflow:visible!important;
}
.maedn-side-title{grid-area:title!important;display:block!important;font-size:10px!important}
.maedn-players{
grid-area:players!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:3px 5px!important;
}
.maedn-player-chip{
min-height:23px!important;
padding:3px 5px!important;
gap:4px!important;
}
.maedn-player-chip i{width:8px!important;height:8px!important;flex-basis:8px!important}
.maedn-player-chip span{gap:3px!important}
.maedn-player-chip b,.maedn-player-chip small{
font-size:10px!important;
line-height:1.05!important;
}
.maedn-controls{grid-area:controls!important;grid-template-columns:34px minmax(0,1fr) auto!important}
.maedn-pawn-chooser{grid-area:chooser!important}
.maedn-side .game-status{grid-area:status!important;min-height:25px!important;font-size:10px!important}
.maedn-actions{grid-area:actions!important;display:grid!important;grid-template-columns:1fr 1fr!important}
.maedn-actions .btn{min-height:29px!important;height:29px!important;font-size:10px!important}
}
@media(max-width:430px) and (orientation:portrait){
.maedn-board-wrap{max-height:48dvh!important}
.maedn-board-wrap #maednCanvas{max-height:48dvh!important}
.maedn-players{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.maedn-player-chip b,.maedn-player-chip small{font-size:9px!important}
}
/* V26: MADS - Hoehen-Fix. Auch bei Tablet/Laptop-Breiten mit niedriger Fensterhoehe
bleiben Brett, Spieler, Wuerfel, Status, Teilen und Verlassen gleichzeitig sichtbar. */
@media (max-height:1000px){
.chat-game-modal:has(.maedn-dialog){
padding:0!important;
align-items:stretch!important;
place-items:stretch!important;
overflow:hidden!important;
}
.maedn-dialog{
width:min(100vw,900px)!important;
height:100dvh!important;
max-height:100dvh!important;
margin:0 auto!important;
padding:4px 8px!important;
border-radius:0!important;
display:flex!important;
flex-direction:column!important;
overflow:hidden!important;
}
.maedn-dialog .game-kicker,
.maedn-dialog .game-subtitle{display:none!important}
.maedn-dialog h2{
flex:0 0 auto!important;
margin:0 42px 2px!important;
font-size:18px!important;
line-height:1!important;
min-height:30px!important;
}
.maedn-dialog .game-title-icon{width:28px!important;height:28px!important}
.maedn-game-area{
display:flex!important;
flex-direction:column!important;
flex:1 1 auto!important;
min-height:0!important;
gap:3px!important;
overflow:hidden!important;
}
.maedn-game-area[hidden]{display:none!important}
.maedn-room-head{
flex:0 0 auto!important;
min-height:30px!important;
margin:0!important;
padding:0 34px 0 2px!important;
gap:3px 6px!important;
font-size:11px!important;
}
.maedn-room-head #maednRoomTitle{font-size:12px!important}
.maedn-room-head #maednTurnLabel{font-size:10px!important}
.maedn-restart-button{
min-height:29px!important;
height:29px!important;
padding:2px 8px!important;
font-size:10px!important;
}
.maedn-game-layout{
display:flex!important;
flex-direction:column!important;
flex:1 1 auto!important;
min-height:0!important;
gap:3px!important;
overflow:hidden!important;
}
.maedn-board-wrap{
flex:0 0 auto!important;
width:100%!important;
height:auto!important;
max-height:43dvh!important;
min-height:0!important;
overflow:hidden!important;
}
.maedn-board-wrap #maednCanvas{
display:block!important;
width:auto!important;
height:auto!important;
max-width:100%!important;
max-height:43dvh!important;
margin:0 auto!important;
}
.maedn-side{
flex:0 0 auto!important;
width:100%!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
grid-template-areas:
"players players"
"controls controls"
"chooser chooser"
"status status"
"actions actions"!important;
gap:2px 5px!important;
padding:3px 5px!important;
border-radius:8px!important;
overflow:hidden!important;
}
.maedn-side-title{display:none!important}
.maedn-players{
grid-area:players!important;
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:3px!important;
}
.maedn-player-chip{
min-width:0!important;
min-height:22px!important;
padding:2px 4px!important;
gap:3px!important;
border-radius:6px!important;
overflow:hidden!important;
}
.maedn-player-chip i{width:7px!important;height:7px!important;flex:0 0 7px!important}
.maedn-player-chip span{display:flex!important;gap:2px!important;min-width:0!important;overflow:hidden!important}
.maedn-player-chip b,.maedn-player-chip small{
font-size:9px!important;
line-height:1!important;
margin:0!important;
min-width:0!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
.maedn-controls{
grid-area:controls!important;
display:grid!important;
grid-template-columns:32px minmax(0,1fr) auto!important;
gap:3px!important;
margin:0!important;
}
.maedn-die{min-width:30px!important;min-height:28px!important;height:28px!important;font-size:22px!important}
.maedn-controls .btn{min-height:28px!important;height:28px!important;padding:2px 6px!important;font-size:10px!important}
.maedn-pawn-chooser{grid-area:chooser!important;padding:2px!important;font-size:9px!important;line-height:1!important}
.maedn-pawn-chooser button{width:23px!important;height:23px!important;font-size:9px!important}
.maedn-side .game-status{
grid-area:status!important;
min-height:23px!important;
margin:0!important;
padding:2px 5px!important;
font-size:9px!important;
line-height:1.1!important;
}
.maedn-actions{
grid-area:actions!important;
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:4px!important;
margin:0!important;
}
.maedn-actions .btn{min-height:28px!important;height:28px!important;padding:2px 4px!important;font-size:9px!important}
}
@media (max-height:780px){
.maedn-dialog h2{font-size:16px!important;min-height:26px!important}
.maedn-board-wrap,.maedn-board-wrap #maednCanvas{max-height:39dvh!important}
.maedn-player-chip b,.maedn-player-chip small{font-size:8px!important}
}
/* V27: Direkt-Einladungen fuer Mensch aergere dich nicht (User, Mods, Admins und Gaeste). */
.maedn-invite-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:6px 0}
.maedn-invite-row select{min-width:220px;max-width:100%;padding:9px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:#111a24;color:#fff}
.maedn-invite-box{margin:6px 0;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.05);text-align:center}
.maedn-invite-box>div{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px}
@media(max-width:760px){.maedn-invite-row{margin:3px 0;gap:5px}.maedn-invite-row select{min-width:0;width:100%;padding:6px 8px;font-size:13px}.maedn-invite-row .btn{padding:6px 9px;font-size:13px}.maedn-invite-box{padding:7px;font-size:13px;margin:3px 0}.maedn-invite-box .btn{padding:6px 9px;font-size:13px}}
/* V28: Moorhuhn Zielspiel */
.moor-dialog{width:min(920px,96vw)!important;max-width:920px!important}
.moor-scorebar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:8px 0;font-weight:800}
.moor-field{position:relative;height:min(52vh,430px);min-height:300px;overflow:hidden;border:2px solid rgba(255,255,255,.18);border-radius:16px;background:linear-gradient(#78bce8 0 56%,#d9c58b 56% 68%,#648b45 68% 100%);cursor:crosshair;touch-action:manipulation;user-select:none}
.moor-field:before{content:'☁️ ☁️ ☁️';position:absolute;inset:8% 0 auto;font-size:38px;white-space:pre;opacity:.8;pointer-events:none}
.moor-field:after{content:'🌲 🌳 🌲 🌳 🌲 🌳 🌲';position:absolute;left:0;right:0;bottom:3%;font-size:46px;letter-spacing:12px;white-space:nowrap;pointer-events:none}
.moor-bird{position:absolute;z-index:2;width:auto;height:auto;padding:0;border:0;background:transparent;line-height:1;filter:drop-shadow(0 3px 2px rgba(0,0,0,.35));cursor:crosshair;animation:moorFly linear forwards;transform:translateX(0);touch-action:manipulation}
.moor-bird.hit{animation:none!important;transform:rotate(100deg) scale(.8);opacity:.35;transition:.18s}
@keyframes moorFly{to{transform:translateX(var(--moor-x))}}
@media(max-width:760px){.moor-dialog{width:98vw!important;padding:10px!important}.moor-dialog .game-subtitle{font-size:12px!important;margin:2px 0 5px!important}.moor-scorebar{font-size:12px;margin:4px 0}.moor-field{height:46dvh;min-height:250px;border-radius:10px}.moor-field:after{font-size:30px;letter-spacing:4px}.moor-field:before{font-size:26px}}
/* V29: Moorhuhn klassischer Jagd-Look - nur Moorhuhn */
.moor-dialog{width:min(1000px,98vw)!important;max-width:1000px!important;background:linear-gradient(180deg,#2b1811,#17100d)!important;border-color:#72502e!important}
.moor-dialog h2{font-family:Georgia,serif;letter-spacing:.04em;text-shadow:0 2px 0 #000}
.moor-scorebar{margin:5px 0 8px!important;padding:8px 13px;border-radius:8px;background:#21170e;border:1px solid #785a32;color:#f0d48b;font-family:"Courier New",monospace;font-size:16px;box-shadow:inset 0 1px rgba(255,255,255,.05)}
.moor-field{position:relative!important;height:min(57vh,520px)!important;min-height:330px!important;padding:0!important;overflow:hidden!important;border:4px solid #51371f!important;border-radius:8px!important;background:#73afd1!important;cursor:none!important;box-shadow:inset 0 0 0 1px #a6814d,0 8px 25px rgba(0,0,0,.45)!important;touch-action:none!important}
.moor-field:before,.moor-field:after{display:none!important;content:none!important}
#moorCanvas{display:block;width:100%;height:100%}
.moor-start-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(rgba(15,12,6,.15),rgba(15,12,6,.5));color:#fff;text-align:center;pointer-events:none;text-shadow:0 3px 5px #000}
.moor-start-cover.hidden{display:none}.moor-logo{font:900 clamp(38px,8vw,82px)/.9 Georgia,serif;letter-spacing:-.06em;color:#e6c36f;-webkit-text-stroke:2px #3b2612;filter:drop-shadow(0 5px 0 #503418)}.moor-start-cover small{font-size:clamp(13px,2vw,20px);font-weight:800}.moor-start-cover b{margin-top:10px;padding:8px 18px;border:2px solid rgba(255,255,255,.7);border-radius:4px;background:rgba(30,20,10,.7);font-size:16px}.moor-dialog .game-status{background:#20160f!important;border-color:#5f4529!important;color:#ead9ae!important}
@media(max-width:760px){.moor-dialog{width:100vw!important;max-width:none!important;padding:8px!important}.moor-dialog .game-kicker{display:none}.moor-dialog h2{font-size:18px!important;margin:0 34px 3px!important}.moor-scorebar{font-size:11px!important;padding:6px 7px!important;gap:5px!important}.moor-field{height:48dvh!important;min-height:300px!important;border-width:3px!important}.moor-dialog .chat-game-actions{margin-top:6px!important}.moor-dialog .game-status{font-size:11px!important;padding:6px!important}}
/* V30: Moorhuhn kompakter - Aktionsbuttons bleiben im sichtbaren Fenster */
.moor-dialog{max-height:94dvh!important;overflow-y:auto!important;width:min(860px,96vw)!important;max-width:860px!important;padding:12px!important}
.moor-field{height:min(45dvh,390px)!important;min-height:240px!important}
.moor-dialog .game-status{margin:5px 0!important;padding:6px 9px!important}
.moor-dialog .chat-game-actions{margin-top:5px!important;padding-bottom:2px!important;position:relative!important;z-index:5!important}
@media(max-width:760px){
.moor-dialog{width:96vw!important;max-height:92dvh!important;padding:7px!important}
.moor-dialog .game-subtitle{display:none!important}
.moor-scorebar{margin:3px 0 5px!important;padding:4px 6px!important}
.moor-field{height:min(40dvh,330px)!important;min-height:200px!important}
.moor-dialog .game-status{margin:3px 0!important;padding:4px 6px!important;line-height:1.2!important}
.moor-dialog .chat-game-actions{display:flex!important;gap:5px!important;margin:3px 0 0!important}
.moor-dialog .chat-game-actions .btn{min-height:32px!important;padding:5px 8px!important;font-size:12px!important}
}
@media(max-height:700px){
.moor-dialog{max-height:96dvh!important}
.moor-field{height:34dvh!important;min-height:180px!important}
.moor-dialog .game-subtitle{display:none!important}
}
/* V31: Moorhuhn-Fenster wie Referenz, restlicher Chat unveraendert */
.moor-dialog{width:min(980px,96vw)!important;max-width:980px!important;max-height:96dvh!important;overflow-y:auto!important;padding:10px 14px 12px!important;background:linear-gradient(180deg,#191919,#0d0d0d)!important;border:1px solid #3a3a3a!important;border-radius:14px!important}
.moor-dialog .game-kicker{display:none!important}
.moor-dialog h2{text-align:center!important;margin:0 40px 3px!important;font-family:inherit!important;font-size:28px!important;letter-spacing:0!important;text-shadow:none!important}
.moor-dialog .game-subtitle{text-align:center!important;margin:2px 0 7px!important;font-size:15px!important}
.moor-scorebar{display:grid!important;grid-template-columns:1fr 1fr 1fr!important;align-items:center!important;margin:0!important;padding:7px 18px!important;border:0!important;border-radius:8px 8px 0 0!important;background:#080808!important;color:#fff!important;font-family:inherit!important;font-size:18px!important}
.moor-scorebar>*:nth-child(1){text-align:left}.moor-scorebar>*:nth-child(2){text-align:center}.moor-scorebar>*:nth-child(3){text-align:right}
.moor-field{height:min(53dvh,510px)!important;min-height:300px!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.moor-start-cover{justify-content:flex-end!important;padding-bottom:10px!important;background:linear-gradient(transparent 72%,rgba(0,0,0,.78))!important}
.moor-logo{font:700 18px/1.1 inherit!important;letter-spacing:0!important;color:#fff!important;-webkit-text-stroke:0!important;filter:none!important}
.moor-start-cover small{font-size:13px!important}.moor-start-cover b{margin:0!important;padding:0!important;border:0!important;background:none!important;font-size:17px!important}
.moor-dialog .game-status{margin:7px 0!important;padding:8px!important;text-align:center!important;background:#181818!important;border:1px solid #303030!important;border-radius:10px!important;color:#ddd!important}
.moor-actions{display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:10px!important;margin:7px 0 0!important;padding:0!important}
.moor-actions .btn{min-height:42px!important;font-weight:800!important;font-size:14px!important;border-radius:10px!important}
.moor-close-row{display:flex;justify-content:center;margin-top:8px}.moor-close-row .btn{min-width:230px;min-height:36px;font-weight:700}
@media(max-width:760px){
.moor-dialog{width:98vw!important;max-height:97dvh!important;padding:6px!important}
.moor-dialog h2{font-size:20px!important;margin:0 30px 2px!important}
.moor-dialog .game-subtitle{font-size:11px!important;margin:1px 0 4px!important}
.moor-scorebar{padding:5px 7px!important;font-size:12px!important}
.moor-field{height:min(48dvh,390px)!important;min-height:235px!important}
.moor-dialog .game-status{font-size:11px!important;padding:5px!important;margin:4px 0!important}
.moor-actions{gap:5px!important;margin-top:4px!important}.moor-actions .btn{min-height:36px!important;padding:5px!important;font-size:11px!important}
.moor-close-row{margin-top:5px}.moor-close-row .btn{min-width:190px;min-height:32px!important;padding:4px 8px!important;font-size:11px!important}
}
@media(max-height:720px){.moor-dialog h2{font-size:18px!important}.moor-dialog .game-subtitle{display:none!important}.moor-field{height:43dvh!important;min-height:210px!important}.moor-dialog .game-status{margin:3px 0!important;padding:4px!important}.moor-actions .btn{min-height:32px!important}.moor-close-row{margin-top:3px}}
/* V32: Moorhuhn-Fenster sicher komplett im sichtbaren Bereich. Nur Moorhuhn. */
#moorGameModal{padding:8px!important;align-items:center!important;overflow:hidden!important}
#moorGameModal .moor-dialog{
box-sizing:border-box!important;
width:min(980px,calc(100vw - 16px))!important;
height:min(880px,calc(100dvh - 16px))!important;
max-height:calc(100dvh - 16px)!important;
padding:10px 14px 10px!important;
overflow:hidden!important;
display:flex!important;
flex-direction:column!important;
}
#moorGameModal .chat-game-close{
display:flex!important;
align-items:center!important;
justify-content:center!important;
position:absolute!important;
top:8px!important;
right:8px!important;
z-index:100!important;
width:42px!important;
height:42px!important;
min-width:42px!important;
min-height:42px!important;
padding:0!important;
border:2px solid #fff!important;
border-radius:50%!important;
background:#1864b0!important;
color:#fff!important;
font-size:30px!important;
font-weight:900!important;
line-height:1!important;
box-shadow:0 3px 10px rgba(0,0,0,.65)!important;
opacity:1!important;
visibility:visible!important;
}
#moorGameModal .moor-dialog h2,
#moorGameModal .moor-dialog .game-subtitle,
#moorGameModal .moor-scorebar,
#moorGameModal .moor-dialog .game-status,
#moorGameModal .moor-actions,
#moorGameModal .moor-close-row{flex:0 0 auto!important}
#moorGameModal .moor-field{
flex:1 1 auto!important;
width:100%!important;
height:auto!important;
min-height:180px!important;
max-height:none!important;
}
#moorGameModal .moor-actions{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:8px!important;
margin:6px 0 0!important;
}
#moorGameModal .moor-actions .btn{
display:flex!important;
align-items:center!important;
justify-content:center!important;
min-width:0!important;
min-height:38px!important;
padding:6px 8px!important;
font-size:13px!important;
white-space:normal!important;
line-height:1.15!important;
}
#moorGameModal .moor-close-row{display:flex!important;justify-content:center!important;margin-top:6px!important}
#moorGameModal .moor-close-row .btn{min-height:34px!important;padding:5px 12px!important}
@media(max-width:600px){
#moorGameModal{padding:4px!important}
#moorGameModal .moor-dialog{width:calc(100vw - 8px)!important;height:calc(100dvh - 8px)!important;max-height:calc(100dvh - 8px)!important;padding:7px!important}
#moorGameModal .chat-game-close{top:5px!important;right:5px!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;font-size:25px!important}
#moorGameModal .moor-dialog h2{margin:0 40px 2px!important;font-size:19px!important}
#moorGameModal .moor-dialog .game-subtitle{display:none!important}
#moorGameModal .moor-scorebar{font-size:11px!important;padding:4px 5px!important}
#moorGameModal .moor-field{min-height:150px!important}
#moorGameModal .moor-dialog .game-status{font-size:10px!important;margin:3px 0!important;padding:4px!important}
#moorGameModal .moor-actions{gap:4px!important;margin-top:3px!important}
#moorGameModal .moor-actions .btn{min-height:34px!important;padding:4px!important;font-size:10px!important}
#moorGameModal .moor-close-row{margin-top:3px!important}
#moorGameModal .moor-close-row .btn{min-height:30px!important;font-size:10px!important;padding:3px 8px!important}
}
/* V33: Moorhuhn komplett im Viewport - ausschliesslich #moorGameModal. */
#moorGameModal{
box-sizing:border-box!important;
padding:6px!important;
align-items:center!important;
justify-content:center!important;
overflow:hidden!important;
}
#moorGameModal .moor-dialog{
box-sizing:border-box!important;
width:min(980px,calc(100vw - 12px))!important;
height:auto!important;
max-height:calc(100dvh - 12px)!important;
padding:8px 12px 9px!important;
overflow:hidden!important;
display:flex!important;
flex-direction:column!important;
}
#moorGameModal .moor-dialog h2{
flex:0 0 auto!important;
margin:0 48px 2px!important;
font-size:clamp(19px,2.5vw,27px)!important;
line-height:1.05!important;
}
#moorGameModal .moor-dialog .game-subtitle{
flex:0 0 auto!important;
margin:1px 45px 5px!important;
font-size:13px!important;
line-height:1.15!important;
}
#moorGameModal .moor-scorebar{
flex:0 0 auto!important;
margin:2px 0 5px!important;
padding:6px 9px!important;
min-height:34px!important;
}
#moorGameModal .moor-field{
flex:0 0 auto!important;
width:100%!important;
height:min(56dvh,calc(100dvh - 285px))!important;
min-height:190px!important;
max-height:570px!important;
margin:0!important;
}
#moorGameModal .moor-dialog .game-status{
flex:0 0 auto!important;
margin:5px 0!important;
padding:6px 8px!important;
font-size:12px!important;
line-height:1.15!important;
}
#moorGameModal .moor-actions{
flex:0 0 auto!important;
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:7px!important;
margin:3px 0 0!important;
}
#moorGameModal .moor-actions .btn{
min-width:0!important;
min-height:38px!important;
height:38px!important;
padding:5px 6px!important;
font-size:12px!important;
line-height:1.05!important;
overflow:visible!important;
}
#moorGameModal .moor-close-row{
flex:0 0 auto!important;
display:flex!important;
margin-top:5px!important;
min-height:34px!important;
}
#moorGameModal .moor-close-row .btn{
width:100%!important;
min-height:34px!important;
height:34px!important;
padding:4px 10px!important;
font-size:12px!important;
}
#moorGameModal .chat-game-close{
top:7px!important;
right:7px!important;
width:38px!important;
height:38px!important;
min-width:38px!important;
min-height:38px!important;
border-radius:9px!important;
font-size:27px!important;
}
@media(max-height:780px){
#moorGameModal .moor-dialog{padding:6px 9px 7px!important}
#moorGameModal .moor-dialog h2{font-size:18px!important;margin-bottom:1px!important}
#moorGameModal .moor-dialog .game-subtitle{display:none!important}
#moorGameModal .moor-scorebar{padding:4px 7px!important;min-height:28px!important;margin:1px 0 3px!important;font-size:11px!important}
#moorGameModal .moor-field{height:calc(100dvh - 215px)!important;min-height:160px!important;max-height:none!important}
#moorGameModal .moor-dialog .game-status{margin:3px 0!important;padding:4px 6px!important;font-size:10px!important}
#moorGameModal .moor-actions{gap:5px!important;margin-top:2px!important}
#moorGameModal .moor-actions .btn{height:32px!important;min-height:32px!important;font-size:10px!important;padding:3px 4px!important}
#moorGameModal .moor-close-row{margin-top:3px!important;min-height:29px!important}
#moorGameModal .moor-close-row .btn{height:29px!important;min-height:29px!important;font-size:10px!important;padding:2px 6px!important}
#moorGameModal .chat-game-close{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;font-size:23px!important}
}
@media(max-width:600px){
#moorGameModal{padding:3px!important}
#moorGameModal .moor-dialog{width:calc(100vw - 6px)!important;max-height:calc(100dvh - 6px)!important;padding:5px 6px 6px!important}
#moorGameModal .moor-dialog h2{margin:0 38px 1px!important;font-size:18px!important}
#moorGameModal .moor-dialog .game-subtitle{display:none!important}
#moorGameModal .moor-scorebar{font-size:10px!important;padding:4px!important;min-height:27px!important;margin:1px 0 3px!important}
#moorGameModal .moor-field{height:calc(100dvh - 205px)!important;min-height:145px!important;max-height:none!important}
#moorGameModal .moor-dialog .game-status{font-size:9px!important;margin:3px 0!important;padding:3px 4px!important}
#moorGameModal .moor-actions{gap:3px!important;margin-top:2px!important}
#moorGameModal .moor-actions .btn{height:31px!important;min-height:31px!important;font-size:9px!important;padding:2px!important}
#moorGameModal .moor-close-row{margin-top:3px!important;min-height:28px!important}
#moorGameModal .moor-close-row .btn{height:28px!important;min-height:28px!important;font-size:9px!important;padding:2px 5px!important}
#moorGameModal .chat-game-close{top:4px!important;right:4px!important;width:31px!important;height:31px!important;min-width:31px!important;min-height:31px!important;font-size:22px!important}
}
/* V34: Schiffe versenken - isolierte Styles, bestehender Chat bleibt unveraendert. */
.battleship-dialog{width:min(820px,96vw)!important;max-height:94dvh!important;overflow-y:auto!important}
.battleship-score{display:flex;justify-content:space-around;gap:10px;margin:6px 0;padding:8px;border:1px solid #394452;border-radius:10px;background:#101820;font-weight:800}
.battleship-boards{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:center}
.battleship-boards>div>strong{display:block;margin-bottom:5px}
.bs-grid{display:grid;grid-template-columns:repeat(10,1fr);aspect-ratio:1/1;width:min(330px,100%);margin:auto;border:2px solid #52718a;background:#15364b}
.bs-cell{appearance:none;border:1px solid rgba(255,255,255,.16);background:#176086;min-width:0;padding:0;color:#fff;font-weight:900;font-size:clamp(10px,2vw,18px);cursor:default}
.bs-target .bs-cell{cursor:crosshair}.bs-target .bs-cell:hover{background:#287da6}.bs-cell.ship{background:#606b72}.bs-cell.hit{background:#2d69a5}.bs-cell.miss{background:#236e91;color:#d9f3ff}
.battleship-actions{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important}.battleship-actions .btn{width:100%!important}
@media(max-width:650px){.battleship-dialog{width:calc(100vw - 8px)!important;padding:7px!important}.battleship-dialog .game-subtitle{display:none}.battleship-boards{gap:6px}.battleship-score{font-size:11px;padding:5px}.battleship-actions{gap:4px!important}.battleship-actions .btn{font-size:10px!important;padding:5px 2px!important}.bs-grid{width:100%}}
/* V35: Tetris - isolierte Styles, bestehender Chat bleibt unveraendert. */
.tetris-dialog{width:min(620px,96vw)!important;max-height:96dvh!important;overflow-y:auto!important;padding:12px 16px!important}
.tetris-dialog h2{margin-bottom:3px!important}.tetris-dialog .game-subtitle{margin:2px 0 7px!important}
.tetris-scorebar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:5px 0;padding:7px;border:1px solid #343c47;border-radius:10px;background:#0d141d;font-weight:900;font-size:13px}
.tetris-stage{display:flex;justify-content:center;align-items:flex-start;gap:12px;margin:auto}
#tetrisCanvas{display:block;width:min(300px,52vw);height:auto;max-height:58dvh;aspect-ratio:1/2;border:3px solid #39495b;border-radius:7px;background:#091019;image-rendering:pixelated}
.tetris-side{width:125px;padding:8px;border:1px solid #303945;border-radius:9px;background:#111923;font-size:12px}.tetris-side strong{display:block;margin-bottom:5px}.tetris-side canvas{width:100%;height:auto;border-radius:5px}.tetris-help{margin-top:8px;line-height:1.55;color:#c9d1dc;text-align:left}
.tetris-touch{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;max-width:500px;margin:7px auto 2px;touch-action:manipulation;user-select:none;-webkit-user-select:none}.tetris-touch button{min-height:38px;border:1px solid #4a5360;border-radius:8px;background:#1b2632;color:#fff;font-size:18px;font-weight:900;cursor:pointer}.tetris-touch button:active{transform:translateY(1px);background:#293848}
.tetris-actions{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important;margin-top:5px!important}.tetris-actions .btn{width:100%!important}.tetris-dialog .game-status{margin:5px 0!important;padding:6px!important}
@media(max-width:560px){.tetris-dialog{width:calc(100vw - 6px)!important;max-height:calc(100dvh - 6px)!important;padding:6px!important}.tetris-dialog .game-kicker,.tetris-dialog .game-subtitle{display:none!important}.tetris-dialog h2{font-size:19px!important;margin:0 36px 3px!important}.tetris-scorebar{font-size:10px;padding:5px;gap:3px}.tetris-stage{gap:6px}.tetris-side{width:86px;padding:5px;font-size:9px}.tetris-help{display:none}#tetrisCanvas{width:min(260px,62vw);max-height:55dvh}.tetris-touch{gap:3px;margin:4px auto 1px}.tetris-touch button{min-height:32px;font-size:15px}.tetris-actions{gap:3px!important}.tetris-actions .btn{min-height:31px!important;padding:3px!important;font-size:9px!important}.tetris-dialog .game-status{font-size:9px!important;padding:4px!important;margin:3px 0!important}.tetris-dialog .moor-close-row{margin-top:3px!important}.tetris-dialog .moor-close-row .btn{min-height:28px!important;padding:3px!important;font-size:9px!important}}
@media(max-height:700px){#tetrisCanvas{max-height:46dvh}.tetris-side{max-height:46dvh}.tetris-dialog .game-subtitle{display:none!important}.tetris-touch button{min-height:30px}.tetris-dialog .game-status{margin:2px 0!important}.tetris-actions{margin-top:2px!important}}
/* V37 Dart - nur zusaetzliches Spiel */
.dart-dialog{width:min(620px,96vw)!important;max-height:96dvh!important;overflow-y:auto!important;padding:12px 16px!important}.dart-dialog h2{margin:2px 0!important}.dart-dialog .game-subtitle{margin:3px 0 7px!important}.dart-scorebar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:5px 0;padding:7px;border:1px solid #343c47;border-radius:10px;background:#0d141d;font-weight:900;font-size:13px}.dart-stage{display:flex;justify-content:center}.dart-stage canvas{display:block;width:min(440px,76vw);height:auto;max-height:60dvh;border-radius:12px;touch-action:none}.dart-actions{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important;margin-top:5px!important}.dart-actions .btn{width:100%!important}.dart-dialog .game-status{margin:5px 0!important;padding:6px!important}@media(max-width:560px){.dart-dialog{width:calc(100vw - 6px)!important;max-height:calc(100dvh - 6px)!important;padding:6px!important}.dart-dialog .game-kicker,.dart-dialog .game-subtitle{display:none!important}.dart-dialog h2{font-size:19px!important;margin:0 36px 3px!important}.dart-scorebar{font-size:10px;padding:5px;gap:3px}.dart-stage canvas{width:min(390px,88vw);max-height:57dvh}.dart-actions{gap:3px!important}.dart-actions .btn{min-height:31px!important;padding:3px!important;font-size:9px!important}.dart-dialog .game-status{font-size:9px!important;padding:4px!important;margin:3px 0!important}.dart-dialog .moor-close-row{margin-top:3px!important}.dart-dialog .moor-close-row .btn{min-height:28px!important;padding:3px!important;font-size:9px!important}}@media(max-height:700px){.dart-stage canvas{max-height:48dvh;width:auto}.dart-dialog .game-subtitle{display:none!important}.dart-dialog .game-status{margin:2px 0!important}.dart-actions{margin-top:2px!important}}
/* V39 DART LAYOUT FIX - nur Dart: untere Bedienleiste immer sichtbar */
#dartGameModal{padding:6px!important;overflow:hidden!important}
#dartGameModal .dart-dialog{
box-sizing:border-box!important;
width:min(620px,calc(100vw - 12px))!important;
height:min(760px,calc(100dvh - 12px))!important;
max-height:calc(100dvh - 12px)!important;
overflow:hidden!important;
display:flex!important;
flex-direction:column!important;
}
#dartGameModal .dart-dialog .game-kicker,
#dartGameModal .dart-dialog h2,
#dartGameModal .dart-dialog .game-subtitle,
#dartGameModal .dart-scorebar,
#dartGameModal .dart-dialog .game-status,
#dartGameModal .dart-actions,
#dartGameModal .moor-close-row{flex:0 0 auto!important}
#dartGameModal .dart-stage{
flex:1 1 auto!important;
min-height:0!important;
overflow:hidden!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
#dartGameModal .dart-stage canvas{
width:auto!important;
height:auto!important;
max-width:min(440px,76vw)!important;
max-height:100%!important;
aspect-ratio:1/1!important;
}
#dartGameModal .dart-actions{margin-top:4px!important}
#dartGameModal .moor-close-row{display:flex!important;justify-content:center!important;margin-top:4px!important}
#dartGameModal .moor-close-row .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:32px!important}
@media(max-width:560px){
#dartGameModal{padding:3px!important}
#dartGameModal .dart-dialog{width:calc(100vw - 6px)!important;height:calc(100dvh - 6px)!important;max-height:calc(100dvh - 6px)!important;padding:6px!important}
#dartGameModal .dart-stage canvas{max-width:88vw!important;max-height:100%!important}
#dartGameModal .dart-actions .btn{min-height:30px!important}
#dartGameModal .moor-close-row .btn{min-height:29px!important;height:29px!important}
}
@media(max-height:700px){
#dartGameModal .dart-dialog{padding-top:5px!important;padding-bottom:5px!important}
#dartGameModal .dart-dialog .game-kicker,#dartGameModal .dart-dialog .game-subtitle{display:none!important}
#dartGameModal .dart-dialog h2{margin:0 38px 2px!important;font-size:18px!important}
#dartGameModal .dart-scorebar{margin:2px 0!important;padding:4px!important}
#dartGameModal .dart-dialog .game-status{margin:2px 0!important;padding:3px!important}
#dartGameModal .dart-actions{margin-top:2px!important}
#dartGameModal .moor-close-row{margin-top:2px!important}
}
/* V40 Schach - isolierte Styles */
.chess-dialog{width:min(650px,96vw)!important;max-height:96dvh!important;overflow-y:auto!important;padding:12px 16px!important}
.chess-dialog h2{margin:2px 0!important}.chess-dialog .game-subtitle{margin:3px 0 7px!important}
.chess-scorebar{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:5px 0;padding:7px;border:1px solid #343c47;border-radius:10px;background:#0d141d;font-weight:900;font-size:13px;text-align:center}
.chess-board-wrap{display:flex;justify-content:center;margin:4px auto}.chess-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:min(520px,76vw,58dvh);aspect-ratio:1;border:4px solid #4d3523;border-radius:8px;overflow:hidden;box-shadow:0 5px 18px #0008}
.chess-cell{border:0!important;border-radius:0!important;padding:0!important;min-width:0!important;min-height:0!important;display:grid!important;place-items:center!important;font-family:"Segoe UI Symbol","DejaVu Sans",sans-serif!important;font-size:clamp(25px,6.4vw,52px)!important;line-height:1!important;cursor:pointer;touch-action:manipulation;text-shadow:0 1px 1px #0005}
.chess-cell.light{background:#e8cf9f!important;color:#111!important}.chess-cell.dark{background:#8b5a3c!important;color:#111!important}.chess-cell.selected{box-shadow:inset 0 0 0 4px #ffd54a!important}.chess-cell.legal::after{content:"";width:24%;aspect-ratio:1;border-radius:50%;background:#21b96b;opacity:.85;position:absolute}.chess-cell.capture{box-shadow:inset 0 0 0 4px #4499ee!important}.chess-cell{position:relative}.chess-cell:not(:empty){z-index:0}.chess-cell.legal:not(:empty)::after{display:none}
.chess-actions{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important;margin-top:5px!important}.chess-actions .btn{width:100%!important}.chess-dialog .game-status{margin:5px 0!important;padding:6px!important}
@media(max-width:560px){.chess-dialog{width:calc(100vw - 6px)!important;max-height:calc(100dvh - 6px)!important;padding:6px!important}.chess-dialog .game-kicker,.chess-dialog .game-subtitle{display:none!important}.chess-dialog h2{font-size:19px!important;margin:0 36px 3px!important}.chess-scorebar{font-size:10px;padding:4px;gap:3px}.chess-board{width:min(94vw,55dvh)}.chess-actions{gap:3px!important}.chess-actions .btn{min-height:31px!important;padding:3px!important;font-size:9px!important}.chess-dialog .game-status{font-size:9px!important;padding:4px!important;margin:3px 0!important}.chess-dialog .moor-close-row{margin-top:3px!important}.chess-dialog .moor-close-row .btn{min-height:28px!important;padding:3px!important;font-size:9px!important}}
@media(max-height:700px){.chess-board{width:min(74vw,48dvh)}.chess-dialog .game-subtitle{display:none!important}.chess-dialog .game-status{margin:2px 0!important}.chess-actions{margin-top:2px!important}}
/* V41 Dame - isolierte Styles */
.checkers-dialog{width:min(650px,96vw)!important;max-height:96dvh!important;overflow-y:auto!important;padding:12px 16px!important}
.checkers-dialog h2{margin:2px 0!important}.checkers-dialog .game-subtitle{margin:3px 0 7px!important}
.checkers-scorebar{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:5px 0;padding:7px;border:1px solid #343c47;border-radius:10px;background:#0d141d;font-weight:900;font-size:13px;text-align:center}
.checkers-board-wrap{display:flex;justify-content:center;margin:4px auto}.checkers-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:min(520px,76vw,58dvh);aspect-ratio:1;border:4px solid #4d3523;border-radius:8px;overflow:hidden;box-shadow:0 5px 18px #0008}
.checkers-cell{border:0!important;border-radius:0!important;padding:0!important;min-width:0!important;min-height:0!important;display:grid!important;place-items:center!important;position:relative;cursor:pointer;touch-action:manipulation}.checkers-cell.light{background:#e8cf9f!important}.checkers-cell.dark{background:#70472f!important}.checkers-cell.selected{box-shadow:inset 0 0 0 4px #ffd54a!important}.checkers-cell.legal::after{content:"";width:24%;aspect-ratio:1;border-radius:50%;background:#36d47b;position:absolute;z-index:3}
.checker-stone{width:72%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:clamp(14px,3vw,25px);font-weight:900;box-shadow:inset 0 0 0 4px #ffffff25,0 3px 5px #0009;z-index:2}.checker-stone.red{background:#2b80d5;border:3px solid #11467b;color:#ffd54a}.checker-stone.black{background:#17191d;border:3px solid #050505;color:#ffd54a}.checker-stone.king{box-shadow:inset 0 0 0 4px #ffd54a,0 3px 5px #0009}
.checkers-actions{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important;margin-top:5px!important}.checkers-actions .btn{width:100%!important}.checkers-dialog .game-status{margin:5px 0!important;padding:6px!important}
@media(max-width:560px){.checkers-dialog{width:calc(100vw - 6px)!important;max-height:calc(100dvh - 6px)!important;padding:6px!important}.checkers-dialog .game-kicker,.checkers-dialog .game-subtitle{display:none!important}.checkers-dialog h2{font-size:19px!important;margin:0 36px 3px!important}.checkers-scorebar{font-size:10px;padding:4px;gap:3px}.checkers-board{width:min(94vw,55dvh)}.checkers-actions{gap:3px!important}.checkers-actions .btn{min-height:31px!important;padding:3px!important;font-size:9px!important}.checkers-dialog .game-status{font-size:9px!important;padding:4px!important;margin:3px 0!important}.checkers-dialog .moor-close-row{margin-top:3px!important}.checkers-dialog .moor-close-row .btn{min-height:28px!important;padding:3px!important;font-size:9px!important}}
@media(max-height:700px){.checkers-board{width:min(74vw,48dvh)}.checkers-dialog .game-subtitle{display:none!important}.checkers-dialog .game-status{margin:2px 0!important}.checkers-actions{margin-top:2px!important}}
/* V45 DART: Ziel waehlen + sichtbarer Pfeil + Wurfstaerke. Nur Dart. */
#dartGameModal .dart-throw-panel{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;margin:5px 0 3px!important}
#dartGameModal .dart-power{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px;font-size:10px;font-weight:900;letter-spacing:.04em}
#dartGameModal .dart-power-track{position:relative;height:14px;border-radius:999px;overflow:hidden;background:#131820;border:1px solid #46505c;min-width:120px}
#dartGameModal .dart-power-track i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#3989d9 0 37%,#f1c232 52%,#33b45a 62% 75%,#f1c232 82%,#3989d9 100%);border-radius:999px}
#dartGameModal .dart-power-track b{position:absolute;left:62%;width:13%;top:0;bottom:0;border-left:2px solid rgba(255,255,255,.9);border-right:2px solid rgba(255,255,255,.9);pointer-events:none}
#dartGameModal .dart-throw-btn{min-width:118px!important;min-height:36px!important;font-weight:900!important}
@media(max-width:560px){#dartGameModal .dart-throw-panel{grid-template-columns:1fr auto;gap:4px;margin:2px 0!important}#dartGameModal .dart-power{grid-template-columns:1fr;font-size:8px;gap:2px}#dartGameModal .dart-power-track{height:11px;min-width:90px}#dartGameModal .dart-throw-btn{min-width:88px!important;min-height:31px!important;padding:3px 6px!important;font-size:9px!important}}
@media(max-height:700px){#dartGameModal .dart-throw-panel{margin:1px 0!important}#dartGameModal .dart-power-track{height:10px}#dartGameModal .dart-throw-btn{min-height:28px!important}}
/* V47 Poker + Solitaer: nur neue Spielfenster */
.poker-dialog,.solitaire-dialog{width:min(760px,96vw)!important;max-height:96dvh!important;overflow:auto!important;padding:12px 16px!important}.poker-dialog h2,.solitaire-dialog h2{margin:2px 0!important}.poker-dialog .game-subtitle,.solitaire-dialog .game-subtitle{margin:3px 0 7px!important}.poker-scorebar,.solitaire-scorebar{display:flex;justify-content:space-between;gap:8px;background:#0d141d;border:1px solid #343c47;border-radius:10px;padding:7px 10px;font-weight:900;margin:5px 0}.poker-table{background:radial-gradient(circle at center,#18743d,#0b4c29);border:5px solid #5b351b;border-radius:22px;padding:12px;box-shadow:inset 0 0 30px #062b18}.poker-hand-block{text-align:center;margin:5px 0}.poker-hand{display:flex;justify-content:center;gap:7px;min-height:118px;margin:5px 0}.playing-card{font-family:Arial,sans-serif}.poker-card,.sol-card{width:72px;height:104px;background:#fff;border:2px solid #d8d8d8;border-radius:8px;color:#111;position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 2px 7px rgba(0,0,0,.45);user-select:none}.poker-card{cursor:pointer}.poker-card.red,.sol-card.red{color:#166dc5}.poker-card b,.sol-card b{position:absolute;top:5px;left:7px;font-size:16px}.poker-card em,.sol-card em{font-style:normal;font-size:34px}.poker-card small,.sol-card small{position:absolute;right:5px;bottom:4px;transform:rotate(180deg);font-weight:700}.poker-card.back,.sol-card.back{background:repeating-linear-gradient(45deg,#10467c 0,#10467c 5px,#236db8 5px,#236db8 10px);border:4px solid #fff;color:#fff}.poker-card.back span,.sol-card.back span{background:#114375;border:1px solid #fff7;padding:7px;border-radius:50%;font-weight:900}.poker-card.held{transform:translateY(-8px);outline:3px solid #ffd34e}.poker-card i{position:absolute;bottom:-19px;background:#ffd34e;color:#111;font-size:9px;font-style:normal;padding:2px 5px;border-radius:5px;font-weight:900}.poker-actions,.solitaire-actions{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important;margin-top:6px!important}.solitaire-actions{grid-template-columns:1fr 1fr!important}.poker-actions .btn,.solitaire-actions .btn{width:100%!important}
.solitaire-board{background:linear-gradient(#17623a,#0c4729);border:4px solid #5b351b;border-radius:16px;padding:10px;min-height:480px;overflow-x:auto}.sol-top{display:grid;grid-template-columns:74px 74px 1fr auto;gap:9px;align-items:start;min-width:600px}.sol-pile,.sol-found{width:74px;height:106px}.sol-foundations{display:flex;gap:9px}.sol-empty{width:70px;height:102px;border:2px dashed rgba(255,255,255,.36);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:30px;color:rgba(255,255,255,.45)}.sol-tableau{display:grid;grid-template-columns:repeat(7,74px);gap:12px;margin-top:14px;min-width:590px;align-items:start}.sol-col{min-height:300px;position:relative}.sol-col .sol-card{position:absolute;left:0}.sol-col .sol-card:nth-child(n){margin:0}.sol-card{cursor:pointer}.sol-card.selected{outline:3px solid #ffd34e;transform:translateX(3px)}.sol-col .sol-card:nth-child(1){top:0}.sol-col .sol-card:nth-child(2){top:27px}.sol-col .sol-card:nth-child(3){top:54px}.sol-col .sol-card:nth-child(4){top:81px}.sol-col .sol-card:nth-child(5){top:108px}.sol-col .sol-card:nth-child(6){top:135px}.sol-col .sol-card:nth-child(7){top:162px}.sol-col .sol-card:nth-child(8){top:189px}.sol-col .sol-card:nth-child(9){top:216px}.sol-col .sol-card:nth-child(10){top:243px}.sol-col .sol-card:nth-child(11){top:270px}.sol-col .sol-card:nth-child(12){top:297px}.sol-col .sol-card:nth-child(13){top:324px}.sol-col .sol-card:nth-child(14){top:351px}.sol-col .sol-card:nth-child(15){top:378px}.sol-col .sol-card:nth-child(16){top:405px}.sol-col .sol-card:nth-child(17){top:432px}.sol-col .sol-card:nth-child(18){top:459px}.sol-col .sol-card:nth-child(19){top:486px}
@media(max-width:600px){.poker-dialog,.solitaire-dialog{width:calc(100vw - 6px)!important;max-height:calc(100dvh - 6px)!important;padding:6px!important}.poker-dialog .game-kicker,.poker-dialog .game-subtitle,.solitaire-dialog .game-kicker,.solitaire-dialog .game-subtitle{display:none!important}.poker-dialog h2,.solitaire-dialog h2{font-size:18px!important;margin:0 36px 3px!important}.poker-table{padding:6px}.poker-hand{gap:3px;min-height:90px}.poker-card{width:54px;height:78px}.poker-card em{font-size:27px}.poker-card b{font-size:12px}.poker-actions{gap:3px!important}.poker-actions .btn,.solitaire-actions .btn{font-size:9px!important;padding:4px!important;min-height:31px!important}.solitaire-board{padding:5px;min-height:430px}.sol-top{grid-template-columns:58px 58px 1fr auto;gap:5px;min-width:470px}.sol-pile,.sol-found{width:58px;height:84px}.sol-foundations{gap:5px}.sol-card{width:56px;height:80px}.sol-card em{font-size:26px}.sol-empty{width:54px;height:78px}.sol-tableau{grid-template-columns:repeat(7,56px);gap:10px;min-width:452px}.sol-col{min-height:310px}.sol-col .sol-card:nth-child(2){top:24px}.sol-col .sol-card:nth-child(3){top:48px}.sol-col .sol-card:nth-child(4){top:72px}.sol-col .sol-card:nth-child(5){top:96px}.sol-col .sol-card:nth-child(6){top:120px}.sol-col .sol-card:nth-child(7){top:144px}.sol-col .sol-card:nth-child(8){top:168px}.sol-col .sol-card:nth-child(9){top:192px}.sol-col .sol-card:nth-child(10){top:216px}.sol-col .sol-card:nth-child(11){top:240px}.sol-col .sol-card:nth-child(12){top:264px}.sol-col .sol-card:nth-child(13){top:288px}}
/* V48 Solitaer Ziehen-Fix */
.solitaire-board .sol-card{touch-action:none;-webkit-user-drag:none}.sol-stock{cursor:pointer}.sol-card.selected{filter:brightness(1.08)}
/* V51: Gemeinsames Kniffel */
.kniffel-multiplayer-bar{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;margin:8px 0 10px;padding:10px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.035)}
.kniffel-players{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}.kniffel-player-chip{display:inline-flex;align-items:center;gap:4px;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);font-size:11px}.kniffel-player-chip.active{border-color:#efb44b;background:rgba(239,180,75,.13);box-shadow:0 0 0 1px rgba(239,180,75,.15)}
.kniffel-lobby-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}.kniffel-lobby-actions .btn{white-space:nowrap}
@media(max-width:620px){.kniffel-multiplayer-bar{flex-direction:column}.kniffel-lobby-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.kniffel-lobby-actions .btn{width:100%}.kniffel-player-chip{font-size:10px}}
/* V58: Spiele-Bedienebene - keine Touch-Hacks, nur echte klickbare Ebene */
body.chat-page .chat-game-modal:not([hidden]){
z-index:2147483646!important;
pointer-events:auto!important;
touch-action:auto!important;
}
body.chat-page .chat-game-modal:not([hidden]) .chat-game-dialog,
body.chat-page .chat-game-modal:not([hidden]) button,
body.chat-page .chat-game-modal:not([hidden]) input,
body.chat-page .chat-game-modal:not([hidden]) select,
body.chat-page .chat-game-modal:not([hidden]) canvas{
pointer-events:auto!important;
}
body.chat-page .chat-game-modal:not([hidden]) button{
touch-action:manipulation!important;
-webkit-tap-highlight-color:rgba(255,255,255,.14);
}
body.chat-page .games-tab-menu:not([hidden]){
z-index:2147483645!important;
pointer-events:auto!important;
}
body.chat-page .games-tab-menu:not([hidden]) .game-top-button{
pointer-events:auto!important;
touch-action:manipulation!important;
}
/* V59: Spiele muessen immer die oberste anklickbare Ebene sein. */
body.chat-page.game-modal-open .chat-game-modal:not([hidden]){
position:fixed!important;inset:0!important;z-index:2147483647!important;
pointer-events:auto!important;touch-action:auto!important;
}
body.chat-page.game-modal-open .chat-game-modal:not([hidden]) .chat-game-dialog,
body.chat-page.game-modal-open .chat-game-modal:not([hidden]) button,
body.chat-page.game-modal-open .chat-game-modal:not([hidden]) select,
body.chat-page.game-modal-open .chat-game-modal:not([hidden]) input,
body.chat-page.game-modal-open .chat-game-modal:not([hidden]) canvas{pointer-events:auto!important;}
body.chat-page.game-modal-open #smileyPanel{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;}
/* V64: Kniffel Mehrspieler-Herausforderung */
.kniffel-challenge-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%}
.kniffel-challenge-row select{min-width:220px;flex:1 1 220px;max-width:100%;padding:9px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#131b24;color:#fff}
.kniffel-challenge-row .btn{white-space:nowrap}
@media(max-width:620px){.kniffel-challenge-row{display:grid;grid-template-columns:1fr}.kniffel-challenge-row select,.kniffel-challenge-row .btn{width:100%;min-width:0}}
/* Dauerhaft extra grosse Schrift im gesamten Chatbereich */
body.chat-page,body.chat-page .chat-layout,body.chat-page .chat-main,body.chat-page .sidebar{font-size:20px!important}
body.chat-page .messages .msg .text,body.chat-page .messages .msg .text *{font-size:24px!important;line-height:1.6!important}
body.chat-page .messages .msg .meta,body.chat-page .message-username,body.chat-page .message-time{font-size:18px!important;line-height:1.45!important}
body.chat-page .topbar,body.chat-page .topbar strong,body.chat-page .topbar .muted,body.chat-page .topbar a,body.chat-page .topbar button,body.chat-page .topbar select{font-size:18px!important}
body.chat-page .sidebar-head,body.chat-page .sidebar h2,body.chat-page #users .user,body.chat-page #users .user-display-name,body.chat-page #users .muted,body.chat-page #users button{font-size:18px!important;line-height:1.4!important}
body.chat-page .radio-player,body.chat-page .radio-player *,body.chat-page .compact-player #nowPlayingTitle,body.chat-page .compact-player .moderator-line,body.chat-page .compact-player .now-playing-label{font-size:16px!important}
body.chat-page .format-toolbar,body.chat-page .format-toolbar label,body.chat-page .format-toolbar select,body.chat-page .format-toolbar button{font-size:17px!important}
body.chat-page .composer input#message{font-size:22px!important;line-height:1.4!important;min-height:52px!important}
body.chat-page .composer button,body.chat-page .composer .btn{font-size:18px!important;min-height:50px!important;padding:12px 18px!important}
body.chat-page .games-tab-menu button,body.chat-page .smiley-tabs button{font-size:18px!important}
body.chat-page .status-control,body.chat-page .chat-status,body.chat-page .send-status{font-size:16px!important}
@media(max-width:760px){
body.chat-page,body.chat-page .chat-layout,body.chat-page .chat-main,body.chat-page .sidebar{font-size:18px!important}
body.chat-page .messages .msg .text,body.chat-page .messages .msg .text *{font-size:22px!important}
body.chat-page .messages .msg .meta,body.chat-page .message-username,body.chat-page .message-time{font-size:17px!important}
body.chat-page .topbar,body.chat-page .topbar strong,body.chat-page .topbar .muted,body.chat-page .topbar a,body.chat-page .topbar button,body.chat-page .topbar select{font-size:16px!important}
body.chat-page .composer input#message{font-size:20px!important}
body.chat-page .composer button,body.chat-page .composer .btn{font-size:16px!important;padding:10px 13px!important}
}
/* Benutzerliste: Rolle und Status sauber unter dem Namen */
body.chat-page #users .user-info{min-width:0;flex:1}
body.chat-page #users .user-role-under{margin:3px 0 0 24px;font-size:.82rem;font-weight:800;line-height:1.15;color:var(--muted,#d8cbd0)}
body.chat-page #users .user-role-under.role-admin{color:#62b0ff}
body.chat-page #users .user-role-under.role-moderator{color:#66a9ff}
body.chat-page #users .user-role-under.role-user,body.chat-page #users .user-role-under.role-member,body.chat-page #users .user-role-under.role-guest{color:#ffad5c}
body.chat-page #users .user-status-under{display:block;margin:3px 0 0 24px;font-size:.78rem;font-weight:900;line-height:1.15}
body.chat-page #users .user-status-under.status-onair{color:#7ee787}
body.chat-page #users .user-bottom-row{margin-left:24px;margin-top:4px}
body.chat-page .chat-clear-button{white-space:nowrap}
/* === Da wackeln die Boxen: Layout- und Design-Fix 2026-09-10 === */
/* Verhindert, dass der Chat nur als schmaler Bereich oben dargestellt wird. */
body.chat-page{
min-height:100dvh;
height:100dvh;
overflow:hidden;
background:
radial-gradient(circle at 18% 0%,rgba(8,70,150,.20),transparent 34%),
radial-gradient(circle at 82% 0%,rgba(17,67,117,.26),transparent 38%),
linear-gradient(180deg,#090d12 0%,#040b16 100%);
}
body.chat-page .shell{
width:100% !important;
max-width:none !important;
height:100dvh !important;
max-height:100dvh !important;
min-height:100dvh !important;
padding:0 !important;
display:grid !important;
grid-template-rows:minmax(0,1fr) !important;
overflow:hidden !important;
}
body.chat-page .chat-layout{
width:100% !important;
height:100% !important;
min-height:0 !important;
grid-template-columns:minmax(0,1fr) clamp(270px,17vw,330px) !important;
gap:0 !important;
}
body.chat-page .chat-main,
body.chat-page .sidebar{
height:100% !important;
min-height:0 !important;
border-radius:0 !important;
border-color:#224569 !important;
box-shadow:none !important;
}
body.chat-page .chat-main{
border-width:1px 0 1px 1px !important;
background:rgba(12,8,12,.96) !important;
}
body.chat-page .sidebar{
border-width:1px !important;
background:linear-gradient(180deg,rgba(9,22,35,.98),rgba(7,12,17,.98)) !important;
padding:14px !important;
}
body.chat-page .topbar{
background:linear-gradient(90deg,#091f35 0%,#0b1621 55%,#120d13 100%) !important;
border-bottom:1px solid #29517a !important;
}
body.chat-page .topbar strong{
font-size:17px;
letter-spacing:.2px;
color:#fff;
text-shadow:0 0 10px rgba(39,111,214,.28);
}
body.chat-page .btn,
body.chat-page .navlinks a,
body.chat-page .games-tab-button{
border:1px solid rgba(48,91,134,.65) !important;
background:linear-gradient(180deg,#1b324a,#132231) !important;
color:#fff !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.chat-page .btn:hover,
body.chat-page .navlinks a:hover,
body.chat-page .games-tab-button:hover{
background:linear-gradient(180deg,#223c57,#17293b) !important;
border-color:#3b6fa3 !important;
}
body.chat-page .composer,
body.chat-page .text-format-toolbar,
body.chat-page .smiley-panel{
background:linear-gradient(180deg,rgba(10,26,42,.98),rgba(8,15,23,.99)) !important;
border-color:#264a6f !important;
}
body.chat-page .composer input{
background:#100b10 !important;
border-color:#305173 !important;
}
body.chat-page .user{
border-bottom-color:#203b57 !important;
}
body.chat-page .online{
box-shadow:0 0 8px rgba(70,209,125,.45);
}
body.chat-page .user-role-under.role-admin{color:#58abff !important;font-weight:800;}
body.chat-page .user-role-under.role-moderator{color:#57a9ff !important;font-weight:800;}
body.chat-page .user-role-under.role-guest,
body.chat-page .user-role-under.role-user{color:#ffad55 !important;font-weight:800;}
body.chat-page .user-status-under.status-onair{
color:#fff !important;
background:#0d5fb2 !important;
border-radius:4px;
padding:1px 5px;
display:inline-block;
width:max-content;
font-weight:900;
}
@media(max-width:760px){
body.chat-page{height:100dvh;min-height:100dvh;overflow:hidden;}
body.chat-page .shell{height:100dvh !important;min-height:100dvh !important;}
body.chat-page .chat-layout{display:block !important;height:100% !important;}
body.chat-page .chat-main{height:100% !important;border:0 !important;}
body.chat-page .sidebar{border-radius:0 !important;}
}