/* FanChatML — стеклянный MVP чат + мини-игра */
:root{
    --bg-1:#050716;
    --bg-2:#0b102b;
    --neon:#5cf2ff;
    --neon-2:#9f6bff;
    --gold:#ffcf5c;
    --danger:#ff4f6d;
    --ok:#4ade80;
    --text:#eef3ff;
    --muted:#9aa4d6;
    --glass: rgba(8,13,37,.38);
    --glass-strong: rgba(8,13,37,.68);
    --glass-soft: rgba(255,255,255,.045);
    --border: rgba(137,174,255,.22);
    --shadow: 0 18px 50px rgba(0,0,0,.42);

    /* Меняй тут размер картинок ранга — применится в HUD, меню и сообщениях */
    --rank-icon-size: 48px;
    --rank-icon-size-sm: 23px;
}

*{box-sizing:border-box}
html,body{height:100%; height:100dvh}
body{
    margin:0;
    color:var(--text);
    font-family:"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
    letter-spacing:0;
}
button,input{font:inherit}
.game-bg{
    background:
      radial-gradient(900px 520px at 78% -12%, rgba(159,107,255,.30), transparent 62%),
      radial-gradient(760px 460px at 4% 108%, rgba(92,242,255,.24), transparent 62%),
      linear-gradient(180deg,#050716 0%, #0b102b 52%, #040512 100%);
    background-attachment:fixed;
}
.auth-bg{
    min-height:100vh;
    background:
      radial-gradient(800px 500px at 70% 10%, rgba(159,107,255,.35), transparent 60%),
      radial-gradient(700px 500px at 10% 100%, rgba(92,242,255,.28), transparent 60%),
      linear-gradient(180deg,#06081a,#0a0e2a);
    display:grid; place-items:center; padding:20px; overflow:auto;
}
.glass{
    background:var(--glass);
    backdrop-filter:blur(13px) saturate(155%);
    -webkit-backdrop-filter:blur(13px) saturate(155%);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
}

/* HUD */
.hud{
    position:fixed; top:6px; left:6px; right:6px;
    min-height:128px;
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:8px; padding:8px 10px;
    border-radius:14px; z-index:30;
}
.hud-left{display:flex; gap:10px; align-items:flex-start; min-width:0; flex:1}
.rank-icon{
    width:var(--rank-icon-size); height:var(--rank-icon-size);
    object-fit:contain; flex:0 0 auto;
    border-radius:10px; padding:4px;
    background:linear-gradient(135deg, rgba(92,242,255,.16), rgba(159,107,255,.18));
    border:1px solid var(--border);
}
.hud-meta{min-width:0; flex:1; display:flex; flex-direction:column; gap:5px}
.hud-row1{display:flex; gap:8px; align-items:center; min-width:0}
.nick{
    font-weight:900; font-size:16px; color:#fff;
    text-shadow:0 0 13px rgba(92,242,255,.48);
    max-width:calc(100vw - 130px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hud-row2{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:13px}
.rank-name{color:var(--neon); font-weight:800; text-shadow:0 0 9px rgba(92,242,255,.45)}
.stars{color:var(--gold); font-size:14px; letter-spacing:1px; text-shadow:0 0 8px rgba(255,207,92,.72); line-height:1}
.progress{
    position:relative; width:min(360px,100%); height:16px;
    background:rgba(255,255,255,.07);
    border-radius:999px; overflow:hidden;
    border:1px solid rgba(137,174,255,.25);
}
.progress-fill{
    height:100%; width:0;
    background:linear-gradient(90deg, var(--neon) 0%, var(--neon-2) 55%, var(--gold) 100%);
    box-shadow:0 0 16px rgba(92,242,255,.62);
    transition:width .35s ease;
}
.progress-text{
    position:absolute; inset:0; display:grid; place-items:center;
    font-size:10px; font-weight:900; color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.75);
}
.hud-stats{display:flex; gap:6px; flex-wrap:wrap; margin-top:2px}
.chip{
    display:inline-flex; align-items:center; gap:4px;
    font-size:12px; font-weight:900;
    padding:4px 8px; border-radius:999px;
    background:rgba(255,255,255,.06); border:1px solid var(--border);
    white-space:nowrap;
}
.chip.crystal{color:#75e7ff}.chip.bp{color:#ffd66d}.chip.fund{color:#ffe28b}.chip.online{color:#85f7ad}
.menu-btn{
    flex:0 0 auto; width:46px; height:46px;
    display:grid; place-items:center; gap:4px; padding:10px;
    border-radius:13px; cursor:pointer;
    background:linear-gradient(135deg, rgba(92,242,255,.18), rgba(159,107,255,.20));
    border:1px solid var(--border); box-shadow:0 0 16px rgba(92,242,255,.28);
    touch-action:manipulation;
}
.menu-btn span{display:block; width:22px; height:2px; border-radius:99px; background:#fff; box-shadow:0 0 8px rgba(92,242,255,.7)}
.menu-btn:hover{transform:scale(1.04); box-shadow:0 0 24px rgba(159,107,255,.5)}
.menu-btn:active{transform:scale(.96)}

/* Chat: компактный режим, максимум видимых сообщений */
.chat{
    position:fixed; left:0; right:0;
    top:142px; bottom:66px;
    overflow-y:auto; overflow-x:hidden;
    padding:4px 8px 6px;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scroll-behavior:smooth;
    scrollbar-width:thin;
    scrollbar-color:rgba(137,174,255,.45) transparent;
}
.chat::-webkit-scrollbar{width:6px}.chat::-webkit-scrollbar-thumb{background:rgba(137,174,255,.38); border-radius:4px}
.msg{
    width:100%; margin:2px 0; padding:3px 8px;
    background:rgba(8,13,37,.30);
    border-left:2px solid rgba(92,242,255,.48);
    border-radius:6px;
    font-size:13.5px; line-height:1.28;
    word-break:break-word; overflow-wrap:anywhere;
    animation:msgIn .18s ease;
    display:flex; align-items:center; gap:4px;
}
.msg .body{flex:1; min-width:0; color:#e8edff}
.msg.own{border-left-color:var(--gold); background:rgba(53,42,14,.25)}
/* системные сообщения: разные цвета */
.msg.system{
    text-align:center; padding:4px 9px; justify-content:center;
    border:1px solid rgba(255,207,92,.42);
    background:rgba(70,48,8,.28); color:var(--gold);
    font-weight:900; text-shadow:0 0 9px rgba(255,207,92,.7);
    animation:sysPulse 1.4s ease-in-out infinite alternate;
}
.msg.system.sys-event{border-color:rgba(255,207,92,.55); background:rgba(70,48,8,.32); color:#ffd76a; text-shadow:0 0 10px rgba(255,207,92,.85)}
.msg.system.sys-mute{border-color:rgba(255,160,70,.55); background:rgba(70,40,8,.28); color:#ffb46a; text-shadow:0 0 9px rgba(255,160,70,.7); animation:none}
.msg.system.sys-ban{border-color:rgba(255,79,109,.55); background:rgba(70,12,28,.32); color:#ff8aa0; text-shadow:0 0 9px rgba(255,79,109,.7); animation:none}
.msg.system.sys-unban{border-color:rgba(74,222,128,.55); background:rgba(14,50,28,.32); color:#8af1b2; text-shadow:0 0 9px rgba(74,222,128,.6); animation:none}
.msg.system.sys-admin{border-color:rgba(92,242,255,.55); background:rgba(10,32,60,.30); color:#90eaff; text-shadow:0 0 9px rgba(92,242,255,.6); animation:none}
.msg .ico{width:var(--rank-icon-size-sm); height:var(--rank-icon-size-sm); object-fit:contain; flex:0 0 auto; border-radius:5px}
.msg .ico.empty{display:inline-block; background:rgba(255,255,255,.07); border:1px solid var(--border)}
/* Яркий ник */
.msg .nk{color:#7ff1ff; font-weight:900; text-shadow:0 0 8px rgba(92,242,255,.45); flex:0 0 auto; cursor:pointer}
.msg.own .nk{color:#ffd76a; text-shadow:0 0 8px rgba(255,207,92,.45)}
.msg .sep{color:var(--muted); margin:0 4px; flex:0 0 auto}
.msg .x-btn{flex:0 0 auto; background:transparent; border:none; color:#ff8aa0; font-size:13px; padding:0 4px; cursor:pointer; opacity:.55}
.msg .x-btn:hover{opacity:1}
@keyframes msgIn{from{opacity:0; transform:translateY(3px)} to{opacity:1; transform:none}}
@keyframes sysPulse{from{box-shadow:0 0 6px rgba(255,207,92,.15)} to{box-shadow:0 0 14px rgba(255,207,92,.4)}}

/* Composer */
.composer{
    position:fixed; left:8px; right:8px; bottom:8px;
    display:flex; gap:8px; padding:8px;
    border-radius:15px; z-index:30;
}
.composer input{
    flex:1; min-width:0; height:48px;
    background:rgba(255,255,255,.055); border:1px solid var(--border); color:#fff;
    padding:0 14px; border-radius:11px; font-size:15px; outline:none;
}
.composer input::placeholder{color:var(--muted)}
.composer input:focus{border-color:var(--neon); box-shadow:0 0 0 3px rgba(92,242,255,.17)}
.send-btn{
    flex:0 0 auto; width:50px; height:48px;
    display:grid; place-items:center; border:none; border-radius:12px; cursor:pointer; color:#061026;
    background:linear-gradient(135deg,var(--neon) 0%,var(--neon-2) 58%,var(--gold) 100%);
    box-shadow:0 0 19px rgba(92,242,255,.52),0 6px 16px rgba(0,0,0,.36);
    touch-action:manipulation;
}
.send-btn:hover{transform:translateY(-1px); box-shadow:0 0 28px rgba(159,107,255,.56)}
.send-btn:active{transform:scale(.96)}.send-btn:disabled{filter:grayscale(.65) opacity(.62); cursor:wait}.send-ico{font-size:21px; font-weight:900; transform:translateX(1px)}

/* Drawer/menu */
.drawer{position:fixed; inset:0; z-index:100; background:rgba(2,4,15,.62); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); display:flex; align-items:flex-end; justify-content:center; animation:fadeIn .18s ease}
.drawer[hidden]{display:none}@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.drawer-card{width:min(580px,100%); max-height:88dvh; overflow:auto; border-radius:19px 19px 0 0; padding:14px; display:flex; flex-direction:column; gap:10px; animation:slideUp .24s cubic-bezier(.2,.7,.2,1)}
@keyframes slideUp{from{transform:translateY(22px); opacity:.5} to{transform:none; opacity:1}}
.drawer-head{display:flex; justify-content:space-between; align-items:center}.drawer-head h3{margin:0; color:var(--neon); font-size:19px; text-shadow:0 0 11px rgba(92,242,255,.48)}
.x-btn{background:transparent; border:none; color:#fff; font-size:21px; cursor:pointer; padding:4px 8px}.drawer-tabs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px}
.tab{padding:9px 10px; border-radius:11px; background:rgba(255,255,255,.045); color:var(--text); border:1px solid var(--border); cursor:pointer; font-size:13px; font-weight:800; transition:all .15s; touch-action:manipulation}
.tab:hover{background:rgba(92,242,255,.09); border-color:var(--neon)}.tab.active,.tab.sel{background:linear-gradient(135deg,rgba(92,242,255,.22),rgba(159,107,255,.22)); border-color:var(--neon); color:#fff; box-shadow:0 0 13px rgba(92,242,255,.18)}
.drawer-content{min-height:220px; padding:4px 0; font-size:14px}.muted,.drawer-content .muted{color:var(--muted); text-align:center; padding:24px 0}.muted.slim{padding:6px 0 10px}
.row-item{display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:11px; background:rgba(255,255,255,.035); border:1px solid var(--border); margin-bottom:6px}
.row-item .ic{width:30px; height:30px; object-fit:contain; flex:0 0 auto; border-radius:6px}.row-item .name{flex:1; min-width:0; font-weight:900; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}.row-item .val{color:var(--gold); font-weight:900; font-size:13px; white-space:nowrap}.row-item .sub{color:var(--muted); font-size:11px}.row-item .pos{color:var(--neon); font-weight:900; width:28px; text-align:center}
.sub-tabs{display:flex; gap:5px; margin-bottom:8px}.sub-tabs .tab{flex:1; font-size:12px; padding:7px 8px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 14px; border-radius:11px; border:none; cursor:pointer; font-weight:900; font-size:14px; color:#061026; background:linear-gradient(135deg,var(--neon),var(--neon-2)); box-shadow:0 0 15px rgba(92,242,255,.35); touch-action:manipulation}.btn.neon{background:linear-gradient(135deg,var(--neon),var(--gold))}.btn:hover{transform:translateY(-1px)}.btn:active{transform:scale(.97)}.btn:disabled{filter:grayscale(.6) opacity(.6); cursor:wait}.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--border); box-shadow:none}.btn.ghost.danger{color:var(--danger); border-color:rgba(255,79,109,.45)}.btn.mini{padding:7px 9px; font-size:12px}
.field{display:block; margin:7px 0; font-size:12px; color:var(--muted)}.field input,.field select,.admin-controls input{width:100%; margin-top:4px; padding:9px 10px; border-radius:9px; background:rgba(255,255,255,.055); border:1px solid var(--border); color:#fff; outline:none}.field input:focus,.admin-controls input:focus{border-color:var(--neon)}
.casino{display:flex; flex-direction:column; gap:10px; align-items:stretch}.casino .choices{display:flex; gap:6px}.casino .choices .tab{flex:1}.casino .tab.red{background:rgba(255,79,109,.18); border-color:rgba(255,79,109,.5)}.casino .tab.black{background:rgba(255,255,255,.06)}.casino .tab.green{background:rgba(74,222,128,.18); border-color:rgba(74,222,128,.5)}.casino .result{text-align:center; padding:10px; border-radius:10px; background:rgba(0,0,0,.25); font-weight:900}.casino .result.win{color:var(--ok); text-shadow:0 0 10px rgba(74,222,128,.6)}.casino .result.lose{color:var(--danger)}
.admin-row{flex-wrap:wrap}.admin-controls{display:grid; grid-template-columns:1fr 1fr auto 76px 76px auto auto; gap:5px; width:100%; margin-top:7px}

/* Auth */
.auth-card{width:min(420px,100%); padding:24px; border-radius:18px; display:flex; flex-direction:column; gap:10px}.logo{margin:0; font-size:30px; text-align:center; letter-spacing:0}.logo span{background:linear-gradient(135deg,var(--neon),var(--neon-2),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent}.subtitle{text-align:center; color:var(--muted); margin:0 0 8px}.auth-card label{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted)}.auth-card label.row{flex-direction:row; align-items:center; gap:8px; color:var(--text); font-size:13px}.auth-card input{padding:11px 12px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid var(--border); color:#fff; outline:none; font-size:14px}.auth-card input:focus{border-color:var(--neon)}.alert{padding:9px 12px; border-radius:10px; background:rgba(255,79,109,.15); border:1px solid rgba(255,79,109,.4); color:#ffd1da; font-size:13px}.muted a{color:var(--neon); text-decoration:none}

/* Modal overlay (Top / Casino поверх чата) */
.modal-root{position:fixed; inset:0; z-index:120; background:rgba(2,4,15,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:16px; animation:fadeIn .18s ease}
.modal-root[hidden]{display:none}
.modal-card{width:min(620px,100%); max-height:88dvh; overflow:auto; border-radius:18px; padding:14px; display:flex; flex-direction:column; gap:10px; animation:slideUp .22s ease}
.modal-head{display:flex; justify-content:space-between; align-items:center}
.modal-head h3{margin:0; color:var(--neon); font-size:18px; text-shadow:0 0 10px rgba(92,242,255,.4)}

/* Кнопка выхода — игровой стиль */
.logout-btn{
    margin-top:6px; padding:12px 16px; border-radius:14px; cursor:pointer; text-decoration:none;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-weight:900; font-size:14px; letter-spacing:.5px; color:#fff;
    background:linear-gradient(135deg, #4a0c1f 0%, #b22338 50%, #ff5b75 100%);
    border:1px solid rgba(255,143,160,.55);
    box-shadow:0 0 22px rgba(255,79,109,.35), inset 0 0 14px rgba(255,255,255,.08);
    text-transform:uppercase;
    transition:all .2s ease;
    animation:logoutGlow 2.4s ease-in-out infinite alternate;
}
.logout-btn:hover{transform:translateY(-1px); box-shadow:0 0 30px rgba(255,79,109,.6)}
.logout-btn:active{transform:scale(.97)}
.logout-ico{font-size:18px; filter:drop-shadow(0 0 6px rgba(255,200,200,.7))}
@keyframes logoutGlow{from{box-shadow:0 0 18px rgba(255,79,109,.25)} to{box-shadow:0 0 30px rgba(255,79,109,.55)}}

@media (max-width:480px){
    :root{--rank-icon-size:40px; --rank-icon-size-sm:20px}
    .hud{min-height:130px; padding:7px 8px}
    .chat{top:144px; bottom:62px; padding:3px 6px 4px}
    .nick{font-size:15px}.stars{font-size:13px}
    .chip{font-size:11px; padding:3px 7px}
    .msg{font-size:13px; padding:2px 7px; margin:1px 0}
    .admin-controls{grid-template-columns:1fr 1fr auto;}
    .admin-controls input:nth-of-type(3),.admin-controls input:nth-of-type(4){width:auto}
}
@media (min-width:720px){
    :root{--rank-icon-size:50px; --rank-icon-size-sm:22px}
    .hud{left:12px; right:12px; min-height:138px; padding:10px 12px}
    .composer{left:12px; right:12px; bottom:10px}
    .chat{top:158px; bottom:78px; padding-left:12px; padding-right:12px}
    .msg{font-size:14px}
    .drawer-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* === FIX-PACK: ограничение чата (зачёркивание сообщений мутнутых) === */
.msg.muted-msg .body, .msg.muted-msg .nk{
    text-decoration: line-through;
    opacity: .65;
}
.msg .rk{ opacity:.75; font-size:.85em; margin-right:2px }
.msg .pm-to{ font-weight:600 }
.modal-body p{ margin:6px 0 }
.msg.banned-msg .body, .msg.banned-msg .nk{ text-decoration: line-through; opacity: .5; color:#ff8a8a }
.msg .ico.pm-rank{ width:16px;height:16px;vertical-align:middle;margin:0 3px;cursor:pointer }
.msg .nk[data-profile], .msg .ico[data-profile]{ cursor:pointer }
.row-item.me{ background:rgba(120,200,255,.08); border-left:3px solid #6ab7ff }
.row-item .pos{ display:inline-block;min-width:22px;text-align:center;font-weight:700;color:#9fd9ff }
.sub-tabs .tab{ display:inline-block;padding:6px 10px;margin-right:6px;border-radius:10px;background:#1a2233;color:#cfe1ff;text-decoration:none;font-size:13px }
.sub-tabs .tab.active{ background:#2a3d5f;color:#fff }