:root{
  --bg:#0a0a14;--panel:#12121f;--border:rgba(255,255,255,.08);
  --gold:#C8973A;--silver:#9AA4B8;--moon:#E8DCC8;
  --crimson:#DC143C;--night:#110d1e;
  --font:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --kb-offset:0px;
  /* Nền cả game: public/images/game-bg.png — đổi url nếu thay file */
  --game-bg-image:url('/images/game-bg.png');
  --game-bg-overlay:rgba(10,10,20,0.78);
  --game-bg-overlay-night:rgba(17,13,30,0.88);
  /* Glass / frosted panels (lobby + phòng chờ) */
  --glass-blur:14px;
  --glass-panel:rgba(18,18,31,.58);
  --glass-panel-chat:rgba(5,7,16,.72);
  --glass-border:rgba(255,255,255,.12);
  --glass-room-hd:rgba(8,10,20,.62);
  /* Con trỏ tùy chỉnh: ảnh ≤128×128, hotspot dùng số tuyệt đối (var() không ổn định trong cursor:) */
  }
  *{
    box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;
    -webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;
  }
  html,body{height:100%;min-height:-webkit-fill-available;}
  body{
    background-color:var(--bg);
    background-image:linear-gradient(var(--game-bg-overlay),var(--game-bg-overlay)),var(--game-bg-image);
    background-size:auto,cover;
    background-position:center center,center center;
    background-repeat:no-repeat,no-repeat;
    background-attachment:scroll,scroll;
    color:var(--moon);font-family:var(--font);min-height:100%;overflow-x:hidden;-webkit-font-smoothing:antialiased;
    padding-bottom:var(--safe-bottom);
  }
  body.game-lock{overflow:hidden;overscroll-behavior:none;}
  body.night-bg{
    background-color:var(--night);
    background-image:linear-gradient(var(--game-bg-overlay-night),var(--game-bg-overlay-night)),var(--game-bg-image);
    background-size:auto,cover;
    background-position:center center,center center;
    background-repeat:no-repeat,no-repeat;
  }
  button,input,select,textarea{
    font-family:var(--font);
    -webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;
  }
  /* Mọi ô chat (phòng chờ, dock kênh, chat làng .game-bottom, chat sau ván): bôi đen / Ctrl+A */
  .chat-input-row input:not([type="checkbox"]):not([type="radio"]),
  .chat-input-row textarea,
  .game-bottom input.chat-inp,
  input.chat-inp,
  textarea.chat-inp{
    -webkit-user-select:text!important;
    user-select:text!important;
    -webkit-touch-callout:default;
  }
  
  .screen{display:none;min-height:100vh;min-height:100dvh;}
  .screen.active{display:flex;flex-direction:column;align-items:center;}
  
  /* ===== LOBBY ===== */
  #scr-lobby{justify-content:center;padding:24px 20px;background:radial-gradient(ellipse at 50% 16%,rgba(200,151,58,.13) 0%,transparent 56%);}
  .moon-svg{width:84px;height:84px;margin-bottom:8px;filter:drop-shadow(0 0 10px rgba(255,220,140,.6)) drop-shadow(0 0 26px rgba(230,190,90,.55)) drop-shadow(0 0 42px rgba(200,151,58,.42));animation:moonPulse 2.8s ease-in-out infinite;}
  @keyframes moonPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 10px rgba(255,220,140,.6)) drop-shadow(0 0 26px rgba(230,190,90,.55)) drop-shadow(0 0 42px rgba(200,151,58,.42));}50%{transform:scale(1.05);filter:drop-shadow(0 0 14px rgba(255,235,170,.72)) drop-shadow(0 0 34px rgba(235,200,110,.68)) drop-shadow(0 0 56px rgba(210,165,70,.56));}}
  .title{font-size:clamp(32px,9vw,54px);letter-spacing:.28em;color:var(--gold);font-weight:800;text-shadow:0 0 32px rgba(200,151,58,.45);margin-bottom:2px;}
  .subtitle{font-size:12px;color:var(--silver);letter-spacing:.22em;margin-bottom:26px;font-weight:600;}
  #scr-lobby .subtitle{margin-bottom:12px;}
  #scr-lobby .lobby-quick-links{display:flex;gap:10px;width:100%;max-width:420px;margin:0 auto 22px;padding:0 2px;justify-content:center;align-items:stretch;}
  #scr-lobby .lobby-cta-btn{flex:1;min-width:0;position:relative;border:none;border-radius:12px;padding:11px 10px;font-size:12px;font-weight:800;letter-spacing:.06em;cursor:pointer;overflow:hidden;transition:transform .18s ease,box-shadow .2s ease,filter .2s ease;-webkit-appearance:none;appearance:none;}
  #scr-lobby .lobby-cta-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.14) 45%,transparent 70%);transform:translateX(-120%);transition:transform .55s ease;}
  #scr-lobby .lobby-cta-btn:hover::before{transform:translateX(120%);}
  #scr-lobby .lobby-cta-btn:hover{transform:translateY(-2px);filter:brightness(1.06);}
  #scr-lobby .lobby-cta-btn:active{transform:translateY(0) scale(.98);}
  #scr-lobby .lobby-cta-rules{
    color:#fff;
    background:linear-gradient(145deg,rgba(200,151,58,.32),rgba(90,40,20,.72));
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 0 0 1px rgba(255,210,140,.35),0 4px 18px rgba(200,151,58,.28),0 0 28px rgba(200,151,58,.2);
    animation:lobbyCtaGlowGold 2.6s ease-in-out infinite;
  }
  #scr-lobby .lobby-cta-changelog{
    color:#eaf6ff;
    background:linear-gradient(145deg,rgba(100,180,255,.2),rgba(30,45,90,.65));
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 0 0 1px rgba(140,200,255,.4),0 4px 18px rgba(80,140,220,.3),0 0 32px rgba(100,170,255,.22);
    animation:lobbyCtaGlowBlue 2.8s ease-in-out infinite;
  }
  @keyframes lobbyCtaGlowGold{0%,100%{box-shadow:0 0 0 1px rgba(255,210,140,.35),0 4px 18px rgba(200,151,58,.28),0 0 28px rgba(200,151,58,.2);}50%{box-shadow:0 0 0 1px rgba(255,230,170,.55),0 6px 22px rgba(200,151,58,.42),0 0 40px rgba(255,200,100,.35);}}
  @keyframes lobbyCtaGlowBlue{0%,100%{box-shadow:0 0 0 1px rgba(140,200,255,.4),0 4px 18px rgba(80,140,220,.3),0 0 32px rgba(100,170,255,.22);}50%{box-shadow:0 0 0 1px rgba(180,220,255,.6),0 6px 24px rgba(100,170,255,.45),0 0 44px rgba(120,190,255,.38);}}
  @media (prefers-reduced-motion:reduce){
    #scr-lobby .lobby-cta-rules,#scr-lobby .lobby-cta-changelog{animation:none;}
    #scr-lobby .lobby-cta-btn::before{display:none;}
  }
  .card{
    background:var(--glass-panel);
    backdrop-filter:blur(var(--glass-blur));
    -webkit-backdrop-filter:blur(var(--glass-blur));
    border:1px solid var(--glass-border);
    border-radius:18px;padding:28px 22px;width:100%;max-width:420px;
    box-shadow:0 12px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
  }
  .card h2{font-size:15px;color:var(--gold);letter-spacing:.06em;margin-bottom:18px;text-align:center;font-weight:700;}
  .ig{margin-bottom:13px;}
  .lbl{display:block;font-size:10px;color:var(--silver);letter-spacing:.12em;margin-bottom:5px;font-weight:700;}
  .inp{width:100%;background:rgba(0,0,0,.5);border:1px solid var(--border);border-radius:9px;padding:13px 15px;color:var(--moon);font-size:16px;outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none;}
  .inp:focus{border-color:rgba(200,151,58,.55);}
  .inp-code{text-transform:uppercase;letter-spacing:.32em;text-align:center;font-size:22px;font-weight:800;}
  .btn-p{
    width:100%;
    background:linear-gradient(135deg,rgba(139,0,0,.88),rgba(196,30,58,.88));
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.14);
    border-radius:11px;padding:14px;color:#fff;font-size:15px;font-weight:700;
    cursor:pointer;transition:opacity .2s,box-shadow .2s,transform .15s;margin-bottom:10px;
    -webkit-appearance:none;appearance:none;
    box-shadow:0 4px 22px rgba(196,30,58,.35),inset 0 1px 0 rgba(255,255,255,.12);
  }
  .btn-p:hover{opacity:.92;box-shadow:0 6px 28px rgba(196,30,58,.45),inset 0 1px 0 rgba(255,255,255,.15);}
  .btn-p:active{opacity:.82;transform:scale(.992);}
  .btn-p:disabled{opacity:.35;cursor:not-allowed;}
  .btn-s{
    width:100%;
    background:rgba(200,151,58,.14);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(200,151,58,.38);
    border-radius:11px;padding:12px;color:var(--gold);font-size:14px;font-weight:600;
    cursor:pointer;transition:background .2s,box-shadow .2s,transform .15s;margin-bottom:10px;
    -webkit-appearance:none;appearance:none;
    box-shadow:0 4px 18px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.06);
  }
  .btn-s:hover,.btn-s:active{background:rgba(200,151,58,.26);box-shadow:0 6px 22px rgba(200,151,58,.18);}
  .divider{text-align:center;color:var(--silver);font-size:11px;margin:10px 0;position:relative;font-weight:500;}
  .divider::before,.divider::after{content:'';position:absolute;top:50%;width:36%;height:1px;background:var(--border);}
  .divider::before{left:0;}.divider::after{right:0;}
  .hint{font-size:11px;color:var(--silver);text-align:center;margin-top:18px;max-width:340px;line-height:1.8;opacity:.6;}
  
  .avatar-choices{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
  .avatar-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:rgba(0,0,0,.5);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;}
  .avatar-btn.sel{border-color:rgba(200,151,58,.7);background:rgba(200,151,58,.18);transform:translateY(-1px);}
  .avatar-btn:active{transform:scale(.94);}
  .avatar-btn:disabled{opacity:.3;cursor:not-allowed;}
  .open-rooms-wrap{
    margin-top:10px;padding:10px;border:1px solid rgba(200,151,58,.28);
    border-radius:10px;
    background:rgba(0,0,0,.28);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
  .open-rooms-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
  .open-rooms-list{display:grid;gap:8px;max-height:220px;overflow:auto;padding-right:2px;}
  .open-room-card{border:1px solid var(--border);border-radius:10px;padding:8px;background:rgba(255,255,255,.02);}
  .open-room-row{display:flex;justify-content:space-between;align-items:center;gap:10px;}
  .open-room-meta{font-size:10px;color:var(--silver);margin-top:4px;}
  .open-room-status{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;border:1px solid rgba(200,151,58,.3);color:var(--gold);background:rgba(200,151,58,.12);}
  .open-room-status.in-game{color:#ff9b9b;border-color:rgba(255,120,120,.35);background:rgba(255,120,120,.12);}
  .join-req-list{display:grid;gap:8px;max-height:300px;overflow:auto;margin-top:10px;}
  .join-req-item{border:1px solid var(--border);border-radius:10px;padding:10px;background:rgba(255,255,255,.03);}
  .join-req-name{font-size:14px;font-weight:700;color:var(--moon);}
  .join-req-sub{font-size:11px;color:var(--silver);margin-top:3px;}
  .join-req-actions{display:flex;gap:8px;margin-top:8px;}
  .join-req-empty{font-size:12px;color:var(--silver);text-align:center;padding:10px 6px;}
  .social-player-list{display:grid;gap:8px;max-height:56vh;overflow:auto;margin-top:10px;padding-right:2px;}
  .social-player-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--border);border-radius:10px;padding:9px;background:rgba(255,255,255,.03);}
  .social-player-meta{min-width:0;display:grid;gap:2px;}
  .social-player-name{font-size:13px;font-weight:700;color:var(--moon);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .social-player-sub{font-size:10px;color:var(--silver);}
  .social-player-status{font-size:10px;font-weight:800;letter-spacing:.03em;padding:2px 7px;border-radius:999px;border:1px solid rgba(200,151,58,.35);color:var(--gold);background:rgba(200,151,58,.1);}
  .social-player-status.online{color:#93E6AA;border-color:rgba(80,220,120,.45);background:rgba(80,220,120,.12);}
  .social-player-status.in-game{color:#9EC8FF;border-color:rgba(100,170,255,.45);background:rgba(100,170,255,.14);}
  .social-player-row.offline{opacity:.48;}
  .social-player-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
  .social-player-empty{font-size:12px;color:var(--silver);text-align:center;padding:12px 6px;}
  
  
  /* ===== ROOM ===== */
  #scr-room{justify-content:flex-start;padding:0;height:var(--vvh,100dvh);overflow:hidden;position:relative;isolation:isolate;}
  .room-hd{
    width:100%;display:flex;justify-content:space-between;align-items:center;
    padding:5px 14px;
    background:var(--glass-room-hd);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--glass-border);
    flex-shrink:0;gap:8px;min-height:42px;
    box-shadow:0 4px 20px rgba(0,0,0,.2);
    position:relative;
    z-index:320;
  }
  .room-hd-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}
  .room-top-social-btn{width:fit-content;flex:0 0 auto;margin-bottom:0;padding:5px 10px;font-size:11px;border-radius:7px;white-space:nowrap;}
  .room-hd-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:190px;flex-shrink:0;}
  .room-hd-right{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;justify-content:flex-end;flex:1;min-width:0;}
  .room-mobile-menu-btn{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1px solid rgba(200,151,58,.35);background:rgba(200,151,58,.12);color:var(--gold);font-size:18px;cursor:pointer;flex-shrink:0;transition:transform .18s ease,background .2s ease,box-shadow .2s ease;}
  .room-mobile-menu{
    display:none;position:fixed;right:10px;top:calc(44px + env(safe-area-inset-top,0px));z-index:1200;min-width:210px;
    background:rgba(10,12,22,.78);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(200,151,58,.35);border-radius:12px;padding:8px;
    box-shadow:0 12px 36px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.05);
    flex-direction:column;gap:6px;
  }
  .room-mobile-menu .btn-s{width:100%;text-align:left;padding:8px 10px;font-size:12px;border-radius:8px;}
  .room-mobile-code{padding:6px 10px;border:1px dashed rgba(200,151,58,.4);border-radius:8px;font-size:11px;color:var(--silver);}
  .room-mobile-code b{color:var(--gold);letter-spacing:.12em;}
  .code-lbl{font-size:8px;color:var(--silver);letter-spacing:.12em;font-weight:700;display:block;margin-bottom:1px;}
  .code-val{font-size:17px;letter-spacing:.24em;color:var(--gold);font-weight:800;cursor:pointer;line-height:1.1;}
  .btn-sm{padding:5px 10px;font-size:11px;border-radius:7px;white-space:nowrap;}
  
  /* ── LAYOUT: 2 cột, 2 hàng ──
     [TL: người chơi] [TR: cài đặt ]
     [BL: chat      ] [BR: 3 phe   ]
  */
  .room-body{
    display:grid;
    grid-template-columns:minmax(180px,36%) 1fr;
    grid-template-rows:minmax(140px,40%) 1fr;
    grid-template-areas:'players config' 'chat roles';
    gap:7px;padding:7px;
    width:100%;height:calc(var(--vvh,100dvh) - 42px);
    overflow:hidden;
  }
  
  /* ── PLAYERS (đỏ — top-left) ── */
  .players-area{
    grid-area:players;min-height:0;
    display:flex;flex-direction:column;overflow:hidden;gap:5px;
    background:var(--glass-panel);
    backdrop-filter:blur(var(--glass-blur));
    -webkit-backdrop-filter:blur(var(--glass-blur));
    border:1px solid var(--glass-border);
    border-radius:12px;
    padding:8px 10px;
    box-shadow:0 8px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);
  }
  .players-area-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
  .players-area h2{font-size:11px;color:var(--silver);letter-spacing:.08em;font-weight:700;margin:0;}
  #room-grid{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;}
  .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px;}
  .pcard{
    background:rgba(0,0,0,.25);border:1.5px solid var(--border);border-radius:12px;
    padding:10px 12px;display:flex;flex-direction:row;align-items:center;gap:12px;
    transition:border-color .2s,box-shadow .2s;min-height:64px;
  }
  .pcard.host{border-color:rgba(200,151,58,.65);box-shadow:0 0 0 1px rgba(200,151,58,.15);}
  .pcard.me{border-color:rgba(120,80,220,.75);box-shadow:0 0 0 1px rgba(120,80,220,.2);}
  .pcard.player-prestige-1,.gp.player-prestige-1{
    background:linear-gradient(180deg,rgba(120,88,8,.42),rgba(54,38,8,.76));
    border-color:rgba(255,214,102,.78);
    box-shadow:0 0 0 1px rgba(255,220,120,.18) inset,0 0 16px rgba(255,205,70,.42);
  }
  .pcard.player-prestige-2,.gp.player-prestige-2{
    background:linear-gradient(180deg,rgba(120,126,142,.34),rgba(46,52,66,.78));
    border-color:rgba(220,228,244,.78);
    box-shadow:0 0 0 1px rgba(235,240,255,.14) inset,0 0 16px rgba(196,208,236,.34);
  }
  .pcard.player-prestige-3,.gp.player-prestige-3{
    background:linear-gradient(180deg,rgba(130,76,36,.38),rgba(62,34,18,.78));
    border-color:rgba(214,148,104,.82);
    box-shadow:0 0 0 1px rgba(236,180,140,.14) inset,0 0 16px rgba(204,124,78,.34);
  }
  .pavatar-box{
    width:48px;height:48px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15);
    position:relative;flex-shrink:0;cursor:pointer;
    transition:transform .15s ease,filter .15s ease,border-color .15s ease;
  }
  .pavatar-box:hover{transform:scale(1.05);filter:drop-shadow(0 0 8px rgba(200,151,58,.5));border-color:rgba(200,151,58,.6);}
  .pavatar{font-size:28px;line-height:1;display:inline-block;}
  .pavatar-box.self{cursor:pointer;transition:transform .12s ease,filter .12s ease;}
  .pavatar-box.self:hover{transform:translateY(-1px);filter:drop-shadow(0 0 6px rgba(200,151,58,.4));}
  .avatar-edit-dot{position:absolute;right:-5px;bottom:-5px;width:14px;height:14px;border-radius:50%;background:rgba(200,151,58,.95);color:#0b0b12;font-size:9px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.35);}
  .pcard-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
  .pname{font-size:14px;color:var(--moon);word-break:break-word;font-weight:700;line-height:1.3;}
  .pbadge{font-size:10px;color:var(--silver);line-height:1.3;}
  .pcard-actions{display:flex;gap:6px;align-items:center;flex-shrink:0;}
  .pcard-action-btn{
    padding:6px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.08);color:var(--moon);font-size:11px;font-weight:600;
    cursor:pointer;transition:background .15s ease,border-color .15s ease;white-space:nowrap;
  }
  .pcard-action-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);}
  .pcard-action-btn:active{background:rgba(255,255,255,.15);}
  .kick-btn{position:absolute;top:-5px;right:-5px;width:15px;height:15px;border:none;border-radius:50%;background:rgba(255,68,68,.9);color:#fff;font-size:9px;line-height:15px;padding:0;cursor:pointer;}
  .kick-btn:hover{background:#ff4d4d;}
  .host-transfer-btn{border:none;background:rgba(200,151,58,.92);color:#0b0b12;width:18px;height:18px;border-radius:50%;font-size:12px;line-height:18px;padding:0;cursor:pointer;margin-left:6px;vertical-align:middle;transform:translateY(1px);}
  .host-transfer-btn:hover{background:rgba(200,151,58,1);}
  .avatar-hint-row{flex-shrink:0;font-size:10px;color:rgba(154,164,184,.45);padding:2px 0;}
  
  /* ── CHAT (vàng — bottom-left) ── */
  .room-chat-area{
    grid-area:chat;min-height:0;overflow:hidden;
    display:flex;flex-direction:column;
    background:var(--glass-panel-chat);
    backdrop-filter:blur(var(--glass-blur));
    -webkit-backdrop-filter:blur(var(--glass-blur));
    border:1px solid rgba(200,151,58,.3);border-radius:12px;
    box-shadow:0 8px 28px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04);
  }
  .room-chat-area-hd{
    display:flex;align-items:center;justify-content:space-between;
    padding:5px 11px;
    background:rgba(200,151,58,.07);
    border-bottom:1px solid rgba(200,151,58,.15);
    flex-shrink:0;user-select:none;
  }
  .room-chat-area-hd span{font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.04em;}
  .room-chat-area-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:7px 10px 0 10px;gap:5px;}
  .room-chat-area .chat-scroll{flex:1;min-height:0;height:100%;max-height:none;overflow-y:auto;font-size:12px;line-height:1.5;margin-top:0;}
  .room-chat-area .chat-input-row{display:flex;gap:5px;align-items:center;flex-shrink:0;margin-top:6px;padding:6px 0 7px 0;background:linear-gradient(180deg,rgba(5,7,16,0),rgba(5,7,16,.96) 32%);}
  .room-chat-area .chat-inp{flex:1;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--moon);font-size:12px;padding:6px 10px;outline:none;}
  .room-chat-area .chat-inp:focus{border-color:rgba(200,151,58,.5);}
  .room-chat-area .send-btn{
    padding:6px 13px;font-size:12px;border-radius:8px;
    border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(135deg,rgba(139,0,0,.88),rgba(196,30,58,.88));
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:#fff;cursor:pointer;font-weight:700;white-space:nowrap;
    box-shadow:0 3px 14px rgba(196,30,58,.35);
  }
  .room-chat-fab{display:none;position:fixed;right:12px;bottom:calc(12px + var(--safe-bottom));width:54px;height:54px;border-radius:999px;border:1px solid rgba(200,151,58,.45);background:linear-gradient(135deg,rgba(139,0,0,.95),rgba(196,30,58,.95));color:#fff;font-size:22px;cursor:pointer;z-index:260;box-shadow:0 8px 26px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08) inset;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;}
  /* Legacy floating HUD — đã thay bằng grid cell */
  .room-chat-hud{display:none!important;}
  .room-chat-fixed{display:none!important;}
  #room-chat-inp{font-size:12px;}
  
  /* ── CONFIG (top-right) ── */
  .cfg-panel{
    grid-area:config;min-height:0;
    overflow-y:auto;overflow-x:hidden;
    background:var(--glass-panel);
    backdrop-filter:blur(var(--glass-blur));
    -webkit-backdrop-filter:blur(var(--glass-blur));
    border:1px solid var(--glass-border);border-radius:12px;
    padding:10px 13px;display:flex;flex-direction:column;gap:8px;
    -webkit-overflow-scrolling:touch;
    box-shadow:0 8px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);
  }
  .cfg-panel h3{font-size:12px;color:var(--gold);letter-spacing:.04em;font-weight:700;flex-shrink:0;margin:0;}
  .cfg-inner{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;}
  .cfg-left{flex:2;min-width:200px;} .cfg-right{flex:1;min-width:160px;}
  .cfg-right .role-item{cursor:default;}
  .cfg-nonhost .cfg-right{display:none;}
  .cfg-nonhost .rcnt{display:none;}
  .role-item{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;margin-bottom:5px;border:1px solid var(--border);border-radius:9px;cursor:pointer;transition:background .2s;}
  .role-item:hover,.role-item:active{background:rgba(200,151,58,.08);}
  .rname{font-size:12px;color:var(--moon);font-weight:500;}
  .rcnt{display:flex;align-items:center;gap:8px;}
  .cbtn{background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:6px;color:var(--moon);width:26px;height:26px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;font-weight:700;-webkit-appearance:none;appearance:none;}
  .cbtn:active{background:rgba(255,255,255,.22);}
  .start-btn{
    width:100%;
    background:linear-gradient(135deg,rgba(139,0,0,.9),rgba(196,30,58,.9));
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;padding:11px;color:#fff;font-size:14px;font-weight:700;
    cursor:pointer;-webkit-appearance:none;appearance:none;flex-shrink:0;
    box-shadow:0 4px 20px rgba(196,30,58,.35),inset 0 1px 0 rgba(255,255,255,.1);
  }
  .start-btn:disabled{opacity:.35;cursor:not-allowed;}
  #start-msg{font-size:11px;color:var(--silver);text-align:center;}
  .start-btn-topbar{width:auto;min-width:180px;padding:8px 18px;border-radius:999px;font-size:13px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 4px 16px rgba(196,30,58,.35);}
  #start-msg.topbar-msg{font-size:10px;line-height:1.2;color:rgba(232,220,200,.75);}
  .time-select{background:rgba(10,10,20,.9);border:1px solid rgba(200,151,58,.3);border-radius:7px;color:var(--gold);font-size:12px;font-weight:600;padding:4px 8px;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;}
  .role-cols{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;}
  .role-col{flex:1;min-width:140px;}
  .role-col-hd{font-size:10px;color:var(--silver);letter-spacing:.12em;margin-bottom:5px;font-weight:700;}
  .balance-box{padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid rgba(200,151,58,.2);font-size:11px;color:var(--silver);}
  .balance-title{font-size:11px;font-weight:700;color:var(--gold);margin-bottom:6px;text-align:center;}
  .balance-bar-container{
    position:relative;
    width:100%;
    height:28px;
    border-radius:14px;
    overflow:hidden;
    background:linear-gradient(90deg,#b91c1c 0%,#ef4444 25%,#a78bfa 50%,#60a5fa 75%,#2563eb 100%);
    box-shadow:0 0 12px rgba(167,139,250,.5),0 0 24px rgba(239,68,68,.25),inset 0 1px 2px rgba(255,255,255,.15);
    margin:4px 0 8px;
  }
  .balance-bar-pointer{
    position:absolute;
    top:2px;
    bottom:2px;
    width:4px;
    border-radius:2px;
    background:#fff;
    box-shadow:0 0 6px rgba(255,255,255,.9),0 0 12px rgba(255,255,255,.5);
    transform:translateX(-50%);
    transition:left .4s ease;
  }
  .balance-bar-labels{
    display:flex;
    justify-content:space-between;
    font-size:10px;
    color:rgba(255,255,255,.65);
    font-weight:600;
    margin-top:2px;
  }
  .balance-bar-labels .left{color:#fca5a5;}
  .balance-bar-labels .center{color:#c4b5fd;}
  .balance-bar-labels .right{color:#93c5fd;}
  .balance-summary-text{
    margin-top:6px;
    font-size:12px;
    font-weight:700;
    text-align:center;
    transition:color .3s ease;
  }
  .balance-summary-text.good{color:#88FF88;}
  .balance-summary-text.wolf{color:#FF6060;}
  .balance-summary-text.village{color:#64B4FF;}
  .cfg-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
  .cfg-role-btn{width:100%;padding:9px 12px;font-size:12px;}
  .cfg-open-roles-btn{display:none;width:100%;padding:9px 12px;font-size:12px;margin-top:6px;}
  .cfg-role-summary{padding:7px 10px;border:1px solid rgba(200,151,58,.22);border-radius:9px;background:rgba(0,0,0,.25);font-size:11px;color:var(--silver);}
  .cfg-role-summary b{color:var(--gold);}
  
  /* ── 3-TEAM ROLES DISPLAY (xanh — bottom-right) ── */
  .room-roles-area{
    grid-area:roles;min-height:0;overflow:hidden;
    display:flex;flex-direction:column;gap:6px;
    background:var(--glass-panel);
    backdrop-filter:blur(var(--glass-blur));
    -webkit-backdrop-filter:blur(var(--glass-blur));
    border:1px solid var(--glass-border);border-radius:12px;
    padding:8px 10px;
    box-shadow:0 8px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);
  }
  .room-roles-hd{
    display:flex;align-items:center;justify-content:space-between;
    flex-shrink:0;
  }
  .room-roles-hd-title{font-size:11px;color:var(--silver);font-weight:700;letter-spacing:.07em;}
  .room-roles-cols{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
    flex:1;min-height:0;overflow:hidden;
  }
  .room-roles-col{display:flex;flex-direction:column;gap:5px;min-height:0;overflow:hidden;}
  .room-roles-col-hd{
    font-size:10px;font-weight:800;letter-spacing:.07em;
    padding:4px 8px;border-radius:7px;flex-shrink:0;text-align:center;
  }
  .room-roles-col-hd.village{background:rgba(100,180,255,.1);color:#64B4FF;border:1px solid rgba(100,180,255,.22);}
  .room-roles-col-hd.wolf{background:rgba(255,60,60,.1);color:#FF6060;border:1px solid rgba(255,60,60,.22);}
  .room-roles-col-hd.none{background:rgba(160,150,200,.08);color:#AAA8CC;border:1px solid rgba(160,150,200,.2);}
  .room-roles-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;}
  /* Card vai trò trong phòng chờ — bấm được */
  .room-role-card{
    display:flex;align-items:center;gap:7px;
    padding:6px 8px;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
    border-radius:9px;cursor:pointer;text-align:left;
    transition:background .15s,border-color .15s,transform .1s;flex-shrink:0;
  }
  .room-role-card:hover{background:rgba(255,255,255,.09);border-color:rgba(200,151,58,.38);transform:translateY(-1px);}
  .room-role-card-icon{font-size:19px;flex-shrink:0;line-height:1;}
  .room-role-card-info{min-width:0;flex:1;}
  .room-role-card-name{font-size:11px;font-weight:700;color:var(--moon);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .room-role-card-ability{font-size:9.5px;color:var(--silver);line-height:1.35;margin-top:1px;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .room-role-card-cnt{font-size:11px;font-weight:800;color:var(--gold);flex-shrink:0;}
  .room-roles-empty{font-size:11px;color:rgba(154,164,184,.3);text-align:center;padding:14px 4px;font-style:italic;}
  .room-roles-modal-body{max-height:70dvh;overflow-y:auto;}
  
  /* ── ROLE SETTINGS MODAL (giữ nguyên) ── */
  .role-settings-bg{padding:0;}
  .role-settings-modal{
    width:100%;height:100dvh;
    background:linear-gradient(180deg,rgba(12,12,22,.99),rgba(7,7,14,.99));
    border:none;border-radius:0;max-width:none;max-height:none;
    overflow:hidden;display:flex;flex-direction:column;padding:0;
  }
  .role-settings-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 16px;border-bottom:1px solid var(--border);
    background:rgba(0,0,0,.4);flex-shrink:0;
  }
  .role-settings-title{font-size:14px;font-weight:800;letter-spacing:.06em;color:var(--gold);}
  .role-settings-body{
    flex:1;min-height:0;overflow:hidden;display:grid;
    grid-template-columns:1fr minmax(240px,.55fr);gap:0;position:relative;
  }
  .role-settings-body > div:first-child{position:relative;min-height:0;overflow:hidden;border-right:1px solid rgba(255,255,255,.07);}
  .role-settings-pane{
    position:absolute;inset:0;overflow:auto;padding:14px 16px;
    -webkit-overflow-scrolling:touch;
    transition:transform .3s cubic-bezier(.22,.8,.22,1),opacity .25s ease;
    will-change:transform,opacity;
  }
  .role-settings-modal[data-role-view="home"] #role-settings-home{transform:translateX(0);opacity:1;pointer-events:auto;}
  .role-settings-modal[data-role-view="home"] #role-settings-team-view{transform:translateX(8%);opacity:0;pointer-events:none;}
  .role-settings-modal[data-role-view="team"] #role-settings-home{transform:translateX(-8%);opacity:0;pointer-events:none;}
  .role-settings-modal[data-role-view="team"] #role-settings-team-view{transform:translateX(0);opacity:1;pointer-events:auto;}
  .role-team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px;}
  .role-team-btn{border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.03);padding:16px 12px;cursor:pointer;transition:transform .16s,background .16s,border-color .16s;text-align:left;}
  .role-team-btn:hover{transform:translateY(-1px);background:rgba(200,151,58,.12);border-color:rgba(200,151,58,.38);}
  .role-team-btn .k1{font-size:13px;font-weight:800;color:#fff;}
  .role-team-btn .k2{font-size:11px;color:var(--silver);margin-top:4px;}
  .role-team-btn.wolf{background:rgba(220,20,60,.1);border-color:rgba(220,20,60,.3);}
  .role-team-btn.none{background:rgba(120,90,200,.1);border-color:rgba(140,120,220,.28);}
  .role-team-list{display:grid;gap:8px;margin-top:10px;}
  .role-team-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.03);}
  .role-team-row .meta{display:flex;align-items:center;gap:8px;min-width:0;cursor:pointer;}
  .role-team-row .meta .nm{font-size:13px;font-weight:700;color:var(--moon);}
  .role-team-row .meta .ds{font-size:10px;color:var(--silver);}
  .role-team-row .ctrl{display:flex;align-items:center;gap:8px;}
  .role-team-row .cnt{min-width:16px;text-align:center;font-weight:800;color:var(--gold);}
  .role-team-row .role-villager-hint{opacity:.78;font-weight:500;}
  .role-team-row.readonly .ctrl{display:none;}
  .role-team-row.role-disabled{opacity:0.45;}
  .role-checkbox{width:18px;height:18px;cursor:pointer;accent-color:#C8973A;border-radius:4px;}
  .role-settings-modal.readonly .role-picked-wrap{display:none;}
  .role-settings-modal.readonly .role-settings-body{grid-template-columns:1fr;}
  .role-settings-modal.readonly .role-settings-body > div:first-child{border-right:none;}
  .role-picked-wrap{
    display:flex;flex-direction:column;
    background:rgba(0,0,0,.35);border-left:1px solid rgba(200,151,58,.15);
    overflow:hidden;min-height:0;
  }
  .role-picked-top-row{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:10px 12px 8px;border-bottom:1px solid rgba(200,151,58,.15);flex-shrink:0;
  }
  .role-picked-title{font-size:11px;color:var(--gold);font-weight:800;letter-spacing:.06em;}
  .role-picked-count{font-size:10px;color:var(--silver);}
  .role-picked-list{
    flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;
    padding:8px 10px;-webkit-overflow-scrolling:touch;
  }
  .role-picked-card{
    background:rgba(255,255,255,.04);border:1px solid rgba(200,151,58,.18);border-radius:10px;
    padding:9px 10px;cursor:pointer;transition:background .15s,border-color .15s,transform .12s;
    text-align:left;width:100%;
  }
  .role-picked-card:hover{background:rgba(200,151,58,.1);border-color:rgba(200,151,58,.42);transform:translateX(2px);}
  .role-picked-card-header{display:flex;align-items:center;gap:7px;margin-bottom:4px;}
  .role-picked-card-icon{font-size:18px;line-height:1;flex-shrink:0;}
  .role-picked-card-name{font-size:12px;font-weight:800;color:var(--moon);}
  .role-picked-card-team{font-size:10px;color:var(--silver);margin-top:1px;}
  .role-picked-card-ability{font-size:10px;color:rgba(200,151,58,.8);line-height:1.45;margin-top:3px;}
  .role-picked-chip{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid rgba(200,151,58,.3);background:rgba(200,151,58,.12);color:var(--moon);}
  .role-picked-empty{font-size:11px;color:rgba(154,164,184,.4);font-style:italic;text-align:center;padding:20px 8px;}
  .role-draft-note{font-size:10px;color:var(--silver);padding:4px 10px;flex-shrink:0;border-top:1px solid rgba(255,255,255,.06);}
  .role-draft-actions{display:flex;gap:8px;justify-content:stretch;padding:8px 10px;flex-shrink:0;border-top:1px solid rgba(255,255,255,.06);}
  .role-draft-actions .mbtn{flex:1;text-align:center;}
  
  @media(max-width:740px){
    .role-settings-body{grid-template-columns:1fr;}
    .role-picked-wrap{max-height:220px;border-left:none;border-top:1px solid rgba(200,151,58,.15);}
    .role-picked-list{flex-direction:row;flex-wrap:wrap;gap:5px;}
    .role-picked-card{padding:6px 8px;min-width:140px;flex:1;}
  }
  @media(max-width:980px){
    #role-settings-modal{align-items:flex-end;}
    #role-settings-modal .role-settings-modal{
      height:min(86dvh,var(--vvh,100dvh));
      border-top-left-radius:16px;
      border-top-right-radius:16px;
    }
    #role-settings-modal .role-settings-body{grid-template-columns:1fr;}
    #role-settings-modal .role-settings-body > div:first-child{border-right:none;}
    #role-settings-modal .role-picked-wrap{display:none;}
  }
  @media(max-width:980px){
    .room-hd{padding:5px 10px;}
    .room-hd-mid{min-width:150px;}
    .start-btn-topbar{min-width:146px;padding:7px 14px;font-size:12px;}
    #start-msg.topbar-msg{display:none;}
    .room-body{
      grid-template-columns:1fr 1fr;
      grid-template-rows:minmax(120px,auto) 1fr minmax(140px,30%);
      grid-template-areas:'players config' 'roles roles' 'chat chat';
      height:calc(var(--vvh,100dvh) - 42px);
      padding:6px;gap:6px;overflow-y:auto;
    }
    .code-val{font-size:15px;letter-spacing:.18em;}
    .pgrid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));}
  }
  @media(max-width:640px){
    .room-body{
      grid-template-columns:1fr;
      grid-template-rows:auto auto 1fr auto;
      grid-template-areas:'players' 'config' 'roles' 'chat';
      height:auto;min-height:calc(var(--vvh,100dvh) - 42px);overflow-y:auto;
    }
    .room-roles-cols{grid-template-columns:1fr;}
    .cfg-quick-grid{grid-template-columns:1fr;}
    .role-team-grid{grid-template-columns:1fr;}
  }
  @media(max-width:760px){
    .mobile-touch #scr-room .room-hd{position:relative;padding:6px 10px;}
    .mobile-touch #scr-room .room-hd-left{gap:8px;}
    .mobile-touch #scr-room .room-hd-left .code-lbl,
    .mobile-touch #scr-room .room-hd-left .code-val{display:none;}
    .mobile-touch #scr-room .room-hd-left .room-top-social-btn{display:none;}
    .mobile-touch #scr-room .room-hd-right{display:none;}
    .mobile-touch #scr-room .room-hd-mid{align-items:flex-end;min-width:0;flex:1;}
    .mobile-touch #scr-room .room-mobile-menu-btn{display:inline-flex;}
    .mobile-touch #scr-room .room-mobile-menu{
      display:flex;
      opacity:0;
      transform:translateY(-8px) scale(.98);
      pointer-events:none;
      transition:opacity .18s ease,transform .22s cubic-bezier(.22,.61,.36,1);
    }
    .mobile-touch #scr-room.room-menu-open .room-mobile-menu{
      opacity:1;
      transform:translateY(0) scale(1);
      pointer-events:auto;
    }
    .mobile-touch #scr-room.room-menu-open .room-mobile-menu-btn{transform:rotate(90deg);background:rgba(200,151,58,.2);box-shadow:0 6px 16px rgba(0,0,0,.35);}
    .mobile-touch #scr-room .room-body{
      grid-template-columns:1fr;
      grid-template-rows:auto auto 1fr;
      grid-template-areas:'players' 'roles' 'config';
      height:auto;min-height:calc(var(--vvh,100dvh) - 42px);overflow-y:auto;
    }
    .mobile-touch #scr-room .room-chat-area{
      position:fixed;
      left:10px;right:10px;
      bottom:calc(74px + var(--safe-bottom) + var(--kb-offset));
      height:min(46dvh,360px);
      z-index:255;
      display:flex;
      opacity:0;
      transform:translateY(10px) scale(.985);
      pointer-events:none;
      box-shadow:0 14px 36px rgba(0,0,0,.6);
      transition:opacity .2s ease,transform .22s cubic-bezier(.22,.61,.36,1);
    }
    .mobile-touch #scr-room.room-chat-open .room-chat-area{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
    .mobile-touch #scr-room .room-chat-fab{display:flex;align-items:center;justify-content:center;}
    .mobile-touch #scr-room.room-chat-open .room-chat-fab{background:linear-gradient(135deg,rgba(90,20,20,.96),rgba(140,34,55,.96));transform:scale(1.04);box-shadow:0 12px 30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12) inset;}
    .mobile-touch #scr-room .room-roles-area{display:none;}
    .mobile-touch #scr-room .cfg-open-roles-btn{display:block;}
    .mobile-touch #room-roles-overview-modal .room-roles-cols{grid-template-columns:1fr;gap:6px;}
    .mobile-touch #room-roles-overview-modal .room-roles-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
    .mobile-touch #room-roles-overview-modal .room-role-card{padding:8px;}
    .mobile-touch #room-roles-overview-modal .room-role-card-ability{display:none;}
    .mobile-touch #room-roles-overview-modal .room-role-card-name{font-size:10px;}
  }
  @media(max-height:680px){
    .room-hd{padding:4px 10px;min-height:36px;}
    .room-hd-mid{min-width:120px;}
    .start-btn-topbar{min-width:118px;padding:6px 10px;font-size:11px;}
    .room-body{gap:5px;padding:5px 7px;height:calc(var(--vvh,100dvh) - 36px);}
    .cfg-panel{padding:6px 10px;}
    .role-item{padding:5px 8px;margin-bottom:3px;}
  }
  
  /* ===== GAME ===== */
  #scr-game{justify-content:flex-start;align-items:stretch;padding:0;padding-bottom:var(--safe-bottom);}
  .game-wrap{display:flex;flex-direction:column;height:var(--vvh,100dvh);max-height:var(--vvh,100dvh);}
  
  /* Phase banner */
  .phase-banner{position:relative;display:flex;align-items:center;gap:10px;padding:10px 14px;transition:background .5s;flex-shrink:0;overflow:hidden;justify-content:space-between;flex-wrap:wrap;}
  .phase-banner.night{background:linear-gradient(90deg,rgba(10,6,26,.98),rgba(28,10,46,.96));}
  .phase-banner.day{background:linear-gradient(90deg,rgba(46,32,10,.97),rgba(70,44,10,.97));}
  .phase-banner.vote{background:linear-gradient(90deg,rgba(28,8,16,.95),rgba(60,16,28,.95));}
  .phase-banner::before,.phase-banner::after{content:'';position:absolute;inset:0;pointer-events:none;}
  .phase-banner.night::before{background:
  radial-gradient(circle at 12% 26%,rgba(240,230,180,.45) 0,rgba(240,230,180,.06) 26%,transparent 52%),
  radial-gradient(circle at 80% 18%,rgba(255,255,255,.55) 0,transparent 30%);}
  .phase-banner.night::after{background:
  radial-gradient(circle at 20% 80%,rgba(180,160,255,.45) 0,transparent 46%),
  radial-gradient(circle at 78% 68%,rgba(180,140,255,.38) 0,transparent 40%);
  opacity:.55;mix-blend-mode:screen;animation:nightGlow 16s ease-in-out infinite alternate;}
  .phase-banner.day::before{background:
  radial-gradient(circle at 10% 18%,rgba(255,240,200,.95) 0,rgba(255,240,200,.65) 22%,transparent 54%);}
  .phase-banner.day::after{background:
  radial-gradient(circle at -20% 62%,rgba(255,255,255,.22) 0,transparent 46%),
  radial-gradient(circle at 120% 40%,rgba(255,255,255,.18) 0,transparent 52%);
  opacity:.7;animation:dayClouds 18s linear infinite;}
  .ph-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1;z-index:1;}
  .ph-right{display:flex;align-items:center;gap:6px;flex-shrink:0;z-index:1;}
  .ph-icon{font-size:28px;flex-shrink:0;display:flex;align-items:center;}
  .ph-icon .role-icon{width:28px;height:28px;object-fit:contain;}
  .mobile-touch #scr-game .ph-icon .role-icon{width:18px;height:18px;}
  .ph-info{min-width:0;}
  .ph-title{font-size:16px;font-weight:800;color:var(--gold);}
  .ph-sub{display:none;}
  
  /* Timer ring — Fix 2 */
  .timer-wrap{display:flex;flex-direction:row;align-items:center;gap:6px;flex-shrink:0;}
  .timer-ring-outer{position:relative;width:64px;height:64px;display:flex;align-items:center;justify-content:center;}
  .timer-ring-svg{position:absolute;inset:0;width:64px;height:64px;transform:rotate(-90deg);}
  .trb{fill:none;stroke:rgba(255,255,255,.12);stroke-width:5;}
  .trf{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-dasharray:138.23;stroke-dashoffset:0;transition:stroke .3s;}
  .trf.warn{stroke:var(--crimson);}
  .timer-num{position:relative;font-size:14px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1;z-index:1;}
  .timer-num.warn{color:var(--crimson);}
  .phase-lbl{font-size:9px;color:var(--silver);letter-spacing:.06em;font-weight:700;text-align:center;max-width:80px;}
  
  .phase-timer-digital{
    font-size:20px;font-weight:800;color:#fff;
    background:rgba(0,0,0,0.3);padding:4px 12px;border-radius:6px;
    border:1px solid rgba(255,255,255,0.1);
    font-variant-numeric:tabular-nums;
    min-width:60px;text-align:center;
    transition:color .2s;
  }
  .phase-timer-digital.warn{color:var(--crimson);}
  /* Modal timer HUD — giống phase timer */
  .modal-timer{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    margin:8px auto 4px;width:100%;
  }
  .modal-timer-digits{
    font-size:22px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;
    background:rgba(0,0,0,0.35);padding:4px 16px;border-radius:8px;
    border:1px solid rgba(255,255,255,0.12);letter-spacing:.04em;
    transition:color .2s;
  }
  .modal-timer-digits.warn{color:var(--crimson);}
  .modal-timer-bar-wrap{
    width:80%;max-width:200px;height:4px;
    background:rgba(255,255,255,0.12);border-radius:2px;overflow:hidden;
  }
  .modal-timer-bar{
    height:100%;border-radius:2px;
    background:linear-gradient(90deg,var(--gold),#ffe066);
    transition:width .25s linear,background .3s;
  }
  /* Hiệu ứng loading ban đêm */
  .night-loading-dots{display:none;align-items:center;gap:5px;height:28px;}
  .night-loading-dots span{
    display:inline-block;width:8px;height:8px;border-radius:50%;
    background:var(--gold);opacity:0.3;
    animation:nightDot 1.2s ease-in-out infinite;
  }
  .night-loading-dots span:nth-child(2){animation-delay:.2s;}
  .night-loading-dots span:nth-child(3){animation-delay:.4s;}
  @keyframes nightDot{0%,80%,100%{opacity:.3;transform:scale(1);}40%{opacity:1;transform:scale(1.4);}}
  
  .exit-btn{background:rgba(139,0,0,.2);border:1px solid rgba(220,20,60,.28);color:var(--crimson);border-radius:7px;padding:6px 11px;cursor:pointer;font-size:13px;font-weight:700;flex-shrink:0;-webkit-appearance:none;appearance:none;}
  .btn-skip-top{padding:6px 12px;border-radius:999px;font-size:12px;min-width:92px;white-space:nowrap;}
  .exit-btn:active{background:rgba(139,0,0,.4);}
  .game-mobile-menu-btn{display:none;align-items:center;justify-content:center;font-size:18px;line-height:1;padding:6px 10px;}
  .game-mobile-menu{
    display:none;position:fixed;right:10px;top:calc(44px + env(safe-area-inset-top,0px));z-index:1300;min-width:220px;
    background:rgba(10,12,22,.98);border:1px solid rgba(200,151,58,.35);border-radius:12px;padding:8px;
    box-shadow:0 12px 36px rgba(0,0,0,.52);flex-direction:column;gap:6px;
  }
  .game-mobile-menu .btn-s{width:100%;text-align:left;padding:8px 10px;font-size:12px;border-radius:8px;}
  
  .game-grid{display:flex;flex:1;overflow:hidden;}
  .stage{flex:3;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch;}
  .section-hd{font-size:9px;color:var(--silver);letter-spacing:.18em;margin-bottom:6px;padding:0 2px;font-weight:700;}
  .gp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;}
  
  /* Player card — no inline onclick (Fix 4) */
  .gp{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 6px;text-align:center;position:relative;-webkit-user-select:none;user-select:none;transition:border-color .2s,background .2s,transform .12s;}
  .gp.can-target{cursor:pointer;border-color:rgba(220,20,60,.35);}
  .gp.can-target:hover{border-color:var(--crimson);background:rgba(220,20,60,.09);transform:translateY(-2px);}
  .gp.can-target:active{transform:scale(.95);background:rgba(220,20,60,.18);}
  .gp.dead{opacity:1;filter:grayscale(1);}
  .gp-av{font-size:22px;margin-bottom:3px;line-height:1;position:relative;}
  .gp-heart{position:absolute;top:-4px;left:-4px;font-size:12px;}
  .gp-sister{position:absolute;top:-4px;right:-4px;font-size:11px;filter:drop-shadow(0 0 3px rgba(0,0,0,.65));display:inline-flex;}
  .gp-sister img.role-icon{width:18px;height:18px;object-fit:contain;}
  .gp-brain{position:absolute;bottom:-3px;right:-3px;width:16px;height:16px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;box-shadow:0 0 2px rgba(0,0,0,.45);}
  .gp-brain.left{right:auto;left:-3px;}
  .gp-addict{position:absolute;bottom:-3px;right:-3px;width:16px;height:16px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;box-shadow:0 0 2px rgba(0,0,0,.45);}
  .gp-hoodlum{position:absolute;bottom:-3px;left:-3px;width:16px;height:16px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;box-shadow:0 0 2px rgba(0,0,0,.45);}
  .gp-elder{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:rgba(76,175,80,.48);display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 0 10px rgba(90,220,110,.55),0 0 2px rgba(0,0,0,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
  .gp-fire{position:absolute;top:-6px;left:-6px;width:18px;height:18px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 0 2px rgba(0,0,0,.45);}
  .gp-vote-for{position:absolute;left:-5px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:rgba(220,90,90,.42);border:1px solid rgba(200,40,60,.55);display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;box-shadow:0 0 3px rgba(0,0,0,.4);z-index:4;pointer-events:none;}
  .trouble-disrupt{opacity:.45;transform:translateY(1px);transition:opacity .16s,transform .12s,box-shadow .12s;}
  .trouble-disrupt.sel{opacity:1;transform:translateY(0);box-shadow:0 0 0 1px rgba(220,20,60,.45),0 0 6px rgba(220,20,60,.45);}
  .gp-name{font-size:12px;color:var(--moon);word-break:break-all;font-weight:500;}
  /* Top 1–3 bảng tổng hoặc snapshot tuần: tên vàng / bạc / đồng + glow (lobby, in-game, BXH, chat, end) */
  .gp-name.player-name-prestige-1,.pname.player-name-prestige-1,.lb-player-name.player-name-prestige-1,.lb-podium-name.player-name-prestige-1,.social-player-name.player-name-prestige-1,.chat-name.player-name-prestige-1,.chat-sender-name.player-name-prestige-1,.mention-name.player-name-prestige-1,.winner-chip.player-name-prestige-1,.end-player-name.player-name-prestige-1{
    color:#ffe08a!important;font-weight:800;
    text-shadow:0 0 10px rgba(255,220,120,.9),0 0 22px rgba(255,190,60,.55);
    animation:prestigeSparkleGold 2.2s ease-in-out infinite;
  }
  .gp-name.player-name-prestige-2,.pname.player-name-prestige-2,.lb-player-name.player-name-prestige-2,.lb-podium-name.player-name-prestige-2,.social-player-name.player-name-prestige-2,.chat-name.player-name-prestige-2,.chat-sender-name.player-name-prestige-2,.mention-name.player-name-prestige-2,.winner-chip.player-name-prestige-2,.end-player-name.player-name-prestige-2{
    color:#eef1ff!important;font-weight:800;
    text-shadow:0 0 10px rgba(210,220,255,.88),0 0 20px rgba(170,185,230,.48);
    animation:prestigeSparkleSilver 2.5s ease-in-out infinite;
  }
  .gp-name.player-name-prestige-3,.pname.player-name-prestige-3,.lb-player-name.player-name-prestige-3,.lb-podium-name.player-name-prestige-3,.social-player-name.player-name-prestige-3,.chat-name.player-name-prestige-3,.chat-sender-name.player-name-prestige-3,.mention-name.player-name-prestige-3,.winner-chip.player-name-prestige-3,.end-player-name.player-name-prestige-3{
    color:#e8b896!important;font-weight:800;
    text-shadow:0 0 10px rgba(220,150,95,.85),0 0 20px rgba(180,110,65,.45);
    animation:prestigeSparkleBronze 2.4s ease-in-out infinite;
  }
  @keyframes prestigeSparkleGold{
    0%,100%{ text-shadow:0 0 10px rgba(255,220,120,.88),0 0 20px rgba(255,190,60,.48); filter:brightness(1); }
    50%{ text-shadow:0 0 14px rgba(255,238,170,.98),0 0 30px rgba(255,200,90,.62); filter:brightness(1.12); }
  }
  @keyframes prestigeSparkleSilver{
    0%,100%{ text-shadow:0 0 10px rgba(210,220,255,.82),0 0 18px rgba(170,185,230,.42); filter:brightness(1); }
    50%{ text-shadow:0 0 14px rgba(235,240,255,.95),0 0 28px rgba(190,200,240,.55); filter:brightness(1.1); }
  }
  @keyframes prestigeSparkleBronze{
    0%,100%{ text-shadow:0 0 10px rgba(220,150,95,.8),0 0 18px rgba(180,110,65,.4); filter:brightness(1); }
    50%{ text-shadow:0 0 14px rgba(235,175,120,.92),0 0 28px rgba(200,120,75,.52); filter:brightness(1.08); }
  }
.gp-role{font-size:9px;color:var(--silver);margin-top:3px;opacity:.6;}
.gp-role.wolf{color:#FF6060;opacity:.95;font-weight:700;text-shadow:0 0 8px rgba(255,80,80,.45);}
  .vcnt{position:absolute;top:-7px;right:-7px;background:#FFF;color:#AA0000;border-radius:50%;width:20px;height:20px;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.5);border:1px solid #AA0000;}
  /* Phase vote: người dẫn phiếu — viền tĩnh + nhịp flash mỗi lần đồng hồ đổi giây (đồng bộ JS) */
  .gp.gp-vote-pulse{
    z-index:1;
    border-width:2px;
    border-color:rgba(210,55,65,.62);
    box-shadow:0 0 0 1px rgba(255,70,90,.28),0 0 14px rgba(220,40,60,.32);
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
  }
  .gp.gp-vote-pulse-flash{
    animation:gpVotePulseBeat .38s cubic-bezier(.35,.08,.25,1) 1 both;
  }
  @keyframes gpVotePulseBeat{
    0%{
      border-color:rgba(210,55,65,.62);
      box-shadow:0 0 0 1px rgba(255,70,90,.28),0 0 14px rgba(220,40,60,.32);
      filter:drop-shadow(0 0 4px rgba(255,60,75,.35));
    }
    45%{
      border-color:rgba(255,95,105,1);
      box-shadow:0 0 0 3px rgba(255,55,75,.55),0 0 28px rgba(255,50,70,.72),inset 0 0 18px rgba(240,45,65,.2);
      filter:drop-shadow(0 0 12px rgba(255,70,90,.9));
    }
    100%{
      border-color:rgba(210,55,65,.62);
      box-shadow:0 0 0 1px rgba(255,70,90,.28),0 0 14px rgba(220,40,60,.32);
      filter:drop-shadow(0 0 4px rgba(255,60,75,.35));
    }
  }
  @media (max-width:640px){
    .gp.gp-vote-pulse-flash{animation-duration:.34s;}
    @keyframes gpVotePulseBeat{
      0%{filter:drop-shadow(0 0 3px rgba(255,60,75,.3));}
      45%{box-shadow:0 0 0 2px rgba(255,55,75,.5),0 0 22px rgba(255,50,70,.65);filter:drop-shadow(0 0 8px rgba(255,70,90,.75));}
      100%{filter:drop-shadow(0 0 3px rgba(255,60,75,.3));}
    }
  }
  @media (prefers-reduced-motion:reduce){
    .gp.gp-vote-pulse-flash{animation:none;}
    .gp.gp-vote-pulse{border-color:rgba(220,50,60,.78);box-shadow:0 0 12px rgba(220,40,60,.38);}
  }
  .tag-me{font-size:8px;color:#64B4FF;background:rgba(100,180,255,.15);border-radius:3px;padding:1px 3px;margin-left:2px;font-weight:600;}
  .dead-sec{margin-top:4px;opacity:.6;}
  
  /* Role info column — Fix 3 */
  .role-info-col{width:128px;min-width:110px;border-left:1px solid var(--border);background:rgba(0,0,0,.18);padding:8px 6px;overflow-y:auto;flex-shrink:0;flex:1;-webkit-overflow-scrolling:touch;}
  @media(max-width:640px){.role-info-col{width:100%;min-width:auto;border-left:none;border-top:1px solid var(--border);}}
  .col-hd{font-size:8px;color:var(--silver);letter-spacing:.18em;margin-bottom:7px;font-weight:700;}
  .ri-chip{display:flex;align-items:center;gap:6px;padding:6px 7px;margin-bottom:4px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.03);cursor:pointer;transition:background .18s,border-color .18s;-webkit-tap-highlight-color:rgba(200,151,58,.15);}
  .ri-chip:hover,.ri-chip:active{background:rgba(200,151,58,.12);border-color:rgba(200,151,58,.35);}
  .ri-icon{font-size:18px;flex-shrink:0;line-height:1;}
  .role-icon{width:1em;height:1em;vertical-align:middle;object-fit:contain;}
  .ri-info{flex:1;min-width:0;}
  .ri-name{font-size:10px;color:var(--moon);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .ri-cnt{font-size:9px;color:var(--silver);margin-top:1px;}
  .ri-cnt b{color:var(--gold);}
  
  /* Sidebar */
  .sidebar{width:208px;min-width:172px;display:flex;flex-direction:column;border-left:1px solid var(--border);background:rgba(0,0,0,.22);flex-shrink:0;flex:1;}
  @media(max-width:540px){.game-grid{flex-direction:column;}.sidebar{width:100%;min-width:auto;border-left:none;border-top:1px solid var(--border);max-height:255px;}}.mobile-touch .sidebar{display:none!important;}.mobile-touch .role-info-col{display:none!important;}.mobile-touch .my-role-box{display:none!important;}.mobile-touch .action-box{display:none!important;}.mobile-touch .log-box{display:none!important;}
  .box-hd{font-size:8px;color:var(--silver);letter-spacing:.2em;margin-bottom:8px;font-weight:700;}
  .game-mobile-panel{display:none;flex-direction:column;gap:8px;margin:0 10px 12px;padding:10px 12px;}
  .game-mobile-panel .cfg-role-btn{margin-bottom:0;}
  .game-chat-fabs{display:flex;gap:10px;flex-wrap:wrap;}
  .game-chat-fab{
  width:46px;height:46px;border-radius:999px;border:1px solid rgba(200,151,58,.45);
  background:linear-gradient(135deg,rgba(139,0,0,.95),rgba(196,30,58,.95));
  color:#fff;font-size:18px;cursor:pointer;
  box-shadow:0 8px 26px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08) inset;
  display:flex;align-items:center;justify-content:center;
  }
  .game-chat-fab.active{background:linear-gradient(135deg,rgba(90,20,20,.96),rgba(140,34,55,.96));}
  body.modal-open .game-chat-fab{display:none!important;}
  .my-role-box,.action-box{padding:11px 12px;border-bottom:1px solid var(--border);}
  .my-role-open-btn{width:100%;margin-top:8px;}
  .witch-attacked-info{font-weight:700;margin-bottom:14px;font-size:14px;}
  .victim-name-badge{
    display:inline-block;
    margin:0 2px;
    padding:2px 10px;
    border-radius:999px;
    font-weight:800;
    line-height:1.25;
    letter-spacing:.01em;
    border:1px solid transparent;
    box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
  }
  .victim-name-badge--danger{
    color:#ffdede;
    background:linear-gradient(135deg,rgba(180,26,49,.45),rgba(132,15,33,.3));
    border-color:rgba(255,120,140,.58);
    text-shadow:0 0 10px rgba(255,95,120,.4);
  }
  .victim-name-badge--gold{
    color:#ffe9a8;
    background:linear-gradient(135deg,rgba(197,151,58,.35),rgba(134,99,26,.28));
    border-color:rgba(240,202,112,.62);
    text-shadow:0 0 10px rgba(255,210,90,.32);
  }
  .victim-name-badge--muted{
    color:#d0d0d0;
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.12);
    text-shadow:none;
  }
  .role-pill{display:flex;gap:9px;align-items:flex-start;}
  .rp-icon{font-size:26px;line-height:1;flex-shrink:0;}
  .rp-name{font-size:14px;font-weight:800;color:var(--gold);}
  .rp-team{font-size:11px;color:var(--silver);margin-top:2px;font-weight:500;}
  .rp-ability{font-size:11px;color:var(--silver);margin-top:4px;line-height:1.5;opacity:.8;}
  /* Blur overlay for role privacy */
  .role-blur-wrap{position:relative;}
  .role-blur-content{transition:filter .3s ease;}
  .role-blur-content.blurred{filter:blur(7px);user-select:none;}
  .role-eye-btn{position:static;transform:none;background:none;border:none;cursor:pointer;font-size:0;padding:0;margin-left:6px;opacity:.7;transition:opacity .2s;line-height:1;color:var(--silver);display:inline-flex;align-items:center;}
  .role-eye-btn svg{width:16px;height:16px;stroke:currentColor;}
  .role-eye-btn:hover{opacity:1;}
  .box-hd-row{display:flex;align-items:center;justify-content:flex-start;margin-bottom:8px;gap:6px;}
  .box-hd-row .box-hd{margin-bottom:0;}
  .action-box{min-height:66px;}
  .dim-text{font-size:13px;color:var(--silver);opacity:.6;font-weight:400;}
  .log-box{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:9px 10px;}
  .log-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .log-scroll::-webkit-scrollbar{width:3px;}
  .log-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
  .chat-scroll{max-height:150px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:4px;margin-top:4px;}
  .chat-scroll::-webkit-scrollbar{width:3px;}
  .chat-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
  .log-line{padding:3px 0;border-bottom:1px solid rgba(255,255,255,.03);font-size:12px;line-height:1.6;}
  .log-line.night{color:#9090FF;}.log-line.death{color:var(--crimson);}
  .log-line.thief-public{color:#FFF;}
  .log-line.thief-public .thief-pub-role{display:inline-block;}
  .log-line.thief-public .thief-pub-role.village{color:#5B9FFF;text-shadow:0 0 8px rgba(91,159,255,.9);filter:none;}
  .log-line.thief-public .thief-pub-role.wolf{color:#FF4B6B;text-shadow:0 0 10px rgba(255,75,107,.95),0 0 22px rgba(255,40,90,.55);}
  .log-line.thief-public .thief-pub-role.neutral{color:#E8E8F0;text-shadow:0 0 8px rgba(220,220,235,.75);filter:none;}
  .recap-thief-public{color:#FFF !important;}
  .recap-thief-public .thief-pub-role.village{color:#5B9FFF;text-shadow:0 0 8px rgba(91,159,255,.9);filter:none;}
  .recap-thief-public .thief-pub-role.wolf{color:#FF4B6B;text-shadow:0 0 10px rgba(255,75,107,.95),0 0 22px rgba(255,40,90,.55);}
  .recap-thief-public .thief-pub-role.neutral{color:#E8E8F0;text-shadow:0 0 8px rgba(220,220,235,.75);filter:none;}
  .log-line.day{color:#C8973A;}.log-line.vote{color:#CC88FF;}
  .log-line.win{color:#88FF88;font-weight:700;}.log-line.chat{color:#64B4FF;}
  .log-line.wolf{color:#FF6060;}
  .chat-row{display:flex;margin:2px 0 12px 0;align-items:flex-start;}
  .chat-row.other{justify-content:flex-start;}
  .chat-row.mine{justify-content:flex-end;}
  .chat-row.mine .chat-bubble-container{align-items:flex-end;}
  .chat-row.other .chat-bubble-container{align-items:flex-start;}
  .chat-bubble{max-width:75%;padding:8px 12px;border-radius:16px;font-size:13px;line-height:1.5;display:inline-block;word-wrap:break-word;}
  .chat-bubble.mine{background:linear-gradient(135deg,rgba(100,140,255,.85),rgba(80,120,240,.85));border:none;color:#fff;border-bottom-right-radius:4px;}
  .chat-bubble.other{background:rgba(255,255,255,.92);border:none;color:#1a1a1a;border-bottom-left-radius:4px;}
  .chat-row.team-chat .chat-bubble.other{background:rgba(255,255,255,.92);border:none;color:#1a1a1a;}
  .chat-bubble.mine.wolf-self{background:linear-gradient(135deg,rgba(100,140,255,.85),rgba(80,120,240,.85));border:none;color:#fff;}
  .chat-bubble.other.wolf-other{background:rgba(255,255,255,.92);border:none;color:#1a1a1a;}
  .chat-bubble.mine.couple-self{background:linear-gradient(135deg,rgba(100,140,255,.85),rgba(80,120,240,.85));border:none;color:#fff;}
  .chat-bubble.other.couple-other{background:rgba(255,255,255,.92);border:none;color:#1a1a1a;}
  .chat-name{font-size:11px;font-weight:700;color:rgba(255,255,255,.7);margin-bottom:2px;display:block;}
  .chat-sep{display:none;}
  .chat-avatar-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-right:8px;flex-shrink:0;}
  .chat-avatar-circle{width:32px;height:32px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);flex-shrink:0;}
  .chat-avatar-circle img{width:100%;height:100%;object-fit:cover;}
  .chat-avatar-circle .avatar-fallback{font-size:16px;}
  .chat-sender-info{display:flex;flex-direction:column;margin-bottom:2px;}
  .chat-sender-name{font-size:11px;font-weight:600;color:rgba(255,255,255,.85);margin-bottom:1px;}
  .chat-sender-timestamp{font-size:10px;color:rgba(255,255,255,.5);}
  .chat-message-group{display:flex;flex-direction:column;gap:2px;}
  .chat-bubble-with-avatar{margin-top:0;}
  .chat-bubble-consecutive{margin-top:0;}
  /* Tin nhắn liên tiếp (không có avatar): thụt vào đúng bằng avatar(32px) + gap(8px) để thẳng hàng */
  .chat-row.other .chat-bubble-wrapper:has(.chat-bubble-consecutive) { margin-left: 40px; }
  .chat-row.other .consecutive-wrapper { margin-left: 40px; }
  .chat-row.mine .chat-bubble{border-bottom-right-radius:4px;}
  .chat-row.other .chat-bubble{border-bottom-left-radius:4px;}
  .chat-row.player-prestige-1 .chat-bubble-wrapper,.chat-row.player-prestige-2 .chat-bubble-wrapper,.chat-row.player-prestige-3 .chat-bubble-wrapper{
    padding:6px 8px 16px 8px;border-radius:18px;
  }
  .chat-row.player-prestige-1 .chat-bubble-wrapper{background:linear-gradient(180deg,rgba(132,98,8,.26),rgba(58,40,8,.12));box-shadow:0 0 0 1px rgba(255,214,102,.34),0 0 14px rgba(255,205,70,.22);}
  .chat-row.player-prestige-2 .chat-bubble-wrapper{background:linear-gradient(180deg,rgba(132,142,160,.18),rgba(58,64,78,.1));box-shadow:0 0 0 1px rgba(220,228,244,.3),0 0 14px rgba(196,208,236,.18);}
  .chat-row.player-prestige-3 .chat-bubble-wrapper{background:linear-gradient(180deg,rgba(128,84,44,.22),rgba(58,34,20,.1));box-shadow:0 0 0 1px rgba(214,148,104,.3),0 0 14px rgba(204,124,78,.18);}
  .chat-row.player-prestige-1 .chat-avatar-circle{box-shadow:0 0 0 1px rgba(255,214,102,.55),0 0 12px rgba(255,205,70,.28);}
  .chat-row.player-prestige-2 .chat-avatar-circle{box-shadow:0 0 0 1px rgba(220,228,244,.5),0 0 12px rgba(196,208,236,.22);}
  .chat-row.player-prestige-3 .chat-avatar-circle{box-shadow:0 0 0 1px rgba(214,148,104,.52),0 0 12px rgba(204,124,78,.22);}
  .majority-indicator{font-size:11px;color:var(--silver);text-align:center;padding:5px 10px;background:rgba(139,0,0,.12);border:1px solid rgba(220,20,60,.18);border-radius:7px;margin-bottom:7px;font-weight:500;}
  
  .game-bottom{display:flex;gap:8px;padding:9px 10px;border-top:1px solid var(--border);background:rgba(0,0,0,.35);flex-shrink:0;}
  .chat-inp{flex:1;background:rgba(0,0,0,.5);border:1px solid var(--border);border-radius:9px;padding:11px 14px;color:var(--moon);font-size:16px;outline:none;-webkit-appearance:none;appearance:none;}
  .chat-inp::placeholder{color:rgba(176,184,200,.38);}
  .chat-channel{min-width:120px;margin-right:8px;background:rgba(0,0,0,.6);border:1px solid var(--border);border-radius:9px;padding:8px 10px;color:var(--moon);font-size:14px;outline:none;}
  .send-btn{background:rgba(200,151,58,.13);border:1px solid rgba(200,151,58,.3);border-radius:9px;padding:11px 15px;color:var(--gold);cursor:pointer;font-size:15px;font-weight:700;white-space:nowrap;-webkit-appearance:none;appearance:none;}
  .send-btn:active{background:rgba(200,151,58,.28);}
  .chat-input-row{display:flex;gap:6px;margin-top:6px;position:relative;}
  .mention-list{position:absolute;bottom:100%;left:0;right:0;max-height:160px;overflow-y:auto;background:var(--panel);border:1px solid var(--border);border-radius:8px;z-index:500;display:none;box-shadow:0 -4px 12px rgba(0,0,0,0.5);}
  .mention-item{padding:8px 10px;cursor:pointer;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,0.05);background:rgba(20,20,30,0.95);}
  .mention-item:last-child{border-bottom:none;}
  .mention-item:hover,.mention-item.active{background:rgba(200,151,58,0.2);}
  .mention-avatar{font-size:18px;}
  .mention-name{font-size:13px;font-weight:600;color:var(--moon);}
  .mention{font-weight:900;color:#FF1A40;text-shadow:0 0 2px rgba(255,26,64,.3);}
  
  .chat-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
  .chat-header-title{flex:1;}
  .chat-toggle-btn{background:transparent;border:none;color:var(--silver);font-size:14px;cursor:pointer;padding:0 4px;}
  .chat-box.collapsed .chat-body{display:none;}
  .chat-box.collapsed .chat-header{opacity:.7;}
  
  .chat-dock{
  position:fixed;
  bottom:calc(10px + var(--safe-bottom) + var(--kb-offset));
  left:10px;
  right:auto;
  display:flex;
  gap:8px;
  align-items:flex-end;
  z-index:220;
  max-width:calc(100% - 20px);
  pointer-events:none;
  flex-wrap: nowrap;
  }
  .chat-dock .chat-box{
  width:340px;
  height:380px;
  max-height:none;
  display:flex;
  flex-direction:column;
  background:rgba(5,10,25,.96);
  border-radius:12px;
  border:1px solid var(--border);
  box-shadow:0 8px 24px rgba(0,0,0,.7);
  pointer-events:auto;
  transition:height 0.3s, width 0.3s;
  position:relative;
  }
  .chat-dock .chat-header{padding:6px 10px; font-size:15px;}
  .chat-dock .chat-body{padding:6px 10px 8px; display:grid; grid-template-rows:minmax(0,1fr) auto; flex:1; min-height:0;}
  .chat-dock .chat-scroll{min-height:0; height:100%; overflow-y:auto; padding-right:4px; max-height:none; font-size:14px;}
  .chat-dock .chat-input-row{margin-top:6px; flex-shrink:0;}
  .chat-dock .chat-inp{padding:6px 10px; font-size:14px; height:32px; flex:1;}
  .chat-dock .send-btn{padding:0 10px; font-size:14px; height:32px; display:flex; align-items:center; cursor:pointer;}
  .chat-dock .chat-bubble{padding:8px 12px; font-size:14px; border-radius:16px;}
  .chat-box.collapsed{height:auto; width:140px;}
  .chat-box.collapsed .chat-header-title{font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .chat-unread-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  background-color: #FF4444;
  color: white;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  z-index: 10;
  }
  .chat-box.collapsed .chat-unread-badge.show {
  display: flex;
  }
  .mobile-chat-fab{
  display:none;
  position:fixed;
  right:12px;
  bottom:calc(12px + var(--safe-bottom));
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(200,151,58,.45);
  background:linear-gradient(135deg,rgba(139,0,0,.95),rgba(196,30,58,.95));
  color:#fff;
  font-size:17px;
  cursor:pointer;
  z-index:260;
  box-shadow:0 8px 26px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08) inset;
  }
  .mobile-log-fab{
  display:none;
  position:fixed;
  left:12px;
  bottom:calc(16px + var(--safe-bottom));
  min-width:118px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(200,151,58,.45);
  background:linear-gradient(135deg,rgba(32,38,58,.96),rgba(56,62,86,.96));
  color:#fff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  z-index:260;
  box-shadow:0 8px 26px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08) inset;
  padding:0 14px;
  }
  .mobile-touch .mobile-chat-fab{display:flex;align-items:center;justify-content:center;}
  .mobile-touch .mobile-log-fab{display:flex;align-items:center;justify-content:center;}
  .mobile-touch #chat-dock{
  left:10px;
  right:auto;
  bottom:calc(74px + var(--safe-bottom) + var(--kb-offset));
  display:none;
  max-width:min(92vw,380px);
  }
  .mobile-touch.mobile-chat-open #chat-dock{display:flex;pointer-events:auto;}
  .mobile-touch #chat-dock .chat-box{display:none;}
  .mobile-touch #chat-dock .chat-box.mobile-chat-active{
  display:flex;
  width:min(92vw,380px);
  height:min(52dvh,430px);
  max-height:min(60dvh,470px);
  }
  .mobile-touch #chat-dock .chat-box.mobile-chat-active.collapsed{height:min(52dvh,430px);width:min(92vw,380px);}
  .mobile-touch #chat-dock .chat-box.mobile-chat-active.collapsed .chat-body{display:grid;}
  .mobile-touch.mobile-chat-open .mobile-chat-fab{
  background:linear-gradient(135deg,rgba(90,20,20,.96),rgba(140,34,55,.96));
  box-shadow:0 10px 30px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.12) inset;
  }
  /* ── Mobile in-game UI ── */
  /* Top bar: cố định chiều cao, không wrap, không reflow */
  .mobile-touch #scr-game .phase-banner{
    height:44px;box-sizing:border-box;
    padding:0 8px;gap:8px;
    flex-wrap:nowrap;align-items:center;overflow:hidden;
  }
  /* Ph-left: chỉ hiện icon nhỏ + chữ phase */
  .mobile-touch #scr-game .ph-icon{font-size:16px;flex-shrink:0;}
  .mobile-touch #scr-game .ph-title{font-size:13px;font-weight:800;white-space:nowrap;}
  .mobile-touch #scr-game .ph-info{padding-top:0;display:flex;align-items:center;}
  .mobile-touch #scr-game .phase-lbl{display:none!important;}
  /* Ẩn chữ "Thảo luận" / "Bỏ phiếu" bên cạnh đồng hồ trên điện thoại (chỉ mobile, PC giữ nguyên) */
  @media (max-width:768px){
  #scr-game .phase-lbl{display:none!important;}
  }
  /* Timer: kích thước cố định, không gây reflow */
  .mobile-touch #scr-game .timer-wrap{flex-direction:row;gap:4px;align-items:center;flex-shrink:0;}
  .mobile-touch #scr-game .phase-timer-digital{
    font-size:13px;font-weight:800;
    padding:2px 8px;
    background:rgba(0,0,0,0.3);
    border-radius:5px;
    border:1px solid rgba(255,255,255,0.1);
    color:#fff;
    min-width:42px;text-align:center;
    font-variant-numeric:tabular-nums;
    flex-shrink:0;
  }
  /* Skip button nhỏ gọn */
  .mobile-touch #scr-game .btn-skip-top{
    min-width:0;padding:3px 8px;font-size:10px;flex-shrink:0;
  }
  /* Exit button nhỏ lại */
  .mobile-touch #scr-game .exit-btn{padding:4px 8px;font-size:11px;}
  /* Ẩn hamburger menu cũ */
  .mobile-touch #scr-game .game-mobile-menu-btn{display:inline-flex;}
  /* Ẩn desktop panels - !important để override base CSS display:flex */
  .mobile-touch #scr-game .role-info-col{display:none!important;}
  .mobile-touch #scr-game .sidebar{display:none!important;}
  .mobile-touch #scr-game .my-role-box{display:none!important;}
  .mobile-touch #scr-game .action-box{display:none!important;}
  .mobile-touch #scr-game .log-box{display:none!important;}
  /* Mobile panel: ẩn nút Vai trò (có inline card thay thế) */
  .mobile-touch #scr-game #btn-game-my-role{display:none!important;}
  /* Stage & grid */
  .mobile-touch #scr-game .game-grid{display:block;overflow-y:auto;}
  .mobile-touch #scr-game .stage{overflow-y:visible;padding:8px 10px 10px;}
  .mobile-touch #scr-game #phase-banner{overflow:hidden;}
  .mobile-touch #scr-game.game-menu-open .game-mobile-menu{display:flex;}
  /* ── Mobile Role Card ── */
  .mobile-role-card{
    display:none; /* ẩn trên desktop */
    align-items:flex-start;gap:10px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(200,151,58,0.25);
    border-radius:10px;padding:10px 12px;
    position:relative;
  }
  .mobile-role-card-left{flex-shrink:0;}
  .mobile-role-card-icon{font-size:30px;line-height:1;display:block;}
  .mobile-role-card-info{flex:1;min-width:0;}
  .mobile-role-card-label{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--silver);text-transform:uppercase;margin-bottom:2px;}
  .mobile-role-card-name{font-size:16px;font-weight:800;color:var(--gold);}
  .mobile-role-card-team{font-size:11px;font-weight:700;margin-top:1px;}
  .mobile-role-card-ability{font-size:11px;color:var(--silver);margin-top:3px;line-height:1.4;}
  .mobile-role-card .role-eye-btn{position:absolute;top:8px;right:8px;}
  /* Blur state */
  .mobile-role-card.blurred .mobile-role-card-name,
  .mobile-role-card.blurred .mobile-role-card-team,
  .mobile-role-card.blurred .mobile-role-card-ability,
  .mobile-role-card.blurred .mobile-role-card-icon{filter:blur(6px);user-select:none;}
  /* Trên mobile: hiện card */
  .mobile-touch #scr-game .mobile-role-card{display:flex;}
  /* Panel layout: column, full-width buttons */
  .mobile-touch #scr-game .game-mobile-panel{
    display:flex;flex-direction:column;gap:6px;
    margin:0 8px 8px;padding:8px 10px;
  }
  .mobile-touch #scr-game .game-mobile-panel .cfg-role-btn{
    width:100%;padding:9px 12px;font-size:12px;text-align:left;
  }
  .mobile-touch #scr-game #btn-game-my-role{display:none!important;}
  .mobile-touch #chat-dock.keyboard-compact{
  bottom:calc(8px + var(--safe-bottom) + var(--kb-offset));
  }
  @media(max-width:980px){
    #chat-dock{
      right:10px;
      left:auto;
      bottom:calc(66px + var(--safe-bottom) + var(--kb-offset));
      display:none;
      max-width:min(90vw,360px);
    }
    body.mobile-chat-open #chat-dock{display:flex;pointer-events:auto;}
    #chat-dock .chat-box{display:none;}
    #chat-dock .chat-box.mobile-chat-active{
      display:flex;
      width:min(90vw,360px);
      height:min(48dvh,390px);
      max-height:min(56dvh,430px);
    }
  }
  
  /* Chat Reaction */
  .chat-reaction-bar {
  position: relative;
  display: flex;
  gap: 4px;
  margin-top: -4px;
  margin-right: 8px;
  justify-content: flex-end;
  align-self: flex-end;
  flex-wrap: wrap;
  z-index: 2;
  }
  .chat-reaction-item {
  font-size: 15px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 2px 7px;
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.24);
  }
  .chat-reaction-item .count{
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  }
  .chat-reaction-item:hover {
  background: rgba(255,255,255,0.2);
  }
  .chat-reaction-item.active {
  background: rgba(200,151,58,0.2);
  border-color: rgba(200,151,58,0.4);
  color: var(--gold);
  }
  .chat-reaction-btn,.chat-quote-btn{
  position:absolute;
  bottom:1px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .2s,transform .15s,filter .15s;
  cursor:pointer;
  filter:grayscale(1);
  border-radius:999px;
  background:rgba(10,14,24,.9);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 4px 10px rgba(0,0,0,.35);
  }
  .chat-reaction-btn{
  right:10px;
  width:18px;
  height:12px;
  font-size:9px;
  border-radius:6px;
  }
  .chat-quote-btn{
  right:42px;
  width:22px;
  height:18px;
  font-size:11px;
  border-radius:6px;
  color:var(--moon);
  }
  .chat-row:hover .chat-reaction-btn,.chat-row:hover .chat-quote-btn,.chat-reaction-btn:hover,.chat-quote-btn:hover{
  opacity:1;
  filter:grayscale(0);
  transform:translateY(-1px);
  }
  
  .emoji-picker {
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  z-index: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  }
  .emoji-option {
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  text-align: center;
  transition: background 0.1s;
  }
  .emoji-option:hover {
  background: rgba(255,255,255,0.1);
  transform: scale(1.2);
  }
  
  .chat-bubble-container {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  }
  .chat-row.other .chat-bubble-container { align-items: flex-start; }
  .chat-row.mine .chat-bubble-container { align-items: flex-end; }
  .chat-bubble-wrapper {
  display: flex;
  align-items: flex-start;
  position:relative;
  padding-bottom:18px;
  }
  .chat-row.other .chat-bubble-wrapper { flex-direction: row; }
  .chat-row.mine .chat-bubble-wrapper { flex-direction: row-reverse; }
  
  /* Modify existing chat-bubble to fit container */
  .chat-bubble {
  max-width: 100%; /* controlled by container */
  }
  .chat-quote{display:block;margin:0 0 6px 0;padding:6px 8px;border-left:3px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);border-radius:6px;}
  .chat-quote-from{font-size:11px;color:var(--silver);font-weight:700;letter-spacing:.03em;}
  .chat-quote-text{font-size:12px;color:#D9DFEA;}
  .chat-bubble.other .chat-quote{border-left-color:rgba(20,24,36,.25);background:rgba(20,24,36,.06);}
  .chat-bubble.other .chat-quote-from{color:rgba(28,32,40,.78);}
  .chat-bubble.other .chat-quote-text{color:rgba(28,32,40,.62);}
  #avatar-modal-choices{max-height:min(48vh,320px);overflow:auto;align-content:flex-start;padding:4px;-webkit-overflow-scrolling:touch;}
  #avatar-modal-choices .avatar-btn{width:40px;height:40px;font-size:22px;}
  .ios-safari .chat-dock,.mobile-touch .chat-dock{
  left:8px;
  right:8px;
  bottom:calc(8px + var(--safe-bottom) + var(--kb-offset));
  max-width:none;
  width:auto;
  flex-wrap:wrap;
  }
  .ios-safari .chat-dock .chat-box,.mobile-touch .chat-dock .chat-box{
  width:min(100vw - 16px, 430px);
  height:min(44vh,420px);
  max-height:min(52dvh,460px);
  }
  .ios-safari .chat-dock .chat-inp,.mobile-touch .chat-dock .chat-inp{font-size:16px;height:36px;}
  .ios-safari .chat-dock .send-btn,.mobile-touch .chat-dock .send-btn{height:36px;padding:0 12px;}
  .ios-safari .chat-reaction-btn,.mobile-touch .chat-reaction-btn{opacity:.72;filter:none;}
  .ios-safari .emoji-picker,.mobile-touch .emoji-picker{position:fixed;}
  .mobile-touch .chat-dock.keyboard-compact .chat-box.collapsed{display:none;}
  .mobile-touch .chat-dock.keyboard-compact .chat-box.mobile-active{display:flex;}
  .mobile-touch .chat-dock.keyboard-compact .chat-box.mobile-active .chat-body{display:flex;}
  .mobile-touch .chat-dock.keyboard-compact .chat-box.mobile-active .chat-toggle-btn{display:none;}
  .btn-p,.btn-s,.start-btn,.cbtn,.kick-btn,.host-transfer-btn,.avatar-btn,.chat-toggle-btn,.send-btn,.chat-reaction-btn,.emoji-option,.mbtn{touch-action:manipulation;}
  @media (max-width: 840px){
    .chat-dock{
      left:8px;
      right:8px;
      max-width:none;
      flex-wrap:wrap;
    }
    .chat-dock .chat-box{
      width:min(100vw - 16px, 430px);
      height:min(44vh,420px);
    }
  }
  
  /* ===== END ===== */
  #scr-end{justify-content:center;padding:24px;background:radial-gradient(ellipse at 50% 28%,rgba(200,151,58,.1) 0%,transparent 58%);}
  .end-content{text-align:center;width:100%;max-width:560px;}
  .end-trophy{font-size:80px;display:block;margin-bottom:12px;animation:trophyPop .65s cubic-bezier(.2,1,.4,1);}
  @keyframes trophyPop{0%{transform:scale(0)rotate(-15deg);}80%{transform:scale(1.1)rotate(2deg);}100%{transform:scale(1)rotate(0);}}
  .end-title{font-size:clamp(18px,4vw,26px);color:var(--gold);font-weight:800;margin-bottom:14px;line-height:1.4;text-shadow:0 0 10px rgba(200,151,58,.3);}
  .end-winners{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:18px;}
  .winner-chip{background:linear-gradient(135deg,rgba(200,151,58,.2),rgba(200,151,58,.05));border:1px solid rgba(200,151,58,.5);border-radius:20px;padding:6px 16px;font-size:14px;color:var(--gold);font-weight:700;box-shadow:0 0 8px rgba(200,151,58,.15);}
  .end-roles{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:20px;text-align:left;box-shadow:0 10px 30px rgba(0,0,0,.3);}
  .end-player{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;font-weight:500;}
  .end-player:last-child{border-bottom:none;}.end-player.dead{opacity:.42;}
  .end-player.winner{background:rgba(200,151,58,.08);margin:0 -16px;padding:10px 16px;border-bottom-color:rgba(200,151,58,.15);}
  
  .modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:200;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
  .modal{
    background:rgba(18,18,31,.72);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--glass-border);
    border-radius:18px;padding:24px 20px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
  }
  .modal-icon{font-size:46px;display:block;text-align:center;margin-bottom:8px;line-height:1.2;}
  .modal h2{font-size:18px;font-weight:800;color:var(--gold);text-align:center;margin-bottom:10px;}
  .modal p{font-size:13px;color:var(--silver);line-height:1.7;margin-bottom:10px;text-align:center;}
  .modal-team{text-align:center;font-size:12px;margin-bottom:10px;font-weight:700;}

  /* ── Role info modal (phe + ảnh pictures/[roleId].png) ── */
  #role-modal .modal.role-info-modal{
    max-width:400px;
    padding:0;
    overflow:hidden;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.1);
  }
  #role-modal .role-info-modal__inner{
    padding:14px 14px 12px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  #role-modal .role-info-modal[data-team="village"]{
    background:linear-gradient(165deg,rgba(22,34,58,.94) 0%,rgba(12,16,32,.98) 100%);
    box-shadow:
      0 0 0 1px rgba(100,170,255,.22),
      0 0 28px rgba(70,140,255,.42),
      0 0 56px rgba(50,110,220,.22),
      0 18px 48px rgba(0,0,0,.5),
      inset 0 1px 0 rgba(255,255,255,.06);
  }
  #role-modal .role-info-modal[data-team="wolf"]{
    background:linear-gradient(165deg,rgba(38,16,20,.94) 0%,rgba(12,10,12,.98) 100%);
    box-shadow:
      0 0 0 1px rgba(255,80,80,.28),
      0 0 32px rgba(220,50,55,.48),
      0 0 64px rgba(160,30,45,.25),
      0 18px 48px rgba(0,0,0,.52),
      inset 0 1px 0 rgba(255,255,255,.05);
  }
  #role-modal .role-info-modal[data-team="none"]{
    background:linear-gradient(165deg,rgba(26,28,36,.94) 0%,rgba(14,16,22,.98) 100%);
    box-shadow:
      0 0 0 1px rgba(200,210,230,.24),
      0 0 36px rgba(170,190,220,.38),
      0 0 72px rgba(120,140,175,.2),
      0 18px 48px rgba(0,0,0,.48),
      inset 0 1px 0 rgba(255,255,255,.07);
  }
  /* Special split skins: chỉ đổi viền khung ngoài */
  #role-modal .role-info-modal[data-team="split-village-wolf"],
  #role-modal .role-info-modal[data-team="split-village-none-wolf"]{
    background:linear-gradient(165deg,rgba(22,34,58,.94) 0%,rgba(12,16,32,.98) 100%);
    border-width:2px;
  }
  #role-modal .role-info-modal[data-team="split-village-wolf"]{
    border:2px solid transparent;
    background:
      linear-gradient(165deg,rgba(22,34,58,.94) 0%,rgba(12,16,32,.98) 100%) padding-box,
      linear-gradient(135deg,#64B4FF 0%,#64B4FF 60%,#FF646E 60%,#FF646E 100%) border-box;
    box-shadow:
      0 0 0 1px rgba(170,190,230,.42),
      0 0 38px rgba(100,180,255,.38),
      0 0 38px rgba(255,100,110,.38),
      0 18px 48px rgba(0,0,0,.52),
      inset 0 1px 0 rgba(255,255,255,.06);
  }
  #role-modal .role-info-modal[data-team="split-village-none-wolf"]{
    border:2px solid transparent;
    background:
      linear-gradient(165deg,rgba(22,34,58,.94) 0%,rgba(12,16,32,.98) 100%) padding-box,
      linear-gradient(180deg,#64B4FF 0%,#64B4FF 33%,#C8D2E6 33%,#C8D2E6 67%,#FF646E 67%,#FF646E 100%) border-box;
    box-shadow:
      0 0 0 1px rgba(190,200,220,.44),
      0 0 32px rgba(100,180,255,.32),
      0 0 30px rgba(200,210,230,.28),
      0 0 32px rgba(255,100,110,.32),
      0 18px 48px rgba(0,0,0,.52),
      inset 0 1px 0 rgba(255,255,255,.06);
  }
  #role-modal .role-info-modal__art{
    position:relative;
    border-radius:16px;
    width:100%;
    height:clamp(220px,52vh,320px);
    overflow:hidden;
    flex-shrink:0;
  }
  #role-modal .role-info-modal__art-stack{
    position:relative;
    width:100%;
    height:100%;
    min-height:inherit;
  }
  #role-modal .role-info-modal__art-layer{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    transition:none !important;
    animation:none !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:0;
  }
  #role-modal .role-info-modal__art-layer.is-active{
    opacity:1;
    visibility:visible;
    z-index:1;
    pointer-events:auto;
  }
  /* Lớp sương mờ đồng màu khung ảnh (trên stack, dưới fallback) — tĩnh, không transition */
  #role-modal .role-info-modal__art-veil{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    border-radius:inherit;
    transition:none !important;
    animation:none !important;
  }
  #role-modal .role-info-modal[data-team="village"] .role-info-modal__art-veil{
    background:
      radial-gradient(ellipse 85% 72% at 50% 38%, rgba(55,110,200,.22), transparent 58%),
      linear-gradient(180deg, rgba(12,16,32,.52) 0%, rgba(22,34,58,.14) 42%, rgba(12,20,40,.58) 100%);
    box-shadow:inset 0 0 28px rgba(55,110,200,.12);
  }
  #role-modal .role-info-modal[data-team="wolf"] .role-info-modal__art-veil{
    background:
      radial-gradient(ellipse 85% 72% at 50% 38%, rgba(160,40,55,.2), transparent 58%),
      linear-gradient(180deg, rgba(12,10,12,.5) 0%, rgba(38,16,20,.16) 42%, rgba(35,12,18,.62) 100%);
    box-shadow:inset 0 0 28px rgba(220,50,55,.1);
  }
  #role-modal .role-info-modal[data-team="none"] .role-info-modal__art-veil{
    background:
      radial-gradient(ellipse 85% 72% at 50% 38%, rgba(140,155,190,.16), transparent 58%),
      linear-gradient(180deg, rgba(14,16,22,.48) 0%, rgba(26,28,36,.12) 42%, rgba(22,24,32,.55) 100%);
    box-shadow:inset 0 0 28px rgba(170,190,220,.1);
  }
  #role-modal .role-info-modal[data-team="split-village-wolf"] .role-info-modal__art-veil,
  #role-modal .role-info-modal[data-team="split-village-none-wolf"] .role-info-modal__art-veil{
    background:
      radial-gradient(ellipse 85% 72% at 50% 38%, rgba(55,110,200,.22), transparent 58%),
      linear-gradient(180deg, rgba(12,16,32,.52) 0%, rgba(22,34,58,.14) 42%, rgba(12,20,40,.58) 100%);
    box-shadow:inset 0 0 28px rgba(55,110,200,.12);
  }
  #role-modal .role-info-modal[data-team="village"] .role-info-modal__art{
    border:2px solid rgba(90,160,255,.5);
    background:radial-gradient(ellipse 80% 70% at 50% 40%,rgba(55,110,200,.25),rgba(12,20,40,.65));
  }
  #role-modal .role-info-modal[data-team="wolf"] .role-info-modal__art{
    border:2px solid rgba(230,70,85,.55);
    background:radial-gradient(ellipse 80% 70% at 50% 40%,rgba(160,40,55,.28),rgba(35,12,18,.68));
  }
  #role-modal .role-info-modal[data-team="none"] .role-info-modal__art{
    border:2px solid rgba(195,205,225,.45);
    background:radial-gradient(ellipse 80% 70% at 50% 40%,rgba(140,155,190,.2),rgba(22,24,32,.7));
  }
  #role-modal .role-info-modal[data-team="split-village-wolf"] .role-info-modal__art,
  #role-modal .role-info-modal[data-team="split-village-none-wolf"] .role-info-modal__art{
    border:2px solid rgba(90,160,255,.5);
    background:radial-gradient(ellipse 80% 70% at 50% 40%,rgba(55,110,200,.25),rgba(12,20,40,.65));
    box-shadow:none;
  }
  #role-modal .role-info-modal__art-img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
  }
  #role-modal .role-info-modal__art-fallback{
    position:absolute;
    inset:0;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:inherit;
  }
  #role-modal .role-info-modal__art-fallback[hidden]{
    display:none !important;
  }
  #role-modal .role-info-modal__art-fallback .role-icon{width:min(120px,40vw);height:min(120px,40vw);object-fit:contain;}
  #role-modal .role-info-modal__faction{
    text-align:center;
    font-size:13px;
    font-weight:800;
    letter-spacing:.04em;
    margin:0;
    padding:11px 12px;
    border-radius:12px;
    border:2px solid rgba(72,200,130,.42);
    background:linear-gradient(180deg,rgba(28,72,52,.35),rgba(16,36,28,.45));
    text-shadow:0 1px 2px rgba(0,0,0,.5);
  }
  #role-modal .role-info-modal[data-team="village"] .role-info-modal__faction{
    border-color:rgba(80,190,255,.4);
    background:linear-gradient(180deg,rgba(30,70,120,.38),rgba(14,28,52,.5));
  }
  #role-modal .role-info-modal[data-team="wolf"] .role-info-modal__faction{
    border-color:rgba(255,100,110,.45);
    background:linear-gradient(180deg,rgba(90,28,36,.4),rgba(40,14,18,.52));
  }
  #role-modal .role-info-modal[data-team="none"] .role-info-modal__faction{
    border-color:rgba(200,210,230,.38);
    background:linear-gradient(180deg,rgba(55,62,78,.4),rgba(28,30,38,.52));
  }
  #role-modal .role-info-modal[data-team="split-village-wolf"] .role-info-modal__faction,
  #role-modal .role-info-modal[data-team="split-village-none-wolf"] .role-info-modal__faction{
    border-color:rgba(80,190,255,.4);
    background:linear-gradient(180deg,rgba(30,70,120,.38),rgba(14,28,52,.5));
    box-shadow:none;
  }
  #role-modal .role-info-modal__desc-block{
    margin:0;
    padding:14px 14px 16px;
    border-radius:14px;
    flex:1;
    min-height:0;
  }
  #role-modal .role-info-modal[data-team="village"] .role-info-modal__desc-block{
    border:2px solid rgba(88,155,235,.42);
    background:linear-gradient(180deg,rgba(24,42,78,.52),rgba(12,20,42,.62));
  }
  #role-modal .role-info-modal[data-team="wolf"] .role-info-modal__desc-block{
    border:2px solid rgba(215,75,88,.48);
    background:linear-gradient(180deg,rgba(52,22,30,.55),rgba(22,10,14,.65));
  }
  #role-modal .role-info-modal[data-team="none"] .role-info-modal__desc-block{
    border:2px solid rgba(188,198,218,.4);
    background:linear-gradient(180deg,rgba(38,42,54,.52),rgba(20,22,30,.62));
  }
  #role-modal .role-info-modal[data-team="split-village-wolf"] .role-info-modal__desc-block,
  #role-modal .role-info-modal[data-team="split-village-none-wolf"] .role-info-modal__desc-block{
    border:2px solid rgba(88,155,235,.42);
    background:linear-gradient(180deg,rgba(24,42,78,.52),rgba(12,20,42,.62));
    box-shadow:none;
  }
  #role-modal .role-info-modal__desc{
    margin:0 0 10px;
    font-size:13px;
    line-height:1.65;
    color:rgba(230,228,240,.92);
    text-align:left;
  }
  #role-modal .role-info-modal__ability{
    margin:0;
    font-size:12px;
    line-height:1.55;
    font-weight:700;
    color:rgba(220,190,120,.95);
    text-align:left;
  }
  #role-modal .role-info-modal .modal-btns{
    margin-top:0;
    padding:14px 16px 18px;
    border-top:1px solid rgba(255,255,255,.06);
    background:rgba(0,0,0,.12);
  }

  .modal-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px;}
  .mbtn{padding:11px 22px;border-radius:11px;font-size:14px;font-weight:700;cursor:pointer;border:none;transition:opacity .15s;-webkit-appearance:none;appearance:none;}
  .mbtn.p{background:linear-gradient(135deg,#8B0000,#C41E3A);color:#fff;}
  .mbtn.s{background:rgba(200,151,58,.13);border:1px solid rgba(200,151,58,.3);color:var(--gold);}
  .mbtn:active{opacity:.72;}.mbtn:disabled{opacity:.32;cursor:not-allowed;}
  .targets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;margin:12px 0;max-height:256px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .target-btn{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:9px;padding:10px 8px;color:var(--moon);font-size:13px;cursor:pointer;text-align:center;font-weight:500;-webkit-appearance:none;appearance:none;width:100%;}
  .target-btn:hover,.target-btn:active{border-color:rgba(200,151,58,.5);background:rgba(200,151,58,.1);}
  .target-btn.sel{border-color:var(--gold);background:rgba(200,151,58,.18);color:var(--gold);font-weight:700;}
  .target-btn:disabled{opacity:.32;cursor:not-allowed;}
  .target-btn-label{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;}
  .target-btn-avatar{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px;overflow:hidden;border-radius:6px;}
  .target-btn-avatar img{width:20px;height:20px;object-fit:cover;border-radius:6px;}
  .target-btn-note{display:block;margin-top:4px;font-size:11px;opacity:.72;}
  .thief-wolf-badge{display:inline-block;margin-top:6px;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.02em;color:#FFB0B0;background:rgba(220,20,60,.2);border:1px solid rgba(220,20,60,.42);}
  .dice-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:12px 0;justify-items:center;}
  .dice-btn{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--moon);font-size:16px;font-weight:700;cursor:pointer;-webkit-appearance:none;appearance:none;display:flex;align-items:center;justify-content:center;}
  .dice-btn:hover,.dice-btn:active{border-color:rgba(200,151,58,.5);background:rgba(200,151,58,.1);}
  .dice-btn.sel{border-color:var(--gold);background:rgba(200,151,58,.18);color:var(--gold);}
  .dice-btn:disabled{opacity:.35;cursor:not-allowed;}
  .wolf-pack{font-size:12px;color:#FF9090;text-align:center;margin-bottom:8px;font-weight:500;}
  .seer-result{font-size:16px;font-weight:800;text-align:center;padding:16px;border-radius:11px;margin:10px 0;}
  .seer-result.good{background:rgba(40,130,40,.14);color:#88FF88;border:1px solid rgba(80,200,80,.28);}
  .seer-result.evil{background:rgba(140,16,16,.2);color:#FF8888;border:1px solid rgba(210,50,50,.3);}
  
  .notif{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:12px 20px;font-size:13px;color:var(--moon);font-weight:500;transition:transform .3s ease;z-index:300;white-space:nowrap;max-width:90vw;}
  .notif.show{transform:translateX(-50%) translateY(0);}
  .notif.error{border-color:rgba(220,20,60,.5);color:var(--crimson);}
  .notif.success{border-color:rgba(80,200,80,.4);color:#88FF88;}
  
  @keyframes nightGlow{
  0%{opacity:.38;transform:translate3d(0,0,0);}
  100%{opacity:.72;transform:translate3d(8px,-6px,0);}
  }
  @keyframes dayClouds{
  0%{transform:translate3d(-12px,0,0);}
  100%{transform:translate3d(18px,0,0);}
  }
  /* Skip Button Styles */
  .btn-skip-day {
  background-color: #8B0000 !important; /* Dark Red */
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  }
  .btn-skip-vote {
  background-color: #B8860B !important; /* Dark Goldenrod */
  color: #8B0000 !important;
  font-weight: 700 !important;
  border: 1px solid rgba(139,0,0,0.3) !important;
  }
  .in-game-log-modal-body{max-height:min(58dvh,420px);overflow-y:auto;border:1px solid var(--border);border-radius:10px;background:rgba(0,0,0,.28);padding:10px;}
  
  /* ===== AUTH SCREEN ===== */
  #scr-auth{justify-content:center;padding:24px 20px;background:radial-gradient(ellipse at 50% 16%,rgba(200,151,58,.13) 0%,transparent 56%);}
  .auth-err{font-size:12px;color:var(--crimson);margin-top:-6px;margin-bottom:10px;min-height:16px;text-align:center;}
  .admin-pw-wrap{position:relative;}
  .admin-pw-wrap .inp{padding-right:42px;}
  .admin-pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:16px;color:var(--silver);padding:4px;opacity:.6;transition:opacity .2s;}
  .admin-pw-eye:hover{opacity:1;}
  .auth-divider{text-align:center;font-size:11px;color:var(--silver);margin:14px 0 0;opacity:.7;}
  .auth-user-bar{
    display:flex;align-items:center;gap:10px;
    background:rgba(200,151,58,.1);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(200,151,58,.28);
    border-radius:10px;padding:10px 14px;margin-bottom:14px;
    box-shadow:0 6px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.06);
  }
  .auth-user-bar .aub-name{font-size:14px;font-weight:700;color:var(--gold);flex:1;}
  .auth-user-bar .aub-sub{font-size:11px;color:var(--silver);}
  .auth-user-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
  .btn-ghost{
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid var(--glass-border);
    border-radius:8px;padding:6px 12px;color:var(--silver);font-size:12px;
    cursor:pointer;transition:border-color .2s,color .2s,background .2s;white-space:nowrap;
  }
  .btn-ghost:hover{border-color:rgba(200,151,58,.45);color:var(--gold);background:rgba(200,151,58,.08);}
  
  .lb-modal{position:fixed;inset:0;background:radial-gradient(circle at 30% 20%,rgba(200,151,58,.2),rgba(0,0,0,.92) 52%);z-index:3000;display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
  .lb-box{
    background:linear-gradient(165deg,rgba(26,26,40,.78),rgba(16,16,28,.78));
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(200,151,58,.28);border-radius:22px;width:100%;max-width:640px;max-height:88vh;
    display:flex;flex-direction:column;overflow:hidden;
    box-shadow:0 28px 90px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08);
  }
  .lb-hd{padding:18px 20px 12px;border-bottom:1px solid rgba(200,151,58,.2);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(200,151,58,.12),rgba(200,151,58,.02));}
  .lb-hd h2{font-size:16px;color:var(--gold);font-weight:900;letter-spacing:.08em;text-transform:uppercase;}
  .lb-body{display:flex;flex-direction:column;overflow:hidden;flex:1;}
  .lb-top-wrap{padding:14px 16px 8px;display:grid;gap:10px;border-bottom:1px solid rgba(255,255,255,.08);}
  .lb-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .lb-chip{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:11px;padding:8px 10px;}
  .lb-chip .k{font-size:10px;color:var(--silver);opacity:.85;letter-spacing:.07em;text-transform:uppercase;}
  .lb-chip .v{font-size:13px;font-weight:800;color:var(--moon);margin-top:3px;}
  .lb-podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:10px;align-items:end;}
  .lb-podium-card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 10px 8px;min-height:86px;overflow:hidden;transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
  .lb-podium-card:hover{transform:translateY(-4px);box-shadow:0 12px 34px rgba(0,0,0,.35);}
  .lb-podium-card::after{content:'';position:absolute;inset:-80% -20%;background:linear-gradient(130deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%);animation:lbShine 3.5s linear infinite;pointer-events:none;}
  .lb-podium-card.rank1{border-color:rgba(255,215,0,.72);background:linear-gradient(180deg,rgba(255,215,0,.28),rgba(255,215,0,.06));box-shadow:0 16px 42px rgba(255,201,56,.3),0 0 0 1px rgba(255,215,0,.32);transform:translateY(-4px) scale(1.03);}
  .lb-podium-card.rank1::before{content:'';position:absolute;inset:-2px;border-radius:16px;background:radial-gradient(circle at 50% 0%,rgba(255,255,210,.45),transparent 56%);pointer-events:none;mix-blend-mode:screen;}
  .lb-podium-card.rank2{border-color:rgba(192,192,192,.4);background:linear-gradient(180deg,rgba(192,192,192,.14),rgba(192,192,192,.03));}
  .lb-podium-card.rank3{border-color:rgba(205,127,50,.45);background:linear-gradient(180deg,rgba(205,127,50,.14),rgba(205,127,50,.03));}
  .lb-podium-rank{font-size:18px;font-weight:900;line-height:1;}
  .lb-podium-card.rank1 .lb-podium-rank{color:#FFD700;}
  .lb-podium-card.rank2 .lb-podium-rank{color:#D9D9D9;}
  .lb-podium-card.rank3 .lb-podium-rank{color:#D9A066;}
  .lb-podium-name{margin-top:4px;font-size:12px;font-weight:800;color:var(--moon);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .lb-podium-card.rank1 .lb-podium-name{font-size:13px;font-weight:900;color:#FFF9D8;text-shadow:0 0 18px rgba(255,217,102,.5);}
  .lb-podium-tag{margin-top:3px;font-size:10px;font-weight:700;color:#FFDFA0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .lb-podium-points{margin-top:4px;font-size:15px;font-weight:900;color:var(--gold);}
  .lb-podium-card.rank1 .lb-podium-points{font-size:17px;color:#FFE57A;text-shadow:0 0 16px rgba(255,215,0,.45);}
  .lb-podium-sub{margin-top:2px;font-size:10px;color:var(--silver);}
  .lb-table-hd{display:grid;grid-template-columns:52px minmax(0,1.3fr) 88px 68px 68px 78px;gap:8px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.09);font-size:10px;color:var(--silver);font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.02);}
  .lb-table-hd .r{text-align:right;}
  .lb-scroll{overflow-y:auto;flex:1;padding:6px 10px 10px;}
  .lb-scroll::-webkit-scrollbar{width:4px;}
  .lb-scroll::-webkit-scrollbar-thumb{background:rgba(200,151,58,.35);border-radius:4px;}
  .lb-item{display:grid;grid-template-columns:52px minmax(0,1.3fr) 88px 68px 68px 78px;gap:8px;align-items:center;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.01));margin-bottom:8px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;cursor:pointer;}
  .lb-item:hover{transform:translateX(3px);border-color:rgba(200,151,58,.45);box-shadow:0 8px 24px rgba(0,0,0,.24);}
  .lb-item.self{border-color:rgba(200,151,58,.55);box-shadow:0 0 0 1px rgba(200,151,58,.28),0 8px 28px rgba(0,0,0,.3);}
  .lb-rank-pill{width:48px;height:48px;border-radius:999px;display:grid;place-items:center;font-size:18px;font-weight:900;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--moon);}
  .lb-item.rank1 .lb-rank-pill,.lb-item.rank2 .lb-rank-pill,.lb-item.rank3 .lb-rank-pill{font-size:23px;}
  .lb-item.rank1 .lb-rank-pill{background:radial-gradient(circle at 35% 30%,#FFE999,#C8982D);color:#3D2A00;border-color:#FFE48D;box-shadow:0 0 18px rgba(255,215,0,.45);}
  .lb-item.rank2 .lb-rank-pill{background:radial-gradient(circle at 35% 30%,#F4F4F4,#909090);color:#1b1b1b;border-color:#D8D8D8;}
  .lb-item.rank3 .lb-rank-pill{background:radial-gradient(circle at 35% 30%,#E7B486,#8D5524);color:#241202;border-color:#E8B485;}
  .lb-player{min-width:0;}
  .lb-player-name{font-size:13px;font-weight:800;color:var(--moon);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .lb-player-sub{font-size:10px;color:var(--silver);margin-top:2px;display:flex;align-items:center;gap:6px;}
  .lb-nick{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(200,151,58,.18);border:1px solid rgba(200,151,58,.35);color:#F2D9A4;font-weight:700;letter-spacing:.03em;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .lb-self-tag{color:var(--gold);font-weight:800;}
  .lb-points{font-size:15px;font-weight:900;color:var(--gold);text-align:right;line-height:1.1;}
  .lb-bar{height:5px;border-radius:999px;background:rgba(255,255,255,.08);margin-top:4px;overflow:hidden;}
  .lb-bar > span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffcd68,#ff9f43);box-shadow:0 0 9px rgba(255,195,86,.45);}
  .lb-stat{text-align:right;color:var(--silver);font-size:12px;font-weight:700;}
  .lb-empty{text-align:center;color:var(--silver);padding:34px 18px;font-size:13px;opacity:.75;}
  .lb-hd-actions{display:flex;gap:8px;align-items:center;}
  .lb-mini-btn{background:linear-gradient(135deg,rgba(200,151,58,.24),rgba(255,170,68,.16));border:1px solid rgba(200,151,58,.45);color:#FFE4AA;border-radius:10px;padding:6px 10px;font-size:11px;font-weight:800;letter-spacing:.04em;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;}
  .lb-mini-btn:hover{transform:translateY(-1px);border-color:rgba(255,205,104,.8);box-shadow:0 8px 24px rgba(255,170,68,.22);}
  .lb-history-wrap{padding:10px 14px 14px;overflow-y:auto;display:grid;gap:12px;max-height:72vh;}
  .lb-history-section{border:1px solid rgba(255,255,255,.1);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));padding:10px;}
  .lb-history-title{font-size:12px;font-weight:900;color:#FFDFA0;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;}
  .lb-history-nav{display:flex;align-items:center;gap:6px;}
  .lb-history-nav-btn{width:26px;height:26px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#E7D2AB;font-size:14px;font-weight:900;cursor:pointer;display:grid;place-items:center;transition:all .2s;}
  .lb-history-nav-btn:hover{border-color:rgba(255,215,130,.62);background:rgba(255,215,130,.15);transform:translateY(-1px);}
  .lb-history-nav-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;}
  .lb-history-nav-label{min-width:126px;text-align:center;font-size:10px;color:#9AA4B8;font-weight:800;letter-spacing:.05em;}
  .lb-history-grid{display:grid;gap:8px;}
  .lb-history-grid.slide-left .lb-history-card{animation:lbHistSlideLeft .28s cubic-bezier(.22,.61,.36,1);}
  .lb-history-grid.slide-right .lb-history-card{animation:lbHistSlideRight .28s cubic-bezier(.22,.61,.36,1);}
  .lb-history-card{border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px;background:rgba(0,0,0,.2);}
  .lb-history-card .period{font-size:11px;color:#C8D0E2;font-weight:700;margin-bottom:8px;}
  .lb-history-top3{display:grid;gap:6px;}
  .lb-history-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.03);}
  .lb-history-row.rank1{position:relative;border:1px solid rgba(255,219,103,.55);background:linear-gradient(95deg,rgba(255,223,130,.22),rgba(255,223,130,.08));box-shadow:0 0 24px rgba(255,206,90,.2);}
  .lb-history-row.rank1::after{content:'';position:absolute;inset:-30% -5%;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);animation:lbShine 2.4s linear infinite;pointer-events:none;}
  .lb-history-row.rank2{border:1px solid rgba(216,216,216,.45);background:linear-gradient(95deg,rgba(220,220,220,.2),rgba(220,220,220,.06));}
  .lb-history-row.rank3{border:1px solid rgba(225,161,106,.45);background:linear-gradient(95deg,rgba(225,161,106,.2),rgba(225,161,106,.06));}
  .lb-history-rank{font-size:16px;text-align:center;}
  .lb-history-name{font-size:12px;font-weight:700;color:#F2EADA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .lb-history-sub{font-size:10px;color:#9AA4B8;}
  .lb-history-points{font-size:13px;font-weight:900;color:#FFD17C;}
  @keyframes lbShine{0%{transform:translateX(-120%);}100%{transform:translateX(120%);}}
  @keyframes lbHistSlideLeft{0%{opacity:.35;transform:translateX(24px) scale(.985);}100%{opacity:1;transform:translateX(0) scale(1);}}
  @keyframes lbHistSlideRight{0%{opacity:.35;transform:translateX(-24px) scale(.985);}100%{opacity:1;transform:translateX(0) scale(1);}}
  /* Nút "Người chơi khác" (desktop ẩn) */
  .lb-others-btn-wrap{display:none;padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);}
  .lb-others-btn{width:100%;padding:14px 20px;font-size:14px;font-weight:800;letter-spacing:.06em;color:#FFE4AA;background:linear-gradient(135deg,rgba(200,151,58,.22),rgba(255,170,68,.12));border:1px solid rgba(200,151,58,.5);border-radius:14px;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;}
  .lb-others-btn:hover{transform:translateY(-2px);border-color:rgba(255,205,104,.75);box-shadow:0 8px 24px rgba(255,170,68,.25);}
  .lb-search-wrap,.lb-others-search-wrap{padding:8px 16px 6px;}
  .lb-search-inp{font-size:13px;padding:10px 14px;}
  #lb-modal .lb-search-wrap{border-bottom:1px solid rgba(255,255,255,.06);}
  .lb-others-search-wrap{border-bottom:1px solid rgba(255,255,255,.08);}
  .lb-others-modal .lb-others-scroll{overflow-y:auto;overflow-x:hidden;flex:1;min-height:120px;max-height:65vh;padding:10px 14px 20px;-webkit-overflow-scrolling:touch;}
  .lb-others-modal .lb-others-scroll::-webkit-scrollbar{width:6px;}
  .lb-others-modal .lb-others-scroll::-webkit-scrollbar-thumb{background:rgba(200,151,58,.4);border-radius:6px;}
  .lb-others-box{max-height:85vh;display:flex;flex-direction:column;overflow:hidden;}
  
  /* Player history modal — 1 trận = 1 khung đen */
  .ph-box{max-height:85vh;display:flex;flex-direction:column;overflow:hidden;}
  .ph-scroll{overflow-y:auto;flex:1;min-height:120px;padding:12px 16px 20px;-webkit-overflow-scrolling:touch;}
  .ph-scroll::-webkit-scrollbar{width:6px;}
  .ph-scroll::-webkit-scrollbar-thumb{background:rgba(200,151,58,.4);border-radius:6px;}
  .ph-card{display:flex;align-items:stretch;gap:0;border:2px solid rgba(0,0,0,.6);border-radius:14px;overflow:hidden;margin-bottom:12px;background:linear-gradient(90deg,rgba(20,20,30,.95),rgba(28,28,40,.95));box-shadow:0 8px 24px rgba(0,0,0,.4);contain:content;content-visibility:auto;contain-intrinsic-size:92px 700px;}
  .ph-result{min-width:72px;display:flex;align-items:center;justify-content:center;padding:10px 8px;font-size:13px;font-weight:900;letter-spacing:.04em;}
  .ph-result.win{background:linear-gradient(180deg,rgba(34,139,34,.35),rgba(0,100,0,.2));color:#7FFF7F;text-shadow:0 0 12px rgba(0,255,127,.5);box-shadow:inset 0 0 20px rgba(0,255,0,.12);}
  .ph-result.win::after{content:'Thắng';}
  .ph-result.lose{background:linear-gradient(180deg,rgba(178,34,34,.3),rgba(139,0,0,.18));color:#FF8A8A;text-shadow:0 0 10px rgba(255,100,100,.4);box-shadow:inset 0 0 16px rgba(255,0,0,.08);}
  .ph-result.lose::after{content:'Thua';}
  .ph-role{min-width:88px;max-width:110px;padding:8px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:linear-gradient(180deg,rgba(65,105,225,.22),rgba(30,70,180,.12));border-right:1px solid rgba(255,255,255,.08);cursor:default;}
  .ph-role .ph-role-icon{width:28px;height:28px;object-fit:contain;display:flex;align-items:center;justify-content:center;}
  .ph-role .ph-role-icon img{width:24px;height:24px;object-fit:contain;}
  .ph-role .ph-role-name{font-size:10px;font-weight:800;color:#B8D4FF;text-align:center;line-height:1.2;}
  .ph-info{flex:1;min-width:0;padding:8px 12px;display:flex;flex-direction:column;justify-content:center;gap:4px;}
  .ph-info-line{font-size:11px;color:#D8A0F0;font-weight:700;}
  .ph-points{min-width:80px;padding:10px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:linear-gradient(135deg,rgba(200,151,58,.15),rgba(255,170,68,.08));border-left:1px solid rgba(255,255,255,.06);}
  .ph-points .ph-delta{font-size:15px;font-weight:900;}
  .ph-points .ph-delta.plus{color:#7FFF7F;text-shadow:0 0 10px rgba(0,255,127,.45);}
  .ph-points .ph-delta.minus{color:#FF8A8A;}
  .ph-points .ph-label{font-size:9px;color:var(--silver);text-transform:uppercase;letter-spacing:.06em;}
  
  @media (max-width:640px){
  .lb-box{max-width:100%;max-height:90vh;}
  .lb-meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
  .lb-chip{padding:6px 8px;}
  .lb-chip .k{font-size:9px;}
  .lb-chip .v{font-size:12px;}
  .lb-podium{grid-template-columns:1fr 1.12fr 1fr;gap:6px;align-items:end;}
  .lb-podium-card{padding:6px 8px 6px;min-height:72px;}
  .lb-podium-rank{font-size:15px;}
  .lb-podium-name{font-size:11px;margin-top:2px;}
  .lb-podium-card.rank1 .lb-podium-name{font-size:12px;}
  .lb-podium-tag{font-size:9px;margin-top:2px;}
  .lb-podium-points{font-size:13px;}
  .lb-podium-card.rank1 .lb-podium-points{font-size:15px;}
  .lb-podium-sub{font-size:9px;}
  .lb-table-hd{display:none;}
  #lb-modal .lb-search-wrap{display:none!important;}
  .lb-scroll.lb-mobile-hide{display:none!important;}
  .lb-others-btn-wrap{display:block!important;}
  .lb-scroll{padding:8px;}
  .lb-item{grid-template-columns:46px minmax(0,1fr) 70px;grid-template-areas:'rank player points' '. ws wr';row-gap:4px;}
  .lb-rank-col{grid-area:rank;}
  .lb-player{grid-area:player;}
  .lb-points-col{grid-area:points;}
  .lb-stat.games{grid-area:ws;text-align:left;padding-left:54px;}
  .lb-stat.wr{grid-area:wr;text-align:right;padding-right:6px;}
  .lb-stat.wins{display:none;}
  }
  
  /* ===== ADMIN PANEL ===== */
  .admin-modal { position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:5000;display:none;align-items:center;justify-content:center;padding:16px; }
  .admin-box { background:#12121f;border:1px solid rgba(200,151,58,.35);border-radius:18px;width:100%;max-width:640px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.7); }
  .admin-hd { padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;background:rgba(200,151,58,.06); }
  .admin-hd h2 { font-size:15px;color:#C8973A;font-weight:800;letter-spacing:.06em; }
  .admin-scroll { overflow-y:auto;flex:1;padding:14px; }
  .admin-login-wrap { padding:20px; }
  .admin-user-row { display:grid;grid-template-columns:1fr 90px 90px 90px 90px 80px;gap:8px;align-items:center;padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:10px;margin-bottom:8px;background:rgba(0,0,0,.3); }
  .admin-user-row:hover { border-color:rgba(200,151,58,.3); }
  .admin-user-info .aui-name { font-size:13px;font-weight:700;color:#E8DCC8; }
  .admin-user-info .aui-sub { font-size:11px;color:#9AA4B8;margin-top:2px; }
  .admin-user-info .aui-stats { font-size:10px;color:#6a7080;margin-top:2px; }
  .admin-btn { padding:6px 10px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;border:none;transition:opacity .15s;white-space:nowrap;-webkit-appearance:none;appearance:none; }
  .admin-btn.view { background:rgba(100,180,255,.15);border:1px solid rgba(100,180,255,.3);color:#64B4FF; }
  .admin-btn.rename { background:rgba(200,151,58,.15);border:1px solid rgba(200,151,58,.3);color:#C8973A; }
  .admin-btn.avatar { background:rgba(255,150,100,.15);border:1px solid rgba(255,150,100,.3);color:#FFB88C; }
  .admin-btn.delete { background:rgba(220,20,60,.15);border:1px solid rgba(220,20,60,.3);color:#DC143C; }
  .admin-btn:hover { opacity:.75; }
  .admin-search { width:100%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:10px 14px;color:#E8DCC8;font-size:14px;outline:none;margin-bottom:12px; }
  .admin-search:focus { border-color:rgba(200,151,58,.45); }
  .admin-filter-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 10px;}
  .admin-filter-chip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#B8C0D4;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:800;letter-spacing:.04em;cursor:pointer;transition:all .2s;}
  .admin-filter-chip:hover{border-color:rgba(255,205,120,.5);color:#E8DCC8;}
  .admin-filter-chip.active{background:rgba(200,151,58,.2);border-color:rgba(200,151,58,.55);color:#FFE1A8;}
  .admin-btn.approve { background:rgba(80,200,120,.15);border:1px solid rgba(80,200,120,.3);color:#6be38d; }
  .admin-btn.trial { background:rgba(170,120,255,.15);border:1px solid rgba(170,120,255,.35);color:#cba8ff; }
  .admin-status { font-size:10px;color:#9AA4B8;margin-top:2px }
  .admin-status.pending { color:#F0C674 }
  .admin-status.approved { color:#6be38d }
  .admin-status.trial { color:#cba8ff }
  .pw-modal-bg { position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:6000;display:none;align-items:center;justify-content:center;padding:16px; }
  .pw-modal-box { background:#12121f;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:24px;max-width:380px;width:100%; }
  .admin-box.luxe{max-width:1040px;border-color:rgba(255,205,120,.35);background:linear-gradient(165deg,#111425,#0c1020);}
  .admin-tools{padding:12px 14px 0;display:grid;gap:10px;}
  .admin-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
  .admin-kpi-card{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01));}
  .admin-kpi-card .k{font-size:10px;color:#9AA4B8;letter-spacing:.05em;text-transform:uppercase;}
  .admin-kpi-card .v{font-size:18px;color:#FFE1A8;font-weight:900;margin-top:4px;}
  .admin-kpi-card .s{font-size:10px;color:#8E9AB6;margin-top:3px;}
  .admin-action-row{display:flex;gap:8px;flex-wrap:wrap;}
  .admin-btnx{padding:8px 12px;border-radius:10px;font-size:11px;font-weight:800;letter-spacing:.04em;cursor:pointer;border:1px solid transparent;}
  .admin-btnx.rank-reset{background:rgba(220,20,60,.18);border-color:rgba(220,20,60,.35);color:#FF9FB6;}
  .admin-btnx.refresh{background:rgba(100,180,255,.16);border-color:rgba(100,180,255,.35);color:#9ED4FF;}
  .admin-btnx.close-season{background:rgba(255,205,104,.16);border-color:rgba(255,205,104,.35);color:#FFE1A8;}
  .admin-btnx.auto-approve{background:rgba(120,120,140,.16);border-color:rgba(160,160,180,.35);color:#D7DDF1;}
  .admin-btnx.auto-approve.on{background:rgba(80,220,120,.18);border-color:rgba(100,230,140,.4);color:#B2FFCB;}
  .admin-btnx:hover{opacity:.82;}
  .admin-top-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;}
  .admin-top-item{border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px;background:rgba(255,255,255,.03);}
  .admin-top-item .n{font-size:11px;font-weight:800;color:#EADFCB;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .chat-windows-container .chat-box.active {
    display: block;
  }
  #chat-buttons-container {
    position: fixed;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
  }
  .chat-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
  }
  .chat-button:hover {
    background-color: rgba(0, 0, 0, 0.7);
  }
  .chat-button img {
    width: 30px;
    height: 30px;
  }
  .chat-windows-container {
    position: fixed;
    top: 50%;
    left: 70px;
    transform: translateY(-50%);
    width: 300px;
    height: 400px;
    z-index: 1000;
  }
  .chat-windows-container .chat-box {
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--border);
    border-radius: 10px;
    flex-direction: column;
  }
  .admin-top-item .p{font-size:10px;color:#FFC86A;margin-top:3px;}
  @media (max-width:760px){
  .admin-kpi{grid-template-columns:repeat(2,minmax(0,1fr));}
  .admin-top-board{grid-template-columns:repeat(2,minmax(0,1fr));}
  }

  /* Luật chơi & thông tin cập nhật (nội dung từ /content/*.html) */
  .rules-changelog-modal-inner .rules-changelog-tabs{
    display:flex;gap:6px;margin:10px 0 0;border-bottom:1px solid var(--border);padding-bottom:0;
  }
  .rules-changelog-modal-inner .rc-tab{
    flex:1;padding:11px 8px;font-size:12px;font-weight:700;letter-spacing:.03em;border:none;background:transparent;color:var(--silver);
    cursor:pointer;border-radius:8px 8px 0 0;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,background .15s;
  }
  .rules-changelog-modal-inner .rc-tab:hover{color:var(--moon);background:rgba(200,151,58,.08);}
  .rules-changelog-modal-inner .rc-tab.active{color:var(--gold);border-bottom-color:var(--gold);background:rgba(200,151,58,.1);}
  .rules-changelog-modal-inner .rc-pane{min-height:120px;}
  .rules-changelog-modal-inner .rules-changelog-body{
    max-height:min(62vh,440px);overflow-y:auto;padding:12px 6px 16px;font-size:13px;line-height:1.55;color:var(--moon);text-align:left;
    -webkit-overflow-scrolling:touch;
  }
  .rules-changelog-modal-inner .rc-prose h1,.rules-changelog-modal-inner .rc-prose h2,.rules-changelog-modal-inner .rc-prose h3{
    font-size:14px;color:var(--gold);margin:16px 0 8px;font-weight:700;
  }
  .rules-changelog-modal-inner .rc-prose h1:first-child,.rules-changelog-modal-inner .rc-prose h2:first-child,.rules-changelog-modal-inner .rc-prose h3:first-child{margin-top:0;}
  .rules-changelog-modal-inner .rc-prose p{margin:8px 0;}
  .rules-changelog-modal-inner .rc-prose ul,.rules-changelog-modal-inner .rc-prose ol{margin:8px 0 8px 20px;}
  .rules-changelog-modal-inner .rc-prose li{margin:4px 0;}
  .rules-changelog-modal-inner .rc-prose .rc-title{font-size:15px;letter-spacing:.02em;}
  .rules-changelog-modal-inner .rc-prose .rc-lead{color:var(--silver);font-size:12.5px;line-height:1.6;}
  .rules-changelog-modal-inner .rc-prose .rc-role-grid{
    display:grid;gap:12px;margin:12px 0;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  }
  .rules-changelog-modal-inner .rc-prose .rc-role-block{
    background:rgba(0,0,0,.2);border-radius:10px;padding:10px 12px;border:1px solid var(--border);
  }
  .rules-changelog-modal-inner .rc-prose .rc-role-block h4{margin:0 0 8px;font-size:12px;color:var(--gold);}
  .rules-changelog-modal-inner .rc-prose .rc-role-block ul{margin:0;padding-left:18px;}
  .rules-changelog-modal-inner .rc-prose .rc-note{
    font-size:12px;color:var(--silver);border-left:3px solid rgba(200,151,58,.45);padding:8px 0 8px 12px;margin:12px 0;background:rgba(200,151,58,.06);border-radius:0 8px 8px 0;
  }
  .rules-changelog-modal-inner .rc-prose .rc-footer{margin-top:16px;padding-top:12px;border-top:1px solid var(--border);font-size:12px;color:var(--silver);}
  .rules-changelog-modal-inner .rc-loading{padding:20px;text-align:center;font-size:12px;}

  /* Changelog (public/content/changelog.html) — cl-* */
  .rules-changelog-modal-inner .rc-prose .cl-hero{
    font-size:12px;color:var(--silver);margin:0 0 14px;padding:10px 12px;border-radius:10px;
    background:linear-gradient(135deg,rgba(200,151,58,.12),rgba(100,180,255,.06));border:1px solid var(--border);
  }
  .rules-changelog-modal-inner .rc-prose .cl-hero code{font-size:11px;opacity:.95;}
  .rules-changelog-modal-inner .rc-prose .cl-version{
    margin:0 0 16px;padding:0;border-radius:12px;border:1px solid var(--border);
    background:rgba(0,0,0,.18);overflow:hidden;
  }
  .rules-changelog-modal-inner .rc-prose .cl-version--latest{
    border-color:rgba(200,151,58,.35);
    box-shadow:0 0 0 1px rgba(200,151,58,.12),0 8px 24px rgba(0,0,0,.25);
  }
  .rules-changelog-modal-inner .rc-prose .cl-version--major{
    border-color:rgba(255,220,120,.7);
    box-shadow:0 0 0 1px rgba(255,220,120,.28),0 0 28px rgba(255,210,120,.18),0 12px 30px rgba(0,0,0,.32);
    transform:translateY(-1px);
  }
  .rules-changelog-modal-inner .rc-prose .cl-version--major .cl-ver-head{
    background:linear-gradient(180deg,rgba(255,220,120,.3),rgba(200,151,58,.08) 55%,transparent);
  }
  .rules-changelog-modal-inner .rc-prose .cl-version--major .cl-ver-badge{
    color:#fff3cf;
    border-color:rgba(255,230,150,.78);
    background:linear-gradient(135deg,rgba(255,220,120,.44),rgba(200,151,58,.34));
    text-shadow:0 1px 0 rgba(0,0,0,.2);
  }
  .rules-changelog-modal-inner .rc-prose .cl-ver-head{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 14px;
    background:linear-gradient(180deg,rgba(200,151,58,.14),transparent);
    border-bottom:1px solid var(--border);
  }
  .rules-changelog-modal-inner .rc-prose .cl-ver-badge{
    display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:4px 10px;border-radius:999px;
    font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--gold);background:rgba(200,151,58,.2);border:1px solid rgba(200,151,58,.4);
  }
  .rules-changelog-modal-inner .rc-prose .cl-ver-badge--muted{opacity:.75;font-weight:700;background:rgba(255,255,255,.06);border-color:var(--border);color:var(--silver);}
  .rules-changelog-modal-inner .rc-prose .cl-ver-title{flex:1;min-width:140px;font-size:13px;font-weight:700;color:var(--moon);}
  .rules-changelog-modal-inner .rc-prose .cl-ver-date{font-size:11px;color:var(--silver);white-space:nowrap;}
  .rules-changelog-modal-inner .rc-prose .cl-ver-body{padding:10px 14px 14px;}
  .rules-changelog-modal-inner .rc-prose .cl-block{margin-top:12px;}
  .rules-changelog-modal-inner .rc-prose .cl-block:first-child{margin-top:0;}
  .rules-changelog-modal-inner .rc-prose .cl-block-title{
    display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:12px;font-weight:700;color:var(--gold);
  }
  .rules-changelog-modal-inner .rc-prose .cl-block--feat .cl-block-title{color:#7ec8ff;}
  .rules-changelog-modal-inner .rc-prose .cl-block--fix .cl-block-title{color:#ffb38a;}
  .rules-changelog-modal-inner .rc-prose .cl-block--tweak .cl-block-title{color:#c9b8ff;}
  .rules-changelog-modal-inner .rc-prose .cl-ico{font-style:normal;}
  .rules-changelog-modal-inner .rc-prose .cl-list{margin:0;padding-left:0;list-style:none;}
  .rules-changelog-modal-inner .rc-prose .cl-list li{
    position:relative;padding:6px 0 6px 4px;border-bottom:1px dashed rgba(255,255,255,.06);font-size:12.5px;line-height:1.5;
  }
  .rules-changelog-modal-inner .rc-prose .cl-list li.cl-spark{
    padding:7px 8px 7px 10px;
    border:1px solid rgba(255,215,120,.3);
    border-radius:9px;
    background:linear-gradient(90deg,rgba(255,215,120,.08),rgba(255,255,255,.02),rgba(120,180,255,.08));
    box-shadow:0 0 0 1px rgba(255,215,120,.12) inset,0 6px 16px rgba(0,0,0,.18);
    animation:clSparkGlow 2.8s ease-in-out infinite;
    overflow:hidden;
  }
  .rules-changelog-modal-inner .rc-prose .cl-list li.cl-spark::after{
    content:'✨';
    position:absolute;
    right:8px;
    top:6px;
    font-size:11px;
    opacity:.85;
    animation:clSparkTwinkle 1.9s ease-in-out infinite;
  }
  @keyframes clSparkGlow{
    0%,100%{border-color:rgba(255,215,120,.26);box-shadow:0 0 0 1px rgba(255,215,120,.1) inset,0 6px 16px rgba(0,0,0,.18);}
    50%{border-color:rgba(255,235,160,.55);box-shadow:0 0 0 1px rgba(255,235,160,.22) inset,0 10px 22px rgba(255,215,120,.18);}
  }
  @keyframes clSparkTwinkle{
    0%,100%{opacity:.45;transform:scale(.9) rotate(-8deg);}
    50%{opacity:1;transform:scale(1.15) rotate(8deg);}
  }
  .rules-changelog-modal-inner .rc-prose .cl-list li:last-child{border-bottom:none;padding-bottom:0;}
  .rules-changelog-modal-inner .rc-prose .cl-tag{
    display:inline-block;margin-right:6px;padding:1px 7px;border-radius:4px;font-size:10px;font-weight:800;letter-spacing:.04em;vertical-align:1px;
  }
  .rules-changelog-modal-inner .rc-prose .cl-tag--new{background:rgba(100,200,255,.2);color:#9fdcff;}
  .rules-changelog-modal-inner .rc-prose .cl-tag--fix{background:rgba(255,120,80,.18);color:#ffc4a8;}
  .rules-changelog-modal-inner .rc-prose .cl-tag--tweak{background:rgba(180,160,255,.18);color:#d4c8ff;}
  .rules-changelog-modal-inner .rc-prose .cl-muted{font-size:12px;color:var(--silver);margin:0;line-height:1.55;}
  .rules-changelog-modal-inner .rc-prose .cl-foot{
    margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:11px;color:var(--silver);line-height:1.5;
  }
  .rules-changelog-modal-inner .rc-prose .cl-foot code{font-size:10px;}
  /* Liên hệ trong Luật chơi: cho phép bôi/copy + link nổi bật */
  .rules-changelog-modal-inner .rc-prose .rc-contact-copy-ok,
  .rules-changelog-modal-inner .rc-prose .rc-contact-copy-ok *{
    -webkit-user-select:text!important;
    user-select:text!important;
    -webkit-touch-callout:default;
  }
  .rules-changelog-modal-inner .rc-prose .rc-contact-mail{
    color:#9fdcff!important;
    font-weight:800;
    text-decoration:none;
    border-bottom:1px solid rgba(126,200,255,.55);
    text-shadow:0 0 12px rgba(100,190,255,.55),0 0 24px rgba(80,160,255,.35);
    filter:drop-shadow(0 0 6px rgba(120,200,255,.4));
    transition:color .15s ease,filter .15s ease,text-shadow .15s ease;
  }
  .rules-changelog-modal-inner .rc-prose .rc-contact-mail:hover{
    color:#d4f0ff!important;
    text-shadow:0 0 16px rgba(160,220,255,.75),0 0 28px rgba(120,200,255,.45);
    filter:drop-shadow(0 0 10px rgba(140,210,255,.55));
  }
  .rules-changelog-modal-inner .rc-prose .rc-contact-mail-alt{
    font-size:11px;
    color:var(--silver);
    font-weight:500;
  }
  .rules-changelog-modal-inner .rc-prose .rc-contact-mail-alt a{
    color:#b8c8e8;
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .rules-changelog-modal-inner .rc-prose .rc-contact-zalo{
    color:#7ec8ff!important;
    font-weight:700;
    word-break:break-all;
    text-decoration:underline;
    text-underline-offset:3px;
  }

  /* Thẩm phán — phiên tòa: thay đồng hồ bằng nhãn + búa */
  .judge-court-lbl{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    min-height:2.5rem;
  }
  .judge-court-title{
    font-weight:700;
    font-size:1.05rem;
    letter-spacing:0.02em;
    color:var(--gold);
  }
  .judge-gavel{
    display:inline-block;
    font-size:1.45rem;
    line-height:1;
    animation:judge-gavel-bob 0.85s ease-in-out infinite;
  }
  @keyframes judge-gavel-bob{
    0%,100%{ transform:translateY(0) rotate(-10deg); }
    50%{ transform:translateY(-7px) rotate(10deg); }
  }

  /* Hetalia Mochi - Sweden - https://www.cursors-4u.com/cursor/hetalia-mochi-sweden */
  *{
    cursor:url('https://cdn.cursors-4u.net/previews/hetalia-mochi-sweden-8634cda4-32.webp') 32 32,auto!important;
  }
  /* End www.Cursors-4U.com Code */

/* ============================================================
   AVATAR MOD STYLES
   ============================================================ */
.avatar-tab-btn {
  transition: all 0.2s ease;
}

.avatar-tab-btn:hover {
  background: rgba(200, 151, 58, 0.15) !important;
  transform: translateY(-1px);
}

.avatar-tab-btn:active {
  transform: scale(0.98);
}

.avatar-tab-btn.active {
  background: rgba(200, 151, 58, 0.1) !important;
  color: #C8973A !important;
  border-color: rgba(200, 151, 58, 0.5) !important;
}

#avatar-current-preview {
  transition: all 0.3s ease;
}

#avatar-current-preview img {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#custom-avatar-preview img {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#avatar-modal-choices {
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

#avatar-modal-choices .avatar-btn {
  transition: all 0.15s ease;
}

#avatar-modal-choices .avatar-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(200, 151, 58, 0.3);
}

#avatar-modal-choices .avatar-btn.sel {
  box-shadow: 0 0 0 2px rgba(200, 151, 58, 0.7), 0 4px 12px rgba(200, 151, 58, 0.4);
}

#avatar-file-input {
  max-width: 100%;
}