/* Ma Sói Moonlight — phần bổ sung cho bản multiplayer. Dùng cùng bảng màu với styles.css (không thay thiết kế gốc). */
.hidden{display:none!important}
.muted-note{color:#92a6b2;margin:12px 0 0}
.join-panel form{display:grid;gap:14px}
.join-panel .btn{margin-top:4px}
.session-list{margin-top:16px;border-top:1px solid #2d4659;padding-top:12px}
.session-list h4{margin:0 0 8px;font:700 13px Georgia,serif;color:#e3c18a}
.session-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #253d4d;font-size:12px}
.session-row span{flex:1;color:#c4d4df}
.deck-name{display:block;width:100%;margin-top:8px;background:transparent;border:0;border-bottom:1px dashed #3a536c;color:var(--text);font:700 19px Georgia,"Times New Roman",serif;padding:2px 0;outline:0}
.deck-name:focus{border-bottom-color:#e1ba72}
.deck-name:disabled{border-bottom-color:transparent;color:var(--text);opacity:1}
.selected-role .x{border:0;background:none;color:#ca8d89;font-size:14px;padding:0 0 0 2px;line-height:1}
.selected-role{cursor:pointer}
.preset-detail{background:#0a1a2a;border:1px solid #2c4355;border-radius:9px;padding:12px;margin:-6px 0 15px;font-size:12px;color:#c4d4df}
.preset-detail:empty{display:none}
.preset-detail .pd-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.preset-detail .pd-meta{display:flex;flex-wrap:wrap;gap:12px;color:#9fb1bc;font-size:11px}
.preset-detail .pd-meta b{color:#f2ce92}
.pill{display:inline-flex;align-items:center;gap:5px;border:1px solid #34495c;background:#122437;padding:5px 8px;border-radius:8px;font-size:11px}
.pill b{color:#f2ce92}
.pill.wolf{border-color:#7a3a36}.pill.independent{border-color:#5d4580}.pill.switch{border-color:#2e6158}
.warn-line{color:#f4d391;font-size:11px;margin-top:8px}
.bad-line{color:#ffaaa0;font-size:11px;margin-top:8px}
.ro-banner{font-size:12px;color:#f4d391;background:#6c562951;border:1px solid #675037;border-radius:8px;padding:9px 11px;margin-bottom:12px}
.rule-row select,.rule-row input[type=number],.host-input,.host-select{background:#081725;color:#eff6f6;border:1px solid #3a536c;border-radius:7px;height:36px;padding:0 9px;max-width:100%}
.rule-row select{max-width:260px}
.rule-row input[type=number]{width:96px}
.rule-row .tag{display:inline-block;font-size:9px;letter-spacing:1px;color:#8dabb9;border:1px solid #34495c;border-radius:20px;padding:2px 6px;margin-left:6px;vertical-align:middle}
.switch:disabled,.rule-row select:disabled,.rule-row input:disabled{opacity:.6;cursor:not-allowed}
.night-order-panel{margin-top:16px}
.night-order-panel:empty{display:none}
.order-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #253d4d;font-size:12px}
.order-row .n{width:22px;height:22px;border-radius:50%;background:#263e55;display:grid;place-items:center;color:#e7c384;font-size:11px}
.order-row span.l{flex:1}
.mini{border:1px solid #43536a;background:#1b2d3e;color:#e9d3a9;border-radius:6px;min-width:30px;height:28px;font-size:13px}
.mini.danger{color:#ffaaa0;border-color:#73322c}
/* lobby */
.share-box{display:grid;gap:10px;width:100%}
.share-row{display:flex;gap:7px}
.share-row input{flex:1;margin:0!important}
.qr-box{display:grid;place-items:center;padding:12px;background:#f4ead6;border-radius:10px;width:max-content;margin:6px auto}
.qr-box img{display:block;width:200px;height:200px;image-rendering:pixelated}
.code-big{font:800 30px Georgia,serif;letter-spacing:6px;color:#f4d39a;text-align:center}
.online-dot{width:8px;height:8px;border-radius:50%;background:#4d6170;display:inline-block;margin-left:6px;vertical-align:middle}
.online-dot.on{background:#5fd39d;box-shadow:0 0 6px #5fd39d}
.person.me{background:#17293c80;border-radius:8px;padding-left:6px;padding-right:6px}
.person .tagme{font-size:10px;color:#e3c18a;margin-left:6px}
.person.dead .person-name{text-decoration:line-through;color:#7d8f9c}
.person .badge{font-size:10px;border:1px solid #34495c;border-radius:12px;padding:3px 7px;color:#9fb1bc;white-space:nowrap}
.person .badge.wolf{color:#ef8178;border-color:#7a3a36}.person .badge.village{color:#84c4ed;border-color:#2a5a7a}.person .badge.independent{color:#c9a4f9;border-color:#5d4580}.person .badge.switch{color:#91d6c9;border-color:#2e6158}
.big-ready{width:100%;font-size:15px;padding:14px}
.lobby-actions .btn{margin-bottom:9px}
/* thẻ bài lật 3D */
.card-stage{display:grid;justify-items:center;gap:14px}
.ml-card-wrap{perspective:1200px;width:min(300px,82vw);aspect-ratio:2/3;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ml-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.ml-card.flipped{transform:rotateY(180deg)}
.ml-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;overflow:hidden;box-shadow:0 18px 50px #000a}
.ml-back img{width:100%;height:100%;object-fit:cover;display:block}
.ml-front{transform:rotateY(180deg);background:#0b1624;border:2px solid #c8a267;display:flex;flex-direction:column;--tone:#6cb5ec}
.ml-front:after{content:"";position:absolute;inset:4px;border:1px solid #e0ba78a6;border-radius:10px;pointer-events:none}
.ml-front.wolf{--tone:#e0605a}.ml-front.village{--tone:#6cb5ec}.ml-front.independent{--tone:#c18dff}.ml-front.switch{--tone:#75caba}
.ml-art{position:relative;flex:1 1 66%;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#1b3550,#09111d 75%)}
.ml-art img{width:100%;height:100%;object-fit:cover;display:block}
.ml-art .no-art{height:100%;display:grid;place-items:center;font-size:96px}
.ml-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0009 0%,transparent 22%,transparent 75%,#0b1624 100%);pointer-events:none}
.ml-title{position:absolute;top:12px;left:12px;z-index:2;display:flex;align-items:center;gap:7px;font:800 21px Georgia,"Times New Roman",serif;color:#fff0d0;text-shadow:0 2px 8px #000;text-transform:uppercase}
.ml-title i{width:13px;height:13px;border-radius:50%;border:2px solid var(--tone);box-shadow:0 0 0 2px #0008 inset;display:inline-block}
.ml-en{position:absolute;right:10px;top:46px;z-index:2;writing-mode:vertical-rl;letter-spacing:5px;font:700 11px Georgia,serif;color:#fff;text-shadow:0 2px 5px #000;max-height:70%}
.ml-body{border-top:2px solid var(--tone);padding:10px 13px 6px;flex:0 0 auto}
.ml-team{display:block;font-size:10px;letter-spacing:1.5px;font-weight:800;color:var(--tone);text-transform:uppercase}
.ml-body p{margin:5px 0 0;font-size:12px;line-height:1.45;color:#dbe6ec}
.ml-foot{display:flex;justify-content:space-between;padding:6px 13px 10px;font-size:8px;letter-spacing:1.2px;color:#8a9caa}
.card-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.card-info{width:100%;max-width:520px}
.card-info dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 12px;font-size:12px;margin:0}
.card-info dt{color:#e3c18a}
.card-info dd{margin:0;color:#c4d4df}
.know-box{margin-top:12px;padding:10px 12px;border:1px solid #765c38;background:#2b261b66;border-radius:8px;font-size:12px}
.know-box b{color:#f4d39a}
.tap-hint{font-size:11px;color:#9fb1bc;text-align:center}
/* ván chơi */
.phase-banner{display:flex;align-items:center;gap:14px;border:1px solid #4861778c;border-radius:14px;padding:14px 16px;margin-bottom:14px;background:linear-gradient(90deg,#091725,#132a3cc9)}
.phase-banner.night{background:linear-gradient(90deg,#060d18,#101b33)}
.phase-banner.day{background:linear-gradient(90deg,#1b2433,#3a3222)}
.phase-banner .ph-icon{font-size:34px}
.phase-banner h2{font-size:24px;margin:2px 0}
.phase-banner p{margin:0;font-size:12px;color:#aec0c9}
.timer{font:800 26px Georgia,serif;color:#f4d39a;margin-left:auto;font-variant-numeric:tabular-nums}
.timer.low{color:#ff8f86}
.flag{display:inline-block;font-size:10px;letter-spacing:1px;border:1px solid #a67c4160;padding:4px 8px;border-radius:20px;color:#d5b780;margin:2px 4px 2px 0}
.flag.red{color:#ffaaa0;border-color:#73322c}
.game-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.game-grid>.panel{min-width:0}
.panel h3{margin-bottom:10px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:12px 0}
.pick{border:1px solid #3d5368;background:#112336;color:#dbe6ec;border-radius:9px;padding:11px 9px;font-size:13px;text-align:left;display:flex;align-items:center;gap:8px;min-height:44px}
.pick .person-avatar{width:26px;height:26px;flex:0 0 26px;font-size:12px}
.pick.sel{border-color:#e1ba72;background:#45381f;color:#ffe4ae;box-shadow:0 0 0 1px #ac854d inset}
.pick.skip{justify-content:center;color:#9fb1bc}
.result-box{border:1px solid #2c8069;background:#173c3466;color:#acf2cf;border-radius:9px;padding:12px;font-size:14px;margin-top:10px}
.wait-box{text-align:center;padding:26px 10px;color:#9fb1bc}
.wait-box .moon{font-size:46px;display:block;margin-bottom:8px;animation:pulse 3s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5;transform:scale(.95)}}
.log-list{display:grid;gap:8px;max-height:420px;overflow:auto}
.log-item{font-size:12px;border-left:3px solid #4d6170;padding:6px 10px;background:#0b1b2b;border-radius:0 7px 7px 0;color:#c4d4df}
.log-item.dawn{border-left-color:#eecb86}.log-item.vote{border-left-color:#c3524d}.log-item.host{border-left-color:#a77be4}.log-item.end{border-left-color:#6bbfae}.log-item.hunter{border-left-color:#e0605a}
.log-item small{display:block;color:#7d8f9c;margin-bottom:2px}
.log-item .deaths{margin-top:4px;display:flex;flex-wrap:wrap;gap:5px}
.steps{display:grid;gap:6px}
.step{display:flex;align-items:center;gap:8px;border:1px solid #2c4355;border-radius:8px;padding:9px 10px;font-size:12px;background:#0b1b2b}
.step.current{border-color:#e1ba72;background:#2b261b}
.step.done{opacity:.6}
.step .s-l{flex:1}
.step .s-c{font-size:11px;color:#9fb1bc;white-space:nowrap}
.step .acts{display:block;font-size:11px;color:#c9a4f9;margin-top:3px}
.host-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.check-list{display:grid;gap:6px;margin:10px 0}
.check-list label{display:flex;align-items:center;gap:9px;font-size:13px;padding:8px 10px;border:1px solid #2c4355;border-radius:8px;background:#0b1b2b}
.check-list input{width:18px;height:18px;accent-color:#e1ba72}
.need{font-size:12px;color:#f4d391;background:#6c562951;border-radius:6px;padding:7px 9px;margin:5px 0}
.note-secret{font-size:12px;color:#c9a4f9;background:#37234640;border-radius:6px;padding:7px 9px;margin:5px 0}
.ptable{width:100%;border-collapse:collapse;font-size:12px}
.ptable td{padding:7px 4px;border-bottom:1px solid #253d4d;vertical-align:middle}
.ptable td.n{font-weight:700}
.ptable .ctl{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}
.ptable select{height:28px;font-size:11px}
.reason-row{display:flex;gap:7px;align-items:center;margin-bottom:10px}
.reason-row input{flex:1;height:36px}
.tally{display:grid;gap:5px;margin:8px 0}
.tally-row{display:flex;justify-content:space-between;font-size:12px;padding:6px 9px;background:#0b1b2b;border-radius:6px}
.final-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.final-item{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #2c4355;border-radius:8px;font-size:12px;background:#0b1b2b}
.final-item img,.final-item .ic{width:34px;height:34px;border-radius:6px;object-fit:cover;flex:0 0 34px;display:grid;place-items:center;background:#14263c}
.win-banner{border:1px solid #2c8069;background:#173c3480;border-radius:12px;padding:14px;margin-bottom:14px}
.win-banner h3{color:#acf2cf}
.modal-panel select{background:#081725;color:#eff6f6;border:1px solid #3a536c;border-radius:7px;height:38px;padding:0 9px;width:100%}
.variant-box{margin-top:12px;border-top:1px solid #46596c;padding-top:12px}
.variant-opt{display:block;border:1px solid #34495c;border-radius:8px;padding:9px 10px;margin:7px 0;font-size:12px;cursor:pointer}
.variant-opt.sel{border-color:#e1ba72;background:#2b261b}
.variant-opt b{display:block;color:#f2ce92;margin-bottom:3px}
.deck-list{display:grid;gap:8px;margin-top:12px}
.deck-item{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid #2c4355;border-radius:8px;background:#0b1b2b;font-size:12px}
.deck-item span{flex:1}
.hist{font-size:11px;max-height:60vh;overflow:auto}
.hist div{padding:6px 0;border-bottom:1px solid #253d4d}
.hist small{color:#7d8f9c}
.btn.danger{background:#5a2420;border-color:#8a3a33;color:#ffd0c8}
@media(max-width:860px){.game-grid{grid-template-columns:1fr}.nav{gap:2px}.nav-link{padding:9px 7px}}
@media(max-width:620px){.phase-banner{flex-wrap:wrap;gap:8px}.timer{margin-left:0}.pick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ptable .ctl .mini{min-width:26px}.code-big{font-size:26px;letter-spacing:4px}.nav-link{font-size:10.5px;padding:8px 5px}.rule-row{flex-wrap:wrap}.rule-row select{max-width:100%}}
@media(prefers-reduced-motion:reduce){.ml-card{transition:none}}
.layout.single{grid-template-columns:minmax(0,1fr)}
.lobby-side .btn,.host-actions .btn{white-space:normal;text-align:center}
/* v2: kết quả, người chết, mất kết nối, placeholder */
.result-big{font:800 30px Georgia,serif;text-align:center;padding:10px;border-radius:10px;margin-bottom:10px;letter-spacing:2px}
.result-big.win{color:#1b1206;background:linear-gradient(125deg,#f1d08f,#b07a34);box-shadow:0 0 30px #e5b26a55}
.result-big.lose{color:#ffd0c8;background:#5a2420;border:1px solid #8a3a33}
.final-item.won{border-color:#e1ba72;background:#2b261b}
.t-wolf{color:#ef8178}.t-village{color:#84c4ed}.t-independent{color:#c9a4f9}.t-switch{color:#91d6c9}
.dead-panel{border-color:#73322c;background:linear-gradient(160deg,#2a1518,#120d14)}
.dead-panel h3{color:#ffaaa0}
.offline-alert{border-color:#8a6a2f;background:#3b30223b}
.offline-alert b{color:#f4d391}
.badge.lose-b{color:#ffaaa0;border-color:#73322c}
.af-box{display:grid;gap:8px;margin:10px 0}
.no-art{flex-direction:column;gap:6px}
.no-art small,.ml-art .no-art small{display:block;font:600 10px system-ui;letter-spacing:1.5px;color:#9fb1bc;text-transform:uppercase;filter:none}
.ml-art .no-art{display:flex;align-items:center;justify-content:center}
.ml-card-wrap{width:min(340px,86vw,calc(64vh * .6667))}
.ml-title{font-size:clamp(17px,5.6vw,22px)}
@media(max-width:620px){.ml-body p{font-size:12.5px}.host-actions .btn{flex:1 1 auto;min-height:44px}.ptable td{padding:9px 3px}.mini{min-width:34px;height:32px}.reason-row{flex-wrap:wrap}.reason-row select,.reason-row input{flex:1 1 140px}}
/* v2: Font có chân hỗ trợ đầy đủ tiếng Việt (Noto Serif, OFL — tự host trong public/fonts).
   Georgia thiếu glyph ế, ố, ữ… khiến trình duyệt ghép font khác và vỡ chữ ("Đế n"). */
@font-face{font-family:"Moonlight Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/noto-serif-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Moonlight Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/noto-serif-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Moonlight Serif";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/noto-serif-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Moonlight Serif";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/noto-serif-vietnamese-700-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Moonlight Serif";font-style:normal;font-weight:800 900;font-display:swap;src:url(../fonts/noto-serif-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Moonlight Serif";font-style:normal;font-weight:800 900;font-display:swap;src:url(../fonts/noto-serif-vietnamese-800-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
.brand,h1,h2,h3,.preset-summary strong,.faction-box strong,.role-en,.tile-name,.counter strong,.modal-card span,.session-list h4,.deck-name,.code-big,.ml-title,.ml-en,.timer,.result-big{font-family:"Moonlight Serif",Georgia,"Times New Roman",serif}
/* v3: trạng thái chờ, mất kết nối, quay lại phòng, nút dễ bấm */
.status-line{padding:12px 14px;font-size:13px;color:#d9e6ee;border-color:#3e586c;background:linear-gradient(160deg,#10233a,#0b1827)}
.net-banner{position:fixed;left:8px;right:8px;top:8px;z-index:40;display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:center;padding:10px 12px;border:1px solid #8a6a2f;border-radius:10px;background:#2b2216f2;color:#f4d391;font-size:13px;box-shadow:0 10px 30px #000a}
.resume-box{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.resume-box .eyebrow{width:100%}
@media(max-width:620px){.qty button{width:32px;height:32px}.mini{min-width:36px;height:34px}.pick{min-height:48px}.detail-btn{padding:8px 4px}.card-actions .btn{min-height:44px}}
.log-item.death{border-left-color:#e0605a}
/* ===== v2: menu, góp ý, chế độ chơi, kịch bản, thoát phòng (cùng ngôn ngữ thiết kế Moonlight) ===== */
.menu-btn{border:1px solid #a67c4160;background:transparent;color:#d5b780;border-radius:50%;width:36px;height:36px;font-size:17px;flex:0 0 36px}
.menu-btn:hover{background:#182b3c}
.menu-list{display:grid;gap:9px;margin-top:10px}
.menu-list h3{margin:8px 0 0;font-size:15px}
.menu-list select,.fb-form select,.fb-form textarea,.fb-form input,.scen-filters select{width:100%;background:#081725;color:#eff6f6;border:1px solid #3a536c;border-radius:7px;padding:9px 10px;font:inherit;font-size:14px;margin-top:6px}
.fb-form textarea{resize:vertical;min-height:110px;line-height:1.5}
.fb-form{display:grid;gap:12px;margin-top:12px}
.fb-link{position:relative;z-index:2;margin-top:12px;border:0;background:none;color:#c4a56b;text-decoration:underline;font-size:12px;padding:6px 0}
.fb-preview{display:flex;gap:10px;align-items:flex-start;border:1px solid #2c4355;border-radius:9px;padding:9px;background:#0b1b2b}
.fb-preview img{width:96px;max-height:160px;object-fit:contain;border-radius:6px;background:#000}
.fb-consent{display:flex;gap:8px;font-size:12px;color:#d9e6ee;margin:6px 0}
.fb-consent input{width:18px;height:18px;flex:0 0 18px;accent-color:#e1ba72}
.code-ref{font:800 20px "Moonlight Serif",Georgia,serif;letter-spacing:2px;color:#f4d39a}
.play-mode{margin:-4px 0 14px}
.play-mode .subhead{margin:0 0 10px}
.mode-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mode-row.sub{margin-top:9px;grid-template-columns:1fr 1fr}
.mode-opt{text-align:left;border:1px solid #3d5368;background:#112336;color:#c4d6e0;border-radius:10px;padding:11px 12px;display:grid;gap:4px;min-height:48px}
.mode-opt b{font-size:13px;color:#e8eef2}.mode-opt small{font-size:11px;color:#92a6b2;line-height:1.4}
.mode-opt.sel{border-color:#e1ba72;background:#45381f;box-shadow:0 0 0 1px #ac854d inset}.mode-opt.sel b{color:#ffe4ae}
.media-panel{margin-top:10px;border:1px solid #3e586c;border-radius:9px;padding:10px 12px;background:#0b1b2b;font-size:13px}
.media-panel.panel{margin-top:0}
.scen-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.scen-filters label{font-size:11px;color:#bdced7;font-weight:650}
.scen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.scen-card{border:1px solid #45617a;border-radius:12px;background:#0c1b2a;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.scen-art{position:relative;height:170px;background:radial-gradient(ellipse at 50% 55%,#1b3550,#09111d 75%);overflow:hidden}
.scen-art img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.scen-art .no-art{height:100%;display:grid;place-items:center;font-size:64px}
.scen-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0c1b2a 0%,transparent 55%);pointer-events:none}
.scen-src,.scen-n{position:absolute;top:8px;z-index:2;font-size:10px;letter-spacing:1px;font-weight:800;border-radius:16px;padding:4px 8px;background:#061622d9;border:1px solid #a67c41;color:#f4d39a}
.scen-src{left:8px}.scen-n{right:8px;color:#d9e6ee;border-color:#4d6170}
.scen-src.moonlight{border-color:#5d4580;color:#c9a4f9}.scen-src.adapted{border-color:#2e6158;color:#91d6c9}.scen-src.mine{border-color:#2a5a7a;color:#84c4ed}
.scen-body{padding:12px 13px 14px;display:grid;gap:8px;flex:1;align-content:start}
.scen-body h3{font-size:17px}
.scen-story{margin:0;font-size:12px;color:#b9cbd4;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.scen-body .host-actions{margin-top:auto;padding-top:4px}
.scen-badge{font-size:12px;color:#e8eef2;background:#2b261b66;border:1px solid #765c38;border-radius:8px;padding:8px 10px;margin:-6px 0 14px}
.scen-foot{color:#92a6b2;margin-top:16px}
.exit-panel .host-actions{margin-top:0}
@media(max-width:1150px){.scen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.topbar .menu-btn{order:1}}
@media(max-width:620px){.scen-grid{grid-template-columns:1fr}.scen-filters{grid-template-columns:1fr 1fr}.mode-row{grid-template-columns:1fr}.mode-row.sub{grid-template-columns:1fr 1fr}.scen-art{height:190px}}
/* v2 fix: meta/pill dùng chung cho card kịch bản và modal (trước đây chỉ có trong .preset-detail) */
.scen-body .pd-meta,.modal-panel .pd-meta{display:flex;flex-wrap:wrap;gap:6px 14px;color:#9fb1bc;font-size:11px}
.scen-body .pd-meta b,.modal-panel .pd-meta b{color:#f2ce92}
.scen-body .pd-row,.modal-panel .pd-row{display:flex;flex-wrap:wrap;gap:6px}
/* ===== Voice (LiveKit) — khung gọn, nằm trong luồng trang, không phủ lên thẻ/nút kỹ năng ===== */
.voice-dock{margin-bottom:14px;padding:12px 14px;display:grid;gap:8px;border-color:#3e586c}
.voice-dock[hidden]{display:none}
.lobby-side .voice-dock{margin:0 0 14px}
.vc-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.vc-st{font-size:11px;border:1px solid #4d6170;border-radius:14px;padding:3px 9px;color:#9fb1bc;white-space:nowrap}
.vc-st.ok{color:#acf2cf;border-color:#2c8069}.vc-st.warn{color:#f4d391;border-color:#8a6a2f}.vc-st.bad{color:#ffaaa0;border-color:#73322c}
.vc-rule{margin:0;font-size:12px;color:#c4d4df}
.vc-msg{margin:0;font-size:12px;color:#92a6b2}.vc-msg.bad{color:#ffaaa0}.vc-msg.warn{color:#f4d391}
.vc-ctl{display:flex;flex-wrap:wrap;gap:7px}
.vc-ctl .btn{min-height:40px}
.vc-people{display:flex;flex-wrap:wrap;gap:6px}
.vc-person{display:inline-flex;align-items:center;gap:6px;border:1px solid #34495c;background:#122437;color:#d9e6ee;border-radius:18px;padding:6px 10px;font-size:12px;min-height:34px;transition:box-shadow .15s,border-color .15s}
.vc-person.me{border-style:dashed}
.vc-person .vc-dot{width:9px;height:9px;border-radius:50%;background:#4d6170}
.vc-person.speaking{border-color:#5fd39d;box-shadow:0 0 0 2px #5fd39d55,0 0 14px #5fd39d66}
.vc-person.speaking .vc-dot{background:#5fd39d;box-shadow:0 0 8px #5fd39d}
.vc-wolves{border-top:1px solid #7a3a36;padding-top:8px;display:grid;gap:6px}
.vc-wolves b{color:#ef8178;font-size:12px}
@media(max-width:620px){.voice-dock{padding:10px}.vc-ctl .btn{flex:1 1 auto;font-size:12px}}
/* ===== Ngôn ngữ / Cài đặt người chơi / Discord ===== */
.hero-links{display:flex;flex-wrap:wrap;gap:16px;position:relative;z-index:2}
.lang-switch{border:1px solid #3e586c;border-radius:10px;padding:10px 12px;margin:4px 0 14px;background:#0a1a2a}
.lang-switch .host-actions{margin:8px 0 0}
.settings-block{border-bottom:1px solid #2b4055;padding-bottom:14px;margin-bottom:4px}
.settings-block .field input{margin-bottom:8px}
.comm-row .mode-opt small{display:block}
.discord-field input{font-family:ui-monospace,Consolas,monospace;font-size:13px}
.comm-panel{display:grid;gap:8px;margin-bottom:12px}
.panel.comm-panel{margin-bottom:0}
.discord-btn{background:linear-gradient(125deg,#8b9cff,#5865f2)!important;color:#fff!important;box-shadow:0 3px 15px #5865f245!important;text-decoration:none;min-height:44px}
.comm-remind{margin:0;font-size:13px;font-weight:700;color:#f0d49a;background:#3b30223b;border:1px solid #675037;border-radius:8px;padding:8px 10px}
.comm-note{color:#92a6b2}
@media(max-width:620px){.hero-links{gap:10px}.lang-switch .btn{flex:1 1 auto}}
/* ===== Đêm tự động: người dẫn truyện + điều khiển của người tạo phòng ===== */
.auto-panel{border-color:#4a5f8a;background:linear-gradient(160deg,#15203a,#0b1527)}
.auto-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.auto-clock{font:700 15px Georgia,serif;color:#f0d49a;font-variant-numeric:tabular-nums}
.auto-narr{font:16px/1.55 "Moonlight Serif",Georgia,"Times New Roman",serif;color:#e7ddc6;margin:10px 0}
.auto-steps{list-style:none;margin:6px 0 4px;padding:0;display:grid;gap:4px}
.auto-steps li{display:flex;justify-content:space-between;font-size:12px;color:#8fa3b4;border:1px solid #24354a;border-radius:7px;padding:6px 9px}
.auto-steps li.cur{color:#ffe7b1;border-color:#b48a52;background:#2b261b}
.auto-steps li.done{opacity:.55}
.control-panel{border-color:#7a6440}
.control-panel .btn[disabled]{opacity:.35}
.gm-row .mode-opt small{display:block}
.gm-note{color:#c9b58c!important}
.auto-ok{font-size:12px;color:#a5e8cb;margin:6px 0}
.mode-row.gm-row,.mode-row.comm-row{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:620px){.mode-row.gm-row,.mode-row.comm-row{grid-template-columns:1fr}}