/* ==========================================================
   Lô Tô Nhóm — giao diện "sân khấu hội chợ về đêm"
   Đổi màu chủ đạo ở các biến bên dưới.
   ========================================================== */
:root{
  --night:#16060f;        /* nền đêm */
  --velvet:#2a0b1d;       /* nhung đỏ tía của các khung */
  --velvet-2:#3a1028;
  --crimson:#c4123f;      /* đỏ sân khấu */
  --gold:#f7c948;         /* vàng kim */
  --gold-deep:#b8860b;
  --cream:#fff7e6;        /* giấy vé */
  --paper-ink:#24100b;    /* mực in số trên vé */
  --text:#fbeef4;
  --muted:#caa3b8;
  --line:rgba(247,201,72,.22);
  --ok:#3ddc84; --bad:#ff5a6e;
  --radius:20px;
  --num:"Baloo 2","Be Vietnam Pro",system-ui,sans-serif;   /* phông chữ số */
  --show:"Pattaya","Brush Script MT",cursive;              /* phông chữ tiêu đề */
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--night)}
body{margin:0;min-height:100vh;color:var(--text);font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.5;
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%,rgba(247,201,72,.22),transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%,rgba(196,18,63,.25),transparent 70%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 2px,transparent 2px 22px),
    var(--night);background-attachment:fixed}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
[hidden]{display:none!important}
a{color:var(--gold)}
.wrap{max-width:1200px;margin:0 auto;padding:18px 16px 120px}

/* ---------- Tiêu đề kiểu biển đèn neon ---------- */
header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
h1{font-family:var(--show);font-weight:400;font-size:clamp(2.4rem,7vw,3.8rem);line-height:1;margin:0;color:#ffe9a3;
  text-shadow:0 0 6px rgba(255,210,100,.9),0 0 18px rgba(247,201,72,.6),0 0 38px rgba(196,18,63,.8),3px 3px 0 var(--crimson)}
h1 a{color:inherit;text-decoration:none}
.role{font-weight:700;font-size:.88rem;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--gold)}

.layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px;align-items:start}
.layout.narrow{grid-template-columns:minmax(0,1fr);max-width:700px;margin:0 auto}
@media (max-width:900px){.layout{grid-template-columns:1fr}}
.col{display:grid;gap:18px;align-content:start}
.panel{background:linear-gradient(180deg,var(--velvet-2),var(--velvet));border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:0 14px 30px rgba(0,0,0,.35)}
h2{font-size:1.05rem;margin:0 0 12px;font-weight:800;color:#ffe3a0}
.note{color:var(--muted);font-size:.88rem;margin:0}
.notice{background:rgba(196,18,63,.18);border:1px solid var(--crimson);border-radius:14px;padding:14px 16px;margin-bottom:16px}

/* ---------- Sân khấu: viền bóng đèn chạy ---------- */
.stage-panel{position:relative;padding:28px 26px;background:
  radial-gradient(ellipse 80% 90% at 30% 40%,rgba(247,201,72,.12),transparent 70%),
  linear-gradient(180deg,#43102c,#240817)}
.stage-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:9px;pointer-events:none;
  background:radial-gradient(circle,#fff3c4 0 2.4px,rgba(255,200,80,.45) 3.2px,transparent 5px) -5.5px -5.5px/20px 20px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:twinkle 1.6s ease-in-out infinite}
@keyframes twinkle{50%{filter:brightness(.55)}}
.stage{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
@media (max-width:480px){.stage{gap:14px}}

/* ---------- Quả cầu số ---------- */
.ball{--bc:#f7c948;--size:118px;width:var(--size);height:var(--size);border-radius:50%;display:grid;place-items:center;flex:none;position:relative;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0 5%,rgba(255,255,255,.35) 12%,transparent 26%),
    radial-gradient(circle at 50% 55%,var(--bc) 0 55%,color-mix(in srgb,var(--bc) 50%,#000) 100%);
  box-shadow:0 16px 28px rgba(0,0,0,.55),inset -10px -14px 22px rgba(0,0,0,.35),0 0 0 4px rgba(255,255,255,.08)}
.big .ball{--size:170px}
@media (max-width:480px){.ball{--size:96px}.big .ball{--size:130px}}
.ball-face{width:60%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 35%,#fff 0 50%,#f1e7d6 100%);
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.18),0 2px 4px rgba(0,0,0,.25);
  font-family:var(--num);font-weight:800;color:#1c0a12;font-size:calc(var(--size)*.32);line-height:1;padding-top:.08em;letter-spacing:-.02em}
.ball.shake{animation:shake .45s ease-in-out infinite}
.ball.shake .ball-face{color:#9b7a86}
.ball.pop{animation:pop .6s cubic-bezier(.2,1.7,.4,1)}
.ball.pop::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:4px solid var(--gold);animation:burst .9s ease-out forwards;pointer-events:none}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg) translateY(-4px)}75%{transform:rotate(10deg) translateY(-4px)}}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
@keyframes burst{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.7);opacity:0}}

/* ---------- Lời hát ---------- */
.rhyme{min-height:132px;font-style:italic;font-weight:500;font-size:1.08rem;line-height:1.65;color:#f6dfe9}
.big .rhyme{font-size:1.32rem}
.rhyme p{margin:0;opacity:0;transform:translateY(6px);animation:line .4s forwards}
.rhyme p.final{font-family:var(--num);font-style:normal;font-weight:800;font-size:1.55em;line-height:1.25;margin-top:6px;
  background:linear-gradient(180deg,#fff2b8,var(--gold) 55%,#e39a0c);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(120,20,40,.9))}
.rhyme p.hint,.rhyme p.still{animation:none;opacity:1;transform:none}
.rhyme p.hint{color:var(--muted);font-style:normal}
@keyframes line{to{opacity:1;transform:none}}

/* ---------- Số vừa ra (bi nhỏ) ---------- */
.recent{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;min-height:34px;align-items:center;color:var(--muted);font-size:.9rem}
.chip{--bc:#888;width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;font-family:var(--num);font-weight:800;font-size:.95rem;color:#fff;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.7) 0 8%,transparent 30%),var(--bc);
  box-shadow:inset -3px -4px 6px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.4);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.chip.new{width:40px;height:40px;font-size:1.1rem;box-shadow:0 0 0 3px var(--gold),0 0 14px rgba(247,201,72,.6)}
.status{margin-top:14px;font-weight:600;color:#ffe3a0}

/* ---------- Nút ---------- */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{border:1.5px solid var(--gold);background:transparent;color:var(--gold);border-radius:999px;padding:10px 18px;font-weight:700;text-decoration:none;transition:background .15s}
.btn:hover{background:rgba(247,201,72,.1)}
.btn.primary{background:linear-gradient(180deg,#ffe07a,var(--gold) 50%,#e0a516);border-color:#ffe9a8;color:#3a0d1f;box-shadow:0 3px 0 var(--gold-deep)}
.btn.primary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--gold-deep)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.field{display:grid;gap:5px}
.field label,.field .lbl{font-weight:600;font-size:.88rem;color:var(--muted)}
.field input,.field select{border:1px solid var(--line);background:rgba(0,0,0,.25);border-radius:12px;padding:9px 12px;width:100%;color:var(--text)}
.field select option{background:var(--velvet)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.checks{display:grid;gap:8px;margin:6px 0 12px}
.checks label{display:flex;gap:10px;align-items:center;font-size:.95rem}
.checks input{width:18px;height:18px;accent-color:var(--gold)}

/* ---------- Bảng 90 số ---------- */
.board{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.board span{--bc:#888;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;font-family:var(--num);font-size:.85rem;font-weight:700;
  color:rgba(255,255,255,.28);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);transition:transform .25s}
.board span.on{color:#fff;border-color:transparent;text-shadow:0 1px 2px rgba(0,0,0,.5);
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.65) 0 8%,transparent 32%),var(--bc);box-shadow:inset -2px -3px 5px rgba(0,0,0,.3)}
.board span.last{transform:scale(1.18);box-shadow:0 0 0 3px var(--gold),0 0 14px rgba(247,201,72,.7);z-index:1}
details summary{cursor:pointer;font-weight:800;color:#ffe3a0}

/* ---------- Vé lô tô (giấy in) ---------- */
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.kinh{border:2px solid #ffe9a8;background:linear-gradient(180deg,#ff3b6b,var(--crimson) 60%,#8a0b2c);color:#fff4c9;font-family:var(--show);font-size:1.8rem;
  padding:4px 30px;border-radius:16px;box-shadow:0 5px 0 #5c0620,0 10px 20px rgba(0,0,0,.4);line-height:1.3;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.kinh:active{transform:translateY(3px);box-shadow:0 2px 0 #5c0620}
.kinh:disabled{opacity:.35;box-shadow:none;cursor:not-allowed;filter:grayscale(.6)}
.kinh.ready{animation:ready 1s ease-in-out infinite}
@keyframes ready{50%{box-shadow:0 5px 0 #5c0620,0 0 0 8px rgba(247,201,72,.35),0 0 30px rgba(247,201,72,.8);transform:scale(1.05)}}

.ticket{--tc:#c8102e;position:relative;background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 6px,transparent 6px 12px),var(--tc);
  padding:14px 12px 12px;border-radius:14px;display:grid;gap:10px;box-shadow:0 14px 30px rgba(0,0,0,.45),inset 0 0 0 2px rgba(255,255,255,.25)}
.ticket::before{content:"";position:absolute;inset:5px;border:1.5px dashed rgba(255,255,255,.45);border-radius:10px;pointer-events:none}
.ticket.out{filter:grayscale(1) brightness(.7)}
.block{display:grid;gap:3px;background:rgba(0,0,0,.18);padding:3px;border-radius:8px;position:relative}
.trow{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;border-radius:6px;transition:box-shadow .2s}
.trow.cho{box-shadow:0 0 0 2px var(--gold),0 0 14px rgba(247,201,72,.75)}
.cell{aspect-ratio:1/0.95;border:none;border-radius:5px;background:linear-gradient(180deg,#fffdf6,var(--cream));color:var(--paper-ink);
  font-family:var(--num);font-weight:800;font-size:clamp(1.05rem,3.4vw,1.5rem);position:relative;padding:0;display:grid;place-items:center;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
.cell span{position:relative;z-index:1;padding-top:.08em}
.cell.blank{background:rgba(255,255,255,.1);box-shadow:none;cursor:default}
.cell:not(.blank):hover{background:#fff}
.cell.m::after{content:"";position:absolute;width:80%;aspect-ratio:1;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 34% 28%,#ffd0d0 0 9%,#ff4d5e 24%,#c8102e 55%,#5e0012 100%);
  box-shadow:0 2px 3px rgba(0,0,0,.35);animation:drop .22s cubic-bezier(.3,1.6,.5,1)}
.cell.m span{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
@keyframes drop{from{transform:scale(1.8);opacity:0}}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{width:32px;height:32px;border-radius:50%;border:3px solid transparent;box-shadow:0 0 0 1px var(--line)}
.sw[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 10px rgba(247,201,72,.6)}

/* ---------- Người chơi ---------- */
.plist{display:grid;gap:8px}
.pl{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:9px 12px;border-radius:14px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.05)}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;font-size:1rem;box-shadow:inset 0 -3px 5px rgba(0,0,0,.3);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.pl .nm{font-weight:700}
.pl .st{font-size:.82rem;color:var(--muted)}
.pl .tag{font-family:var(--num);font-size:.85rem;font-weight:800;padding:2px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--line);white-space:nowrap;color:#ffe3a0}
.pl .tag.cho{background:var(--gold);border-color:var(--gold);color:#3a0d1f;animation:ready 1.2s ease-in-out infinite}
.pl .tag.win{background:var(--ok);border-color:var(--ok);color:#06301a}
.pl.out{opacity:.45}
.pl.out .nm{text-decoration:line-through}
.pl.me{border-color:var(--gold);background:rgba(247,201,72,.08)}
.pl.off .nm::after{content:" · mất kết nối";font-weight:400;color:var(--muted);font-size:.8rem}

/* ---------- Mời vào phòng ---------- */
.invite{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
@media (max-width:420px){.invite{grid-template-columns:1fr}}
.qrbox{background:#fff;padding:10px;border-radius:14px;line-height:0;width:max-content;box-shadow:0 0 0 4px var(--gold),0 8px 18px rgba(0,0,0,.4)}
.qrbox img{display:block;width:140px;height:140px}
.qrbig .qrbox img{width:min(360px,70vw);height:min(360px,70vw)}
.roomcode{font-family:var(--num);font-size:2.2rem;font-weight:800;letter-spacing:.14em;color:var(--gold);line-height:1.2}
.linkline{font-size:.82rem;color:var(--muted);word-break:break-all;margin:4px 0 0}

/* ---------- Hộp thoại ---------- */
.modal{position:fixed;inset:0;background:rgba(10,2,8,.72);backdrop-filter:blur(3px);display:none;place-items:center;padding:20px;z-index:20}
.modal.show{display:grid}
.dlg{background:linear-gradient(180deg,#4a1231,#26081a);color:var(--text);border-radius:24px;padding:24px;width:min(540px,100%);max-height:90vh;overflow:auto;text-align:center;
  border:2px solid var(--gold);box-shadow:0 0 0 6px rgba(247,201,72,.15),0 30px 60px rgba(0,0,0,.6)}
.dlg h3{font-family:var(--show);font-weight:400;font-size:2.6rem;margin:0;line-height:1.2;color:#ffe9a3;text-shadow:0 0 14px rgba(247,201,72,.6),2px 2px 0 var(--crimson)}
.qrbig{display:grid;justify-items:center;gap:12px}
.claim{margin:16px 0;padding-top:12px;border-top:1px solid var(--line)}
.claim:first-of-type{border-top:none}
.claim .who{font-weight:800;margin-bottom:10px}
.dorow{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.dn{--bc:#888;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-family:var(--num);font-weight:800;font-size:1.35rem;color:#fff;position:relative;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.6) 0 8%,transparent 30%),var(--bc);box-shadow:inset -3px -5px 8px rgba(0,0,0,.35);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.dn small{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:"Be Vietnam Pro",sans-serif;font-size:.7rem;font-weight:700;text-shadow:none}
.dn.ok{box-shadow:0 0 0 3px var(--ok),inset -3px -5px 8px rgba(0,0,0,.35)} .dn.ok small{color:var(--ok)}
.dn.bad{box-shadow:0 0 0 3px var(--bad),inset -3px -5px 8px rgba(0,0,0,.35);filter:saturate(.4)} .dn.bad small{color:var(--bad)}
.dorow{padding-bottom:22px}
.verdict{font-weight:800;margin:6px 0 0;font-size:1.05rem}
.verdict.ok{color:var(--ok)} .verdict.bad{color:var(--bad)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--gold);color:#3a0d1f;padding:10px 18px;border-radius:14px;z-index:30;max-width:90%;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.4)}

/* ---------- Trang chủ ---------- */
.home{max-width:580px;margin:0 auto;display:grid;gap:18px}
.hero{text-align:center;padding:10px 0 4px}
.hero .balls{display:flex;justify-content:center;gap:10px;margin-top:14px}
.hero .balls .chip{width:46px;height:46px;font-size:1.25rem}

.fab{display:none}
@media (max-width:900px){
  .fab{display:block;position:fixed;right:14px;bottom:0;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:10}
  .card-head .kinh{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rhyme p{opacity:1;transform:none}}