:root{--accent:#ffa200;--system:#4de1ff;--panel:rgba(0,0,0,.72);--panel2:#14182a;--text:#eef4ff;--muted:#9aa9c1;--danger:#ff4d67;--ok:#27d17f;--chat-bg:radial-gradient(circle at 20% 0%,#17345d 0,#10152a 35%,#070a12 100%)}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Segoe UI,Arial,sans-serif;color:var(--text);background:#070a12 var(--chat-bg) no-repeat center center fixed;background-size:cover}
button,input,select,textarea{font:inherit}.hidden{display:none!important}.panel{border:2px solid var(--accent);border-radius:10px;box-shadow:3px 4px 9px rgba(34,55,161,.72);background:var(--panel)}
/* login */
.login-page{display:grid;place-items:center;min-height:100vh;padding:24px;background:radial-gradient(circle at 50% 0,#17264e,#090d19 55%)}.login-card{width:min(460px,95vw);border:2px solid var(--accent);border-radius:18px;background:rgba(0,0,0,.78);padding:28px;box-shadow:0 24px 80px #000b;text-align:center}.brand-mark{font-size:50px}.login-card h1{margin:6px 0}.login-card p{color:var(--muted)}.login-card label{display:block;text-align:left;margin:12px 0 5px}.login-card input,.login-card select{width:100%;padding:11px;border-radius:9px;border:1px solid #3b4660;background:#0d1323;color:white}.primary{width:100%;padding:12px;margin-top:18px;border:0;border-radius:10px;background:var(--accent);color:#171717;font-weight:800;cursor:pointer}.tabs{display:flex;gap:6px;margin:18px 0}.tab{flex:1;padding:9px;border:1px solid #3f4962;background:#151b2c;color:#cbd5e8;border-radius:8px;cursor:pointer}.tab.active{background:var(--accent);color:#111;border-color:var(--accent)}.alert{padding:10px;border-radius:8px;margin:12px 0}.alert.error{background:#4c1420;border:1px solid #e55772}.alert.ok{background:#123a2a;border:1px solid #38d394}
/* chat layout */
.chat-page{min-height:100vh;padding:8px 10px 88px;font-size:15px}.header{height:96px;display:flex;align-items:center;margin-bottom:10px;overflow:hidden}.player-head{width:66%;height:100%}.player-head iframe{border:0;width:100%;height:92px;display:block}.welcome-box{width:34%;padding:10px 18px;text-align:center}.welcome-box h1{font-size:20px;margin:0;color:var(--system)}
.chat-container{display:grid;grid-template-columns:0 minmax(0,1fr) 300px;gap:10px;height:calc(100vh - 210px);min-height:480px}.left-sidebar{min-width:0;overflow:hidden}.chat-box{position:relative;overflow:hidden}.messages{height:100%;overflow-y:auto;padding:10px 12px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}.message{padding:2px 4px;line-height:1.42;word-break:break-word;font-size:15px}.message:hover{background:#ffffff08}.message .time{font-size:11px;color:#7e8aa1;margin-right:7px}.username,.systemusername{font-weight:700;cursor:pointer}.systemusername{color:var(--system)}.message-content a{color:#75c6ff}.message.image-message img{max-width:min(480px,90%);max-height:360px;border-radius:8px;border:1px solid #3e4b67;margin:5px 0;display:block}.message.deleted{opacity:.45;font-style:italic}.message-actions{opacity:0;display:inline-flex;gap:4px;margin-left:7px}.message:hover .message-actions{opacity:1}.msg-action{border:0;background:transparent;color:#7f93b0;cursor:pointer;padding:0 3px}.msg-action:hover{color:#fff}
#scroll-arrow{display:none;position:absolute;right:18px;bottom:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--accent);background:#111b2f;color:var(--accent);cursor:pointer;z-index:3}.right-sidebar{padding:9px;overflow:hidden}.stream-box{border-bottom:1px solid #ffffff1a;padding-bottom:8px;margin-bottom:8px}.stream-tabs{display:flex;gap:4px;overflow-x:auto;margin-bottom:5px}.stream-tab{font-size:11px;border:1px solid #42506d;background:#141c31;color:#d7e3f7;padding:5px 8px;border-radius:6px;white-space:nowrap;cursor:pointer}.stream-tab.active{border-color:var(--accent);color:var(--accent)}#stream-container iframe{width:100%;height:220px;border:0;display:block}.wish-btn{width:100%;padding:8px;border-radius:8px;border:1px solid var(--accent);background:#171b27;color:var(--accent);cursor:pointer;font-weight:700}.wish-btn:hover{background:#2b2415}#wunschbox-count{text-align:center;color:var(--system);font-size:15px;padding:3px}.user-count{color:var(--system);font-weight:800;text-align:center;padding:5px}.user_container,#user_container{overflow-y:auto;max-height:calc(100% - 320px);min-height:130px}.user-row{font-size:15px;display:flex;align-items:center;justify-content:space-between;gap:5px;padding:3px 1px;color:var(--system)}.user-main{display:flex;align-items:center;gap:7px;min-width:0}.pm-button,.webcam-button,.user-more{width:22px;border:0;background:transparent;color:var(--system);cursor:pointer;padding:0}.gender-badge{width:19px;text-align:center}.gender-badge.f{color:#ff8cce}.gender-badge.m{color:#72b6ff}.gender-badge.d{color:#d2b1ff}.user-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.user-role{font-size:10px;border:1px solid #46536f;padding:1px 4px;border-radius:4px;color:#d7def1}.onair{font-size:10px;color:#fff;background:#dc304f;border-radius:4px;padding:2px 5px}.away{font-size:10px;color:#ffc75d}.livecam{color:#00e600}.footer{position:fixed;left:10px;right:10px;bottom:8px;min-height:70px;padding:10px;display:flex;align-items:center;gap:10px;z-index:100}.footer-left{flex:1}.footer-left form{display:flex}.footer-left input{width:100%;height:46px;border-radius:20px;border:1px solid #66718d;background:rgba(0,0,0,.4);color:white;padding:0 18px;font-size:20px;font-weight:600;outline:none}.footer-left input:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent)}.footer-right{flex:0 0 auto}.footer-icons{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.tool-btn{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #5c6475;border-radius:6px;background:linear-gradient(#636873,#343942);color:#fff;cursor:pointer;text-decoration:none;font-size:20px;box-shadow:inset 0 1px #ffffff55}.tool-btn:hover{border-color:var(--accent);color:var(--accent)}.tool-btn.logout:hover{color:#ff697f;border-color:#ff697f}
/* modal */
.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:5000;padding:20px}.modal-card{width:min(860px,95vw);max-height:88vh;background:#11182a;border:2px solid var(--accent);border-radius:14px;box-shadow:0 24px 80px #000;overflow:hidden;display:flex;flex-direction:column}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid #ffffff1a;background:#161f35}.modal-header h2{margin:0;font-size:20px}.modal-x{width:34px;height:34px;border-radius:50%;border:0;background:#d94055;color:white;font-size:23px;cursor:pointer}.modal-body{padding:16px;overflow:auto;color:#dde6f5}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid .full{grid-column:1/-1}.modal-body input,.modal-body select,.modal-body textarea{width:100%;padding:9px;border-radius:7px;border:1px solid #3b4864;background:#0b1221;color:white}.modal-body textarea{min-height:90px}.btn{border:1px solid #596783;background:#1b263c;color:#fff;border-radius:7px;padding:8px 11px;cursor:pointer}.btn:hover{border-color:var(--accent)}.btn.primary-small{background:var(--accent);color:#111;font-weight:800}.btn.danger{background:#6d1d2a;border-color:#d34c61}.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.game-card{padding:16px;border:1px solid #45526d;background:#151d31;border-radius:10px;cursor:pointer;color:white}.game-card:hover{border-color:var(--accent)}.smiley-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:7px}.smiley-item{min-height:64px;border:1px solid #34415b;border-radius:8px;background:#0d1424;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}.smiley-item img{max-width:52px;max-height:42px}.color-row{display:flex;gap:10px;align-items:center;margin:10px 0}.color-row input[type=color]{width:60px;height:40px;padding:2px}.wheel{width:250px;height:250px;margin:10px auto;border-radius:50%;border:8px solid #212c42;display:grid;place-items:center;background:conic-gradient(#ff595e 0 45deg,#ffca3a 45deg 90deg,#8ac926 90deg 135deg,#1982c4 135deg 180deg,#6a4c93 180deg 225deg,#ff924c 225deg 270deg,#c9184a 270deg 315deg,#2ec4b6 315deg 360deg);transition:transform 3s cubic-bezier(.15,.75,.12,1)}.wheel span{width:90px;height:90px;border-radius:50%;background:#101728;display:grid;place-items:center;font-weight:800;border:3px solid white}.dice-big{font-size:84px;text-align:center;margin:10px}.status-options{display:flex;gap:7px;flex-wrap:wrap}.status-chip{padding:8px 10px;border:1px solid #41506c;background:#10192b;color:white;border-radius:9px;cursor:pointer}.rules-section{margin-bottom:16px}.rules-section h3{color:#fff;border-bottom:1px solid #ffffff18;padding-bottom:7px}.rules-section p{color:#c9d4e7;white-space:pre-wrap}.upload-preview{max-width:100%;max-height:320px;border-radius:8px}
/* PM */
.pm-dock{position:fixed;right:20px;bottom:88px;display:flex;gap:10px;z-index:3000;align-items:flex-end}.pm-window{width:330px;height:390px;background:#0e1526;border:2px solid var(--accent);border-radius:12px;box-shadow:0 16px 50px #000c;display:flex;flex-direction:column}.pm-head{padding:8px 10px;background:#18223a;display:flex;justify-content:space-between;align-items:center}.pm-head button{border:0;background:transparent;color:white;cursor:pointer}.pm-messages{flex:1;overflow-y:auto;padding:8px}.pm-msg{padding:6px 8px;margin:4px 0;background:#182034;border-radius:8px}.pm-msg.mine{background:#24385e}.pm-msg small{display:block;color:#8c9ab4}.pm-form{display:flex;padding:8px;gap:5px}.pm-form input{flex:1;background:#09101f;color:white;border:1px solid #3b4862;border-radius:7px;padding:8px}.pm-form button{border:0;background:var(--accent);border-radius:7px;padding:0 12px;cursor:pointer}.pm-unread{background:#e63555;color:white;border-radius:50%;min-width:18px;height:18px;display:inline-grid;place-items:center;font-size:10px}
/* toast */
.toast-stack{position:fixed;right:18px;top:18px;z-index:8000;display:grid;gap:8px}.toast{width:min(360px,90vw);padding:11px 13px;border-radius:8px;background:#121b2e;border:1px solid #3d4a66;box-shadow:0 12px 30px #0008}.toast.ok{border-color:#2ecc71}.toast.err{border-color:#e74c3c}.toast.warn{border-color:#f1c40f}
/* webcam */
.webcam-area{margin-bottom:10px;padding:8px}.webcam-title{display:flex;justify-content:space-between}.mini{border:0;background:#cc3f54;color:white;border-radius:6px;cursor:pointer}.webcam-grid{display:grid;grid-template-columns:repeat(auto-fit,110px);gap:10px;align-items:start;justify-content:start}.webcam-card{width:110px;background:#080c15;border:1px solid #33415d;border-radius:8px;overflow:hidden}.webcam-card video{display:block;width:110px;height:110px;object-fit:cover;background:#000}.webcam-card img.webcam-fallback{display:block;width:110px;height:110px;object-fit:cover;background:#000}.webcam-label{padding:5px 8px;color:#d8e4f8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.webcam-placeholder{width:110px;height:110px;display:grid;place-items:center;color:#71809a}
/* kniffel */
.kniffel-wrap{max-width:620px;margin:auto}.dice-row{display:flex;gap:8px;justify-content:center;margin:12px 0}.die{width:58px;height:58px;border-radius:10px;background:white;color:#111;border:3px solid #667eea;display:grid;place-items:center;font-size:30px;cursor:pointer}.die.held{background:#667eea;color:white}.score-table{width:100%;border-collapse:collapse}.score-table th,.score-table td{border-bottom:1px solid #ffffff13;padding:7px}.score-table tr.available{cursor:pointer}.score-table tr.available:hover{background:#667eea22}.score-table td:last-child{text-align:right}.score-used{color:#49da8b}.score-preview{color:#ffd65a}.top-table{width:100%;border-collapse:collapse}.top-table th,.top-table td{padding:7px;border-bottom:1px solid #ffffff15;text-align:left}
/* admin generic */
.admin-page{padding:18px;background:#0a0e18;min-height:100vh}.admin-shell{max-width:1200px;margin:auto}.admin-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.admin-nav a{color:white;text-decoration:none;border:1px solid #3d4a63;border-radius:8px;padding:8px 10px}.admin-nav a.active{border-color:var(--accent);color:var(--accent)}.admin-card{padding:16px;margin-bottom:12px}.admin-card h2{margin-top:0}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:8px;border-bottom:1px solid #ffffff15;text-align:left}.data-table input,.data-table select{background:#0d1424;color:white;border:1px solid #44516a;border-radius:5px;padding:6px}.notice{padding:10px;border:1px solid #40bd88;background:#143629;border-radius:8px;margin-bottom:12px}
@media(max-width:900px){.chat-page{padding:6px 6px 98px}.header{height:80px}.player-head{width:100%}.player-head iframe{height:76px}.welcome-box{display:none}.chat-container{grid-template-columns:minmax(0,1fr) 220px;height:calc(100vh - 190px)}.right-sidebar{font-size:15px}#stream-container iframe{height:170px}.footer{left:6px;right:6px;bottom:6px;align-items:stretch;flex-direction:column}.footer-left input{height:40px;font-size:16px}.footer-icons{justify-content:center}.tool-btn{width:36px;height:36px;font-size:16px}.pm-window{width:min(330px,90vw)}}
@media(max-width:650px){.chat-container{grid-template-columns:1fr;height:calc(100vh - 195px)}.right-sidebar{position:fixed;right:8px;top:90px;bottom:105px;width:min(310px,88vw);z-index:2500;transform:translateX(calc(100% + 20px));transition:.2s}.right-sidebar.open{transform:translateX(0)}.hide-mobile{display:none!important}.footer-icons{gap:3px}.tool-btn{width:34px;height:34px}.pm-dock{right:5px;left:5px;bottom:100px}.pm-window{width:100%}.game-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}}
.chat-smilie{max-height:38px;max-width:90px;vertical-align:middle}.bingo-card{display:grid;grid-template-columns:repeat(5,58px);gap:6px;justify-content:center;margin:16px}.bingo-cell{height:58px;border-radius:8px;border:1px solid #3c4a67;background:#131b2e;color:#fff;font-weight:800}.bingo-cell.available{border-color:#f1c40f}.bingo-cell.marked{background:#e94560;border-color:#e94560}.bingo-cell:disabled{opacity:.55}
.source-badge{font-size:10px;color:#9ed7ff;border:1px solid #375a7a;border-radius:4px;padding:1px 4px;margin-right:5px}.user-name small{font-size:9px;color:#8ca0bd;font-weight:normal}

.smiley-category-title{margin:12px 0 6px;padding:6px 10px;border-left:3px solid var(--accent,#ffa200);background:#ffffff0d;border-radius:6px;font-weight:800;color:#dce8ff}.smiley-category-title:first-child{margin-top:0}

.webcam-request-toast{min-width:300px;max-width:390px}.webcam-request-actions{display:flex;gap:8px;margin-top:10px}.webcam-request-actions .btn{padding:6px 10px;font-size:12px}
.cam-close{float:right;border:0;background:transparent;color:#ff8b9a;font-weight:900;cursor:pointer;line-height:1;padding:0 0 0 5px;font-size:16px}.cam-close:hover{color:#fff}.webcam-request-toast{max-width:430px}.webcam-request-actions{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap}.webcam-grid{max-width:710px}