:root{--bg-fallback:linear-gradient(135deg,#1b2230,#0b0d11);
--bg:#0f1115;--panel:#151a22;--line:#e9eef7;--muted:#9aa7bd;--stroke:#273145;--accent:#5176bd;--stage:#0b0d11;--stageGrad1:#1b2230;--stageGrad2:#0b0d11;--dialogueBg:rgba(15,17,21,.78);--chipBg:#0f141d;--msgBg:#101621;--sysBg:#0f141d;--inputBg:#0f141d;--headerBg:#101621;--tabBg:#151a22;--tabBarBg:#101621;--btnBg:#0f141d;--btnText:#e9eef7;--hoverBg:rgba(255,255,255,0.10);--roomItemBg:var(--msgBg);
--splitterBg:var(--btnBg);
}



*{box-sizing:border-box;}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--line);font-family:system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,Malgun Gothic,sans-serif;}
.app{height:100%;display:grid;grid-template-columns:1.6fr 1fr;gap:10px;padding:10px;}
.stage{position:relative;border:1px solid var(--stroke);border-radius:12px;overflow:hidden;background:var(--stage);min-height:0;}


.bg{position:absolute;inset:0;background-size:cover;background-position:center;background-image:linear-gradient(135deg,var(--stageGrad1),var(--stageGrad2));}

.stands{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:flex-end;padding: 14px 14px 160px 14px;pointer-events:none;}
.stand{max-height:92%;max-width:48%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));opacity:0;transition:opacity .12s;}
.stand.on{opacity:1;}
.dialogue{position:absolute;left:12px;right:12px;bottom:12px;border:1px solid var(--stroke);border-radius:12px;background:var(--dialogueBg);backdrop-filter:blur(6px);padding:10px 12px;min-height:160px;display:flex;flex-direction:column;gap:6px;}


.speaker{font-weight:700;color:var(--accent);min-height:20px;}
.line{font-size:15px;line-height:1.4;white-space:pre-wrap;word-break:break-word;min-height:42px;}
.chat{border:1px solid var(--stroke);border-radius:12px;background:var(--panel);display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.chatTop{padding:10px;border-bottom:1px solid var(--stroke);display:flex;flex-direction:column;gap:10px;}
.roomRow{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);flex-wrap:nowrap;}
.badge{padding:2px 8px;border:1px solid var(--stroke);border-radius:999px;color:var(--line);background:var(--chipBg);}
.usersBox{display:flex;flex-direction:column;gap:6px;}
.usersTitle{font-size:12px;color:var(--muted);}
.users{display:flex;flex-wrap:wrap;gap:6px;}
.userChip{font-size:12px;padding:4px 8px;border:1px solid var(--stroke);border-radius:999px;background:var(--chipBg);color:var(--line);}
.log{flex:1;min-height:0;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px;}
.msg{border:1px solid var(--stroke);border-radius:10px;padding:8px;background:var(--msgBg);}
.meta {
    display: flex;
    gap: 8px;
    align-items: center; 
    font-size: 12px;
    color: var(--muted);
}
.name {
    color: var(--line);
    font-weight: 700;
    margin-right: auto; 
}
.time {
    margin-left: 0;
    white-space: nowrap; 
}
.text{margin-top:6px;white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.35;}
.chatImg{max-width:100%;height:auto;display:block;margin-top:6px;border-radius:10px;border:1px solid var(--stroke);}

.sys{border-style:dashed;color:var(--muted);background:var(--sysBg);}



.form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--stroke);}
.input{flex:1;border:1px solid var(--stroke);border-radius:10px;padding:10px 10px;background:var(--inputBg);color:var(--line);outline:none;}
.input:focus{border-color:#3b5a92;}
#input{height:40px;min-height:40px;max-height:220px;resize:vertical;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;font-family:inherit;scrollbar-width:none;-ms-overflow-style:none;}
#input::-webkit-scrollbar{width:8px;height:8px;}
#input::-webkit-scrollbar-thumb{background:transparent;border:0;}
#input::-webkit-scrollbar-track{background:transparent;}
#input::-webkit-scrollbar-corner{background:transparent;}


.send{border:1px solid #2f4f86;background:#173058;color:#e9eef7;border-radius:10px;padding:10px 14px;cursor:pointer;}
.send:hover{filter:brightness(1.08);}
.hint{padding:0 10px 10px 10px;color:var(--muted);font-size:12px;}
@media (max-width:980px){.app:not(.splitApp){grid-template-columns:1fr;grid-template-rows:1.1fr .9fr;}.app:not(.splitApp) .stage{min-height:260px;}}

.lobbyWrap{min-height:100%;height:100vh;height:100dvh;overflow:auto;-webkit-overflow-scrolling:touch;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));box-sizing:border-box;}

.lobbyTop{max-width:920px;margin:6px auto 12px auto;}
.lobbyTitle{font-size:22px;font-weight:800;margin:0 0 6px 0;}
.lobbyDesc{color:var(--muted);font-size:13px;}
.lobbyDesc.lobbyBar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.lobbyUser{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
.lobbyNick{font-weight:900;color:var(--line);max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lobbyActions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.avatar{width:24px;height:24px;border-radius:8px;border:1px solid var(--stroke);object-fit:cover;vertical-align:middle;}
.badgeBtn{padding:2px 8px;border:1px solid var(--stroke);border-radius:999px;color:var(--line);background:var(--btnBg);cursor:pointer;font-size:12px;line-height:1;display:inline-flex;align-items:center;gap:6px;}
.badgeBtn:hover{filter:brightness(1.08);}
.palBody .palHint{font-size:12px;color:var(--muted);}
.palGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.palTextarea{min-height:160px;}
.palRow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.palOpts{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;}
.palOpt{display:flex;gap:6px;align-items:center;}
.palOptLabel{font-size:12px;color:var(--muted);font-weight:700;}
.palPrefix{width:90px;min-width:90px;}
@media (max-width:980px){.palGrid{grid-template-columns:1fr;}}

.lobbyGrid{max-width:920px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:12px;}

.lobbyCard{border:1px solid var(--stroke);border-radius:12px;background:var(--panel);padding:12px;display:flex;flex-direction:column;gap:10px;}
.cardTitle{font-weight:800;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12px;color:var(--muted);}
.hintSmall{font-size:12px;color:var(--muted);}
.roomList{display:flex;flex-direction:column;gap:8px;max-height:min(70vh,640px);overflow:auto;padding-right:4px;}
@media (max-width:560px){
.roomList{max-height:none;overflow:visible;padding-right:0;}
}

.roomItem{border:1px solid var(--stroke);border-radius:12px;background:var(--roomItemBg);padding:10px;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;justify-content:flex-start;}
.roomThumb{width:64px;height:64px;border-radius:12px;border:1px solid var(--stroke);background:#0b0d11;background-size:cover;background-position:center;flex:0 0 auto;}
.roomThumb.empty{background:var(--chipBg);}
.roomMain{min-width:0;display:flex;flex-direction:column;gap:6px;text-align:left;}
.roomTitle{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;word-break:normal;}
.roomPeopleRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);min-width:0;}
.roomSide{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:0;}
.roomBtns{flex:0 0 auto;display:flex;gap:6px;flex-wrap:nowrap;justify-content:flex-end;align-items:center;}
.roomMetaRight{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);white-space:nowrap;max-width:360px;}
.roomMetaRight .roomId{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:normal;}
.roomMetaRight .roomMeta{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:normal;}

@media (max-width:560px){
.roomItem{grid-template-columns:44px minmax(0,1fr);}
.roomBtns{grid-column:1 / -1;justify-content:flex-end;margin-top:6px;}
}

.btnMini{border:1px solid var(--stroke);background:var(--btnBg);color:var(--btnText);border-radius:6px;padding:4px 8px;cursor:pointer;font-size:11px;}
.cardHead{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.btnMini.primary{border-color:#2f4f86;background:#173058;color:#e9eef7;}
.roomLeft{min-width:180px;max-width:260px;display:flex;flex-direction:column;gap:6px;}
.roomPeople{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:2px;word-break:break-word;}
.roomId{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;word-break:normal;}

.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:11000;}
.modal.hidden{display:none;}
.modalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);}
.modalCard{position:relative;width:min(560px,calc(100% - 24px));border:1px solid var(--stroke);border-radius:14px;background:var(--panel);box-shadow:0 18px 60px rgba(0,0,0,.35);padding:12px;display:flex;flex-direction:column;gap:10px;}
.modalHead{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.modalTitle{font-weight:900;}
.modalBody{display:flex;flex-direction:column;gap:10px;}
.stageRoomTitle{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word;}
#stageRoomTitle {
    display: inline-block; 
    transform: translateY(-1px); 
}
.btnMini:hover{filter:brightness(1.08);}
.btnMini.danger{border-color:#5a2a2a;}
.badgeLink{padding:2px 8px;border:1px solid var(--stroke);border-radius:999px;color:var(--line);background:var(--btnBg);text-decoration:none;}

.badgeLink:hover{filter:brightness(1.08);}
.roomEmpty{color:var(--muted);font-size:13px;padding:10px;border:1px dashed var(--stroke);border-radius:12px;background:#0f141d;}
@media (max-width:980px){.lobbyGrid{grid-template-columns:1fr;}}
.authBody{min-height:100vh;background:radial-gradient(1100px 600px at 50% 0%,#f4ecff 0%,#eef3ff 45%,#f7f1ff 100%);color:#2a1c44;}
.authWrap{max-width:860px;margin:0 auto;padding:28px 16px 48px;}
.authHero{text-align:center;margin:0 0 18px 0;}
.authHeroTop{font-weight:900;font-size:26px;letter-spacing:.5px;}
.authHeroSub{margin-top:8px;font-size:14px;opacity:.8;}
.authStack{display:flex;flex-direction:column;gap:14px;}
.authCard{border:1px solid rgba(155,120,255,.35);border-radius:18px;background:rgba(255,255,255,.70);box-shadow:0 14px 40px rgba(0,0,0,.08);padding:18px;}
.authTitle{font-weight:900;font-size:18px;text-align:center;margin-bottom:12px;text-decoration:underline;text-underline-offset:8px;text-decoration-color:rgba(155,120,255,.45);}
.authForm{display:flex;flex-direction:column;gap:10px;}
.authErr{border:1px dashed rgba(155,120,255,.45);border-radius:14px;padding:12px;background:rgba(255,255,255,.60);color:#40245f;font-size:13px;margin-bottom:12px;}
.authBody .field{display:flex;flex-direction:column;gap:6px;}
.authBody .field label{font-size:12px;opacity:.75;}
.authBody .input,.authBody .textarea{border:1px solid rgba(155,120,255,.45);border-radius:12px;padding:12px;background:rgba(255,255,255,.85);color:#2a1c44;outline:none;}
.authBody .input:focus,.authBody .textarea:focus{border-color:rgba(155,120,255,.85);box-shadow:0 0 0 4px rgba(155,120,255,.18);}
.authBody .textarea{min-height:92px;resize:vertical;}
.authBody .authBtn{border:none;border-radius:14px;padding:12px 14px;color:#fff;font-weight:900;cursor:pointer;background:linear-gradient(90deg,#caa6ff,#bda1ff,#d8b8ff);}
.authBody .authBtn:hover{filter:brightness(1.02);}

.authWrapDark{min-height:100vh;padding:18px;max-width:900px;margin:0 auto;}
.authHeroDark{text-align:center;margin:6px 0 14px 0;}
.authHeroTopDark{font-size:28px;font-weight:900;color:var(--line);}

.authHeroSubDark{font-size:13px;color:var(--muted);margin-top:6px;}
.authStackDark{display:flex;flex-direction:column;gap:12px;}
.authCardDark{border:1px solid var(--stroke);border-radius:12px;background:var(--panel);padding:12px;display:flex;flex-direction:column;gap:10px;}
.authTitleDark{font-weight:900;font-size:16px;text-align:center;}
.authForm{display:flex;flex-direction:column;gap:10px;}
.authWrapDark .field{display:flex;flex-direction:column;gap:6px;}
.authWrapDark .field label{font-size:12px;color:var(--muted);}
.authWrapDark .textarea{border:1px solid var(--stroke);border-radius:10px;padding:10px;background:#0f141d;color:var(--line);outline:none;min-height:90px;resize:vertical;}
.authWrapDark .textarea:focus{border-color:#3b5a92;}
.adminLink{border-color:#ff5fa2!important;color:#ff9fc7!important;}
.adminLink:hover{filter:brightness(1.08);}
.adminActRow{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center;}
.adminInline{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.adminPw{width:140px;min-width:120px;}


.adminShell{height:100vh;height:100dvh;min-height:100vh;max-width:1180px;margin:0 auto;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));overflow:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
.adminShell{scrollbar-width:none;-ms-overflow-style:none;}
.adminShell::-webkit-scrollbar{width:0;height:0;}

.adminHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.adminBrand{font-size:20px;font-weight:900;color:var(--line);}
.adminHeaderRight{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.adminStats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.statCard{border:1px solid var(--stroke);border-radius:12px;background:var(--panel);padding:12px;}
.statLabel{font-size:12px;color:var(--muted);}
.statValue{font-size:22px;font-weight:900;color:var(--line);margin-top:4px;}
.statSub{font-size:12px;color:var(--muted);margin-top:2px;}
.adminTabs{display:flex;gap:8px;align-items:center;margin:10px 0;}
.tabBtn{border:1px solid var(--stroke);background:#0f141d;color:var(--line);border-radius:999px;padding:8px 12px;font-weight:900;cursor:pointer;}
.tabBtn.on{background:var(--panel);border-color:#3b5a92;}
.adminPanel{border:1px solid var(--stroke);border-radius:12px;background:var(--panel);padding:12px;}
.hidden{display:none;}
.adminToolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.toolTitle{font-weight:900;color:var(--line);}
.toolHint{font-size:12px;color:var(--muted);margin-top:4px;}
.adminSearch{min-width:260px;}
.adminTableWrap{border:1px solid var(--stroke);border-radius:12px;overflow:auto;background:#0f141d;}
.adminTable{width:100%;border-collapse:collapse;min-width:760px;}
.adminTable th,.adminTable td{padding:10px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top;}
.adminTable th{font-size:12px;color:var(--muted);text-align:left;background:#101621;position:sticky;top:0;z-index:1;}
.colAct{width:320px;}

.userCell{display:flex;gap:10px;align-items:center;}
.avatarBox{width:38px;height:38px;border-radius:12px;overflow:hidden;border:1px solid var(--stroke);background:#0b0d11;flex:0 0 auto;}
.avatarBox img{width:100%;height:100%;object-fit:cover;display:block;}
.avatarPh{width:100%;height:100%;background:linear-gradient(135deg,#1b2230,#0b0d11);}
.userText{min-width:0;}
.userTopLine{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.userNick{font-weight:900;color:var(--line);max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.userSub{font-size:12px;color:var(--muted);margin-top:2px;}
.pill{border:1px solid var(--stroke);border-radius:999px;padding:2px 8px;font-size:11px;background:#0b0d11;color:var(--line);}
.adminPill{border-color:#ff5fa2;color:#ff9fc7;}
.mePill{border-color:#6bdcff;color:#b6f3ff;}
.metaCell{font-size:12px;color:var(--muted);line-height:1.4;}
.miniLink{color:var(--line);text-decoration:underline;text-underline-offset:3px;opacity:.9;}
.roomCell{display:flex;flex-direction:column;gap:2px;}
.roomTopLine{display:flex;gap:6px;align-items:center;min-width:0;}
.roomTitle{font-weight:900;color:var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:460px;}
.roomSub{font-size:12px;color:var(--muted);}
.roomActions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.muted{color:var(--muted);}
@media (max-width:980px){.adminStats{grid-template-columns:1fr;}.adminTable{min-width:680px;}.adminSearch{min-width:220px;}}

.stage{position:relative;}
.stageTop{position:absolute;left:12px;right:12px;top:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;z-index:5;pointer-events:auto;}
.stageTopLeft{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;min-width:0;}
.stageTopLeft.toolsWrap{flex-wrap:wrap;}
.stageRoomTitle{font-weight:900;color:var(--line);white-space:normal;overflow:visible;max-width:420px;word-break:break-word;min-width:0;flex:1 1 auto;}

.stageRoomId{font-size:12px;color:var(--muted);opacity:.95;}
.stageTopRight{display:flex;align-items:flex-start;gap:2px;flex-wrap:wrap;justify-content:flex-end;}
.stageUsersLabel{font-size:12px;color:var(--muted);padding-top:2px;}
.stageUsers{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:420px;}
.userChip{border:1px solid var(--stroke);border-radius:999px;padding:3px 8px;background:var(--chipBg);color:var(--line);font-size:12px;white-space:nowrap;}

.chatResizable{width:360px;flex:0 0 auto;min-width:280px;max-width:60vw;resize:horizontal;overflow:auto;}

.splitApp{--chatW:360px;--chatH:320px;position:fixed;inset:0;overflow:hidden;display:grid;grid-template-columns:1fr 8px var(--chatW);grid-template-rows:1fr;height:100dvh;min-height:0;background:var(--bg);}
.splitApp>.stage,.splitApp>.splitter,.splitApp>.chat{grid-row:1;min-height:0;height:100%;}
.splitApp>.stage{grid-column:1;}
.splitApp>.splitter{grid-column:2;}
.splitApp>.chat{grid-column:3;}
.splitApp.chatLeft{grid-template-columns:var(--chatW) 8px 1fr;}
.splitApp.chatLeft>.stage{grid-column:3;}
.splitApp.chatLeft>.splitter{grid-column:2;}
.splitApp.chatLeft>.chat{grid-column:1;}
.splitApp.chatBottom{grid-template-columns:1fr;grid-template-rows:1fr 8px var(--chatH);}
.splitApp.chatBottom>.stage{grid-column:1;grid-row:1;}
.splitApp.chatBottom>.splitter{grid-column:1;grid-row:2;cursor:row-resize;border-left:none;border-right:none;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);}
.splitApp.chatBottom>.chat{grid-column:1;grid-row:3;min-width:0;max-width:none;}
.splitter{touch-action:none;}


.splitter:hover{filter:brightness(1.1);}
body.draggingCol{cursor:col-resize;user-select:none;}
body.draggingRow{cursor:row-resize;user-select:none;}

.chat{min-width:260px;max-width:70vw;}
.stage{min-width:320px;}
.chatResizable{resize:none!important;overflow:visible!important;}
.stageTop{position:absolute;left:12px;right:12px;top:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;z-index:5;pointer-events:auto;}
.stageTopLeft{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;}
.stageTopLeft.toolsWrap{flex-wrap:wrap;}
.stageRoomTitle{font-weight:900;color:var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px;min-width:0;flex:1 1 auto;}

.stageTopRight{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.stageUsersLabel{font-size:12px;color:var(--muted);padding-top:2px;}
.stageUsers{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:520px;}
.userChip{border:1px solid var(--stroke);border-radius:999px;padding:3px 8px;background:var(--chipBg);color:var(--line);font-size:12px;white-space:nowrap;}






html,body{height:100%;}
.splitter{cursor:col-resize;background:var(--splitterBg);border-left:1px solid var(--stroke);border-right:1px solid var(--stroke);}

.chat{display:flex;flex-direction:column;min-height:0;}
.log{flex:1;min-height:0;overflow:auto;}

.stageTokens{position:absolute;inset:0;z-index:4;pointer-events:none;}
.token{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;user-select:none;touch-action:none;}
.tokenImg {
    width: 100%;
    height: 100%;
    border-radius: 0; 
    border: none;     
    background: transparent; 
    object-fit: contain; 
    display: block;
    pointer-events: none; 
}
.tokenName{margin-top:4px;font-size:12px;text-align:center;color:var(--line);text-shadow:0 2px 8px rgba(0,0,0,.75);max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tokenX{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:999px;border:1px solid var(--stroke);background:#0f141d;color:var(--line);cursor:pointer;display:none;align-items:center;justify-content:center;font-size:12px;line-height:1;}
.token:hover .tokenX{display:flex;}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:14px;}
.modal.hidden{display:none;}
.modalBox{width:min(1080px,100%);max-height:92vh;overflow:auto;border:1px solid var(--stroke);border-radius:14px;background:var(--panel);}
.modalHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-bottom:1px solid var(--stroke);position:sticky;top:0;background:var(--panel);z-index:2;}
.modalTitle{font-weight:900;color:var(--line);}
.modalBtns{display:flex;gap:8px;flex-wrap:wrap;}
.modalBody{padding:12px;}
.charLayout{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.charList{display:flex;flex-direction:column;gap:8px;min-height:220px;}
.charItem{border:1px solid var(--stroke);border-radius:12px;background:#101621;padding:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.charLeft{display:flex;gap:10px;align-items:center;min-width:0;}
.charThumb{width:50px;height:50px;border-radius:12px;border:1px solid var(--stroke);object-fit:cover;background:#0f141d;flex:0 0 auto;}
.charThumb.thumbBroken{background:#000 !important;}

.charText{min-width:0;display:flex;flex-direction:column;gap:4px;}
.charName{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;}
.charNameRow{display:flex;align-items:center;gap:6px;}
.charNameRow .charName{min-width:0;}
.charLock{flex:0 0 auto;opacity:0.85;}

.charSub{font-size:12px;color:var(--muted);}
.charBtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.charEdit{border:1px solid var(--stroke);border-radius:12px;background:#0f141d;padding:10px;display:flex;flex-direction:column;gap:10px;}
.editTitle{font-weight:900;}
.sectionTitle{font-size:12px;color:var(--muted);margin-top:4px;}
.miniList{display:flex;flex-direction:column;gap:6px;}
.miniRow{display:grid;grid-template-columns:1fr 1.6fr 44px;gap:6px;align-items:center;}

.miniRow.miniRowStat{
  grid-template-columns: 1fr 1fr 1fr 44px !important;
}
.miniRow.miniRowStat .input{
  min-width: 0;
  width: 100%;
}
.miniRow.miniRowStat .btnMini{
  width: 44px;
  min-width: 44px;
  justify-self: end;
}

.subHint{font-size:11px;color:var(--muted);font-weight:700;margin-left:6px;}
.fill-EXT { background: #888; }

.miniIn{padding:8px;border-radius:10px;}
.statGrid{display:grid;grid-template-columns:1fr 1fr;gap: 3px 16px;}
.statPair{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.statPair .input{min-width:0;}

.textareaDark{border:1px solid var(--stroke);border-radius:10px;padding:10px;background:var(--btnBg);color:var(--line);outline:none;min-height:100px;resize:vertical;}
.textareaDark:focus{border-color:var(--accent);}

.editActions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}
@media (max-width:980px){.charLayout{grid-template-columns:1fr;}.charName{max-width:220px;}}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:14px;}
.modal.hidden{display:none;}
.modalBox{width:min(1080px,100%);max-height:92vh;overflow:auto;border:1px solid var(--stroke);border-radius:14px;background:var(--panel);}
.modalHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-bottom:1px solid var(--stroke);position:sticky;top:0;background:var(--panel);z-index:2;}
.modalTitle{font-weight:900;color:var(--line);}
.modalBtns{display:flex;gap:8px;flex-wrap:wrap;}
.modalBody{padding:12px;}
.charLayout{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
#charModal[data-view="list"] .charLayout{grid-template-columns:1fr;}
#charModal[data-view="list"] .charEdit{display:none;}
#charModal[data-view="edit"] .charLayout{grid-template-columns:1fr;}
#charModal[data-view="edit"] .charList{display:none;}

#charModal .modalBox{
  width: 560px;
  max-width: calc(100vw - 24px);
}

.charList{display:flex;flex-direction:column;gap:8px;min-height:220px;}
.charEdit{border:1px solid var(--stroke);border-radius:12px;background:#0f141d;padding:10px;display:flex;flex-direction:column;gap:10px;}
.sectionTitle{font-size:12px;color:var(--muted);margin-top:4px;}
.miniList{display:flex;flex-direction:column;gap:6px;}
.miniRow{display:grid;grid-template-columns:1fr 1.6fr 44px;gap:6px;align-items:center;}
.statGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.textareaDark{border:1px solid var(--stroke);border-radius:10px;padding:10px;background:#0f141d;color:var(--line);outline:none;min-height:100px;resize:vertical;}
.textareaDark:focus{border-color:#3b5a92;}
.editActions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}
@media (max-width:980px){.charLayout{grid-template-columns:1fr;}}

.log,.roomList,.adminTableWrap,.adminPanel,.modalBox,.modalBody,.sceneBody,.charList,.charEdit,.chatTabs,.tabLog{scrollbar-width:thin;scrollbar-color:var(--accent) var(--btnBg);}
.log::-webkit-scrollbar,.roomList::-webkit-scrollbar,.adminTableWrap::-webkit-scrollbar,.adminPanel::-webkit-scrollbar,.modalBox::-webkit-scrollbar,.modalBody::-webkit-scrollbar,.sceneBody::-webkit-scrollbar,.charList::-webkit-scrollbar,.charEdit::-webkit-scrollbar,.chatTabs::-webkit-scrollbar,.tabLog::-webkit-scrollbar{width:10px;height:10px;}
.log::-webkit-scrollbar-track,.roomList::-webkit-scrollbar-track,.adminTableWrap::-webkit-scrollbar-track,.adminPanel::-webkit-scrollbar-track,.modalBox::-webkit-scrollbar-track,.modalBody::-webkit-scrollbar-track,.sceneBody::-webkit-scrollbar-track,.charList::-webkit-scrollbar-track,.charEdit::-webkit-scrollbar-track,.chatTabs::-webkit-scrollbar-track,.tabLog::-webkit-scrollbar-track{background:var(--btnBg);border:1px solid var(--stroke);border-radius:999px;}
.log::-webkit-scrollbar-thumb,.roomList::-webkit-scrollbar-thumb,.adminTableWrap::-webkit-scrollbar-thumb,.adminPanel::-webkit-scrollbar-thumb,.modalBox::-webkit-scrollbar-thumb,.modalBody::-webkit-scrollbar-thumb,.sceneBody::-webkit-scrollbar-thumb,.charList::-webkit-scrollbar-thumb,.charEdit::-webkit-scrollbar-thumb,.chatTabs::-webkit-scrollbar-thumb,.tabLog::-webkit-scrollbar-thumb{background:var(--accent);border:1px solid var(--stroke);border-radius:999px;}
.log::-webkit-scrollbar-thumb:hover,.roomList::-webkit-scrollbar-thumb:hover,.adminTableWrap::-webkit-scrollbar-thumb:hover,.adminPanel::-webkit-scrollbar-thumb:hover,.modalBox::-webkit-scrollbar-thumb:hover,.modalBody::-webkit-scrollbar-thumb:hover,.sceneBody::-webkit-scrollbar-thumb:hover,.charList::-webkit-scrollbar-thumb:hover,.charEdit::-webkit-scrollbar-thumb:hover,.chatTabs::-webkit-scrollbar-thumb:hover,.tabLog::-webkit-scrollbar-thumb:hover{filter:brightness(1.08);}
.log::-webkit-scrollbar-corner,.roomList::-webkit-scrollbar-corner,.adminTableWrap::-webkit-scrollbar-corner,.adminPanel::-webkit-scrollbar-corner,.modalBox::-webkit-scrollbar-corner,.modalBody::-webkit-scrollbar-corner,.sceneBody::-webkit-scrollbar-corner,.charList::-webkit-scrollbar-corner,.charEdit::-webkit-scrollbar-corner,.chatTabs::-webkit-scrollbar-corner,.tabLog::-webkit-scrollbar-corner{background:var(--btnBg);}

.contextMenu {
    position: fixed;
    z-index: 99999;
    background: #151a22; 
    border: 1px solid #273145; 
    border-radius: 8px;
    padding: 6px 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
    display: none;
    min-width: 140px;
    backdrop-filter: blur(8px);
}
.contextMenu.show { display: block; }
.contextItem {
    padding: 10px 16px;
    font-size: 13px;
    color: #e9eef7; 
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
}
.contextItem:hover { background: #1b2230; color: #5176bd;  }
.contextItem.danger { color: #ff9fc7; border-top: 1px solid #273145; margin-top: 4px; padding-top: 12px;}
.contextItem.danger:hover { background: rgba(255, 95, 162, 0.15); color: #ff5fa2; }
.chatCharSelect {
  width: 100%;
  padding: 10px 12px;
  background: #151a22; 
  border: none;
  border-top: 1px solid var(--stroke);
  color: var(--line);
  font-size: 14px;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  appearance: none; 
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236aa8ff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 12px top 50%;
  background-size: 10px auto;
}
.chatCharSelect:hover {
  background-color: #1b2230;
}
.chatCharSelect option {
  background: #151a22;
  color: var(--line);
  padding: 8px;
}

.msg { display: flex; gap: 10px; align-items: flex-start; }
.msgProfile {
  width: 42px; height: 42px; border-radius: 10px; overflow: hidden;
  flex-shrink: 0; border: 1px solid var(--stroke); background: #0b0d11; margin-top: 2px;
}
.msgProfile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center; 
}
.msgContent { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg .meta { margin-bottom: 2px; }
.msg .text { margin-top: 0; }

.chatHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:5px 10px;
  border-bottom:1px solid var(--stroke);
  background:#101621;
  min-height:28px;
}
.chatHeader .iconBtn{padding:2px 4px;font-size:15px;}
.chatTitle{
flex:1;
min-width:0;
display:flex;
align-items:center;
}

.iconBtn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}
.iconBtn:hover{background:var(--hoverBg);}
.iconBtn:disabled,.iconBtn.uiBtnLocked{opacity:.35;cursor:not-allowed;filter:grayscale(1);}
.iconBtn:disabled:hover,.iconBtn.uiBtnLocked:hover{background:transparent;filter:grayscale(1);}


.settingMenu {
    position: absolute;
    top: 40px; 
    right: 10px;
    background: var(--panel);
    border: 1px solid var(--stroke);
    border-radius: 8px;
    padding: 6px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    display: none;
    z-index: 100;
    min-width: 140px;
}
.settingMenu.show { display: block; }
.settingItem {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--line);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.settingItem:hover { background: #1b2230; color: var(--accent); }
.settingItem.danger { color: #ff9fc7; border-top: 1px solid var(--stroke); margin-top: 4px; padding-top: 12px; }
.settingItem.danger:hover { background: rgba(255, 95, 162, 0.15); color: #ff5fa2; }

.chatCharBar{display:flex;gap:4px;align-items:center;margin:10px 10px 8px 10px;}

.chatCharSelect {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    padding: 10px 32px 10px 12px; 
    background-color: #0f141d;
    color: var(--line);
    outline: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa7bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    transition: border-color 0.2s;
}

.chatCharSelect:hover {
    border-color: #5176bd; 
}

.chatCharSelect:focus {
    border-color: #5176bd;
    box-shadow: 0 0 0 2px rgba(106,168,255,0.18);
}

.chatCharSelect option {
    background: #151a22;
    color: var(--line);
    padding: 8px;
}

.chatNameColorBtn{position:absolute;inset:0;border:1px solid var(--stroke);border-radius:10px;background:#0f141d;color:var(--line);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1;}
.chatNameColorWrap:hover .chatNameColorBtn{filter:brightness(1.08);}
.chatNameColorPicker{position:absolute;inset:0;opacity:0;cursor:pointer;border:none;padding:0;margin:0;z-index:2;}


.faceMenu {
    position: absolute;
    bottom: 50px; 
    left: 10px;
    width: 280px;
    max-height: 300px;
    background: #151a22; 
    border: 1px solid #273145; 
    border-radius: 8px;
    padding: 8px;
    display: none; 
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.faceMenu.show { display: grid; }

.faceItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    background: #0f141d;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px;
    transition: 0.2s;
}
.faceItem:hover {
    background: #1b2230;
    border-color: #5176bd; 
}
.faceItem.active {
    border-color: #5176bd;
    background: rgba(106,168,255,0.1);
}

.faceImg {
    width: 100%;
    aspect-ratio: 1; 
    object-fit: contain;
    margin-bottom: 4px;
    border-radius: 4px;
    background: rgba(0,0,0,0.2);
}
.faceName {
    font-size: 11px;
    color: #9aa7bd; 
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.chatBtn {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 1px solid #273145;
    border-radius: 10px;
    background: #0f141d;
    color: #e9eef7;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.chatBtn:hover { filter: brightness(1.1); }


.chatBtn{
  width:40px;
  height:40px;
  flex:0 0 auto;
  border:1px solid #273145;
  border-radius:10px;
  background:#0f141d;
  color:#e9eef7;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.chatBtn:hover{filter:brightness(1.1);}

.diceToolbar{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(36px,1fr));
  gap:3px;
  padding:0 2px 0px 2px;
}

.diceBtn{
  height:30px;
  border:1px solid #273145;
  border-radius:10px;
  background:linear-gradient(180deg,#121a28 0%,#0b0f18 100%);
  color:#9aa7bd;
  cursor:pointer;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 14px rgba(0,0,0,.35);
  transition:transform .08s ease,filter .12s ease,box-shadow .12s ease,border-color .12s ease,color .12s ease,background .12s ease;
  user-select:none;
}

.diceBtn:hover{
  border-color:#5176bd;
  color:#e9eef7;
  filter:brightness(1.08);
}
.diceBtn:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 3px 10px rgba(0,0,0,.35);
}
.diceBtn:focus-visible{
  outline:0;
  box-shadow:0 0 0 2px rgba(106,168,255,.35),0 1px 0 rgba(255,255,255,.06) inset,0 6px 14px rgba(0,0,0,.35);
}
.diceBtn.on{
  border-color:#5176bd;
  background:linear-gradient(180deg,#1b2b4a 0%,#12223a 100%);
  color:#e9eef7;
}

.onScreenStats {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 15;
overflow: hidden;
--statScale: 0.85;
}


.statBarBox {
    background: rgba(15, 20, 29, 0.85);
    border: 1px solid var(--stroke);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.2s;
    user-select: none;
}
.statBarBox:hover {
    transform: scale(1.02);
    border-color: var(--accent);
}
.statLabelRow {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--line);
    margin-bottom: 4px;
    font-weight: 700;
}
.statTrack {
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}
.statFill {
    height: 100%;
    background: var(--accent);
    transition: width 0.3s ease;
}

.statBarBox[data-stat="HP"] .statFill { background: #ff5f5f; }
.statBarBox[data-stat="MP"] .statFill { background: #5fafff; }
.statBarBox[data-stat="SAN"] .statFill { background: #c07fff; }

.chkField {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--line);
    cursor: pointer;
}
.chkInput {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}
.bgmControls .chkInput{width:12px;height:12px;}
.bgmControls .chkField{gap:6px;font-size:12px;}


.onScreenStats {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.statWidget {
    display: flex;
    align-items: center;
    background: rgba(20, 24, 30, 0.85); 
    border: 1px solid #444;
    border-radius: 6px;
    padding: 6px;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.statAvatar {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 10px;
    background: #000;
    border: 1px solid #555;
    flex-shrink: 0;
}
.statAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; 
    user-select: none;    
    -webkit-user-drag: none; 
    object-position: top center;
}

.statGrid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 4px 12px; 
}

.miniStat {
    display: flex;
    flex-direction: column;
    min-width: 80px;
    cursor: pointer;
    user-select: none;
}
.miniStat:hover .miniStatLabel {
    color: #fff;
    text-shadow: 0 0 4px rgba(255,255,255,0.5);
}

.miniStatLabel {
    font-size: 12px;
    font-weight: bold;
    color: #ccc;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}
.miniStatLabel span:last-child {
    font-family: monospace; 
    font-size: 13px;
}

.miniStatBar {
    width: 100%;
    height: 4px;
    background: #222;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid #333;
}
.miniStatFill {
    height: 100%;
    transition: width 0.3s ease;
}

.fill-HP { background: #ff5555; }
.fill-MP { background: #55aaff; }
.fill-SAN { background: #aa55ff; }
.fill-LUK { background: #55ffaa; }

.onScreenStats {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    z-index: 15; 
    overflow: hidden;
}

.statWidget {
    position: absolute; 
    pointer-events: auto; 
    
    display: flex;
    align-items: center;
    background: rgba(10, 12, 15, 0.9);
    border: 1px solid #555;
    border-radius: 6px;
    padding: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    transform: scale(clamp(0.7, var(--statScale, 0.85), 1));
    transform-origin: top left;
    transition: box-shadow 0.2s;
}

.statWidget.dragging {
    box-shadow: 0 0 15px rgba(255, 255, 100, 0.5);
    border-color: #aaa;
    cursor: grabbing;
    z-index: 100;
}

.statAvatar {
    width: 48px; 
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 8px;
    background: #000;
    flex-shrink: 0;
}
.statAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; 
    user-select: none; 
    -webkit-user-drag: none;
}


.statGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 8px;
}

.miniStat {
    display: flex;
    flex-direction: column;
    min-width: 95px;
    cursor: pointer;
}
.miniStatLabel {
    font-size: 11px;
    color: #ccc;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1px;
}
.miniStatBar {
    width: 100%;
    height: 3px;
    background: #333;
    border-radius: 1px;
}
.miniStatFill {
    height: 100%;
}
.fill-HP { background: #ff5555; }
.fill-MP { background: #55aaff; }
.fill-SAN { background: #aa55ff; }
.fill-LUK { background: #55ffaa; }


.statAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    
    -webkit-user-drag: none; 
    user-drag: none;         
    pointer-events: none;     
    user-select: none;      
}


.chat {
    padding-bottom: 24px;
    position: relative;
}

.typingIndicator {
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    padding: 4px 12px 6px 12px;
    font-size: 11px;
    color: #9aa7bd; 
    background: transparent;
    display: none;
    pointer-events: none;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}




.chatSuggestion {
    position: fixed; 
    z-index: 2000;   
    background: #151a22;
    border: 1px solid #273145; 
    border-radius: 8px 8px 0 0; 
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.5);
    display: none; 
}

.suggItem {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    font-size: 13px;
    color: #e9eef7;
}

.suggItem:hover {
    background: #1b2230;
    color: #5176bd;
}

.res-critical { color: #e99c01; font-weight: bold; text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
.res-extreme { color: #01afe4; font-weight: bold; }
.res-hard { color: #01ca01; font-weight: bold; }
.res-success { color: #30c333; }
.res-fail { color: #aaaaaa; }
.res-fumble { color: #ff4444; font-weight: bold; text-shadow: 0 0 5px rgba(255, 0, 0, 0.5); }


.msgActions {
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
    opacity: 0; 
    transition: opacity 0.2s;
    pointer-events: none; 
}

.msg:hover .msgActions {
    opacity: 1;
    pointer-events: auto;
}

.msg.show-actions .msgActions {
    opacity: 1;
    pointer-events: auto;
}

.msgActBtn {
    background: transparent;
    border: 1px solid #444;
    color: #9aa7bd;
    border-radius: 4px;
    font-size: 10px;
    padding: 2px 6px;
    cursor: pointer;
}
.msgActBtn:hover {
    background: #273145;
    color: #fff;
}
.delBtn:hover {
    border-color: #ff5555;
    color: #ff5555;
}

.editedLabel {
    font-size: 11px;
    color: #666; 
    margin-left: 4px;
}

.sceneWindow {
    position: fixed;
    width: 320px;
    background: #151a22;
    border: 1px solid #273145;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sceneWindow.hidden { display: none; }

.winHead {
    padding: 10px 14px;
    background: #101621;
    border-bottom: 1px solid #273145;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab; 
    user-select: none;
}
.winHead:active { cursor: grabbing; }
.winTitle { font-weight: 700; color: #e9eef7; }
.winClose { background: none; border: none; color: #9aa7bd; cursor: pointer; font-size: 18px; }

.sceneBody { padding: 12px; display: flex; flex-direction: column; gap: 10px; max-height: 400px; overflow-y: auto; }

.sceneInputs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #273145;
}

.sceneList { display: flex; flex-direction: column; gap: 6px; }

.sceneItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0f141d;
    border: 1px solid #273145;
    border-radius: 8px;
    padding: 8px 10px;
    transition: 0.2s;
}
.sceneItem:hover { border-color: #5176bd; }

.sceneInfo { flex: 1; cursor: pointer; }
.sceneName { font-weight: 700; font-size: 13px; color: var(--line); }
.sceneMeta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sceneLeft{display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.sceneLeft .sceneInfo{min-width:0;}
.sceneDragHandle{width:24px;display:flex;align-items:center;justify-content:center;cursor:grab;user-select:none;color:#9aa7bd;}
.sceneDragHandle:active{cursor:grabbing;}
.sceneItem.dragging{opacity:.55;}
.hoThumbWrap{width:56px;height:56px;flex:0 0 auto;border-radius:4px;overflow:hidden;border:1px solid #273145;background:#0f141d;display:flex;align-items:center;justify-content:center;}
.hoThumb{width:100%;height:100%;object-fit:cover;display:block;}
.hoThumbWrap.empty{opacity:.65;}
.hoThumbEmpty{font-size:14px;color:#9aa7bd;}

.sceneThumbWrap{width:70px;height:52px;flex:0 0 auto;border-radius:0px;overflow:hidden;border:1px solid #273145;background:#0f141d;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.sceneThumb{width:100%;height:100%;object-fit:cover;display:block;}
.sceneThumbWrap.empty{opacity:.65;}
.sceneThumbEmpty{font-size:14px;color:#9aa7bd;}

.cutinThumbWrap{width:56px;height:56px;flex:0 0 auto;border-radius:4px;overflow:hidden;border:1px solid var(--stroke);background:var(--btnBg);}
.cutinThumb{width:100%;height:100%;object-fit:cover;display:block;}
/* [fix] 공용 iconBtn = 아이콘 버튼(채팅 설정/작은 아이콘용) */
.iconBtn{width: 28px; height: 28px; background:transparent;border:none;cursor:pointer;font-size:16px;padding:4px;border-radius:6px;transition:background .2s,filter .2s;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;}
.iconBtn:hover{background:var(--hoverBg);}
.iconBtn:disabled,.iconBtn.uiBtnLocked{opacity:.35;cursor:not-allowed;filter:grayscale(1);}
.iconBtn:disabled:hover,.iconBtn.uiBtnLocked:hover{background:transparent;filter:grayscale(1);}
#stageTopTools .iconBtn{width:auto;min-width:0;height:28px;padding:0 10px;border:1px solid var(--stroke);border-radius:8px;background:var(--btnBg);color:var(--line);font-size:12px;font-weight:600;letter-spacing:-0.2px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:3px;line-height:1;white-space:nowrap;appearance:none;-webkit-appearance:none;transition:background .15s,border-color .15s,transform .12s;}
#stageTopTools .iconBtn svg{color:inherit;fill:currentColor;stroke:currentColor;}
#stageTopTools .iconBtn:hover{background:var(--hoverBg);border-color:var(--stroke);transform:translateY(-1px);filter:none;}
#stageTopTools .iconBtn:active{transform:translateY(0px);}


.bgmControls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--msgBg); 
    border: 1px solid var(--stroke);
    border-radius: 8px;
    margin-bottom: 6px;
}

.bgmRow {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.bgmRow.bgmRowCtrl {
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bgmRow.bgmRowCtrl .bgmChecks {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.bgmRow.bgmRowCtrl .bgmBtns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: 8px;
    padding: 4px 6px;
    
    border: 1px solid var(--stroke);
    background: var(--bg);
    border-radius: 10px;
    justify-content: flex-end;
    min-width: 180px;
}

.bgmRow.bgmRowCtrl .btnMini {
    height: 28px;
    min-width: 58px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bgmRow.bgmRowCtrl .bgmBtns .btnMini {
    flex: 1 1 0;
}

.bgmRow.bgmRowCtrl .chkField {
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}

.bgmRow.bgmRowCtrl .chkField span {
    white-space: nowrap;
}

.bgmControls .chkField {
    gap: 4px;
    font-size: 12px;
    color: var(--line); 
}

.bgmRow.bgmRowCtrl .bgmChecks {
    justify-content: center;
}

input[type=range] {
    accent-color: var(--accent); 
    cursor: pointer;
}

.soundTabs {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--stroke); 
}

.tabBtn {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    
    color: var(--muted); 
    
    padding: 8px;
    cursor: pointer;
    font-weight: 700;
    transition: 0.2s;
}

.tabBtn:hover {
    color: var(--line); 
}

.tabBtn.active {
    color: var(--accent); 
    border-bottom-color: var(--accent);
}
.chatTabs {
    display: flex;
    gap: 4px;
    padding: 6px 10px 0 10px;
    background: #101621;
    border-bottom: 1px solid #273145;
overflow-x: auto;     
    overflow-y: hidden;   
}
.chatTab {
    background: #151a22;
    border: 1px solid #273145;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 6px 12px;
    color: #9aa7bd;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}
.chatTab:hover { background: #1b2230; color: #e9eef7; }
.chatTab.active {
    background: #151a22; 
    color: #5176bd;
    font-weight: 700;
    border-bottom: 1px solid #151a22;
    margin-bottom: -1px;
    z-index: 1;
}
.chatTab.new{
border-color:#ff5f5f;
color:#ffd0d0;
background:rgba(255,95,95,0.14);
}
.chatTab.new:hover{
background:rgba(255,95,95,0.20);
color:#fff0f0;
}
.chatTab.new::after{content:none;}

.chatTab.whisper { color: #d8b8ff; }

.logContainer {
    flex: 1;
    min-height: 0;
    position: relative;
    background: var(--panel);
}
.tabLog {
    position: absolute;
    inset: 0;
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    display: none; 
}
.tabLog.active { display: flex; }

.btnTabAdd {
    width: 24px;
    height: 24px;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed #273145;
    background: transparent;
    color: #9aa7bd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 2px;
}
.btnTabAdd:hover { border-color: #5176bd; color: #5176bd; }

.userSelectBox{
display:flex;
flex-direction:column;
gap:6px;
max-height:200px;
overflow-y:auto;
background:var(--inputBg);
border:1px solid var(--stroke);
border-radius:8px;
padding:8px;
}
.userSelectItem{
display:flex;
align-items:center;
gap:8px;
padding:6px;
border-radius:4px;
cursor:pointer;
transition:background 0.2s,border-color 0.2s,box-shadow 0.2s;
background:var(--tabBg);
border:1px solid var(--stroke);
}
.userSelectItem:hover{
background:var(--hoverBg);
border-color:var(--accent);
box-shadow:0 0 0 1px var(--accent);
}
.userSelectItem input[type="checkbox"]{
accent-color:var(--accent);
width:16px;height:16px;
}
.userSelectItem span{
font-size:13px;
color:var(--line);
}
.chatGroupInfo{
background:var(--chipBg);
border-bottom:1px solid var(--stroke);
padding:6px 12px;
font-size:12px;
color:var(--muted);
display:none;
align-items:center;
gap:6px;
}
.chatGroupInfo.show{display:flex;}
.groupMemberLabel{font-weight:700;color:var(--accent);margin-right:4px;}
.groupMemberList{color:var(--line);}


body.theme-light{--bg:#f6f7fb;--panel:#ffffff;--line:#111827;--muted:#4b5563;--stroke:#d1d5db;--accent:#2563eb;--stage:#eef2ff;--stageGrad1:#f7f7ff;--stageGrad2:#e8ecff;--dialogueBg:rgba(255,255,255,.82);--chipBg:#f3f4f6;--msgBg:#ffffff;--sysBg:#f3f4f6;--inputBg:#ffffff;--headerBg:#ffffff;--tabBg:#ffffff;--tabBarBg:#ffffff;--btnBg:#f3f4f6;--btnText:#111827;--hoverBg:rgba(0,0,0,0.06);}
body[data-theme="light"]{background:#f6f7fb;color:#111827;}
body[data-theme="light"] .stage{background:#ffffff;border-color:rgba(0,0,0,.12);color:#111827;}
body[data-theme="light"] .topbar,body[data-theme="light"] .chatHeader,body[data-theme="light"] .chatTop{background:#ffffff;color:#111827;border-color:rgba(0,0,0,.12);}
body[data-theme="light"] .panel,body[data-theme="light"] .chat,body[data-theme="light"] .lobbyCard,body[data-theme="light"] .roomItem,body[data-theme="light"] .charItem,body[data-theme="light"] .charEdit,body[data-theme="light"] .adminTableWrap{background:#ffffff;border-color:rgba(0,0,0,.12);color:#111827;}
body[data-theme="light"] .chatTabs{background:#ffffff;border-bottom-color:rgba(0,0,0,.12);}
body[data-theme="light"] .chatTab{background:#f3f4f6;border-color:rgba(0,0,0,.12);color:#4b5563;}
body[data-theme="light"] .chatTab:hover{background:#e9eefb;color:#111827;}
body[data-theme="light"] .chatTab.active{background:#ffffff;color:#2563eb;border-bottom-color:#ffffff;}

body[data-theme="light"] .msg,body[data-theme="light"] .bubble{background:#f3f4f6;border-color:rgba(0,0,0,.12);color:#111827;}
body[data-theme="light"] .sys{background:#eef2ff;border-color:rgba(0,0,0,.12);color:#4b5563;}
body[data-theme="light"] .input{background:#ffffff;border-color:rgba(0,0,0,.18);color:#111827;}
body[data-theme="light"] .send,body[data-theme="light"] .btnMini,body[data-theme="light"] .iconBtn{background:#f3f4f6;border-color:rgba(0,0,0,.12);color:#111827;}
body[data-theme="light"] .send:hover,body[data-theme="light"] .btnMini:hover,body[data-theme="light"] .iconBtn:hover{background:#e9eefb;}
body[data-theme="light"] .sceneWindow,body[data-theme="light"] .contextMenu,body[data-theme="light"] .settingMenu,body[data-theme="light"] .modalBox{background:#ffffff;border-color:rgba(0,0,0,.12);color:#111827;}
body[data-theme="light"] .winHead,body[data-theme="light"] .modalHead{background:#ffffff;border-bottom-color:rgba(0,0,0,.12);color:#111827;}
body[data-theme="light"] .splitter{background:#ffffff;border-left-color:rgba(0,0,0,.12);border-right-color:rgba(0,0,0,.12);}
body[data-theme="light"] a{color:#779ed8;}

body[data-theme="light"] .bg{background-image:linear-gradient(135deg,var(--stageGrad1),var(--stageGrad2));}
body[data-theme="light"] .dialogue{background:var(--dialogueBg);border-color:var(--stroke);color:var(--line);}

body[data-theme="light"] .speaker{color:var(--accent);}
body[data-theme="light"] .stageRoomTitle{color:var(--line);}
body[data-theme="light"] .stageUsersLabel{color:var(--muted);}
body[data-theme="light"] .badge{background:var(--chipBg);color:var(--line);border-color:var(--stroke);}
body[data-theme="light"] .badgeLink{background:var(--chipBg);color:var(--line);border-color:var(--stroke);}
body[data-theme="light"] .userChip{background:var(--chipBg)!important;color:var(--line)!important;border-color:var(--stroke)!important;}
body[data-theme="light"] .roomItem{background:var(--panel)!important;border-color:var(--stroke)!important;color:var(--line)!important;}
body[data-theme="light"] .btnMini{background:var(--btnBg)!important;color:var(--btnText)!important;border-color:var(--stroke)!important;}
body[data-theme="light"] .chatHeader{background:var(--headerBg)!important;}
body[data-theme="light"] .chatCharSelect{background:var(--panel)!important;color:var(--line)!important;border-color:var(--stroke)!important;}
body[data-theme="light"] .chatCharSelect option{background:var(--panel)!important;color:var(--line)!important;}
body[data-theme="light"] .chatNameColorBtn{background:var(--btnBg)!important;color:var(--btnText)!important;border-color:var(--stroke)!important;}
body[data-theme="light"] .faceMenu{background:var(--panel)!important;border-color:var(--stroke)!important;}
body[data-theme="light"] .faceItem{background:var(--btnBg)!important;border-color:transparent!important;}
body[data-theme="light"] .faceItem:hover{background:rgba(0,0,0,.04)!important;border-color:var(--accent)!important;}
body[data-theme="light"] .faceName{color:var(--muted)!important;}
body[data-theme="light"] .chatBtn{background:var(--btnBg)!important;color:var(--btnText)!important;border-color:var(--stroke)!important;}
body[data-theme="light"] .diceBtn{background:var(--btnBg)!important;color:var(--btnText)!important;border-color:var(--stroke)!important;box-shadow:none!important;}
body[data-theme="light"] .diceBtn:hover{border-color:var(--accent)!important;color:var(--line)!important;filter:none!important;}
body[data-theme="light"] .diceBtn.on{background:rgba(37,99,235,.12)!important;border-color:var(--accent)!important;color:var(--line)!important;}


body[data-theme="light"]{
  --bg:#f3f5f9;
  --panel:#ffffff;
  --line:#121826;
  --muted:#5b6475;
  --stroke:#cfd6e4;
  --accent:#2b6cff;
  --stage:#ffffff;
  --stageGrad1:#f2f4f8;
  --stageGrad2:#e7ebf3;
  --dialogueBg:rgba(255,255,255,.86);
  --chipBg:#ffffff;
  --msgBg:#ffffff;
  --sysBg:#f5f7fb;
  --inputBg:#ffffff;
  --headerBg:#ffffff;
  --tabBg:#ffffff;
  --tabBarBg:#ffffff;
  --btnBg:#ffffff;
  --btnText:#121826;
  --hoverBg:rgba(0,0,0,0.06);
  --roomItemBg:#ffffff;
  --splitterBg:#eef2f8;
}

body[data-theme="light"]{--bg:#f6f7fb;--panel:#ffffff;--line:#111111;--muted:#586174;--stroke:rgba(0,0,0,.15);--accent:#779ed8;--bg-fallback:linear-gradient(135deg,#ffffff,#e9eef7);}
body[data-theme="light"] .badgeLink{color:var(--accent);border-color:var(--stroke);background:rgba(0,0,0,.02);}
body[data-theme="light"] .badgeLink:hover{background:rgba(0,0,0,.06);}
body[data-theme="light"] .stageRoomTitle{color:var(--line);}
body[data-theme="light"] .stageUsersLabel{color:var(--muted);}
body[data-theme="light"] .stageUsers{color:var(--line);}
body[data-theme="light"] .dialogue{background:rgba(255,255,255,.88);color:var(--line);border-color:var(--stroke);}
body[data-theme="light"] .chatHeader{background:var(--panel);color:var(--line);border-color:var(--stroke);}
body[data-theme="light"] .log{background:var(--panel);color:var(--line);}
body[data-theme="light"] .btnMini,body[data-theme="light"] .iconBtn{background:rgba(0,0,0,.04);color:var(--line);border-color:var(--stroke);filter:none;}
body[data-theme="light"] .btnMini:hover,body[data-theme="light"] .iconBtn:hover{background:rgba(0,0,0,.08);filter:none;}
body[data-theme="light"] .diceBtn{border-color:var(--stroke);background:rgba(0,0,0,.06);color:var(--line);}
body[data-theme="light"] .diceBtn:hover{background:rgba(0,0,0,.10);}
body[data-theme="light"] .diceBtn.on{background:rgba(11,91,211,.12);border-color:rgba(11,91,211,.35);}

body[data-theme="light"] .textareaDark {
    background: var(--inputBg);   
    border-color: var(--stroke);
    color: var(--line);       
}
body[data-theme="light"] .miniIn {
    background: var(--inputBg);
    border-color: var(--stroke);
    color: var(--line);
}

body[data-theme="light"] .winTitle,
body[data-theme="light"] .modalTitle {
    color: var(--line); 
}

body[data-theme="light"] .sectionTitle {
    color: var(--muted);
}

body[data-theme="light"] .winMuted {
    color: var(--muted);
}

body[data-theme="light"] .winHead,
body[data-theme="light"] .modalHead {
    background: var(--headerBg);
    border-bottom-color: var(--stroke);
}


body[data-theme="light"] .bgmControls {
    background: var(--btnBg);    
    border-color: var(--stroke); 
    color: var(--line);    
}
body[data-theme="light"] .bgmControls span[style*="color"] {
    color: var(--muted) !important;
}

body[data-theme="light"] .contextMenu {
    background: var(--panel);   
    border-color: var(--stroke);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
}
body[data-theme="light"] .contextItem {
    color: var(--line);         
}
body[data-theme="light"] .contextItem:hover {
    background: var(--hoverBg); 
    color: var(--accent);       
}
body[data-theme="light"] .contextItem.danger {
    border-top-color: var(--stroke);
}
body[data-theme="light"] .contextItem.danger:hover {
    background: #ffeef5;         
}

body[data-theme="light"] .msgProfile {
    background: #e1e4e8;        
    border-color: var(--stroke);
}

body[data-theme="light"] .log,
body[data-theme="light"] .roomList,
body[data-theme="light"] .adminTableWrap,
body[data-theme="light"] .adminPanel,
body[data-theme="light"] .modalBody,
body[data-theme="light"] .charList,
body[data-theme="light"] .charEdit,
body[data-theme="light"] .chatTabs,
body[data-theme="light"] .tabLog {
  scrollbar-color: rgba(0,0,0,0.2) rgba(0,0,0,0.05);
}

body[data-theme="light"] .log::-webkit-scrollbar-track,
body[data-theme="light"] .roomList::-webkit-scrollbar-track,
body[data-theme="light"] .adminTableWrap::-webkit-scrollbar-track,
body[data-theme="light"] .adminPanel::-webkit-scrollbar-track,
body[data-theme="light"] .modalBody::-webkit-scrollbar-track,
body[data-theme="light"] .charList::-webkit-scrollbar-track,
body[data-theme="light"] .charEdit::-webkit-scrollbar-track,
body[data-theme="light"] .chatTabs::-webkit-scrollbar-track,
body[data-theme="light"] .tabLog::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.03); 
  border: 1px solid rgba(0,0,0,0.05);
}

body[data-theme="light"] .log::-webkit-scrollbar-thumb,
body[data-theme="light"] .roomList::-webkit-scrollbar-thumb,
body[data-theme="light"] .adminTableWrap::-webkit-scrollbar-thumb,
body[data-theme="light"] .adminPanel::-webkit-scrollbar-thumb,
body[data-theme="light"] .modalBody::-webkit-scrollbar-thumb,
body[data-theme="light"] .charList::-webkit-scrollbar-thumb,
body[data-theme="light"] .charEdit::-webkit-scrollbar-thumb,
body[data-theme="light"] .chatTabs::-webkit-scrollbar-thumb,
body[data-theme="light"] .tabLog::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.8); 
}

body[data-theme="light"] .log::-webkit-scrollbar-thumb:hover,
body[data-theme="light"] .roomList::-webkit-scrollbar-thumb:hover,
body[data-theme="light"] .adminTableWrap::-webkit-scrollbar-thumb:hover,
body[data-theme="light"] .adminPanel::-webkit-scrollbar-thumb:hover,
body[data-theme="light"] .modalBody::-webkit-scrollbar-thumb:hover,
body[data-theme="light"] .charList::-webkit-scrollbar-thumb:hover,
body[data-theme="light"] .charEdit::-webkit-scrollbar-thumb:hover,
body[data-theme="light"] .chatTabs::-webkit-scrollbar-thumb:hover,
body[data-theme="light"] .tabLog::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.25); 
}

.msg.statMsg {
    background: #111926; 
    border: 1px solid #233552;
    border-left: 3px solid #4a7fc7;
    color: #dbeafe; 
}

body[data-theme="light"] .msg.statMsg {
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-left: 3px solid #779ed8;
    color: #1e3a8a;
}

body[data-theme="light"] .statWidget {
    background: rgba(255, 255, 255, 0.92); 
    border-color: rgba(0,0,0,0.15);       
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
}

body[data-theme="light"] .statAvatar, 
body[data-theme="light"] .charThumb {
    background: #e2e5e9;   
    border-color: rgba(0,0,0,0.1);
}

body[data-theme="light"] .miniStatLabel {
    color: #4b5563; 
}
body[data-theme="light"] .miniStatLabel span:last-child {
    color: #111827; 
}

body[data-theme="light"] .miniStatBar {
    background: #e5e7eb;
    border: 1px solid #d1d5db;
}

body[data-theme="light"] .statBarBox {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0,0,0,0.15);
    color: #111827;
}
body[data-theme="gold"] .miniStatLabel{color:var(--muted);}
body[data-theme="gold"] .miniStatLabel span:last-child{color:var(--line);}
body[data-theme="vintage"] .miniStatLabel{color:var(--muted);}
body[data-theme="vintage"] .miniStatLabel span:last-child{color:var(--line);}


body[data-theme="horror"] {
    --bg: #0f0202;
    --panel: #1a0505;
    --line: #e8cdd0;
    --muted: #8a5a5a;
    --stroke: #4a1a1a;
    --accent: #ff3333;
    --stage: #000000;
    --stageGrad1: #2a0a0a;
    --stageGrad2: #0f0202;
    --dialogueBg: rgba(20, 5, 5, 0.9);
    --chipBg: #2b0e0e;
    --msgBg: #180505;
    --sysBg: #2b0e0e;
    --inputBg: #0a0202;
    --headerBg: #150303;
    --tabBg: #220808;
    --tabBarBg: #150303;
    --btnBg: #2b0e0e;
    --btnText: #e8cdd0;
    --hoverBg: rgba(255, 50, 50, 0.15);
    --roomItemBg: var(--msgBg);
    --splitterBg: #1a0505;
    --bg-fallback: linear-gradient(135deg, #2a0a0a, #000000);
}

body[data-theme="horror"] .statWidget,
body[data-theme="horror"] .statBarBox,
body[data-theme="horror"] .hoDesc {
    background: rgba(20, 0, 0, 0.95) !important;
    border-color: #4a1a1a !important;
    color: #e8cdd0 !important;
    border: 1px solid #5a1a1a;
}

body[data-theme="horror"] .miniStatBar {
    background: #1a0505;
    border-color: #4a1a1a;
}

body[data-theme="horror"] .sceneWindow,
body[data-theme="horror"] .modalBox,
body[data-theme="horror"] .contextMenu,
body[data-theme="horror"] .bgmControls,
body[data-theme="horror"] .chatSuggestion,
body[data-theme="horror"] .userSelectBox,
body[data-theme="horror"] .charEdit {
    background: var(--panel) !important;
    border-color: var(--stroke) !important;
}

body[data-theme="horror"] .winHead,
body[data-theme="horror"] .modalHead {
    background: #150303 !important;
    border-bottom-color: var(--stroke) !important;
}

body[data-theme="horror"] .chatHeader,
body[data-theme="horror"] .chatTabs,
body[data-theme="horror"] .chatGroupInfo {
    background: #100202 !important;
    border-bottom-color: var(--stroke) !important;
}

body[data-theme="horror"] .winTitle,
body[data-theme="horror"] .modalTitle,
body[data-theme="horror"] .sceneName {
    color: #ff3333 !important;
}

body[data-theme="horror"] .chatTab {
    background: #1a0505;
    color: #8a5a5a;
    border-color: var(--stroke);
}

body[data-theme="horror"] .chatTab.active {
    background: var(--panel);
    color: #ff3333;
    border-bottom-color: var(--panel);
}

body[data-theme="horror"] .chatCharSelect,
body[data-theme="horror"] .chatBtn,
body[data-theme="horror"] .chatNameColorBtn,
body[data-theme="horror"] .iconBtn,
body[data-theme="horror"] .diceBtn,
body[data-theme="horror"] .btnMini {
    background: #2b0e0e !important;
    border-color: #4a1a1a !important;
    color: #e8cdd0 !important;
}

body[data-theme="horror"] .chatCharSelect option,
body[data-theme="horror"] .charItem,
body[data-theme="horror"] .textareaDark,
body[data-theme="horror"] .sceneItem,
body[data-theme="horror"] .faceItem {
    background: #1a0505 !important;
    border-color: #4a1a1a !important;
    color: #e8cdd0 !important;
}

body[data-theme="horror"] .msgProfile {
    background: #2b0e0e;
    border-color: #4a1a1a;
}

[data-theme="horror"] .msg.sys,
[data-theme="horror"] .msg.statMsg{
    border-left: 3px solid #ff3333 !important;
    background: rgba(60, 0, 0, 0.4) !important;
}

[data-theme="horror"] .msg[style*="border-left"]{
    border-left-width: 3px !important;
    border-left-style: solid !important;
}


body[data-theme="horror"] .send {
    background: #2b0e0e !important;
    border: 1px solid #5a1a1a !important;
    color: #ff3333 !important;
}

body[data-theme="horror"] .send:hover {
    background: #4a1a1a !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
}

body[data-theme="horror"] * {
    scrollbar-color: #5a2a2a #1a0505;
}

body[data-theme="horror"] ::-webkit-scrollbar-track {
    background: #1a0505;
    border: 1px solid #2b0e0e;
}

body[data-theme="horror"] ::-webkit-scrollbar-thumb {
    background: #5a2a2a;
    border: 1px solid #1a0505;
}

body[data-theme="horror"] ::-webkit-scrollbar-thumb:hover {
    background: #8a3a3a;
}

body[data-theme="pink"] {
    --bg: #ffffff;
    --panel: #fff0f5;
    --line: #5e3a48;
    --muted: #a87ca0;
    --stroke: #f3d0d8;
    --accent: #ff69b4;
    --stage: #ffffff;
    --stageGrad1: #ffffff;
    --stageGrad2: #fffafa;
    --dialogueBg: rgba(255, 235, 240, 0.92);
    --chipBg: #ffffff;
    --msgBg: #ffffff;
    --sysBg: #fff0f5;
    --inputBg: #ffffff;
    --headerBg: #fff5f8;
    --tabBg: #fff0f5;
    --tabBarBg: #fff5f8;
    --btnBg: #ffffff;
    --btnText: #5e3a48;
    --hoverBg: rgba(255, 105, 180, 0.08);
    --roomItemBg: #ffffff;
    --splitterBg: #fff0f5;
    --bg-fallback: linear-gradient(135deg, #ffffff, #ffe4e1);


body[data-theme="pink"] {
    --bg: #ffffff;
    --stage: #ffffff;
    --stageGrad1: #ffffff;
    --stageGrad2: #fffafa; 
}

body[data-theme="pink"] .stage {
    background: #ffffff !important; 
    border-color: #f3d0d8 !important;
}
}

body[data-theme="pink"] .statWidget,
body[data-theme="pink"] .statBarBox,
body[data-theme="pink"] .hoDesc {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #f3d0d8 !important;
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.3);
    color: #5e3a48 !important;
}

body[data-theme="pink"] .miniStatLabel {
    color: #885566 !important;
}

body[data-theme="pink"] .miniStatBar {
    background: #ffeef2;
    border-color: #f3d0d8;
}

body[data-theme="pink"] .sceneWindow,
body[data-theme="pink"] .modalBox,
body[data-theme="pink"] .contextMenu,
body[data-theme="pink"] .bgmControls,
body[data-theme="pink"] .faceMenu,
body[data-theme="pink"] .chatSuggestion,
body[data-theme="pink"] .userSelectBox,
body[data-theme="pink"] .charEdit {
    background: #ffffff !important;
    border-color: var(--stroke) !important;
    color: var(--line) !important;
}

body[data-theme="pink"] .winHead,
body[data-theme="pink"] .modalHead,
body[data-theme="pink"] .chatHeader,
body[data-theme="pink"] .chatTabs,
body[data-theme="pink"] .chatGroupInfo {
    background: #fff0f5 !important;
    border-bottom-color: var(--stroke) !important;
}

body[data-theme="pink"] .winTitle,
body[data-theme="pink"] .modalTitle {
    color: #d65a8d !important;
}

body[data-theme="pink"] .chatTab {
    background: #ffffff;
    color: #a87ca0;
    border-color: var(--stroke);
}

body[data-theme="pink"] .chatTab.active {
    background: #fff0f5;
    color: #ff69b4;
    border-bottom-color: #fff0f5;
}

body[data-theme="pink"] .chatCharSelect,
body[data-theme="pink"] .chatBtn,
body[data-theme="pink"] .chatNameColorBtn,
body[data-theme="pink"] .iconBtn,
body[data-theme="pink"] .diceBtn,
body[data-theme="pink"] .btnMini,
body[data-theme="pink"] .badgeLink {
    background: #ffffff !important;
    border-color: #f3d0d8 !important;
    color: #5e3a48 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

body[data-theme="pink"] .chatCharSelect option {
    background: #ffffff;
    color: #5e3a48;
}

body[data-theme="pink"] .btnMini:hover,
body[data-theme="pink"] .iconBtn:hover,
body[data-theme="pink"] .chatBtn:hover {
    background: #fff5f8 !important;
    border-color: #ff69b4 !important;
}

body[data-theme="pink"] .send {
    background: #ffb6c1 !important;
    color: #ffffff !important;
    border: 1px solid #ff69b4 !important;
}

body[data-theme="pink"] .send:hover {
    background: #ff69b4 !important;
}

body[data-theme="pink"] .msg.sys {
    background: #fffafc !important;
    border: 1px dashed #ffd1dc !important;
    color: #b08090 !important;
}

body[data-theme="pink"] .msg.statMsg {
    background: #fffafc !important;
    border: 1px solid #ffc0cb !important;
    border-left: 3px solid #ff69b4 !important;
    color: #5e3a48 !important;
}

body[data-theme="pink"] .msgProfile {
    background: #ffeef2;
    border-color: #f3d0d8;
}

body[data-theme="pink"] .charItem {
    background: #ffffff !important;
    border-color: var(--stroke) !important;
}

body[data-theme="pink"] .charThumb,
body[data-theme="pink"] .statAvatar {
    background: #fff0f5;
    border-color: #f3d0d8;
}

body[data-theme="pink"] .faceImg {
    background: #fff0f5 !important;
    border: 1px solid #f3d0d8;
    border-radius: 6px;
}

body[data-theme="pink"] .sceneItem,
body[data-theme="pink"] .faceItem {
    background: #ffffff !important;
    border-color: #f3d0d8 !important;
    color: #5e3a48 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

body[data-theme="pink"] .sceneName {
    color: #5e3a48 !important;
    font-weight: bold;
}

body[data-theme="pink"] .faceItem:hover,
body[data-theme="pink"] .sceneItem:hover {
    background: #fff5f8 !important;
    border-color: #ff69b4 !important;
}

body[data-theme="pink"] .textareaDark,
body[data-theme="pink"] .miniIn,
body[data-theme="light"] .textareaDark,
body[data-theme="light"] .miniIn,
body[data-theme="pink"] .input {
    background: #ffffff !important;
    border-color: var(--stroke) !important;
    color: var(--line) !important;
}

body[data-theme="pink"] .winMuted,
body[data-theme="pink"] .sectionTitle,
body[data-theme="pink"] .contextItem,
body[data-theme="pink"] .userSelectItem span,
body[data-theme="pink"] .chkField span,
body[data-theme="light"] .winMuted,
body[data-theme="light"] .sectionTitle {
    color: #5e3a48 !important;
}

body[data-theme="pink"] .contextItem:hover {
    background: #fff0f5 !important;
    color: #ff69b4 !important;
}

body[data-theme="pink"] * {
    scrollbar-color: #ffc0cb #fff0f5;
}

body[data-theme="pink"] ::-webkit-scrollbar-track {
    background: #fff0f5;
    border: 1px solid #fff;
}

body[data-theme="pink"] ::-webkit-scrollbar-thumb {
    background: #ffb6c1;
    border: 1px solid #fff;
    border-radius: 10px;
}

body[data-theme="pink"] ::-webkit-scrollbar-thumb:hover {
    background: #ff69b4;
}


body[data-theme="pink"] .statWidget,
body[data-theme="pink"] .statBarBox {
    background: rgba(255, 255, 255, 0.95) !important; 
    border-color: #f3d0d8 !important;     
    color: #5e3a48 !important;           
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.3) !important; 
}

body[data-theme="pink"] .miniStatLabel {
    color: #885566 !important;
}
body[data-theme="pink"] .miniStatBar {
    background: #ffeef2 !important;
    border: 1px solid #f3d0d8 !important;
}

body[data-theme="pink"] {
   
    --bg-fallback: linear-gradient(135deg, #ffffff, #fffafa) !important;
}

body[data-theme="pink"] .bg {
    background-color: #ffffff;
}


.winTabHead { display: flex; border-bottom: 1px solid var(--stroke); background: var(--headerBg); }
.winTabBtn { flex: 1; padding: 10px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; transition: 0.2s; border-bottom: 2px solid transparent; }
.winTabBtn:hover { color: var(--line); background: var(--hoverBg); }
.winTabBtn.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--panel); }
.winTabContent { display: none; padding: 12px; }
.winTabContent.active { display: block; }

.decoContainer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.decoItem { position: absolute; pointer-events: none; user-select: none; }
.decoItem img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; display: block; }

.decoContainer.editing { pointer-events: auto; }
.decoItem.editing { pointer-events: auto; cursor: grab; border: 1px dashed rgba(255,255,255,0.3); }
.decoItem.editing:hover { border-color: var(--accent); background: rgba(106,168,255,0.1); }
.decoItem.editing.dragging { cursor: grabbing; opacity: 0.9; z-index: 9999 !important; }
.decoItem.editing.selected { border: 1px solid var(--accent); }



.decoListItem { display: flex; align-items: center; justify-content: space-between; padding: 6px; border: 1px solid var(--stroke); background: var(--msgBg); margin-bottom: 4px; border-radius: 6px; cursor: grab; transition: background 0.2s, transform 0.2s; }
.decoListItem.dragging { opacity: 0.5; background: var(--accent); transform: scale(0.98); }
.decoListItem.drag-over { border-bottom: 2px solid var(--accent); }
.decoThumb { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; background: #000; margin-right: 8px; }
.decoName { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }

.stageTokens { z-index: 500 !important; }
#handouts { z-index: 600 !important; }
.stands { z-index: 700 !important; position: absolute !important; inset: 0 !important; display: flex !important; align-items: flex-end !important; justify-content: space-between !important; padding: 14px 14px 160px 14px !important; pointer-events: none !important; }
body[data-standpos="left"] .stands,.stands[data-standpos="left"]{justify-content:flex-start !important;}
body[data-standpos="center"] .stands,.stands[data-standpos="center"]{justify-content:center !important;}
body[data-standpos="right"] .stands,.stands[data-standpos="right"]{justify-content:flex-end !important;}

.dialogue { z-index: 800 !important; position: absolute !important; }
.onScreenStats { z-index: 900 !important; }

.invWin {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 340px; max-height: 80vh;
    background: var(--panel); border: 1px solid var(--stroke);
    border-radius: 12px; z-index: 10050; display: flex; flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.invBody { padding: 10px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.invItem {
    display: flex; gap: 8px; padding: 8px;
    background: var(--btnBg); border: 1px solid var(--stroke);
    border-radius: 8px; align-items: center;
}
.invItemImg {
    width: 40px; height: 40px; border-radius: 6px; background: #000;
    object-fit: cover; border: 1px solid var(--stroke); flex-shrink: 0;
}
.invItemInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.invItemName { font-weight: bold; font-size: 13px; color: var(--line); }
.invItemEffect { font-size: 11px; color: var(--accent); }
.invItemDesc { font-size: 11px; color: var(--muted); }
.invActions { display: flex; flex-direction: column; gap: 4px; }
#skillWin .invActions{display:flex;flex-direction:row;gap:6px;flex-wrap:wrap;align-items:center}
#skillWin .invActions .btnMini{padding:4px 8px;font-size:11px;line-height:1}
#skillWin .skillHint{font-size:11px;color:var(--muted);opacity:.85;margin-top:2px}


.invWin {
    position: fixed;          
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    
    width: 360px; 
    max-height: 80vh;    
    
    background: var(--panel);  
    border: 1px solid var(--stroke);
    border-radius: 12px; 
    
    z-index: 20000 !important; 
    
    display: flex; 
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6); 
    overflow: hidden;
}

.invWin.hidden {
    display: none !important;
}

.invBody { 
    padding: 10px; 
    overflow-y: auto; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
}

.invItem {
    display: flex; 
    gap: 8px; 
    padding: 8px;
    background: var(--btnBg); 
    border: 1px solid var(--stroke);
    border-radius: 8px; 
    align-items: center;
}
.invItemImg {
    width: 40px; 
    height: 40px; 
    border-radius: 6px; 
    background: #000;
    object-fit: cover; 
    border: 1px solid var(--stroke); 
    flex-shrink: 0;
}
.invItemInfo { 
    flex: 1; 
    min-width: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
}
.invItemName { font-weight: bold; font-size: 13px; color: var(--line); }
.invItemEffect { font-size: 11px; color: var(--accent); }
.invItemDesc { font-size: 11px; color: var(--muted); }
.invActions { display: flex; flex-direction: column; gap: 4px; }

.invItemImg {
    background-color: var(--inputBg) !important; 
    border-color: var(--stroke) !important;
}

.sceneItem, .invItem {
    background-color: var(--btnBg) !important;
    border-color: var(--stroke) !important;
    color: var(--line) !important;
}

.roomEmpty {
    background: transparent !important;
    color: var(--muted) !important;
    border: none !important;
}


.tokenX {
    background-color: var(--btnBg) !important;
    color: var(--line) !important;
    border: 1px solid var(--stroke) !important;
}
.tokenX:hover {
    background-color: var(--hoverBg) !important;
    color: #ff5555 !important; 
}

.hoDesc {
    background-color: var(--panel) !important;
    color: var(--line) !important;
    border: 1px solid var(--stroke) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

#diceLayer {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9000;
    perspective: 800px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.dice-cube {
    width: 100px; height: 100px;
    position: relative;
    transform-style: preserve-3d;
  
    animation: dice-tumble 1.2s cubic-bezier(0.1, 0.7, 0.1, 1) forwards;
}

.dice-face {
    position: absolute;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--panel) 0%, var(--bg) 100%);
    border: 3px solid var(--stroke);
    color: var(--line);
    font-size: 42px;
    font-weight: 900; 
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px; 
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5); 
    backface-visibility: hidden; 
}

.dice-face.front { 
    transform: translateZ(50px);
    background: linear-gradient(135deg, var(--btnBg) 0%, var(--panel) 100%);
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent);
}

.dice-face.back   { transform: rotateY(180deg) translateZ(50px); filter: brightness(0.7); }
.dice-face.right  { transform: rotateY(90deg) translateZ(50px);  filter: brightness(0.8); }
.dice-face.left   { transform: rotateY(-90deg) translateZ(50px); filter: brightness(0.8); }
.dice-face.top    { transform: rotateX(90deg) translateZ(50px);  filter: brightness(0.9); }
.dice-face.bottom { transform: rotateX(-90deg) translateZ(50px); filter: brightness(0.6); }

@keyframes dice-tumble {
    0% {
        opacity: 0;
        transform: translate3d(0, -500px, -2000px) rotateX(720deg) rotateY(1080deg) rotateZ(-360deg);
    }
    20% { opacity: 1; }
    80% {
        transform: translate3d(0, 0, -200px) rotateX(40deg) rotateY(60deg);
    }
    100% {
        transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
}

.dice-fadeout {
    transition: opacity 0.5s ease-out, transform 0.5s ease-in;
    opacity: 0 !important;
    transform: scale(0.8) translateY(50px) !important; 
}
.msg.skillSay{
  position: relative;
  overflow: visible;

  border: 1px solid rgba(255, 214, 120, 0.82) !important;
  background: linear-gradient(135deg,
    rgba(255, 214, 120, 0.18),
    rgba(255, 160,  20, 0.10)
  ) !important;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.25),
    0 0 0 1px rgba(0,0,0,0.10) inset
  !important;
}

.msg.skillSay{
  position: relative;
  overflow: visible;
  border-left: 0 !important;
  outline: 0 !important;
  border: 1px solid rgba(255, 214, 120, 0.82) !important;
  background: linear-gradient(135deg, rgba(255,214,120,0.18), rgba(255,160,20,0.10)) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.10) inset !important;
}

.msg.skillSay .msgContent .text{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-weight: 700;
}

.msg.skillSay .msgContent .text::before{
  content: none !important;
}


.tabLog,
.log,
.logContainer{
  scroll-behavior: auto !important;
}

.skillLineBig{
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: 0.2px;
  text-shadow:
    0 0 12px rgba(255,210,120,0.22),
    0 2px 16px rgba(0,0,0,0.35);
}

.fxSkillLine{
  animation: fxSkillLinePulse 0.65s ease-out 1;
}
@keyframes fxSkillLinePulse{
  0%   { transform: translateY(2px) scale(0.98); opacity: 0.92; filter: blur(0.2px); }
  40%  { transform: translateY(-1px) scale(1.06); opacity: 1;   filter: blur(0px);   }
  100% { transform: translateY(0px) scale(1.00); opacity: 1;   filter: blur(0px);   }
}

.fxSkillStand{
  transform-origin: 50% 85%;
  will-change: transform, filter;
  animation:
    fxSkillStandJolt 0.55s cubic-bezier(.2,.85,.25,1) 1,
    fxSkillStandGhost 0.75s ease-out 1;
}
@keyframes fxSkillStandJolt{
  0%   { transform: translate(0,0) rotate(0deg) scale(1); }
  18%  { transform: translate(-3px, 3px) rotate(-0.1deg) scale(1.05); }
  42%  { transform: translate( 3px,-3px) rotate( 0.1deg) scale(1.05); }
  100% { transform: translate(0,0) rotate(0deg) scale(1); }
}

@keyframes fxSkillStandGhost{
  0%{
    filter:
      drop-shadow(0 0 0 rgba(255,210,120,0))
      drop-shadow(0 0 0 rgba(255,210,120,0))
      drop-shadow(0 0 0 rgba(255,210,120,0));
  }
  35%{
    filter:
      drop-shadow(14px 0 20px rgba(255,210,120,0.26))
      drop-shadow(-14px 0 20px rgba(255,210,120,0.22))
      drop-shadow(0 0 26px rgba(255,210,120,0.16));
  }
  70%{
    filter:
      drop-shadow(20px 0 26px rgba(255,210,120,0.14))
      drop-shadow(-20px 0 26px rgba(255,210,120,0.12))
      drop-shadow(0 0 18px rgba(255,210,120,0.10));
  }
  100%{
    filter:
      drop-shadow(0 0 0 rgba(255,210,120,0))
      drop-shadow(0 0 0 rgba(255,210,120,0))
      drop-shadow(0 0 0 rgba(255,210,120,0));
  }
}


.fxScreenShake{
  will-change: transform;
  animation: fxScreenShake 0.38s ease-in-out 1;
}

@keyframes fxScreenShake{
  0%   { transform: translate3d(0,0,0); }
  12%  { transform: translate3d(-2px, 1px, 0); }
  24%  { transform: translate3d( 2px,-1px, 0); }
  36%  { transform: translate3d(-3px, 2px, 0); }
  52%  { transform: translate3d( 2px, 1px, 0); }
  68%  { transform: translate3d(-1px,-1px, 0); }
  84%  { transform: translate3d( 1px, 0px, 0); }
  100% { transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce){
  .fxScreenShake{ animation: none !important; }
}

.hostDelegateBox{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border:1px dashed var(--stroke);
  border-radius:12px;
  background:rgba(0,0,0,.08);
}
.hostDelegateTitle{
  font-weight:700;
  color:var(--line);
  font-size:13px;
}
.hostDelegateRow{
  display:flex;
  gap:8px;
  align-items:center;
}
.hostDelegateRow select{
  flex:1;
  min-width:0;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:var(--panel);
  color:var(--line);
}
.hostDelegateHint{
  opacity:.65;
  font-size:12px;
  color:var(--muted);
  text-align:center;
}


.chatFxBar{
  display:flex;
  gap:4px 2px;
  align-items:center;
  flex-wrap:wrap;
  margin:4px 8px 4px 8px;
  padding:4px 0 0 0;
  background:transparent;
  border:none;
  border-radius:0;
  border-top:1px solid var(--stroke);
}
.chatFxBtn{
  padding:4px 6px;
  border-radius:8px;
  border:1px solid var(--stroke);
  background:transparent;
  color:var(--line);
  font-weight:800;
  font-size:10px;
  cursor:pointer;
  line-height:1;
  opacity:.9;
}

.chatFxBtn:hover{filter:brightness(1.08);opacity:1;}
.chatFxBtn:active{transform:scale(.98);}

.chatFxBtn.active{border-color:rgba(106,168,255,.9);box-shadow:0 0 0 2px rgba(106,168,255,.18) inset;}
.chatFmtBar{border-top:none;margin-top:0;padding-top:0;position:relative;}
.chatFmtToggleBtn{margin-left:auto;}

.chatSizeMenu{position:absolute;right:8px;bottom:calc(100% + 6px);display:flex;gap:4px;align-items:center;padding:6px;background:var(--panel);border:1px solid var(--stroke);border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.25);z-index:50;}
.chatSizeBtn{min-width:30px;}
.fs-12{font-size:12px;}
.fs-14{font-size:14px;}
.fs-16{font-size:16px;}
.fs-18{font-size:18px;}
.fs-20{font-size:20px;}
.fs-24{font-size:24px;}


.msg.narrSay .msgContent .text,.msg.thinkSay .msgContent .text,.msg.noteSay .msgContent .text,.msg.shoutSay .msgContent .text,.msg.skillSay .msgContent .text{background:transparent!important;border:none!important;box-shadow:none!important;}
.msg.skillSay .msgContent .text::before{content:none!important;display:none!important;}
.msg.skillSay{border:1px solid rgba(255,220,120,.55)!important;background:rgba(255,220,120,.14)!important;border-radius:12px!important;padding:10px 12px!important;box-shadow:0 10px 24px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.10) inset;}

.msg.narrSay{border:1px solid rgba(255,255,255,.22)!important;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.22))!important;border-radius:14px!important;padding:12px 14px!important;box-shadow:0 12px 26px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.10) inset;backdrop-filter:blur(8px);}
.msg.narrSay .msgContent .text{font-style:italic;opacity:.96;}

.msg.thinkSay{border:2px dotted rgba(180,220,255,.55)!important;background:rgba(180,220,255,.10)!important;border-radius:999px!important;padding:12px 16px!important;box-shadow:0 12px 22px rgba(0,0,0,.16);}
.msg.thinkSay .msgContent .text{font-style:italic;}

.msg.noteSay{
  position:relative;
  border:1px solid rgba(0,0,0,0.18) !important;

  background:
    repeating-linear-gradient(
  180deg,
  rgba(0,0,0,0) 0px,
  rgba(0,0,0,0) 21px,
rgba(0,0,0,0.12) 21px,
rgba(0,0,0,0.12) 22px

),

    linear-gradient(180deg, rgba(255,252,220,0.98), rgba(255,245,200,0.95)) !important;

  border-radius:12px !important;
  padding:12px 14px !important;
  box-shadow:0 12px 22px rgba(0,0,0,0.14),0 0 0 1px rgba(0,0,0,0.08) inset;
}

.msg.noteSay::before{
  content:'';
  position:absolute;
  top:8px;
  bottom:8px;
  left:56px;
  width:2px;
  background:rgba(255,80,80,0.55);
  border-radius:2px;
  pointer-events:none;
}

.msg.noteSay .meta,
.msg.noteSay .name,
.msg.noteSay .time,
.msg.noteSay .text{
  color:#111 !important;
}

.msg.noteSay .msgContent .text{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:13px;
line-height:17px;

  padding-top:0px; 
  white-space:pre-wrap;
}



.msg.shoutSay::before,
.msg.shoutSay::after{
  content:none !important;
  display:none !important;
}

.msg.shoutSay{
  position:relative;
  background: url("msg.png") center/100% 100% no-repeat !important;
  border:none !important;
  
  padding: 22px 26px !important;

  overflow: visible;
}

.msg.shoutSay .msgContent,
.msg.shoutSay .msgContent .text{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

.msg.shoutSay .meta,
.msg.shoutSay .name,
.msg.shoutSay .time,
.msg.shoutSay .text{
  color:#111 !important;
}

.msg.shoutSay .msgContent .text{
  font-size:15px;
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.35;
}

.msg.phoneSay {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important; 
    position: relative !important;
   
    width: auto !important;
    min-width: 140px !important; 
    max-width: 100% !important;
    margin-top: 15px !important; 
    margin-bottom: 8px !important; 
    
    background-color: #f8f8f8 !important; 
    background-image: radial-gradient(#d0d0d0 1px, transparent 1px) !important;
    background-size: 4px 4px !important;

    border: 3px double #444 !important; 
    border-radius: 6px !important;   

    padding: 18px 12px 10px 12px !important;
    
    box-shadow: 2px 2px 0px rgba(0,0,0,0.1) !important; 
    box-sizing: border-box !important;
}

.msg.phoneSay::before {
    content: '🔊 AUDIO TRANSMISSION'; 
    display: block;
    position: absolute;
    top: -10px; 
    left: 50%;
    transform: translateX(-50%);

    background: #222; 
    color: #ccff00 !important; 
    
    font-size: 9px !important; 
    font-weight: bold;
    padding: 2px 8px !important; 
    border-radius: 10px;
    font-family: 'Courier New', monospace;
    letter-spacing: 0px; 
    border: 1px solid #000;
    z-index: 1;
    
    white-space: nowrap !important; 
}

.msg.phoneSay .content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.msg.phoneSay .meta {
    margin-bottom: 4px !important;
    border-bottom: 1px solid #bbb !important;
    padding-bottom: 2px !important;
    width: 100% !important;
}
.msg.phoneSay .name {
    color: #333 !important;
    font-weight: 900 !important;
    font-size: 13px !important; 
    font-family: 'Courier New', monospace !important;
}
.msg.phoneSay .time {
    color: #777 !important;
    font-size: 10px !important; 
    font-family: 'Courier New', monospace !important;
}

.msg.phoneSay .text {
    color: #111 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 13.5px !important; 
    line-height: 1.4 !important;
    
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-weight: 600 !important;
    width: 100% !important;
    white-space: pre-wrap !important;
}
.msg.hackerSay {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 15px !important;
    
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;

    background-color: #000 !important;
    border: 2px solid #00eaff !important;
    border-radius: 6px !important;
    
    padding: 40px 15px 15px 15px !important;
    
    position: relative !important;
    
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 234, 255, 0.05) 2px,
        rgba(0, 234, 255, 0.05) 4px
    ) !important;
    box-shadow: 0 0 15px rgba(0, 234, 255, 0.2), inset 0 0 20px rgba(0, 234, 255, 0.05) !important;
    box-sizing: border-box !important;
}

.msg.hackerSay::after {
    content: '📶 ENCRYPTED TRANSMISSION';
    position: absolute;
    top: 5px;
    left: 8px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: rgba(0, 234, 255, 0.5);
    letter-spacing: 1px;
    pointer-events: none;
}

.msg.hackerSay::before {
    content: '';
    position: absolute;
    top: 28px;         
    left: 10px;         
    right: 10px;       
    height: 1px;
    border-top: 1px dashed rgba(0, 234, 255, 0.4); 
    pointer-events: none;
}

.msg.hackerSay .avatar-box,
.msg.hackerSay .msgProfile {
    margin: 0 !important; 
    flex-shrink: 0;
    width: 50px !important;
    height: 50px !important;
    border: 1px solid #00eaff !important;
    border-radius: 0 !important;
    box-shadow: 0 0 5px rgba(0, 234, 255, 0.5);
    background: #000 !important;
}
.msg.hackerSay img { opacity: 0.9; }

.msg.hackerSay .content, 
.msg.hackerSay .msgContent {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.msg.hackerSay .content > div:first-child,
.msg.hackerSay .msgContent .meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    
    border-bottom: none !important; 
    padding-bottom: 0 !important;  
    
    margin-bottom: 8px !important;
    width: 100% !important;
}

.msg.hackerSay .name {
    font-family: 'Courier New', monospace !important;
    color: #00eaff !important;
    font-weight: bold !important;
    text-shadow: 0 0 5px rgba(0, 234, 255, 0.5);
}
.msg.hackerSay .time {
    font-family: 'Courier New', monospace !important;
    color: rgba(0, 234, 255, 0.6) !important;
}
.msg.hackerSay .text {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-family: 'Courier New', monospace !important;
    color: #00eaff !important; 
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-shadow: 0 0 2px rgba(0, 234, 255, 0.3);
    width: 100% !important;
    white-space: pre-wrap !important;
}

.msg .content > div:first-child {
    display: flex !important;
    flex-wrap: nowrap !important;   
    align-items: center !important;
    width: 100% !important;
    gap: 4px !important;        
}

.msg .name,
.msg .time {
    white-space: nowrap !important;
    overflow: visible !important;   
    text-overflow: clip !important; 
    flex-shrink: 0 !important;      
    max-width: none !important;
}
.msg .name:empty{display:none!important;}

.msg .time {
    margin-left: auto !important;  
    margin-right: 2px !important;  
    flex-shrink: 0 !important;
}

.msg button {
    white-space: nowrap !important; 
    flex-shrink: 0 !important;      
   
    font-size: 9px !important;      
    padding: 0px 4px !important;    
    height: 18px !important;        
    line-height: 16px !important;   
    min-width: 24px !important;    
    letter-spacing: -0.5px !important;
    border-width: 1px !important;
    
    margin: 0 !important;
    vertical-align: middle !important;
}

.msg .menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    align-items: center !important;
}


body[data-theme="pink"] .msg.narrSay {
    background: rgba(255, 245, 250, 0.95) !important;

    border: 1px solid #ffc0cb !important;

    box-shadow:
        0 12px 24px rgba(255, 105, 180, 0.25),  
        0 0 0 1px rgba(255, 192, 203, 0.4) inset 
        !important;
    
    color: #5e3a48 !important;
}

body[data-theme="pink"] .msg.narrSay .text {
    opacity: 1 !important;
}

body[data-theme="light"] .chatSuggestion {
    background: #ffffff !important;       
    border-color: rgba(0,0,0,0.15) !important;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.1) !important;
}

body[data-theme="light"] .suggItem {
    color: #111111 !important;          
    border-bottom: 1px solid #f0f0f0 !important; 
}

body[data-theme="light"] .suggItem:hover {
    background: #f3f4f6 !important;       
    color: #0055ff !important;         
}
body[data-theme="pink"] .chatSuggestion {
    background: #ffffff !important;     
    border: 1px solid #f3d0d8 !important; 
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.4) !important;
}

body[data-theme="pink"] .suggItem {
    color: #5e3a48 !important;      
    border-bottom: 1px solid #fff0f5 !important; 
}

body[data-theme="pink"] .suggItem:hover {
    background: #fff0f5 !important;    
    color: #ff69b4 !important; 
}

.miniGameList{display:flex;flex-direction:column;gap:8px;}
.miniGameHint{margin-top:10px;font-size:12px;opacity:.8;}
.rpsStatus{font-size:12px;opacity:.9;margin-bottom:10px;}
.rpsUI .rpsBlock{display:flex;flex-direction:column;gap:10px;}
.rpsUI .rpsRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.rpsUI .inputMini{padding:8px 10px;border:1px solid var(--stroke);border-radius:10px;background:var(--panel);color:var(--line);min-width:160px;}
.rpsUI .rpsNote{font-size:12px;opacity:.75;}
.rpsUI .rpsResult{font-size:16px;font-weight:800;}

.gmkStatus{font-size:12px;opacity:.9;margin-bottom:8px;}
.gmkUI .gmkBlock{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.gmkUI .gmkRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.gmkUI .gmkLine{font-size:12px;opacity:.95;}
.gmkUI .gmkResult{font-size:16px;font-weight:800;}
.gmkBoard{position:relative;width:481px;height:481px;background:url('board.png') center/481px 481px no-repeat;border-radius:8px;box-shadow:0 0 12px rgba(200,150,255,0.4);user-select:none;margin:0 auto;}
.gmkStone{position:absolute;width:24px;height:24px;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,0.25);}
.gmkStone.black{background:#111;}
.gmkStone.white{background:#f7f7f7;border:1px solid rgba(0,0,0,0.2);}
#gomokuWin{width:540px;}
#gomokuWin .sceneBody{max-height:none;overflow:visible;}
#gomokuWin .winHead{touch-action:none;cursor:move;}

#gmkBoard.gmkBoard{
  position:relative;
  width:481px;
  height:481px;
  background:url('board.png') no-repeat;
  background-size:100% 100%;
  background-position:center;
  user-select:none;
  touch-action:manipulation;
}
.gmkStone{
  position:absolute;
  width:28px;
  height:28px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.gmkStone.black{background:#111;}
.gmkStone.white{background:#f4f4f4;border:1px solid rgba(0,0,0,.35);}
.gmkStone.last{z-index:3;}
.gmkStone.last::after{content:'';position:absolute;left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--accent);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none;}


#slotWin{width:500px;max-width:calc(100vw - 40px);}
#slotWin .sceneBody{overflow-x:hidden;}
#slotWin .slotBetsTable{grid-template-columns:minmax(0,1fr) 70px 70px 60px 70px 80px; column-gap:6px;}

#slotWin .slotBetsTable>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}


.slotStatus{font-size:12px;opacity:.92;margin:0 0 8px 0;}
.slotReels{display:flex;justify-content:center;gap:10px;margin:6px 0 10px 0;}
.slotReel{width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:38px;background:rgba(0,0,0,0.25);border:1px solid var(--stroke);border-radius:12px;box-shadow:inset 0 6px 16px rgba(0,0,0,0.25);}
.slotCtrl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:6px;}
.slotCtrl .slotLabel{font-size:12px;opacity:.92;}
.slotMsg{margin-top:8px;text-align:center;font-size:12px;opacity:.95;}


.slotReelsWrap{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 10px 0;flex-wrap:nowrap;}
.slotLever{display:inline-flex;align-items:center;justify-content:center;font-size:40px;line-height:1;cursor:pointer;user-select:none;transform-origin:center center;}
.slotLever.spinning{transform:rotate(-15deg) scale(1.05);}
.slotLever.finished{opacity:.55;filter:grayscale(1);}

.slotBetsWrap{margin:10px 0 0 0;padding:10px;border:1px solid var(--stroke);border-radius:12px;background:rgba(0,0,0,0.10);}
.slotBetsTitle{font-size:12px;opacity:.92;margin:0 0 6px 0;}
.slotBetsTable{display:grid;grid-template-columns:1fr 70px 70px 70px 70px 90px;gap:4px 6px;font-size:12px;align-items:center;}
.slotBetsHead{margin-bottom:6px;opacity:.8;}
.slotBetsTable .h{font-weight:600;}

#slotWin{box-sizing:border-box;overflow-x:hidden;}
#slotWin .sceneBody{overflow-x:hidden;}
#slotWin .slotBetsTable{overflow-x:hidden;display:grid;grid-template-columns:minmax(0,1fr) 70px 70px 60px 70px 80px;column-gap:6px;}

#slotWin .slotBetsTable>div{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.slotBetsTable>div:nth-child(6n+1){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#slotWin .slotResultsTable>div:nth-child(4n+2){white-space:nowrap;}

.slotBetsTable>div{min-width:0;}
.slotBetsTable>div:nth-child(6n+1){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.slotBetsTable .h{white-space:nowrap;}

.slotGmCtrl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.slotResults{margin-top:10px;padding:10px;border:1px solid var(--stroke);border-radius:12px;background:rgba(0,0,0,0.10);}
.slotResults.hidden{display:none;}
.slotResultsTitle{font-size:12px;font-weight:700;opacity:.95;margin:0 0 6px 0;}
.slotResultsEmpty{font-size:12px;opacity:.75;}
.slotResultsTable{display:grid;grid-template-columns:60px minmax(0,1fr) 110px 110px;gap:4px 10px;font-size:12px;align-items:center;opacity:.95;}
.slotResultsTable .h{font-weight:600;opacity:.8;}
.slotResultsTable>div{min-width:0;}
.slotResultsTable>div:nth-child(4n+2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.slotResultsTable .h{white-space:nowrap;}

.roomTitle{font-weight:800;white-space:normal;overflow:visible;max-width:520px;word-break:break-word;}
.stageRoomTitle{font-weight:900;color:var(--line);white-space:normal;overflow:visible;max-width:420px;word-break:break-word;}

.lobbyTitle{font-size:28px;font-weight:900;margin:0 0 10px 0;text-align:center;}
.roomList{max-height:min(78vh,760px);}
@media (max-width:560px){
.roomItem{grid-template-columns:64px minmax(0,1fr);align-items:center;}
.roomSide{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:center;gap:10px;}
.roomBtns{justify-content:flex-end;}
.roomMetaRight{max-width:none;}
}



body[data-theme="gold"]{
--bg-fallback:linear-gradient(135deg,#fff7e1,#f2e4bf);
--bg:#fbf6e6;
--panel:#ffffffcc;
--line:#141414;
--muted:#6b6254;
--stroke:rgba(80,60,10,0.20);
--accent:#d4af37;
--stage:#fffdf5;
--stageGrad1:#fff7e1;
--stageGrad2:#f2e4bf;
--dialogueBg:rgba(255,255,255,0.86);
--chipBg:rgba(212,175,55,0.12);
--msgBg:rgba(0,0,0,0.04);
--sysBg:rgba(0,0,0,0.03);
--inputBg:rgba(0,0,0,0.03);
--headerBg:rgba(0,0,0,0.03);
--tabBg:rgba(0,0,0,0.03);
--tabBarBg:rgba(255,255,255,0.70);
--btnBg:rgba(0,0,0,0.04);
--btnText:#141414;
--hoverBg:rgba(212,175,55,0.18);
--roomItemBg:rgba(0,0,0,0.03);
--splitterBg:rgba(0,0,0,0.05);
}
body[data-theme="black"]{
--bg-fallback:linear-gradient(135deg,#000000,#0a0a0a);
--bg:#000000;
--panel:#0b0b0bcc;
--line:#ffffff;
--muted:#b8b8b8;
--stroke:rgba(255,255,255,0.18);
--accent:#ffffff;
--stage:#000000;
--stageGrad1:#050505;
--stageGrad2:#000000;
--dialogueBg:rgba(0,0,0,0.70);
--chipBg:rgba(255,255,255,0.10);
--msgBg:rgba(255,255,255,0.06);
--sysBg:rgba(255,255,255,0.05);
--inputBg:rgba(255,255,255,0.06);
--headerBg:rgba(255,255,255,0.05);
--tabBg:rgba(255,255,255,0.06);
--tabBarBg:rgba(0,0,0,0.60);
--btnBg:rgba(255,255,255,0.08);
--btnText:#ffffff;
--hoverBg:rgba(255,255,255,0.12);
--roomItemBg:rgba(255,255,255,0.05);
--splitterBg:rgba(255,255,255,0.06);
}


:root{--accentText:#ffffff;--accentSoft:rgba(106,168,255,0.18);}
body[data-theme="gold"]{--accentText:#141414;--accentSoft:rgba(212,175,55,0.22);}
body[data-theme="black"]{--accentText:#000000;--accentSoft:rgba(255,255,255,0.16);}

.input:focus,.authWrapDark .textarea:focus,.textareaDark:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentSoft);}
.authWrapDark .textarea{background:var(--inputBg);color:var(--line);border-color:var(--stroke);}

.send,.btnMini.primary{border-color:var(--accent);background:var(--accent);color:var(--accentText);}
.send:hover,.btnMini.primary:hover{filter:brightness(1.05);}
.roomEmpty{background:var(--btnBg);}

.tabBtn{background:var(--btnBg);color:var(--line);}
.tabBtn.on{border-color:var(--accent);}
.adminTableWrap{background:var(--btnBg);}
.adminTable th{background:var(--headerBg);border-bottom:1px solid var(--stroke);}
.avatarBox{background:var(--stage);}
.pill{background:var(--chipBg);}

.contextMenu{background:var(--panel);border:1px solid var(--stroke);}
.contextItem{color:var(--line);}
.contextItem:hover{background:var(--hoverBg);color:var(--accent);}
.contextItem.danger{border-top:1px solid var(--stroke);}

.chatHeader{background:var(--headerBg);}
.typingIndicator{color:var(--muted);}
.msgProfile{background:var(--stage);}

.chatNameColorBtn{background:var(--btnBg);border:1px solid var(--stroke);color:var(--btnText);}
.chatCharSelect{background-color:var(--inputBg);border-color:var(--stroke);color:var(--line);}
.chatCharSelect:hover,.chatCharSelect:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accentSoft);}
.chatCharSelect option{background:var(--panel);color:var(--line);}

.faceMenu{background:var(--panel);border:1px solid var(--stroke);}
.faceItem{background:var(--btnBg);border:1px solid transparent;}
.faceItem:hover{background:var(--hoverBg);border-color:var(--accent);}
.faceItem.active{border-color:var(--accent);background:var(--accentSoft);}
.faceName{color:var(--muted);}

.chatBtn{border:1px solid var(--stroke);background:var(--btnBg);color:var(--btnText);}
.chatBtn:hover{filter:brightness(1.08);}

.diceBtn{border:1px solid var(--stroke);background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(0,0,0,0.22)),var(--btnBg);color:var(--muted);}
.diceBtn:hover{border-color:var(--accent);color:var(--line);}
.diceBtn:focus-visible{outline:0;box-shadow:0 0 0 2px var(--accentSoft),0 1px 0 rgba(255,255,255,.06) inset,0 6px 14px rgba(0,0,0,.35);}
.diceBtn.on{border-color:var(--accent);background:linear-gradient(180deg,rgba(255,255,255,0.10),rgba(0,0,0,0.25)),var(--accentSoft);color:var(--line);}

.chatSuggestion{background:var(--panel);border:1px solid var(--stroke);}
.suggItem{color:var(--line);border-bottom:1px solid rgba(255,255,255,0.06);}
.suggItem:hover{background:var(--hoverBg);color:var(--accent);}

.msgActBtn{border:1px solid var(--stroke);color:var(--muted);}
.msgActBtn:hover{background:var(--hoverBg);color:var(--line);}
.editedLabel{color:var(--muted);opacity:.8;}

.sceneWindow{background:var(--panel);border:1px solid var(--stroke);}
.winHead{background:var(--headerBg);border-bottom:1px solid var(--stroke);}
.winTitle{color:var(--line);}
.winClose{color:var(--muted);}
.sceneInputs{border-bottom:1px dashed var(--stroke);}
.sceneItem{background:var(--btnBg);border:1px solid var(--stroke);}
.sceneItem:hover{border-color:var(--accent);}

.tokenX{background:var(--btnBg);color:var(--line);}

.charItem{background:var(--msgBg);}
.charThumb{background:var(--btnBg);}
.charEdit{background:var(--btnBg);}
.textareaDark{background:var(--inputBg);}

.statBarBox{background:var(--dialogueBg);border-color:var(--stroke);}
.statWidget{background:var(--dialogueBg);border:1px solid var(--stroke);}
.statAvatar{background:var(--btnBg);border:1px solid var(--stroke);}

.log,.roomList,.adminTableWrap,.adminPanel,.modalBody,.charList,.charEdit,.chatTabs,.tabLog{scrollbar-width:thin;scrollbar-color:var(--accent) var(--btnBg);}
.log::-webkit-scrollbar,.roomList::-webkit-scrollbar,.adminTableWrap::-webkit-scrollbar,.adminPanel::-webkit-scrollbar,.modalBody::-webkit-scrollbar,.charList::-webkit-scrollbar,.charEdit::-webkit-scrollbar,.chatTabs::-webkit-scrollbar,.tabLog::-webkit-scrollbar{width:10px;height:10px;}
.log::-webkit-scrollbar-track,.roomList::-webkit-scrollbar-track,.adminTableWrap::-webkit-scrollbar-track,.adminPanel::-webkit-scrollbar-track,.modalBody::-webkit-scrollbar-track,.charList::-webkit-scrollbar-track,.charEdit::-webkit-scrollbar-track,.chatTabs::-webkit-scrollbar-track,.tabLog::-webkit-scrollbar-track{background:var(--btnBg);border:1px solid var(--stroke);border-radius:999px;}
.log::-webkit-scrollbar-thumb,.roomList::-webkit-scrollbar-thumb,.adminTableWrap::-webkit-scrollbar-thumb,.adminPanel::-webkit-scrollbar-thumb,.modalBody::-webkit-scrollbar-thumb,.charList::-webkit-scrollbar-thumb,.charEdit::-webkit-scrollbar-thumb,.chatTabs::-webkit-scrollbar-thumb,.tabLog::-webkit-scrollbar-thumb{background:var(--accent);border:1px solid var(--stroke);border-radius:999px;}
.log::-webkit-scrollbar-thumb:hover,.roomList::-webkit-scrollbar-thumb:hover,.adminTableWrap::-webkit-scrollbar-thumb:hover,.adminPanel::-webkit-scrollbar-thumb:hover,.modalBody::-webkit-scrollbar-thumb:hover,.charList::-webkit-scrollbar-thumb:hover,.charEdit::-webkit-scrollbar-thumb:hover,.chatTabs::-webkit-scrollbar-thumb:hover,.tabLog::-webkit-scrollbar-thumb:hover{filter:brightness(1.1);}
.log::-webkit-scrollbar-corner,.roomList::-webkit-scrollbar-corner,.adminTableWrap::-webkit-scrollbar-corner,.adminPanel::-webkit-scrollbar-corner,.modalBody::-webkit-scrollbar-corner,.charList::-webkit-scrollbar-corner,.charEdit::-webkit-scrollbar-corner,.chatTabs::-webkit-scrollbar-corner,.tabLog::-webkit-scrollbar-corner{background:var(--btnBg);}


body[data-theme="gold"]{--bg:#ffffff;--panel:rgba(255,255,255,0.86);--headerBg:rgba(0,0,0,0.03);--tabBarBg:rgba(0,0,0,0.02);--btnBg:rgba(0,0,0,0.03);--inputBg:rgba(0,0,0,0.03);--chipBg:rgba(212,175,55,0.10);--msgBg:rgba(0,0,0,0.02);--sysBg:rgba(0,0,0,0.02);--stroke:rgba(80,60,10,0.22);--line:#141414;--muted:#6b6254;--btnText:#141414;--hoverBg:rgba(212,175,55,0.16);--accent:#d4af37;}
body[data-theme="gold"] .bgmControls{background:var(--btnBg);border-color:var(--stroke);color:var(--line);}
body[data-theme="gold"] .bgmControls span{color:var(--muted)!important;}
body[data-theme="gold"] input[type=range]{accent-color:var(--accent);}
body[data-theme="gold"] .stageTopRight .iconBtn,body[data-theme="gold"] .stageTopRight .btnMini,body[data-theme="gold"] .stageTopRight .chatBtn{background:var(--btnBg)!important;border-color:var(--stroke)!important;color:var(--btnText)!important;}
body[data-theme="gold"] .stageTopRight .iconBtn:hover,body[data-theme="gold"] .stageTopRight .btnMini:hover,body[data-theme="gold"] .stageTopRight .chatBtn:hover{background:var(--hoverBg)!important;filter:none!important;}
body[data-theme="gold"] .chatCharSelect{background-color:var(--inputBg);border-color:var(--stroke);color:var(--line);}
body[data-theme="gold"] .chatCharSelect:hover{background-color:rgba(0,0,0,0.05);border-color:var(--accent);}
body[data-theme="gold"] .chatCharSelect:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(212,175,55,0.22);}
body[data-theme="gold"] .chatCharSelect option{background:#ffffff;color:#141414;}
body[data-theme="gold"] .sceneBody{scrollbar-width:thin;scrollbar-color:var(--accent) rgba(0,0,0,0.06);}
body[data-theme="gold"] .sceneBody::-webkit-scrollbar{width:10px;height:10px;}
body[data-theme="gold"] .sceneBody::-webkit-scrollbar-track{background:rgba(0,0,0,0.05);border:1px solid var(--stroke);border-radius:999px;}
body[data-theme="gold"] .sceneBody::-webkit-scrollbar-thumb{background:var(--accent);border:1px solid var(--stroke);border-radius:999px;}
body[data-theme="gold"] .sceneBody::-webkit-scrollbar-thumb:hover{filter:brightness(1.08);}
body[data-theme="gold"] .chatTabs{background:var(--tabBarBg);border-bottom:1px solid var(--stroke);}
body[data-theme="gold"] .chatTab{background:var(--btnBg);border-color:var(--stroke);color:var(--muted);}
body[data-theme="gold"] .chatTab:hover{background:var(--hoverBg);color:var(--line);}
body[data-theme="gold"] .chatTab.active{background:rgba(255,255,255,0.92);color:#7a5b00;border-bottom:1px solid rgba(255,255,255,0.92);}
body[data-theme="gold"] .dialogue{position:absolute;left:12px;right:12px;bottom:12px;border-radius:12px;border:1px solid rgba(212,175,55,0.55);background:linear-gradient(135deg,#fff7d6 0%,#d4af37 38%,#fff3bf 68%,#c89f2d 100%);box-shadow:0 10px 26px rgba(212,175,55,0.18),0 0 0 1px rgba(255,255,255,0.35) inset;backdrop-filter:none;}
body[data-theme="gold"] .dialogue::before{content:'';position:absolute;inset:0;border-radius:12px;background-size:220% 100%;animation:goldShine 5.5s ease-in-out infinite;pointer-events:none;mix-blend-mode:screen;opacity:0.55;}
body[data-theme="gold"] .dialogue>*{position:relative;}
body[data-theme="gold"] .speaker{color:#3c2c00;text-shadow:0 1px 0 rgba(255,255,255,0.45);}
body[data-theme="gold"] .line{color:#141414;text-shadow:0 1px 0 rgba(255,255,255,0.35);}
@keyframes goldShine{0%{background-position:-120% 0;}50%{background-position:60% 0;}100%{background-position:180% 0;}}


body[data-theme="gold"] .bgmControls,
body[data-theme="black"] .bgmControls{background:var(--btnBg)!important;border:1px solid var(--stroke)!important;color:var(--line)!important;}
body[data-theme="gold"] .soundTabs,
body[data-theme="black"] .soundTabs{border-bottom:1px solid var(--stroke)!important;}
body[data-theme="gold"] .tabBtn,
body[data-theme="black"] .tabBtn{color:var(--muted)!important;}
body[data-theme="gold"] .tabBtn:hover,
body[data-theme="black"] .tabBtn:hover{color:var(--line)!important;}
body[data-theme="gold"] .tabBtn.active,
body[data-theme="black"] .tabBtn.active{color:var(--accent)!important;border-bottom-color:var(--accent)!important;}
body[data-theme="gold"] input[type=range],
body[data-theme="black"] input[type=range]{accent-color:var(--accent)!important;}
body[data-theme="gold"] .chatHeader,
body[data-theme="black"] .chatHeader{background:var(--headerBg)!important;}
body[data-theme="gold"] .stageTopRight .iconBtn,
body[data-theme="black"] .stageTopRight .iconBtn,
body[data-theme="gold"] .stageTopRight .btnMini,
body[data-theme="black"] .stageTopRight .btnMini{background:var(--btnBg)!important;border:1px solid var(--stroke)!important;color:var(--btnText)!important;border-radius:10px;}
body[data-theme="gold"] .stageTopRight .iconBtn:hover,
body[data-theme="black"] .stageTopRight .iconBtn:hover,
body[data-theme="gold"] .stageTopRight .btnMini:hover,
body[data-theme="black"] .stageTopRight .btnMini:hover{background:var(--hoverBg)!important;filter:none!important;}
body[data-theme="gold"] .chatCharSelect,
body[data-theme="black"] .chatCharSelect{background:var(--inputBg)!important;border-color:var(--stroke)!important;color:var(--line)!important;}
body[data-theme="gold"] .chatCharSelect:hover,
body[data-theme="black"] .chatCharSelect:hover{background:var(--hoverBg)!important;border-color:var(--accent)!important;}
body[data-theme="gold"] .chatCharSelect:focus,
body[data-theme="black"] .chatCharSelect:focus{border-color:var(--accent)!important;box-shadow:0 0 0 2px rgba(255,255,255,0.0),0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)!important;}
body[data-theme="gold"] .chatCharSelect option,
body[data-theme="black"] .chatCharSelect option{background:var(--panel)!important;color:var(--line)!important;}
body[data-theme="gold"] .chatTabs,
body[data-theme="black"] .chatTabs{background:var(--tabBarBg)!important;border-bottom:1px solid var(--stroke)!important;}
body[data-theme="gold"] .chatTab,
body[data-theme="black"] .chatTab{background:var(--btnBg)!important;border:1px solid var(--stroke)!important;color:var(--muted)!important;}
body[data-theme="gold"] .chatTab:hover,
body[data-theme="black"] .chatTab:hover{background:var(--hoverBg)!important;color:var(--line)!important;}
body[data-theme="gold"] .chatTab.active,
body[data-theme="black"] .chatTab.active{background:var(--panel)!important;border-color:var(--accent)!important;color:var(--line)!important;border-bottom-color:var(--panel)!important;}
body[data-theme="gold"] .btnTabAdd,
body[data-theme="black"] .btnTabAdd{border-color:var(--stroke)!important;color:var(--muted)!important;}
body[data-theme="gold"] .btnTabAdd:hover,
body[data-theme="black"] .btnTabAdd:hover{border-color:var(--accent)!important;color:var(--accent)!important;}
body[data-theme="gold"] .sceneBody,
body[data-theme="black"] .sceneBody{scrollbar-width:thin;scrollbar-color:var(--accent) var(--btnBg);}
body[data-theme="gold"] .sceneBody::-webkit-scrollbar,
body[data-theme="black"] .sceneBody::-webkit-scrollbar{width:10px;height:10px;}
body[data-theme="gold"] .sceneBody::-webkit-scrollbar-track,
body[data-theme="black"] .sceneBody::-webkit-scrollbar-track{background:var(--btnBg);border:1px solid var(--stroke);border-radius:999px;}
body[data-theme="gold"] .sceneBody::-webkit-scrollbar-thumb,
body[data-theme="black"] .sceneBody::-webkit-scrollbar-thumb{background:var(--accent);border:1px solid var(--stroke);border-radius:999px;}
body[data-theme="gold"] .sceneBody::-webkit-scrollbar-thumb:hover,
body[data-theme="black"] .sceneBody::-webkit-scrollbar-thumb:hover{filter:brightness(1.08);}
body[data-theme="gold"] .stageTopLeft .iconBtn,body[data-theme="black"] .stageTopLeft .iconBtn{background:var(--btnBg)!important;border:1px solid var(--stroke)!important;color:var(--btnText)!important;border-radius:10px!important;padding:6px 8px!important;line-height:1!important;}
body[data-theme="gold"] .stageTopLeft .iconBtn:hover,body[data-theme="black"] .stageTopLeft .iconBtn:hover{background:var(--hoverBg)!important;filter:none!important;}
body[data-theme="gold"] .stageTopLeft .iconBtn:active,body[data-theme="black"] .stageTopLeft .iconBtn:active{transform:translateY(1px);}

body[data-theme="gold"] .diceBtn{border:1px solid rgba(212,175,55,0.75)!important;border-radius:10px!important;background:linear-gradient(180deg,#fff7d6 0%,#d4af37 55%,#b88b18 100%)!important;color:#3c2c00!important;text-shadow:0 1px 0 rgba(255,255,255,0.35)!important;box-shadow:0 1px 0 rgba(255,255,255,0.35) inset,0 10px 18px rgba(212,175,55,0.12)!important;}
body[data-theme="gold"] .diceBtn:hover{filter:none!important;border-color:#d4af37!important;box-shadow:0 1px 0 rgba(255,255,255,0.45) inset,0 14px 26px rgba(212,175,55,0.16)!important;}
body[data-theme="gold"] .diceBtn.on{border-color:#d4af37!important;background:linear-gradient(180deg,#fff2c2 0%,#d4af37 45%,#a97b12 100%)!important;color:#2e2100!important;}
body[data-theme="gold"] .send{border:1px solid rgba(212,175,55,0.78)!important;border-radius:12px!important;background:linear-gradient(180deg,#fff7d6 0%,#d4af37 55%,#b88b18 100%)!important;color:#2e2100!important;font-weight:900!important;letter-spacing:.2px!important;text-shadow:0 1px 0 rgba(255,255,255,0.35)!important;box-shadow:0 1px 0 rgba(255,255,255,0.40) inset,0 12px 22px rgba(212,175,55,0.14)!important;}
body[data-theme="gold"] .send:hover{filter:none!important;border-color:#d4af37!important;box-shadow:0 1px 0 rgba(255,255,255,0.50) inset,0 16px 28px rgba(212,175,55,0.18)!important;}
body[data-theme="gold"] .send:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(255,255,255,0.30) inset,0 10px 18px rgba(212,175,55,0.12)!important;}


body[data-theme="gold"] .stageTopLeft .badgeLink,
body[data-theme="gold"] .stageTopLeft .btnMini,
body[data-theme="black"] .stageTopLeft .badgeLink,
body[data-theme="black"] .stageTopLeft .btnMini{
background:var(--btnBg)!important;
border:1px solid var(--stroke)!important;
color:var(--btnText)!important;
border-radius:10px!important;
}
body[data-theme="gold"] .stageTopLeft .badgeLink:hover,
body[data-theme="gold"] .stageTopLeft .btnMini:hover,
body[data-theme="black"] .stageTopLeft .badgeLink:hover,
body[data-theme="black"] .stageTopLeft .btnMini:hover{
background:var(--hoverBg)!important;
filter:none!important;
}

body[data-theme="gold"] .stageTopLeft .iconBtn,
body[data-theme="black"] .stageTopLeft .iconBtn{
background:var(--btnBg)!important;
border:1px solid var(--stroke)!important;
color:var(--btnText)!important;
border-radius:10px!important;
}
body[data-theme="gold"] .stageTopLeft .iconBtn:hover,
body[data-theme="black"] .stageTopLeft .iconBtn:hover{
background:var(--hoverBg)!important;
filter:none!important;
}


  --splitterBg: rgba(212,175,55,0.45);

  --bg:#ffffff;
  --stage:#ffffff;
  --stageGrad1:#ffffff;
  --stageGrad2:#ffffff;
}

body[data-theme="gold"] .bg{
  background-color:#ffffff !important;
}

body[data-theme="gold"] .splitter{
  background: var(--splitterBg) !important;
  border-left-color: rgba(212,175,55,0.40) !important;
  border-right-color: rgba(212,175,55,0.40) !important;
}
body[data-theme="gold"] .diceBtn,body[data-theme="black"] .diceBtn{opacity:1!important;filter:none!important;}
body[data-theme="gold"] .diceBtn{background:linear-gradient(180deg,#fff7d6 0%,#d4af37 55%,#b88b18 100%)!important;border:1px solid rgba(212,175,55,0.85)!important;color:#2e2100!important;}
body[data-theme="black"] .diceBtn{background:linear-gradient(180deg,#2a2a2a 0%,#000000 100%)!important;border:1px solid rgba(255,255,255,0.28)!important;color:#ffffff!important;}
body[data-theme="black"] .diceBtn.on{border-color:#ffffff!important;}
#uiSettingsModal button[data-theme]{padding:10px!important;min-height:38px!important;line-height:1.1!important;display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;}
body:not([data-theme="wizard"]) .dialogue,
body:not([data-theme="wizard"]) .dialogue::before,
body:not([data-theme="wizard"]) .dialogue::after{animation:none!important;}


body[data-theme="gold"] .msg.sys,
body[data-theme="black"] .msg.sys{
  background: var(--sysBg) !important;
  border-color: var(--stroke) !important;
  color: var(--line) !important;
}
body[data-theme="gold"] .msg.sys .text,
body[data-theme="black"] .msg.sys .text{
  color: var(--line) !important;
}
body[data-theme="gold"] .msg.statMsg,
body[data-theme="black"] .msg.statMsg{
  background: var(--sysBg) !important;
  border: 1px solid var(--stroke) !important;
  border-left: 3px solid var(--accent) !important;
  color: var(--line) !important;
  font-weight: 600;
}
.msg.shoutSay .name{color:inherit!important;}


body[data-theme="vintage"]{
  --bg:#e9dfcf;
  --panel:#f5efe5;
  --line:#2f241a;
  --muted:#6a5b49;
  --stroke:rgba(88,68,46,0.25);
  --accent:#b07d3c;
  --stage:#efe3d0;
  --stageGrad1:#f6f0e6;
  --stageGrad2:#e2d2b9;
  --dialogueBg:rgba(245,239,229,0.84);
  --chipBg:rgba(176,125,60,0.10);
  --msgBg:rgba(255,255,255,0.55);
  --sysBg:rgba(176,125,60,0.08);
  --inputBg:rgba(255,255,255,0.70);
  --headerBg:rgba(255,255,255,0.60);
  --tabBg:rgba(255,255,255,0.55);
  --tabBarBg:rgba(255,255,255,0.60);
  --btnBg:rgba(176,125,60,0.10);
  --btnText:#2f241a;
  --hoverBg:rgba(176,125,60,0.16);
  --roomItemBg:rgba(255,255,255,0.55);
  --splitterBg:rgba(176,125,60,0.10);
  --bg-fallback:linear-gradient(135deg,#f6f0e6,#d9c6aa);
  --accentText:#2f241a;
  --accentSoft:rgba(176,125,60,0.18);
}
body[data-theme="vintage"] .msg.sys,
body[data-theme="vintage"] .msg.statMsg{
  background: var(--sysBg) !important;
  border-color: var(--stroke) !important;
  color: var(--line) !important;
}

body[data-theme="wizard"]{
  --bg:#070411;
  --panel:#100826;
  --line:#f7e98a;
  --muted:#b8a8d8;
  --stroke:rgba(255,255,255,0.14);
  --accent:#b983ff;
  --stage:#05030b;
  --stageGrad1:#1a0b33;
  --stageGrad2:#05030b;
  --dialogueBg:rgba(16,8,38,0.82);
  --chipBg:rgba(185,131,255,0.10);
  --msgBg:rgba(255,255,255,0.03);
  --sysBg:rgba(185,131,255,0.10);
  --inputBg:rgba(255,255,255,0.04);
  --headerBg:rgba(0,0,0,0.25);
  --tabBg:rgba(255,255,255,0.03);
  --tabBarBg:rgba(0,0,0,0.25);
  --btnBg:rgba(185,131,255,0.12);
  --btnText:var(--line);
  --hoverBg:rgba(255,215,80,0.10);
  --roomItemBg:var(--msgBg);
  --splitterBg:rgba(185,131,255,0.10);
  --bg-fallback:linear-gradient(135deg,#1a0b33,#05030b);
  --accentText:#f7e98a;
  --accentSoft:rgba(185,131,255,0.26);
}
body[data-theme="wizard"] .btnMini:hover,
body[data-theme="wizard"] .iconBtn:hover,
body[data-theme="wizard"] .send:hover,
body[data-theme="wizard"] .diceBtn:hover,
body[data-theme="wizard"] .tabBtn:hover{
  box-shadow: 0 0 12px rgba(255,220,120,0.55), 0 0 22px rgba(185,131,255,0.35);
  filter: brightness(1.08);
}
body[data-theme="wizard"] .btnMini:focus,
body[data-theme="wizard"] .iconBtn:focus,
body[data-theme="wizard"] .send:focus,
body[data-theme="wizard"] .diceBtn:focus,
body[data-theme="wizard"] .tabBtn:focus{
  box-shadow: 0 0 0 3px rgba(255,220,120,0.22), 0 0 0 5px rgba(185,131,255,0.18);
  outline: none;
}



body[data-theme="light"] #log,body[data-theme="light"] .log,body[data-theme="light"] .tabLog,body[data-theme="light"] .logContainer{scrollbar-width:thin;scrollbar-color:var(--accent) var(--btnBg);}
body[data-theme="light"] #log::-webkit-scrollbar,body[data-theme="light"] .log::-webkit-scrollbar,body[data-theme="light"] .tabLog::-webkit-scrollbar,body[data-theme="light"] .logContainer::-webkit-scrollbar{width:10px;height:10px;}
body[data-theme="light"] #log::-webkit-scrollbar-track,body[data-theme="light"] .log::-webkit-scrollbar-track,body[data-theme="light"] .tabLog::-webkit-scrollbar-track,body[data-theme="light"] .logContainer::-webkit-scrollbar-track{background:var(--btnBg);border:1px solid var(--stroke);border-radius:999px;}
body[data-theme="light"] #log::-webkit-scrollbar-thumb,body[data-theme="light"] .log::-webkit-scrollbar-thumb,body[data-theme="light"] .tabLog::-webkit-scrollbar-thumb,body[data-theme="light"] .logContainer::-webkit-scrollbar-thumb{background:var(--accent);border:1px solid var(--stroke);border-radius:999px;}
body[data-theme="light"] #log::-webkit-scrollbar-thumb:hover,body[data-theme="light"] .log::-webkit-scrollbar-thumb:hover,body[data-theme="light"] .tabLog::-webkit-scrollbar-thumb:hover,body[data-theme="light"] .logContainer::-webkit-scrollbar-thumb:hover{filter:brightness(1.08);}
body[data-theme="light"] #log::-webkit-scrollbar-corner,body[data-theme="light"] .log::-webkit-scrollbar-corner,body[data-theme="light"] .tabLog::-webkit-scrollbar-corner,body[data-theme="light"] .logContainer::-webkit-scrollbar-corner{background:var(--btnBg);}

body[data-theme="vintage"]{
  --bg:#e7ddcd;--panel:#f3eadc;--line:#2a2118;--muted:#6a5b49;--stroke:rgba(88,68,46,0.28);
  --accent:#8a6a45;--chipBg:rgba(138,106,69,0.10);--msgBg:rgba(255,255,255,0.55);--sysBg:rgba(138,106,69,0.08);
  --inputBg:rgba(255,255,255,0.72);--headerBg:rgba(255,255,255,0.62);--tabBg:rgba(255,255,255,0.55);--tabBarBg:rgba(255,255,255,0.64);
  --btnBg:rgba(138,106,69,0.12);--btnText:#2a2118;--hoverBg:rgba(138,106,69,0.18);--roomItemBg:rgba(255,255,255,0.58);
  --splitterBg:rgba(138,106,69,0.12);--bg-fallback:linear-gradient(135deg,#f3eadc,#d7c0a3);
}
body[data-theme="wizard"]{
  --bg:#070411;--panel:#100826;--line:#f7e98a;--muted:#c1b2dd;--stroke:rgba(255,255,255,0.14);
  --accent:#b983ff;--chipBg:rgba(185,131,255,0.10);--msgBg:rgba(255,255,255,0.03);--sysBg:rgba(185,131,255,0.10);
  --inputBg:rgba(255,255,255,0.04);--headerBg:rgba(0,0,0,0.25);--tabBg:rgba(255,255,255,0.03);--tabBarBg:rgba(0,0,0,0.25);
  --btnBg:rgba(185,131,255,0.12);--btnText:var(--line);--hoverBg:rgba(255,215,80,0.10);--roomItemBg:var(--msgBg);
  --splitterBg:rgba(185,131,255,0.10);--bg-fallback:linear-gradient(135deg,#1a0b33,#05030b);
}

body[data-theme="vintage"] .stageTopLeft .iconBtn,
body[data-theme="vintage"] .stageTopRight .iconBtn,
body[data-theme="vintage"] .chatHeader .iconBtn,
body[data-theme="wizard"] .stageTopLeft .iconBtn,
body[data-theme="wizard"] .stageTopRight .iconBtn,
body[data-theme="wizard"] .chatHeader .iconBtn{
  background:var(--btnBg)!important;border:1px solid var(--stroke)!important;color:var(--btnText)!important;
  border-radius:10px!important;padding:6px 8px!important;line-height:1!important;filter:none!important;
}
body[data-theme="vintage"] .stageTopLeft .iconBtn:hover,
body[data-theme="vintage"] .stageTopRight .iconBtn:hover,
body[data-theme="vintage"] .chatHeader .iconBtn:hover,
body[data-theme="wizard"] .stageTopLeft .iconBtn:hover,
body[data-theme="wizard"] .stageTopRight .iconBtn:hover,
body[data-theme="wizard"] .chatHeader .iconBtn:hover{background:var(--hoverBg)!important;}

body[data-theme="vintage"] .chatHeader,
body[data-theme="wizard"] .chatHeader{background:var(--headerBg)!important;border-bottom-color:var(--stroke)!important;}

body[data-theme="vintage"] .settingItem:hover,
body[data-theme="wizard"] .settingItem:hover{background:var(--hoverBg)!important;color:var(--accent)!important;}

body[data-theme="vintage"] .chatTabs,
body[data-theme="wizard"] .chatTabs{background:var(--tabBarBg)!important;border-bottom:1px solid var(--stroke)!important;}
body[data-theme="vintage"] .chatTab,
body[data-theme="wizard"] .chatTab{background:var(--tabBg)!important;border:1px solid var(--stroke)!important;border-bottom:none!important;color:var(--muted)!important;}
body[data-theme="vintage"] .chatTab:hover,
body[data-theme="wizard"] .chatTab:hover{background:var(--hoverBg)!important;color:var(--line)!important;}
body[data-theme="vintage"] .chatTab.active,
body[data-theme="wizard"] .chatTab.active{background:var(--panel)!important;color:var(--accent)!important;border-bottom-color:var(--panel)!important;}

body[data-theme="vintage"] .bgmControls,
body[data-theme="wizard"] .bgmControls{background:var(--inputBg)!important;border:1px solid var(--stroke)!important;}
body[data-theme="vintage"] .soundTabs,
body[data-theme="wizard"] .soundTabs{border-bottom:1px solid var(--stroke)!important;}
body[data-theme="vintage"] .bgmControls .bgmRow span,
body[data-theme="wizard"] .bgmControls .bgmRow span,
body[data-theme="vintage"] .bgmControls label,
body[data-theme="wizard"] .bgmControls label{color:var(--muted)!important;}
body[data-theme="vintage"] input[type=range],
body[data-theme="wizard"] input[type=range]{accent-color:var(--accent)!important;}

body[data-theme="vintage"] .tabBtn,
body[data-theme="wizard"] .tabBtn{background:var(--btnBg)!important;border-color:var(--stroke)!important;color:var(--muted)!important;}
body[data-theme="vintage"] .tabBtn:hover,
body[data-theme="wizard"] .tabBtn:hover{background:var(--hoverBg)!important;color:var(--line)!important;}
body[data-theme="vintage"] .tabBtn.on,
body[data-theme="wizard"] .tabBtn.on{background:var(--panel)!important;border-color:var(--accent)!important;color:var(--accent)!important;}

body[data-theme="vintage"] .chatCharSelect,
body[data-theme="wizard"] .chatCharSelect{background-color:var(--inputBg)!important;border-color:var(--stroke)!important;color:var(--line)!important;}
body[data-theme="vintage"] .chatCharSelect:hover,
body[data-theme="wizard"] .chatCharSelect:hover{background-color:var(--hoverBg)!important;}
body[data-theme="vintage"] .chatCharSelect option,
body[data-theme="wizard"] .chatCharSelect option{background:var(--panel)!important;color:var(--line)!important;}

body[data-theme="vintage"] .sceneWindow,
body[data-theme="wizard"] .sceneWindow{background:var(--panel)!important;border-color:var(--stroke)!important;}
body[data-theme="vintage"] .winHead,
body[data-theme="wizard"] .winHead{background:var(--headerBg)!important;border-bottom-color:var(--stroke)!important;}
body[data-theme="vintage"] .winTitle,
body[data-theme="wizard"] .winTitle{color:var(--line)!important;}
body[data-theme="vintage"] .sceneInputs,
body[data-theme="wizard"] .sceneInputs{border-bottom-color:var(--stroke)!important;}
body[data-theme="vintage"] .sceneItem,
body[data-theme="wizard"] .sceneItem{background:var(--msgBg)!important;border-color:var(--stroke)!important;}
body[data-theme="vintage"] .sceneItem .sceneName,
body[data-theme="wizard"] .sceneItem .sceneName{color:var(--line)!important;}
body[data-theme="vintage"] .sceneItem .sceneDesc,
body[data-theme="wizard"] .sceneItem .sceneDesc{color:var(--muted)!important;}

body[data-theme="vintage"] .log,
body[data-theme="vintage"] .roomList,
body[data-theme="vintage"] .adminTableWrap,
body[data-theme="vintage"] .adminPanel,
body[data-theme="vintage"] .modalBody,
body[data-theme="vintage"] .charList,
body[data-theme="vintage"] .charEdit,
body[data-theme="vintage"] .tabLog{
  scrollbar-color: rgba(120,92,60,0.70) rgba(0,0,0,0.06) !important;
}
body[data-theme="vintage"] .log::-webkit-scrollbar-thumb,
body[data-theme="vintage"] .roomList::-webkit-scrollbar-thumb,
body[data-theme="vintage"] .adminTableWrap::-webkit-scrollbar-thumb,
body[data-theme="vintage"] .adminPanel::-webkit-scrollbar-thumb,
body[data-theme="vintage"] .modalBody::-webkit-scrollbar-thumb,
body[data-theme="vintage"] .charList::-webkit-scrollbar-thumb,
body[data-theme="vintage"] .charEdit::-webkit-scrollbar-thumb,
body[data-theme="vintage"] .tabLog::-webkit-scrollbar-thumb{background:rgba(120,92,60,0.62)!important;border-color:rgba(255,255,255,0.45)!important;}
body[data-theme="vintage"] .log::-webkit-scrollbar-track,
body[data-theme="vintage"] .roomList::-webkit-scrollbar-track,
body[data-theme="vintage"] .adminTableWrap::-webkit-scrollbar-track,
body[data-theme="vintage"] .adminPanel::-webkit-scrollbar-track,
body[data-theme="vintage"] .modalBody::-webkit-scrollbar-track,
body[data-theme="vintage"] .charList::-webkit-scrollbar-track,
body[data-theme="vintage"] .charEdit::-webkit-scrollbar-track,
body[data-theme="vintage"] .tabLog::-webkit-scrollbar-track{background:rgba(138,106,69,0.08)!important;border-color:rgba(138,106,69,0.18)!important;}

body[data-theme="vintage"] .send{background:rgba(138,106,69,0.18)!important;border:1px solid rgba(88,68,46,0.34)!important;color:var(--line)!important;}
body[data-theme="vintage"] .send:hover{background:rgba(138,106,69,0.24)!important;}

body[data-theme="vintage"] .msg.narrSay,
body[data-theme="vintage"] .msg.sys{
  background:linear-gradient(180deg,rgba(255,247,231,0.92),rgba(237,221,193,0.90)),repeating-linear-gradient(45deg,rgba(0,0,0,0.018) 0 2px,rgba(255,255,255,0.018) 2px 4px)!important;
  border:1px solid rgba(138,106,69,0.38)!important;
  box-shadow:0 10px 24px rgba(0,0,0,0.12),0 0 0 1px rgba(255,255,255,0.22) inset!important;
  backdrop-filter:none!important;
}
body[data-theme="vintage"] .msg.sys{border-left:3px solid rgba(138,106,69,0.55)!important;}
body[data-theme="vintage"] .msg.narrSay .msgContent .text{font-style:italic!important;color:rgba(42,33,24,0.92)!important;}
body[data-theme="vintage"] .msg.sys .msgContent .text{color:rgba(42,33,24,0.90)!important;}

body[data-theme="wizard"] .dialogue{
  background:linear-gradient(180deg,rgba(16,8,38,0.86),rgba(8,4,18,0.82))!important;
  border:1px solid rgba(185,131,255,0.55)!important;
  box-shadow:0 0 18px rgba(185,131,255,0.38),0 0 30px rgba(255,220,120,0.20),0 12px 30px rgba(0,0,0,0.55)!important;
  color:var(--line)!important;
}
body[data-theme="wizard"] .speaker{
  color:var(--accent)!important;
  text-shadow:0 0 10px rgba(185,131,255,0.55),0 0 14px rgba(255,220,120,0.25);
}
body[data-theme="wizard"] .line{text-shadow:0 0 10px rgba(255,220,120,0.18),0 0 14px rgba(185,131,255,0.14);}
body[data-theme="wizard"] .chat,
body[data-theme="wizard"] .sceneWindow{
  box-shadow:0 0 14px rgba(185,131,255,0.18),0 8px 24px rgba(0,0,0,0.55)!important;
}
body[data-theme="wizard"] .chatTab.active{box-shadow:0 0 14px rgba(185,131,255,0.20),0 0 22px rgba(255,220,120,0.12)!important;}
body[data-theme="wizard"] .send:hover,
body[data-theme="wizard"] .btnMini:hover,
body[data-theme="wizard"] .iconBtn:hover,
body[data-theme="wizard"] .tabBtn:hover{
  box-shadow:0 0 12px rgba(255,220,120,0.55),0 0 22px rgba(185,131,255,0.35)!important;
  filter:brightness(1.08)!important;
}

body[data-theme="vintage"]{
--bg:#e7ddcd;--panel:#f3eadc;--line:#2a2118;--muted:#6a5b49;--stroke:rgba(88,68,46,0.28);
--accent:#7a6248;--chipBg:rgba(122,98,72,0.10);--msgBg:rgba(255,255,255,0.55);--sysBg:rgba(122,98,72,0.08);
--inputBg:rgba(255,255,255,0.72);--headerBg:rgba(255,255,255,0.62);--tabBg:rgba(255,255,255,0.55);--tabBarBg:rgba(255,255,255,0.64);
--btnBg:rgba(122,98,72,0.11);--btnText:#2a2118;--hoverBg:rgba(122,98,72,0.17);--roomItemBg:rgba(255,255,255,0.58);
--splitterBg:rgba(122,98,72,0.12);--bg-fallback:linear-gradient(135deg,#f3eadc,#d7c0a3);
}
body[data-theme="wizard"]{
--bg:#070411;--panel:#100826;--line:#f7e98a;--muted:#c7b9e2;--stroke:rgba(255,255,255,0.14);
--accent:#b983ff;--chipBg:rgba(185,131,255,0.10);--msgBg:rgba(255,255,255,0.03);--sysBg:rgba(185,131,255,0.10);
--inputBg:rgba(255,255,255,0.04);--headerBg:rgba(0,0,0,0.25);--tabBg:rgba(255,255,255,0.03);--tabBarBg:rgba(0,0,0,0.25);
--btnBg:rgba(185,131,255,0.12);--btnText:var(--line);--hoverBg:rgba(255,215,80,0.10);--roomItemBg:var(--msgBg);
--splitterBg:rgba(185,131,255,0.10);--bg-fallback:linear-gradient(135deg,#1a0b33,#05030b);
}

body[data-theme="vintage"] .stageTopLeft .iconBtn,
body[data-theme="vintage"] .stageTopRight .iconBtn,
body[data-theme="vintage"] .chatHeader .iconBtn,
body[data-theme="wizard"] .stageTopLeft .iconBtn,
body[data-theme="wizard"] .stageTopRight .iconBtn,
body[data-theme="wizard"] .chatHeader .iconBtn{
background:var(--btnBg)!important;border:1px solid var(--stroke)!important;color:var(--btnText)!important;
}
body[data-theme="vintage"] .chatTabs,body[data-theme="wizard"] .chatTabs{background:var(--tabBarBg)!important;border-bottom:1px solid var(--stroke)!important;}
body[data-theme="vintage"] .chatTab,body[data-theme="wizard"] .chatTab{background:var(--tabBg)!important;border:1px solid var(--stroke)!important;border-bottom:none!important;color:var(--muted)!important;}
body[data-theme="vintage"] .chatTab:hover,body[data-theme="wizard"] .chatTab:hover{background:var(--hoverBg)!important;color:var(--line)!important;}
body[data-theme="vintage"] .chatTab.active,body[data-theme="wizard"] .chatTab.active{background:var(--panel)!important;color:var(--accent)!important;border-color:var(--stroke)!important;border-bottom-color:var(--panel)!important;}
body[data-theme="vintage"] .bgmControls,body[data-theme="wizard"] .bgmControls{background:var(--inputBg)!important;border:1px solid var(--stroke)!important;}
body[data-theme="vintage"] .soundTabs,body[data-theme="wizard"] .soundTabs{border-bottom:1px solid var(--stroke)!important;}
body[data-theme="vintage"] .tabBtn,body[data-theme="wizard"] .tabBtn{background:var(--btnBg)!important;border-color:var(--stroke)!important;color:var(--muted)!important;}
body[data-theme="vintage"] .tabBtn:hover,body[data-theme="wizard"] .tabBtn:hover{background:var(--hoverBg)!important;color:var(--line)!important;}
body[data-theme="vintage"] .tabBtn.on,body[data-theme="wizard"] .tabBtn.on{background:var(--panel)!important;border-color:var(--accent)!important;color:var(--accent)!important;}
body[data-theme="vintage"] .chatCharSelect,body[data-theme="wizard"] .chatCharSelect{background:var(--inputBg)!important;border-color:var(--stroke)!important;color:var(--line)!important;}
body[data-theme="vintage"] .chatCharSelect:hover,body[data-theme="wizard"] .chatCharSelect:hover{background:var(--hoverBg)!important;}
body[data-theme="vintage"] .sceneWindow,body[data-theme="wizard"] .sceneWindow{background:var(--panel)!important;border-color:var(--stroke)!important;}
body[data-theme="vintage"] .winHead,body[data-theme="wizard"] .winHead{background:var(--headerBg)!important;border-bottom:1px solid var(--stroke)!important;}
body[data-theme="vintage"] .winTitle,body[data-theme="wizard"] .winTitle{color:var(--line)!important;}
body[data-theme="vintage"] .sceneBody,body[data-theme="wizard"] .sceneBody{color:var(--line)!important;}
body[data-theme="vintage"] .sceneBody *{color:inherit;}
body[data-theme="wizard"] .sceneBody *{color:inherit;}

body[data-theme="vintage"] .log,body[data-theme="vintage"] .roomList,body[data-theme="vintage"] .adminTableWrap,body[data-theme="vintage"] .adminPanel,body[data-theme="vintage"] .modalBody,body[data-theme="vintage"] .charList,body[data-theme="vintage"] .charEdit,body[data-theme="vintage"] .tabLog{
scrollbar-color:rgba(110,92,70,0.55) rgba(0,0,0,0.06)!important;
}
body[data-theme="vintage"] .log::-webkit-scrollbar-thumb,body[data-theme="vintage"] .roomList::-webkit-scrollbar-thumb,body[data-theme="vintage"] .adminTableWrap::-webkit-scrollbar-thumb,body[data-theme="vintage"] .adminPanel::-webkit-scrollbar-thumb,body[data-theme="vintage"] .modalBody::-webkit-scrollbar-thumb,body[data-theme="vintage"] .charList::-webkit-scrollbar-thumb,body[data-theme="vintage"] .charEdit::-webkit-scrollbar-thumb,body[data-theme="vintage"] .tabLog::-webkit-scrollbar-thumb{
background:rgba(110,92,70,0.50)!important;border-color:rgba(255,255,255,0.42)!important;
}
body[data-theme="vintage"] .send{background:rgba(122,98,72,0.16)!important;border:1px solid rgba(88,68,46,0.30)!important;color:var(--line)!important;}
body[data-theme="vintage"] .send:hover{background:rgba(122,98,72,0.21)!important;}

#wizSparkLayer{position:fixed;inset:0;pointer-events:none;z-index:200000;}
#wizSparkLayer .wizSparkle{position:absolute;transform:translate(-50%,-50%);width:1px;height:1px;}
@keyframes wizardSparkDot{0%{transform:translate(0,0) scale(0.25);opacity:0;}12%{opacity:1;}100%{transform:translate(var(--dx),var(--dy)) scale(var(--sc));opacity:0;}}
#wizSparkLayer .wizSparkDot{
position:absolute;left:0;top:0;width:3px;height:3px;border-radius:999px;
background:radial-gradient(circle, rgba(255,255,255,0.95) 0 28%, rgba(255,220,120,0.85) 36%, rgba(185,131,255,0.62) 62%, transparent 72%);
filter:drop-shadow(0 0 10px rgba(255,220,120,0.55)) drop-shadow(0 0 14px rgba(185,131,255,0.35));
animation:wizardSparkDot 500ms ease-out var(--dly) 1 both;
}
#wizSparkLayer .wizSparkle::before{
content:'';position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:999px;
background:radial-gradient(circle, rgba(255,255,255,0.80) 0 20%, rgba(255,220,120,0.35) 45%, transparent 70%);
filter:blur(0.2px);
opacity:0.9;
}

body[data-theme="vintage"] .msg.narrSay,
body[data-theme="vintage"] .msg.sys{
  border-radius:4px!important;
  border:1px solid rgba(122,98,72,0.42)!important;
  background:
    linear-gradient(90deg, rgba(90,64,40,0.22) 0px, rgba(255,255,255,0.00) 26px),
    linear-gradient(270deg, rgba(90,64,40,0.22) 0px, rgba(255,255,255,0.00) 26px),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.018) 0 2px, rgba(255,255,255,0.018) 2px 4px),
    radial-gradient(circle at 22% 28%, rgba(0,0,0,0.035), transparent 42%),
    radial-gradient(circle at 78% 72%, rgba(0,0,0,0.028), transparent 44%),
    linear-gradient(180deg, rgba(255,248,233,0.96), rgba(235,215,183,0.92))!important;
  box-shadow:
    inset 18px 0 18px rgba(0,0,0,0.08),
    inset -18px 0 18px rgba(0,0,0,0.08),
    0 10px 26px rgba(0,0,0,0.16),
    0 0 0 1px rgba(255,255,255,0.18) inset!important;

  backdrop-filter:none!important;
}
body[data-theme="vintage"] .msg.narrSay .msgContent .text{
  font-style:italic!important;
  color:rgba(42,33,24,0.92)!important;
}
body[data-theme="vintage"] .msg.sys .msgContent .text{
  color:rgba(42,33,24,0.90)!important;
}
@keyframes wizPulse{
  0%,100%{box-shadow:0 0 18px rgba(185,131,255,0.28),0 0 36px rgba(255,220,120,0.14),0 14px 32px rgba(0,0,0,0.62);}
  50%{box-shadow:0 0 34px rgba(185,131,255,0.60),0 0 64px rgba(255,220,120,0.28),0 18px 36px rgba(0,0,0,0.68);}
}
@keyframes wizAura{
  0%,100%{transform:scale(1.00);opacity:0.55;filter:blur(14px);}
  50%{transform:scale(1.035);opacity:0.95;filter:blur(18px);}
}
@keyframes wizSpin{to{transform:rotate(360deg);}}
body[data-theme="wizard"] .dialogue{
  overflow:visible!important;              
  isolation:isolate!important;            
  border:1px solid rgba(185,131,255,0.62)!important;
  animation:wizPulse 5.0s ease-in-out infinite!important;  
}
body[data-theme="wizard"] .dialogue::before{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:18px;
  pointer-events:none;
  z-index:0;
  background:conic-gradient(
    from 0deg,
    rgba(185,131,255,0.00),
    rgba(185,131,255,0.45),
    rgba(255,220,120,0.35),
    rgba(185,131,255,0.10),
    rgba(185,131,255,0.00)
  );
  mix-blend-mode:screen;
  animation:wizAura 3.6s ease-in-out infinite, wizSpin 10s linear infinite!important;
}

body[data-theme="wizard"] .dialogue::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:1;

  background-size:220% 100%;
  animation:goldShine 5.0s ease-in-out infinite!important; 
  opacity:0.70;
}


body[data-theme="wizard"] .dialogue>*{position:relative;z-index:2;}


body[data-theme="wizard"]{--wizPulseSec:40s;--wizAuraSec:7.2s;--wizSpinSec:60s;--wizShineSec:10s;}

body[data-theme="wizard"] .dialogue{animation:wizPulse var(--wizPulseSec) ease-in-out infinite!important;}
body[data-theme="wizard"] .dialogue::before{animation:wizAura var(--wizAuraSec) ease-in-out infinite,wizSpin var(--wizSpinSec) linear infinite!important;}
body[data-theme="wizard"] .dialogue::after{animation:goldShine var(--wizShineSec) ease-in-out infinite!important;}

:root{--wizTypeMs:22;--wizPopMs:160ms;}
.fxWizPop{animation:wizPop var(--wizPopMs) ease-out 1;}
@keyframes wizPop{0%{transform:translateY(6px);opacity:.25;}100%{transform:translateY(0);opacity:1;}}


body[data-theme="wizard"]{
  --bg:#070411;
  --panel:#100826;
  --line:#f7e98a;
  --muted:#b8a8d8;
  --stroke:rgba(255,255,255,0.14);
  --accent:#b983ff;
  --stage:#05030b;
  --stageGrad1:#1a0b33;
  --stageGrad2:#05030b;
  --dialogueBg:rgba(16,8,38,0.82);
  --chipBg:rgba(185,131,255,0.10);
  --msgBg:rgba(255,255,255,0.03);
  --sysBg:rgba(185,131,255,0.10);
  --inputBg:rgba(255,255,255,0.04);
  --headerBg:rgba(0,0,0,0.25);
  --tabBg:rgba(255,255,255,0.03);
  --tabBarBg:rgba(0,0,0,0.25);
  --btnBg:rgba(185,131,255,0.12);
  --btnText:var(--line);
  --hoverBg:rgba(255,215,80,0.10);
  --roomItemBg:var(--msgBg);
  --splitterBg:rgba(185,131,255,0.10);
  --bg-fallback:linear-gradient(135deg,#1a0b33,#05030b);
  --accentText:#f7e98a;
  --accentSoft:rgba(185,131,255,0.26);
  cursor:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cline%20x1%3D%274%27%20y1%3D%274%27%20x2%3D%2729%27%20y2%3D%2729%27%20stroke%3D%27%238b5a2b%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%2F%3E%3Cline%20x1%3D%275%27%20y1%3D%275%27%20x2%3D%2728%27%20y2%3D%2728%27%20stroke%3D%27%23c68642%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20opacity%3D%270.85%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%274%27%20r%3D%273%27%20fill%3D%27%238b5a2b%27%20stroke%3D%27%23c68642%27%20stroke-width%3D%271%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%274%27%20r%3D%271.2%27%20fill%3D%27%23f7e98a%27%20opacity%3D%270.85%27%2F%3E%3C%2Fsvg%3E") 4 4, auto;
}
body[data-theme="wizard"] .contextItem,
body[data-theme="wizard"] .chatCharSelect,
body[data-theme="wizard"] button,
body[data-theme="wizard"] .iconBtn,
body[data-theme="wizard"] .btnMini,
body[data-theme="wizard"] .send,
body[data-theme="wizard"] .diceBtn,
body[data-theme="wizard"] .tabBtn,
body[data-theme="wizard"] a{cursor:inherit;}
body[data-theme="wizard"] input,
body[data-theme="wizard"] textarea,
body[data-theme="wizard"] [contenteditable="true"]{cursor:text;}
body[data-theme="wizard"] .btnMini:hover,
body[data-theme="wizard"] .iconBtn:hover,
body[data-theme="wizard"] .send:hover,
body[data-theme="wizard"] .diceBtn:hover,
body[data-theme="wizard"] .tabBtn:hover{
  box-shadow: 0 0 12px rgba(255,220,120,0.55), 0 0 22px rgba(185,131,255,0.35);
  filter: brightness(1.08);
}

.skillToolRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#turnTrackerWin {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 640px;
    max-width: calc(100vw - 40px);

    background: var(--panel);
    border: 1px solid var(--stroke);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    z-index: 2000;
    max-height: 80vh; 
}
#turnTrackerWin .winHead{touch-action:none;cursor:move}
#turnTrackerWin .invBody{display:flex;flex-direction:column;gap:10px}
.turnTrackerStatus{font-size:12px;opacity:.92}
.turnTrackerTop{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.turnTrackerAdd{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border:1px solid var(--stroke);border-radius:12px;padding:10px;background:rgba(0,0,0,0.10)}
.turnTrackerHint{font-size:11px;color:var(--muted);opacity:.85}
.turnTrackerTable{display:flex;flex-direction:column;gap:6px}
.ttRow{display:grid;grid-template-columns:18px 1fr 54px 88px 1.2fr 150px;gap:6px;align-items:center;padding:8px;border:1px solid var(--stroke);border-radius:12px;background:rgba(0,0,0,0.10)}
.ttRow.current{border-color:var(--accent)}
.ttHead{font-size:11px;opacity:.85;font-weight:800}
.ttCell{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttActs{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ttMark{font-weight:900;text-align:center}
@media (max-width:720px){.ttRow{grid-template-columns:18px 1fr 48px 76px 1fr 130px;}}

.turnTrackerTable {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 600px; 
}

.ttRow {
    display: grid;

    grid-template-columns: 25px 1fr 70px 140px 1.8fr 130px;
    gap: 6px;
    align-items: center;
    padding: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ttHead {
    font-weight: bold;
    background: rgba(0,0,0,0.2);
    font-size: 12px;
    text-align: center;
}

.ttCell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; 
}

.ttHpArea {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px; 
    width: 100%;
}

.ttActs {
    display: flex;
    flex-direction: column; 
    gap: 2px;
    justify-content: center;
    align-items: flex-end; 
}

.ttBtnRow {
    display: flex;
    gap: 2px;
}

.turn-active {
    transition: all 0.3s ease;
}

.tokenItem.turn-active .tokenImg {
    border-color: var(--accent) !important;
    box-shadow: 0 0 15px var(--accent), 0 0 30px var(--accent) !important;
    transform: scale(1.1); 
    z-index: 100; 
}

.charItem.turn-active {
    border: 1px solid var(--accent) !important;
    box-shadow: inset 0 0 15px rgba(100, 168, 255, 0.3);
    background: rgba(100, 168, 255, 0.1);
}


select, #importCharSelect {
    background-color: var(--inputBg) !important;
    color: var(--line) !important;
    border: 1px solid var(--stroke) !important;
    padding: 5px;
}


select option {
    background-color: #151a22 !important;
    color: #e9eef7 !important;
}

#pingLayer{position:absolute;inset:0;pointer-events:none;z-index:90;overflow:visible;}
.pingMark{position:absolute;transform:translate(-50%,-50%);pointer-events:none;}
.pingMark::before{content:'';position:absolute;left:0;top:0;width:18px;height:18px;border:2px solid var(--accent);border-radius:999px;transform:translate(-50%,-50%) scale(0.7);opacity:1;animation:pingPulse 1.2s ease-out forwards;}
.pingMark::after{content:'';position:absolute;left:0;top:0;width:18px;height:18px;border:2px solid var(--accent);border-radius:999px;transform:translate(-50%,-50%) scale(0.2);opacity:0.8;animation:pingPulse2 1.2s ease-out forwards;}
.pingMark span{position:absolute;left:0;top:18px;transform:translateX(-50%);font-size:12px;padding:2px 6px;border-radius:999px;background:var(--panel);border:1px solid var(--stroke);color:var(--text);white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,0.35);}
@keyframes pingPulse{0%{opacity:1;transform:translate(-50%,-50%) scale(0.7);}100%{opacity:0;transform:translate(-50%,-50%) scale(3.2);}}
@keyframes pingPulse2{0%{opacity:0.8;transform:translate(-50%,-50%) scale(0.2);}100%{opacity:0;transform:translate(-50%,-50%) scale(2.2);}}


#mafiaSettingsModal{width:540px;max-width:calc(100vw - 40px);}
#mafiaSettingsModal .winHead{touch-action:none;cursor:move;}
#mafiaSettingsModal .mafiaCfgBody{padding:12px;max-height:70vh;overflow:auto;}
#mafiaSettingsModal .mafiaCfgSection{padding:10px;border:1px solid var(--stroke);border-radius:12px;margin-bottom:10px;background:rgba(0,0,0,0.10);}
body[data-theme="light"] #mafiaSettingsModal .mafiaCfgSection{background:rgba(0,0,0,0.03);}
#mafiaSettingsModal .mafiaCfgTitle{font-weight:800;margin-bottom:8px;opacity:.95;}
#mafiaSettingsModal .mafiaCfgRows{display:flex;flex-direction:column;gap:8px;}
#mafiaSettingsModal .mafiaRow{display:flex;align-items:center;justify-content:space-between;gap:10px;}
#mafiaSettingsModal .mafiaRow input[type="number"]{width:90px;max-width:90px;}
#mafiaSettingsModal .mafiaChk{display:flex;align-items:center;gap:8px;}
#mafiaSettingsModal .mafiaCfgBtns{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;}
#mafiaGameWin{width:540px;max-width:calc(100vw - 40px);}
#mafiaGameWin .winHead{touch-action:none;cursor:move;}
#mafiaGameWin .mafiaCfgBody{padding:12px;max-height:70vh;overflow:auto;}
#mafiaGameWin #mgActionBox{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
#mafiaGameWin #mgActionBox select{width:100%;}
#mafiaGameWin .winHeadBtns{display:flex;gap:8px;align-items:center;}
#mafiaGameWin .btnMini.isConfirmed{outline:2px solid currentColor;}
#mafiaGameWin #mgChatLog{height:180px;overflow:auto;padding:8px;border:1px solid var(--stroke);border-radius:12px;background:rgba(0,0,0,0.08);}
body[data-theme="light"] #mafiaGameWin #mgChatLog{background:rgba(0,0,0,0.03);}
#mafiaGameWin .mgChatRow{display:flex;gap:8px;align-items:center;margin-top:8px;}
#mafiaGameWin #mgChatInput{flex:1;min-width:0;}
#mafiaGameWin .mgChatMsg{padding:2px 0;white-space:pre-wrap;word-break:break-word;}
.chatTabs{gap:4px;padding:4px 10px 0 10px;align-items:flex-end;}
.chatTab{height:30px;padding:0 12px;display:flex;align-items:center;justify-content:center;line-height:1;box-sizing:border-box;}
.chatTab.new::after{content:none;}
.btnTabAdd{width:28px;height:28px;margin-top:0;display:flex;align-items:center;justify-content:center;align-self:flex-end;box-sizing:border-box;}
.chatCharBar{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:8px 10px 8px 10px;}
.chatCharRow{display:flex;align-items:center;gap:4px;}
.chatCharRow1{flex-wrap:nowrap;}
.chatCharLabel{font-size:12px;opacity:.85;white-space:nowrap;flex:0 0 auto;}
.chatCharRow1 .chatCharSelect{flex:1 1 auto;min-width:0;}
.chatCharRow2{flex-wrap:wrap;2px;}
.chatCharSelect{height:34px;padding:0 32px 0 12px;font-size:13px;box-sizing:border-box;}
.chatBtn{width:34px;height:34px;font-size:17px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;}
.chatBtn.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;}

.chatCharBar{margin-bottom:6px;}
.diceToolbar{padding-top:0;margin-top:0;}

:root{
  --mg-red:#ff3b3b;
  --mg-green:#00c103;
  --mg-blue:#3aa0ff;
  --mg-gray:#b7b7b7;
  --mg-brown:#b87333;
  --mg-yellow:#e99f01;
}

.mafiaGameBody{ padding:12px; }
.mafiaGameWin .winHead{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
}
.mafiaGameWin .winTitle{ font-weight:800; letter-spacing:.2px; }
.mafiaGameWin .winBtns{ display:flex; gap:8px; }

.mgLayout{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:12px;
}
@media (max-width: 860px){
  .mgLayout{ grid-template-columns: 1fr; }
}

.mgCard{
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.mgCardTitle{
  font-weight:800;
  margin-bottom:10px;
  opacity:.9;
}

.mgRow2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.mgStat{ padding:8px 10px; border-radius:10px; background: rgba(255,255,255,.06); }
.mgLabel{ font-size:12px; opacity:.75; margin-bottom:4px; }
.mgValue{ font-size:18px; font-weight:900; }

.mgLine{ margin-top:8px; font-size:14px; }
.mgDead{ color: var(--mg-gray); font-weight:800; }

.mgPlayers{ max-height: 280px; overflow:auto; padding-right:4px; }
.mgActions{ display:flex; flex-wrap:wrap; gap:8px; }
.mgActions button{ border-radius:10px; padding:8px 10px; }

.mgChatHint{ font-size:12px; opacity:.7; margin-bottom:8px; }
.mgChatBar{ display:flex; gap:8px; }
.mgChatInput{
  flex:1;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color:#fff;
  outline:none;
}
.mgBtn{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  font-weight:800;
}
.mgBtn:hover{ filter:brightness(1.08); }
.mgBtnStop{ background: rgba(255,59,59,.18); border-color: rgba(255,59,59,.35); }
.mgBtnClose{ background: rgba(255,255,255,.10); }
.mgBtnSend{ background: rgba(58,160,255,.18); border-color: rgba(58,160,255,.35); }

.mgRole{ font-weight:900; }
.mgRole-mafia{ color: var(--mg-red); }
.mgRole-doctor{ color: var(--mg-green); }
.mgRole-police{ color: var(--mg-blue); }
.mgRole-citizen{ color: var(--mg-gray); }
.mgRole-stalker{ color: var(--mg-brown); }
.mgRole-unknown{ color:#fff; opacity:.85; }


.msg.mgSysRed .text, .mgSysRed{ color: var(--mg-red) !important; }
.msg.mgSysBlue .text, .mgSysBlue{ color: var(--mg-blue) !important; }
.msg.mgSysGreen .text, .mgSysGreen{ color: var(--mg-green) !important; }
.msg.mgSysYellow .text, .mgSysYellow{ color: var(--mg-yellow) !important; }

#mafiaGameWin.mafiaGameWin{width:460px;max-width:calc(100vw - 20px);max-height:86vh;overflow:hidden;}
#mafiaGameWin.mafiaGameWin .mafiaGameBody{padding:10px;max-height:calc(86vh - 46px);overflow:auto;}
#mafiaGameWin.mafiaGameWin .mgStack{display:flex;flex-direction:column;gap:10px;min-height:0;}
#mafiaGameWin.mafiaGameWin .mgCard{background:var(--panel);border:1px solid var(--stroke);border-radius:12px;padding:10px;box-shadow:0 10px 24px rgba(0,0,0,.16);}
#mafiaGameWin.mafiaGameWin .mgCardTitle{font-weight:800;font-size:13px;margin-bottom:8px;color:var(--line);}
#mafiaGameWin.mafiaGameWin .mgRow2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
#mafiaGameWin.mafiaGameWin .mgStat{background:var(--btnBg);border:1px solid var(--stroke);border-radius:10px;padding:8px;}
#mafiaGameWin.mafiaGameWin .mgLabel{font-size:11px;color:var(--muted);margin-bottom:4px;}
#mafiaGameWin.mafiaGameWin .mgValue{font-size:13px;color:var(--line);font-weight:700;word-break:break-word;}
#mafiaGameWin.mafiaGameWin .mgLine{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.35;}
#mafiaGameWin.mafiaGameWin .mgLine.mgHasPolice{color:var(--line);border:1px dashed var(--stroke);padding:8px;border-radius:10px;background:var(--msgBg);}
#mafiaGameWin.mafiaGameWin .mgPlayers{max-height:min(28vh,240px);overflow:auto;padding-right:4px;}
#mafiaGameWin.mafiaGameWin .mgPlayerRow{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--stroke);border-radius:10px;background:var(--btnBg);margin:6px 0;}
#mafiaGameWin.mafiaGameWin .mgPlayerRow.dead{opacity:.65;}
#mafiaGameWin.mafiaGameWin .mgPlayerIcon{width:18px;text-align:center;opacity:.85;font-size:12px;}
#mafiaGameWin.mafiaGameWin .mgPlayerName{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--line);font-weight:800;font-size:13px;}
#mafiaGameWin.mafiaGameWin .mgBadges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
#mafiaGameWin.mafiaGameWin .mgBadge{font-size:11px;padding:2px 7px;border-radius:999px;border:1px solid var(--stroke);background:var(--msgBg);color:var(--line);white-space:nowrap;}
#mafiaGameWin.mafiaGameWin .mgBadge.me{border-color:var(--accent);}
#mafiaGameWin.mafiaGameWin .mgBadge.ally{border-color:rgba(106,168,255,.45);background:rgba(106,168,255,.12);}
#mafiaGameWin.mafiaGameWin .mgBadge.dead{border-color:rgba(255,80,80,.45);background:rgba(255,80,80,.10);}
#mafiaGameWin.mafiaGameWin .mgNotice{padding:9px 10px;border:1px dashed var(--stroke);border-radius:12px;background:var(--msgBg);color:var(--muted);line-height:1.35;font-size:12px;}
#mafiaGameWin.mafiaGameWin .mgVoteInfo{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.35;}
#mafiaGameWin.mafiaGameWin .mgSelect{width:100%;border:1px solid var(--stroke);border-radius:10px;background:var(--inputBg);color:var(--line);padding:9px;outline:none;font-size:13px;}
#mafiaGameWin.mafiaGameWin .mgSelect:focus{border-color:var(--accent);}
#mafiaGameWin.mafiaGameWin .mgBtn{border:1px solid var(--stroke);background:var(--btnBg);color:var(--btnText);border-radius:10px;padding:8px 10px;cursor:pointer;font-size:13px;}
#mafiaGameWin.mafiaGameWin .mgBtn:hover{filter:brightness(1.06);}
#mafiaGameWin.mafiaGameWin .mgBtnSend{border-color:rgba(106,168,255,.55);background:rgba(106,168,255,.16);color:var(--line);}
#mafiaGameWin.mafiaGameWin .mgBtnClose{opacity:.9;}
#mafiaGameWin.mafiaGameWin .mgBtnStop{border-color:rgba(255,80,80,.55);background:rgba(255,80,80,.16);color:var(--line);}
#mafiaGameWin.mafiaGameWin .mgBtn.isConfirmed{border-color:rgba(70,205,255,.75);box-shadow:0 0 0 2px rgba(70,205,255,.18) inset;}
#mafiaGameWin.mafiaGameWin .mgUrgent{color:rgba(255,80,80,1)!important;}
#mafiaGameWin.mafiaGameWin .mgDead{color:var(--muted);font-weight:700;}
@media (max-width:560px){
#mafiaGameWin.mafiaGameWin{width:calc(100vw - 20px);}
#mafiaGameWin.mafiaGameWin .mgPlayers{max-height:min(30vh,220px);}
}

.chatCharBar .chatNameColorBtn{width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:inherit;line-height:1;}
.chatCharBar .chatNameColorPicker{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;}

.chatCharRow2{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(36px,1fr)) !important;align-items:stretch;}
.chatCharRow2 > .chatBtn{width:100% !important;min-width:0 !important;padding:0 !important;font-size:18px !important;}
.chatCharRow2 > .chatNameColorWrap{width:100% !important;min-width:0 !important;height:34px !important;position:relative !important;}
.chatCharRow2 > .chatNameColorWrap .chatNameColorBtn{width:100% !important;height:100% !important;padding:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:18px !important;line-height:1 !important;}
.chatCharRow2 > .chatNameColorWrap .chatNameColorPicker{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;opacity:0 !important;}

.chatNameColorWrap{flex:1 1 0 !important;width:auto !important;min-width:0 !important;}
.chatNameColorWrap .chatNameColorBtn{width:100% !important;height:100% !important;}


#stageTopTools{display:inline-flex;align-items:center;gap:4px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;white-space:nowrap;max-width:100%;min-width:0;flex:0 1 auto;opacity:1;transform:translateX(0);transition:max-width .4s cubic-bezier(.25,1,.5,1),opacity .3s ease-out,transform .4s cubic-bezier(.34,1.56,.64,1);scrollbar-width:none;-ms-overflow-style:none;}
#stageTopTools::-webkit-scrollbar{width:0;height:0;}
#stageTopTools::-webkit-scrollbar-track{background:transparent;border:0;}
#stageTopTools::-webkit-scrollbar-thumb{background:transparent;border:0;}
.stageTopLeft.toolsWrap #stageTopTools{flex-basis:100%;width:100%;max-width:100%;white-space:normal;flex-wrap:wrap;overflow:visible;}
#stageTopTools.compact .iconBtn{padding:0 8px;min-width:34px;}




#stageTopTools.collapsed {
    max-width: 0; 
    opacity: 0;   
    transform: translateX(-20px); 
    
    pointer-events: none; 
    margin: 0; 
    padding: 0;
}
#btnTopToolsToggle {
    width: 32px; 
    height: 32px;
    border-radius: 50%; 
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    margin-left: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;

    background: transparent !important;   
    border: none !important;           
    box-shadow: none !important;      

    color: var(--muted); 
}

#btnTopToolsToggle:hover {
    background-color: var(--hoverBg) !important; 
    color: var(--accent) !important; 
    transform: scale(1.1);
}

#btnTopToolsToggle svg {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#btnTopToolsToggle.closed svg {
    transform: rotate(180deg);
}

.badgeLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    height: 24px;        
    font-size: 12px;      
    padding: 0 8px;      
    
    background-color: var(--chipBg); 
    border: 1px solid var(--stroke); 
    border-radius: 40px;  
    color: var(--muted);  
    text-decoration: none; 
    white-space: nowrap;  
    
    transition: all 0.2s;
}

.badgeLink:hover {
    background-color: var(--hoverBg);
    color: var(--line);
    border-color: var(--muted);
}


.btnMini.danger {

    color: #ff4d4f !important;
    border-color: #ff4d4f !important;
}

body[data-theme="gold"] .chatTools .iconBtn,
body[data-theme="black"] .chatTools .iconBtn {
    background: var(--btnBg) !important;
    border: 1px solid var(--stroke) !important;
    color: var(--muted) !important; 
    
    border-radius: 8px; 
}

body[data-theme="gold"] .chatTools .iconBtn:hover,
body[data-theme="black"] .chatTools .iconBtn:hover {
    background: var(--hoverBg) !important;
    color: var(--accent) !important; 
    border-color: var(--accent) !important;
    filter: none !important;
}
.authWrapDark {
 
    height: 100%;          
    overflow-y: auto;        
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;    
    -ms-overflow-style: none; 

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;  
    
    background: var(--bg-fallback); 
    background: var(--bg);
}

.authWrapDark::-webkit-scrollbar {
    display: none;
}

@media (max-width: 768px) {
    .authWrapDark {
        justify-content: flex-start;
        
        padding-top: 40px;
        padding-bottom: 80px; 
    }
    
    .authStackDark {
        margin-bottom: 20px;
        width: 90%; 
        max-width: 400px;
    }
}

@media (min-width: 769px) {
    .authWrapDark {
        justify-content: flex-start; 
        padding: 60px 0;          
        overflow-y: auto;       
    }

    .authHeroDark {
        margin-bottom: 30px; 
        transform: scale(1.1);     
    }

    .authStackDark {
        display: flex;
        flex-direction: column;  
        align-items: center;    
        gap: 24px;             
        
        width: 100%;
        max-width: 480px;      
    }

    .authCardDark {
        width: 100%;            
        padding: 36px 40px;     
        
        border: 1px solid var(--stroke);
    }

    .authForm .field {
        margin-bottom: 18px;
    }
    .authForm .input {
        padding: 12px 14px;   
        font-size: 15px;     
        height: auto;
    }
    .authForm label {
        font-size: 14px;
        margin-bottom: 6px;
    }
    .authForm .send {
        padding: 14px;         
        font-size: 16px;
        margin-top: 12px;
        font-weight: bold;
    }

    .authCardDark:nth-child(2) .authTitleDark {
        margin-top: 5px;
    }
}

.chatHeader #chatTabsHost{flex:1;min-width:0;}
.chatHeader #chatTabsHost .chatTabs{padding:0;background:transparent;border-bottom:none;align-items:flex-end;height:100%;}
.chatHeader #chatTabsHost .chatTab.active{margin-bottom:0;border-bottom:none;}
.chatHeader{align-items:center!important;padding-bottom:0!important;}
.chatHeader .chatTitle{align-items:flex-end!important;}
.chatHeader #chatTabsHost{align-self:stretch;display:flex;align-items:flex-end;}
.chatHeader #chatTabsHost .chatTabs{width:100%;align-items:flex-end;height:100%;}
.chatHeader #chatTabsHost .chatTab{margin-bottom:-1px;}

.chatHeader #chatTabsHost .btnTabAdd{align-self:center;margin-top:0;}
.chatHeader .chatTools .iconBtn{position:relative;top:-2px;}

.chatTabs .chatTab.new::after{content:none!important;}
.chatTabs .chatTab.new:not(.active){
border-color:var(--accent)!important;
color:var(--accent)!important;
background:var(--accentSoft, rgba(106,168,255,0.18))!important;
box-shadow:0 0 0 1px var(--accentSoft, rgba(106,168,255,0.18)) inset!important;
font-weight:800!important;
}
.chatTabs .chatTab.new:not(.active):hover{
background:var(--hoverBg)!important;
filter:brightness(1.05);
}
@supports (background:color-mix(in srgb,#fff 50%,#000)){
.chatTabs .chatTab.new:not(.active){
border-color:color-mix(in srgb,var(--accent) 72%,var(--stroke))!important;
color:color-mix(in srgb,var(--accent) 92%,var(--line))!important;
background:color-mix(in srgb,var(--accent) 18%,var(--btnBg))!important;
box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent) inset!important;
}
.chatTabs .chatTab.new:not(.active):hover{
background:color-mix(in srgb,var(--accent) 26%,var(--btnBg))!important;
}
}
@keyframes tabNewPulse{
0%{transform:translateY(0) scale(1);filter:brightness(1);}
50%{transform:translateY(-1px) scale(1.03);filter:brightness(1.25);}
100%{transform:translateY(0) scale(1);filter:brightness(1);}
}
.chatTabs .chatTab.new:not(.active){
animation:tabNewPulse 0.9s ease-in-out infinite!important;
}
.cutinOverlay{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:300000;display:flex;align-items:center;justify-content:center;background:transparent;backdrop-filter:blur(1px);}

.cutinOverlay.hidden{display:none;}
.cutinOverlay img{max-width:80vw;max-height:80vh;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,0.55));transform:scale(0.95);opacity:0;transition:transform .18s ease,opacity .18s ease;}
.cutinOverlay.show img{transform:scale(1);opacity:1;}
.cutinOverlay.mode-cover img{width:100vw;height:100vh;max-width:none;max-height:none;object-fit:cover;}
.cutinOverlay.mode-contain img{width:100vw;height:100vh;max-width:none;max-height:none;object-fit:contain;}
.cutinOverlay.mode-original{overflow:auto;}
.cutinOverlay.mode-original img{width:auto;height:auto;max-width:none;max-height:none;object-fit:none;margin:auto;}

.stageTopLeft{flex-wrap:nowrap!important;min-width:0!important;}
.stageTopLeft.toolsWrap{flex-wrap:wrap!important;}
.stageRoomTitle{min-width:0!important;flex:1 1 auto!important;}
#stageTopTools{max-width:100%!important;min-width:0!important;flex:0 1 auto!important;white-space:nowrap!important;}
.stageTopLeft.toolsWrap #stageTopTools{flex-basis:100%!important;width:100%!important;max-width:100%!important;display:flex!important;flex-wrap:wrap!important;white-space:normal!important;overflow:visible!important;}

#stageTopTools .ttEmoji{display:inline-flex;align-items:center;}
#stageTopTools .ttLabel{display:inline-flex;align-items:center;}
#stageTopTools.compact .ttLabel{display:none!important;}
#stageTopTools.compact .ttEmoji{margin-right:0!important;}
#stageTopTools.compact .iconBtn{padding:0 8px;min-width:34px;}
#stageTopTools.compact .btnMini{padding:0 8px;min-width:34px;}

body[data-dlgshape="round"] .dialogue{border-radius:999px !important;padding:14px 58px !important;}
body[data-dlgshape="square"] .dialogue{left:0 !important;right:0 !important;bottom:0 !important;border:0 !important;border-radius:0 !important;}




/* gradient: 막처럼 보이는 “긴 단색 구간” 제거 + 테마별 불투명/자연스러운 그라데이션 */
body[data-dlgshape="gradient"]{--dlgGrad0:var(--dialogueBg);--dlgGrad1:color-mix(in srgb,var(--dialogueBg) 58%,transparent);--dlgGrad2:color-mix(in srgb,var(--dialogueBg) 30%,transparent);--dlgGradStrongTo:67%;--dlgGradMidTo:80%;--dlgGradTopTo:90%;--dlgGradPadB:78px;}
body[data-dlgshape="gradient"] .dialogue{left:0 !important;right:0 !important;bottom:0 !important;border:0 !important;border-radius:0 !important;outline:0 !important;box-shadow:none !important;backdrop-filter:none !important;min-height:240px !important;justify-content:flex-end !important;padding:24px 16px var(--dlgGradPadB) !important;background:linear-gradient(to top,var(--dlgGrad0) 0%,var(--dlgGrad0) var(--dlgGradStrongTo),var(--dlgGrad1) var(--dlgGradMidTo),var(--dlgGrad2) var(--dlgGradTopTo),transparent 100%) !important;}
body[data-theme="dark"][data-dlgshape="gradient"],body:not([data-theme])[data-dlgshape="gradient"]{--dlgGrad0:color-mix(in srgb,var(--dialogueBg) 55%,#000);}
body[data-theme="black"][data-dlgshape="gradient"]{--dlgGrad0:color-mix(in srgb,var(--dialogueBg) 45%,#000);}


#videoContainer{background:var(--panel)!important;border:1px solid var(--stroke)!important;box-shadow:0 12px 32px rgba(0,0,0,.45)!important;border-radius:12px!important;overflow:hidden!important;}
#videoContainer::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--accent);pointer-events:none;}
#videoContainer .winHead{background:var(--headerBg)!important;color:var(--text)!important;border-bottom:1px solid var(--stroke)!important;}
#videoContainer .winTitle{font-weight:700;}
#videoContainer .winClose{color:var(--muted)!important;padding:2px 8px;}
#videoContainer .winClose:hover{background:var(--hoverBg)!important;border-radius:8px;}
#videoContainer .sceneBody{background:#000!important;padding:0!important;max-height:none!important;overflow:hidden!important;}

#videoContainer{box-shadow:none!important;}
#videoContainer::before{content:none!important;display:none!important;}
#videoContainer .winHead{box-shadow:none!important;}

#videoContainer .winHead button.btnMini{
width:26px!important;
height:22px!important;
min-width:26px!important;
min-height:22px!important;
padding:0!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
line-height:1!important;
font-size:12px!important;
}
#videoContainer .winHead button.btnMini.danger{
width:26px!important;
height:22px!important;
min-width:26px!important;
min-height:22px!important;
padding:0!important;
}

.chatFmtBar{border-top:none;margin-top:0;padding-top:0;position:relative;}
.chatSizeMenu{position:absolute;right:8px;bottom:calc(100% + 6px);display:flex;gap:4px;align-items:center;padding:6px;background:var(--panel);border:1px solid var(--stroke);border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.25);z-index:50;}
.chatFmtBtn{min-width:28px;text-align:center;}
.chatSizeBtn,.chatImgBtn{min-width:30px;}
.fs-12{font-size:12px;}
.fs-14{font-size:14px;}
.fs-16{font-size:16px;}
.fs-18{font-size:18px;}
.fs-20{font-size:20px;}
.fs-24{font-size:24px;}



.msg.textOnlyMsg .msgContent{align-items:center!important;justify-content:center!important;width:100%!important;position:relative!important;padding:0!important;margin:0!important;}
.msg.textOnlyMsg .text{text-align:center!important;margin:0!important;padding:0!important;line-height:1.35!important;}
.msg.textOnlyMsg .msgActions{position:absolute;right:10px;top:-8px;margin-left:0;}
.tabLog .msg.textOnlyMsg .msgContent{text-align:center!important;}
.tabLog .msg.textOnlyMsg .text{text-align:center!important;}
.msg.narrSay.textOnlyMsg{justify-content:center!important;}
.msg.narrSay.textOnlyMsg .msgContent{align-items:center!important;justify-content:center!important;}
.msg.narrSay.textOnlyMsg .msgContent .text{text-align:center!important;}