/* Lô Tô Nhóm — giao diện. Đổi màu chủ đạo ở các biến --pink, --gold, --teal. */
:root{
  --bg:#fbeef4; --surface:#ffffff; --ink:#2a1030; --muted:#7c5f80; --line:#ecd3e0;
  --pink:#d6246e; --pink-ink:#ffffff; --gold:#f2b705; --teal:#0f7c7a;
  --cell:#fffaf2; --cell-ink:#26131c; --bead:#c8102e; --ok:#1f8a4c; --bad:#c8102e;
  --shadow:0 2px 0 rgba(42,16,48,.12);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1d0e1f; --surface:#2a1630; --ink:#f7e8f1; --muted:#c3a3c2; --line:#46284a;
    --pink:#ff4f93; --pink-ink:#1d0e1f; --gold:#ffc933; --teal:#3fc2bd;
    --cell:#f4ead8; --ok:#4ad08a; --bad:#ff5a6e; --shadow:0 2px 0 rgba(0,0,0,.4);
  }
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.5}
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(--pink)}
.wrap{max-width:1180px;margin:0 auto;padding:16px 16px 110px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
h1{font-family:"Pattaya","Brush Script MT",cursive;font-weight:400;font-size:clamp(2.2rem,7vw,3.4rem);line-height:1;margin:0;color:var(--pink);text-shadow:3px 3px 0 var(--gold)}
h1 a{color:inherit;text-decoration:none}
.role{font-weight:700;font-size:.9rem;padding:4px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.layout.narrow{grid-template-columns:minmax(0,1fr);max-width:680px;margin:0 auto}
@media (max-width:900px){.layout{grid-template-columns:1fr}}
.col{display:grid;gap:16px;align-content:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
h2{font-size:1.05rem;margin:0 0 10px;font-weight:800}
.note{color:var(--muted);font-size:.88rem;margin:0}
.notice{background:var(--surface);border:2px dashed var(--pink);border-radius:14px;padding:14px 16px;margin-bottom:16px}

.stage{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.ball{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:radial-gradient(circle at 32% 28%,#fff 0 12%,var(--gold) 13% 58%,#c98b00 100%);
  border:5px solid var(--pink);font-weight:800;font-size:2.9rem;color:#2a1030}
.big .ball{width:160px;height:160px;font-size:4.4rem}
.ball.shake{animation:shake .45s ease-in-out infinite}
.ball.pop{animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg) translateY(-3px)}75%{transform:rotate(9deg) translateY(-3px)}}
@keyframes pop{0%{transform:scale(.5)}100%{transform:scale(1)}}
.rhyme{min-height:124px;font-style:italic;font-weight:500;font-size:1.06rem;line-height:1.6}
.big .rhyme{font-size:1.3rem}
.rhyme p{margin:0;opacity:0;transform:translateY(4px);animation:line .35s forwards}
.rhyme p.final{font-style:normal;font-weight:800;color:var(--pink);font-size:1.2em;margin-top:4px}
.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}}
.recent{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;min-height:30px;align-items:center;color:var(--muted);font-size:.9rem}
.chip{display:inline-grid;place-items:center;min-width:32px;height:30px;padding:0 6px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-weight:700;color:var(--ink)}
.chip.new{background:var(--gold);border-color:var(--gold);color:#2a1030}
.status{margin-top:12px;font-weight:600}

.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{border:2px solid var(--ink);background:var(--surface);border-radius:999px;padding:9px 16px;font-weight:600;text-decoration:none;color:var(--ink)}
.btn.primary{background:var(--pink);border-color:var(--pink);color:var(--pink-ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.field{display:grid;gap:4px}
.field label,.field .lbl{font-weight:600;font-size:.9rem}
.field input,.field select{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:8px 10px;width:100%}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0}
.checks{display:grid;gap:6px;margin:4px 0 12px}
.checks label{display:flex;gap:8px;align-items:center;font-size:.95rem}
.checks input{width:18px;height:18px;accent-color:var(--pink)}

.board{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.board span{aspect-ratio:1;display:grid;place-items:center;border-radius:6px;font-size:.8rem;font-weight:600;color:var(--muted);background:var(--bg)}
.board span.on{background:var(--teal);color:#fff}
.board span.last{background:var(--pink);color:var(--pink-ink);box-shadow:0 0 0 2px var(--gold)}
details summary{cursor:pointer;font-weight:800}

.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.kinh{border:none;background:var(--pink);color:var(--pink-ink);font-family:"Pattaya",cursive;font-size:1.7rem;padding:4px 26px;border-radius:14px;box-shadow:0 4px 0 #8f1049;line-height:1.3}
.kinh:active{transform:translateY(2px);box-shadow:0 2px 0 #8f1049}
.kinh:disabled{opacity:.4;box-shadow:none;cursor:not-allowed}
.ticket{--tc:#c8102e;background:var(--tc);padding:8px;border-radius:12px;display:grid;gap:8px}
.ticket.out{filter:grayscale(1) opacity(.6)}
.block{display:grid;gap:3px}
.trow{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;border-radius:6px;outline:2px solid transparent;outline-offset:1px}
.trow.cho{outline-color:var(--gold)}
.cell{aspect-ratio:1/0.92;border:none;border-radius:5px;background:var(--cell);color:var(--cell-ink);font-weight:800;font-size:clamp(.95rem,3vw,1.3rem);position:relative;padding:0;display:grid;place-items:center}
.cell.blank{background:rgba(255,255,255,.14);cursor:default}
.cell.m::after{content:"";position:absolute;width:74%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff9a9a 0 10%,var(--bead) 45%,#6e0014 100%);opacity:.82;animation:drop .18s ease-out}
@keyframes drop{from{transform:scale(1.5);opacity:0}}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:30px;height:30px;border-radius:50%;border:3px solid transparent;box-shadow:0 0 0 1px var(--line)}
.sw[aria-pressed=true]{border-color:var(--ink)}

.plist{display:grid;gap:8px}
.pl{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--bg)}
.pl .dot{width:14px;height:14px;border-radius:50%}
.pl .nm{font-weight:700}
.pl .st{font-size:.85rem;color:var(--muted)}
.pl .tag{font-size:.8rem;font-weight:800;padding:2px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);white-space:nowrap}
.pl .tag.cho{background:var(--gold);border-color:var(--gold);color:#2a1030}
.pl .tag.win{background:var(--ok);border-color:var(--ok);color:#fff}
.pl.out{opacity:.5}
.pl.out .nm{text-decoration:line-through}
.pl.me{outline:2px solid var(--pink)}
.pl.off .nm::after{content:" · mất kết nối";font-weight:400;color:var(--muted);font-size:.8rem}

.invite{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.qrbox{background:#fff;padding:10px;border-radius:12px;line-height:0;width:max-content}
.qrbox img{display:block;width:140px;height:140px}
.qrbig .qrbox img{width:min(360px,70vw);height:min(360px,70vw)}
.roomcode{font-size:2rem;font-weight:800;letter-spacing:.12em;color:var(--pink)}
.linkline{font-size:.85rem;color:var(--muted);word-break:break-all}

.modal{position:fixed;inset:0;background:rgba(20,5,20,.55);display:none;place-items:center;padding:20px;z-index:20}
.modal.show{display:grid}
.dlg{background:var(--surface);color:var(--ink);border-radius:20px;padding:22px;width:min(520px,100%);max-height:90vh;overflow:auto;text-align:center;border:3px solid var(--pink)}
.dlg h3{font-family:"Pattaya",cursive;font-weight:400;font-size:2.3rem;margin:0;color:var(--pink);line-height:1.2}
.qrbig{display:grid;justify-items:center;gap:10px}
.claim{margin:14px 0;padding-top:10px;border-top:1px solid var(--line)}
.claim:first-of-type{border-top:none}
.claim .who{font-weight:800;margin-bottom:8px}
.dorow{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.dn{width:54px;height:62px;border-radius:10px;background:var(--bg);display:grid;place-items:center;font-weight:800;font-size:1.3rem;border:2px solid var(--line);position:relative}
.dn small{position:absolute;bottom:2px;font-size:.72rem}
.dn.ok{border-color:var(--ok)} .dn.ok small{color:var(--ok)}
.dn.bad{border-color:var(--bad)} .dn.bad small{color:var(--bad)}
.verdict{font-weight:800;margin:8px 0 0}
.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(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;z-index:30;max-width:90%;font-weight:600}

.home{max-width:560px;margin:0 auto;display:grid;gap:16px}
.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}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.rhyme p{opacity:1;transform:none}}