/* Tiên Cảnh Kỳ Đài — giao diện thiên tiên: hồ đêm, ngọc bích, vàng lá, sương mù */
:root{
  --bg1:#0a1b2a;--bg2:#17394a;--gold:#e3c27a;--jade:#7fd6c2;--pearl:#f1ece0;--lotus:#e8a3b5;--red:#c0392b;
  --panel:rgba(255,255,255,.065);--line:rgba(227,194,122,.28);--muted:rgba(241,236,224,.62);
  --r:14px;--serif:"Cormorant Garamond","Noto Serif",Georgia,serif;--sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--pearl);font:15px/1.55 var(--sans);
  background:radial-gradient(1200px 700px at 15% -10%,rgba(127,214,194,.16),transparent 60%),
             radial-gradient(900px 600px at 95% 10%,rgba(232,163,181,.12),transparent 60%),
             linear-gradient(180deg,var(--bg2),var(--bg1) 70%);background-attachment:fixed}
a{color:var(--jade);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.2px;margin:0 0 .4em;color:var(--gold)}
h1{font-size:clamp(28px,5vw,40px);line-height:1.1}h2{font-size:24px}h3{font-size:19px}
.muted{color:var(--muted)}.center{text-align:center}.hide{display:none!important}
.mist{position:fixed;inset:auto 0 0 0;height:38vh;pointer-events:none;z-index:0;opacity:.5;
  background:radial-gradient(60% 100% at 20% 100%,rgba(241,236,224,.13),transparent 70%),radial-gradient(50% 90% at 80% 100%,rgba(127,214,194,.12),transparent 70%);
  animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(-6%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.mist{animation:none}*{transition:none!important;animation:none!important}}
header.top,main,.foot,.flash{position:relative;z-index:1}
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px clamp(12px,3vw,32px);
  border-bottom:1px solid var(--line);background:rgba(10,27,42,.6);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;color:var(--gold)!important;text-decoration:none!important}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font:700 22px "KaiTi","STKaiti","Noto Serif SC",serif;
  background:radial-gradient(circle at 35% 30%,#fffaf0,#e1cd97);color:#9b1c1c;box-shadow:0 0 0 2px var(--gold),0 4px 14px rgba(0,0,0,.4)}
.brand-name{font:600 22px var(--serif);letter-spacing:.4px}
nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
nav a{padding:7px 12px;border-radius:999px;color:var(--pearl);font-size:14px}nav a:hover{background:rgba(255,255,255,.08);text-decoration:none}
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;border:0;border-radius:999px;padding:10px 20px;
  font:600 15px var(--sans);color:#221707;background:linear-gradient(135deg,#f0d38f,#c99a3c);box-shadow:0 4px 16px rgba(201,154,60,.25);text-decoration:none!important}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(1px)}
.btn.small{padding:6px 14px;font-size:13px}
.btn.ghost{background:rgba(255,255,255,.07);color:var(--pearl);box-shadow:inset 0 0 0 1px var(--line)}
.btn.jade{background:linear-gradient(135deg,#9be8d4,#4fb59d);color:#06241d;box-shadow:0 4px 16px rgba(79,181,157,.25)}
.btn.danger{background:linear-gradient(135deg,#e47b7b,#b8383b);color:#fff}
.btn[disabled]{opacity:.5;pointer-events:none}
:focus-visible{outline:2px solid var(--jade);outline-offset:2px}
.flash{max-width:900px;margin:12px auto;padding:10px 16px;border-radius:10px;background:rgba(127,214,194,.14);border:1px solid rgba(127,214,194,.4)}
.flash.err{background:rgba(192,57,43,.2);border-color:rgba(228,123,123,.5)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;backdrop-filter:blur(8px)}
.foot{text-align:center;color:var(--muted);padding:30px 12px;font-size:13px}
input,select,textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.28);color:var(--pearl);font:15px var(--sans)}
input[type=file]{padding:8px}input[type=color]{padding:2px;height:40px}
input:focus,select:focus,textarea:focus{border-color:var(--jade);outline:none}
select option{background:#10283a}
label{display:block;margin:12px 0 0;font-size:13px;color:var(--muted)}label input,label select,label textarea{margin-top:4px;color:var(--pearl)}
form.auth button{margin-top:18px;width:100%}
.auth-wrap{display:grid;place-items:center;padding:40px 14px;min-height:70vh}.auth{width:min(430px,100%)}
.ico{display:inline-block;width:1.25em;height:1.25em;object-fit:contain;vertical-align:-.2em;line-height:1.25em;text-align:center}
.rk{font-weight:600;font-size:.92em}.good{color:var(--lotus);font-size:.85em}.bdg{font-size:.95em}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.08);font-size:12px}

/* ---- Sảnh ---- */
main.wrap{max-width:1240px;margin:0 auto;padding:20px clamp(12px,3vw,32px) 10px}
.lobby{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px}
@media (max-width:980px){.lobby{grid-template-columns:1fr}}
.hero{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:18px;padding:22px;border-radius:var(--r);
  border:1px solid var(--line);background:linear-gradient(120deg,rgba(127,214,194,.13),rgba(232,163,181,.08))}
.hero h1{margin:0}.hero p{margin:4px 0 0;color:var(--muted)}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.me-card{display:flex;gap:12px;align-items:center}
.avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;background:radial-gradient(circle at 35% 30%,#fffaf0,#d9c58d);display:grid;place-items:center;color:#7a1d1d;font:700 20px var(--serif);box-shadow:0 0 0 2px var(--gold)}
.avatar.sm{width:34px;height:34px;font-size:15px}
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.room{position:relative;padding:14px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));cursor:pointer;user-select:none;transition:transform .15s,border-color .15s}
.room:hover{transform:translateY(-2px);border-color:var(--jade)}
.room .no{font:700 26px var(--serif);color:var(--gold);line-height:1}
.room .nm{font-weight:600;margin:6px 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room .lock{position:absolute;top:10px;right:12px}
.room.other{opacity:.62}
.empty{padding:26px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px}
table.list{width:100%;border-collapse:collapse}
table.list th,table.list td{text-align:left;padding:8px 8px;border-bottom:1px solid rgba(255,255,255,.07);font-size:14px;vertical-align:middle}
table.list th{color:var(--muted);font-weight:500;font-size:12.5px}
.scroll-x{overflow-x:auto}
.lb-row{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.lb-row .pos{font:700 18px var(--serif);color:var(--gold);text-align:center}.lb-row:nth-child(-n+3) .pos{color:var(--lotus)}
.lb-row small{display:block;color:var(--muted);font-size:12px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#666;margin-right:6px}.dot.on{background:var(--jade);box-shadow:0 0 8px var(--jade)}
.side>.panel{margin-bottom:16px}
.live{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}
.sec-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}

/* ---- Modal ---- */
.modal-bg{position:fixed;inset:0;z-index:100;background:rgba(3,10,18,.7);backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px}
.modal{width:min(420px,100%);background:linear-gradient(180deg,#14303f,#0e2230);border:1px solid var(--gold);border-radius:16px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal h3{margin-top:0}.modal .row{display:flex;gap:10px;margin-top:16px;justify-content:flex-end;flex-wrap:wrap}
.spinner{width:54px;height:54px;border-radius:50%;margin:8px auto 14px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;background:#10283a;border:1px solid var(--gold);padding:10px 18px;border-radius:999px;max-width:92vw}

/* ---- Ván cờ ---- */
body.game main.wrap{max-width:1180px}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:18px;align-items:start}
@media (max-width:900px){.game-layout{grid-template-columns:1fr}}
.boardcol{display:flex;flex-direction:column;gap:10px}
.pbar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);width:min(100%,560px);margin:0 auto}
.pbar.turn{border-color:var(--jade);box-shadow:0 0 0 1px var(--jade),0 0 22px rgba(127,214,194,.25)}
.pbar .who{flex:1;min-width:0}.pbar .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar .sub{font-size:12.5px;color:var(--muted)}
.pbar .side-dot{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:5px}
.clock{font:700 24px var(--serif);font-variant-numeric:tabular-nums;min-width:74px;text-align:right}
.clock small{display:block;font:500 11px var(--sans);color:var(--muted)}
.clock.low{color:#ff8f8f}
.flowers{color:var(--lotus);font-size:13px}
.board{position:relative;width:min(100%,560px,calc((100dvh - 230px) * .9));aspect-ratio:9/10;margin:0 auto;container-type:inline-size;touch-action:manipulation;
  border-radius:12px;background:radial-gradient(120% 100% at 30% 10%,#f3e6bd,#dcc88f 60%,#c9b273);box-shadow:0 0 0 4px #7b5b25,0 0 0 6px var(--gold),0 24px 50px rgba(0,0,0,.5);cursor:pointer}
.board.hasimg{background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.board svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.board svg line,.board svg path{stroke:#6b4a1b;stroke-width:.55;stroke-linecap:round;fill:none}
.river{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:space-around;padding:0 9%;pointer-events:none;
  font:600 5.2cqw "KaiTi","STKaiti","Noto Serif SC","Songti SC",serif;color:rgba(107,74,27,.75);letter-spacing:.6cqw}
.pc{position:absolute;width:10.4%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;pointer-events:none;
  font:700 6.1cqw/1 "KaiTi","STKaiti","Noto Serif SC","Songti SC","SimSun",serif;
  background:radial-gradient(circle at 36% 30%,#fffdf5,#efe0b4 55%,#cdb67c);box-shadow:0 .5cqw 1cqw rgba(0,0,0,.45),inset 0 0 0 .4cqw rgba(120,90,30,.55);transition:left .18s,top .18s}
.pc::after{content:"";position:absolute;inset:7%;border-radius:50%;border:.28cqw solid currentColor;opacity:.75}
.pc.r{color:#b3202a}.pc.b{color:#13202b}
.pc.img{background-size:cover;background-position:center;color:transparent;box-shadow:0 .5cqw 1cqw rgba(0,0,0,.45)}.pc.img::after{display:none}
.mark{position:absolute;width:10.4%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.mark.last{box-shadow:0 0 0 .5cqw rgba(79,181,157,.9)}
.mark.sel{box-shadow:0 0 0 .7cqw var(--jade),0 0 3cqw var(--jade);background:rgba(127,214,194,.2)}
.mark.tgt{width:3.2%;background:rgba(40,150,120,.85)}.mark.tgt.cap{width:10.4%;background:transparent;box-shadow:0 0 0 .6cqw rgba(214,60,60,.9)}
.mark.chk{box-shadow:0 0 0 .7cqw #ff4d4d,0 0 3cqw #ff4d4d}
.ctrl{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.banner{width:min(100%,560px);margin:0 auto;padding:10px 14px;border-radius:12px;background:rgba(232,163,181,.15);border:1px solid rgba(232,163,181,.5);display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.statusline{text-align:center;color:var(--muted);min-height:22px}.statusline b{color:var(--gold)}
.sidecol .panel{margin-bottom:14px;padding:14px}
.moves{max-height:150px;overflow:auto;font-size:13.5px;display:grid;grid-template-columns:34px 1fr 1fr;gap:2px 6px;font-variant-numeric:tabular-nums}
.moves .n{color:var(--muted)}
.chatbox{height:230px;overflow:auto;font-size:14px;display:flex;flex-direction:column;gap:5px;padding-right:4px}
.chatbox div b{color:var(--jade)}.chatbox div.me b{color:var(--gold)}
.chatform{display:flex;gap:8px;margin-top:8px}.chatform input{flex:1}
.gifts{display:flex;gap:8px;flex-wrap:wrap}
.wait{padding:60px 20px;text-align:center}
.result-title{font:700 40px var(--serif);color:var(--gold);margin:0}
.delta.up{color:var(--jade)}.delta.down{color:#ff9b9b}
@media (max-width:560px){.brand-name{font-size:18px}header.top{padding:8px 10px}.clock{font-size:20px;min-width:62px}.hero{padding:16px}}

/* ---- Bảng/forms phụ ---- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.stats{display:flex;gap:18px;flex-wrap:wrap}.stats div{text-align:center}.stats b{display:block;font:700 28px var(--serif);color:var(--gold)}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inline input{width:auto;flex:1;min-width:140px}

/* ---- Admin ---- */
body.admin main.wrap{max-width:1200px}
.adm-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.adm-nav a{padding:8px 14px;border-radius:999px;border:1px solid var(--line);color:var(--pearl);font-size:14px}
.adm-nav a.on,.adm-nav a:hover{background:rgba(227,194,122,.18);border-color:var(--gold);text-decoration:none}
.panel table.list input,.panel table.list select{padding:6px 8px;font-size:13.5px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.cards .panel b{display:block;font:700 30px var(--serif);color:var(--gold)}
.slot{display:flex;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;flex-wrap:wrap}
.slot img{width:56px;height:56px;object-fit:contain;background:rgba(255,255,255,.07);border-radius:10px}
.slot .grow{flex:1;min-width:180px}