/* ===== Game đôi — màn chơi chung ===== */
#view-duo{background:radial-gradient(120% 70% at 50% 0%,#2A1B4D,#160E30 70%);z-index:3;overflow:hidden;overflow:clip}
.du-title{font-family:var(--serif);font-size:18px;font-weight:700;line-height:1.2;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.du-players{display:flex;align-items:center;gap:6px;padding:4px 14px 6px}
.du-vs{font-size:10px;font-weight:700;color:var(--dim);letter-spacing:.08em;flex:0 0 auto}
.du-chip{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--line);border-radius:15px;padding:6px 9px;transition:border-color .25s,background .25s,box-shadow .25s}
.du-chip.p0{--pc:var(--her)}.du-chip.p1{--pc:var(--him)}
.du-chip.on{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 14%,transparent);box-shadow:0 0 18px -6px var(--pc)}
.du-av{position:relative;width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:13px;color:#2A1440;background:var(--pc);background-size:cover;background-position:center;box-shadow:0 0 0 2px color-mix(in srgb,var(--pc) 45%,transparent)}
.du-on{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;background:var(--ok);border:2px solid #1b1136}
.du-cn{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.du-cn b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.du-cn b em{font-style:normal;color:var(--dim);font-weight:500;font-size:11px}
.du-cn small{font-size:10.5px;color:var(--dim)}
.du-pts{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--pc);flex:0 0 auto;min-width:18px;text-align:right}
.du-status{text-align:center;font-size:13px;color:var(--dim);padding:2px 16px 6px;min-height:24px;transition:color .2s}
.du-status.mine{color:var(--her);font-weight:700;animation:duPulse 1.6s ease-in-out infinite}
@keyframes duPulse{50%{opacity:.6}}
.du-stage{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 14px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:12px}
.du-hint{font-size:12px;color:var(--dim);text-align:center;min-height:16px}
.du-board{width:100%;max-width:440px;flex:0 0 auto}
.p0{--pc:var(--her)}.p1{--pc:var(--him)}

/* overlays */
.du-sicon{width:74px;height:74px;border-radius:22px;display:grid;place-items:center;font-size:38px;margin-bottom:6px}
#duStart p{max-width:32ch}
.du-sseries,#duDSeries{font-size:13px;color:var(--dim);margin:-6px 0 14px}
.du-sseries b,#duDSeries b{color:var(--pc);font-weight:700}
.du-snote{font-size:12px;color:var(--dim);margin-top:12px;max-width:30ch;line-height:1.5}
#duCover{background:rgba(10,6,24,.97)}
.du-cav{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:34px;font-weight:700;color:#2A1440;background:var(--pc);background-size:cover;background-position:center;box-shadow:0 0 0 4px color-mix(in srgb,var(--pc) 35%,transparent),0 0 40px -6px var(--pc);margin-bottom:8px}
#duCText{font-size:15px;color:var(--ink);line-height:1.6}
#duCText b{color:var(--her)}
.dw-cword{display:inline-block;margin-top:6px;font-family:var(--serif);font-size:30px;color:var(--him)!important;text-transform:uppercase;letter-spacing:.04em}
.du-cnote{font-size:12.5px;color:var(--dim);margin:-8px 0 16px;max-width:30ch;line-height:1.5}
.du-confetti{position:absolute;bottom:14%;font-size:22px;pointer-events:none;animation:duFall 1.8s ease-out forwards;z-index:12}
@keyframes duFall{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx),-340px) scale(1.1);opacity:0}}
.du-next{max-width:300px}

/* ===== sảnh Trò chơi ===== */
.du-presence{font-size:13px;line-height:1.55;color:var(--dim);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:11px 13px}
.du-presence b{color:var(--ink)}
.du-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.du-card{position:relative;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:13px 12px;display:flex;flex-direction:column;gap:9px;color:var(--ink);min-height:118px}
.du-card:active{transform:scale(.97);background:var(--card2)}
.du-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:23px}
.du-cm{display:flex;flex-direction:column;gap:3px}
.du-cm b{font-size:14px;font-weight:700}
.du-cm small{font-size:11px;color:var(--dim);line-height:1.35}
.du-badge{position:absolute;top:10px;right:10px;font-size:10px;font-weight:700;color:var(--dim);background:rgba(255,255,255,.07);border-radius:999px;padding:0 7px;line-height:19px}
.du-badge:empty{display:none}
.du-badge.hot{color:#2A1440;background:var(--grad);animation:duPulse 1.4s ease-in-out infinite}
.du-t-her{background:rgba(255,111,165,.18)}.du-t-him{background:rgba(255,193,94,.18)}.du-t-mint{background:rgba(123,217,192,.18)}
.du-t-blue{background:rgba(120,180,255,.18)}.du-t-lav{background:rgba(191,159,255,.2)}
.gico .gemo{font-size:22px;line-height:1}
.tab.dot{position:relative}.tab.dot::after{content:'';position:absolute;top:4px;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;background:var(--her);box-shadow:0 0 0 2px #120B26}

/* lời mời */
.du-invite{position:absolute;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:8px;padding:10px 10px 10px 14px;border-radius:16px;
  background:linear-gradient(#231640,#231640) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:0 14px 34px -10px rgba(0,0,0,.6);animation:duUp .3s ease}
.du-invite[hidden]{display:none}
.du-invite span{flex:1;font-size:13px;line-height:1.4}
#duInviteGo{background:var(--grad);color:#2A1440;font-weight:700;font-size:13px;border-radius:11px;padding:8px 12px;flex:0 0 auto}
#duInviteX{color:var(--dim);font-size:15px;width:28px;height:28px;flex:0 0 auto}
@keyframes duUp{from{transform:translateY(16px);opacity:0}}

/* ===== Cờ caro ===== */
.ca-board{display:grid;grid-template-columns:repeat(var(--n),1fr);aspect-ratio:1;gap:1px;padding:1px;background:rgba(190,170,255,.22);border-radius:10px;overflow:hidden;box-shadow:0 12px 30px -16px #000;max-width:min(440px,calc(100dvh - 250px))}
.ca-cell{aspect-ratio:1;background:#1C1338;display:grid;place-items:center;font-size:clamp(12px,4.4vw,20px);font-weight:900;line-height:1;padding:0;border-radius:0}
.ca-cell.p0{color:var(--her);text-shadow:0 0 6px rgba(255,111,165,.55)}.ca-cell.p1{color:var(--him);text-shadow:0 0 6px rgba(255,193,94,.5)}
.ca-cell.last{background:#2E2058;box-shadow:inset 0 0 0 1.5px currentColor}
.ca-cell.win{background:rgba(123,217,192,.35);animation:duPulse 1s ease-in-out infinite}
.ca-cell:not(.p0):not(.p1):active{background:#33245F}

/* ===== Bốn quân liền ===== */
.c4-wrap{width:100%;max-width:400px}
.c4-arrows{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:0 10px 4px}
.c4-arrow{color:var(--dim);font-size:13px;padding:6px 0;border-radius:8px}
.c4-arrow:disabled{opacity:.25}
.c4-arrow:not(:disabled):active{color:var(--her);background:var(--card)}
.c4-board{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:10px;border-radius:18px;background:linear-gradient(160deg,#3A2A78,#2A1B5A);box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 16px 30px -18px #000;overflow:hidden}
.c4-cell{aspect-ratio:1;border-radius:50%;background:#140C2C;box-shadow:inset 0 3px 6px rgba(0,0,0,.55);padding:0;display:grid;place-items:center;overflow:visible}
.c4-disc{width:100%;height:100%;border-radius:50%;display:block}
.c4-disc.p0{background:radial-gradient(circle at 35% 30%,#FFB0CF,var(--her) 55%,#C83A74)}
.c4-disc.p1{background:radial-gradient(circle at 35% 30%,#FFE6B0,var(--him) 55%,#C98A22)}
.c4-disc.drop{animation:c4drop .42s cubic-bezier(.4,1.5,.6,1)}
@keyframes c4drop{from{transform:translateY(calc(-120% * (var(--row) + 1) - 30px))}}
.c4-disc.win{box-shadow:0 0 0 3px var(--mint),0 0 16px var(--mint);animation:duPulse 1s ease-in-out infinite}

/* ===== Nối ô ===== */
.dt-board{max-width:380px;aspect-ratio:1}
.dt-svg{width:100%;height:100%;display:block;touch-action:manipulation}
.dt-box{fill:rgba(255,255,255,.03);transition:fill .3s}
.dt-box.p0{fill:rgba(255,111,165,.30)}.dt-box.p1{fill:rgba(255,193,94,.30)}
.dt-own{font-size:7px;text-anchor:middle;font-weight:700}.dt-own.p0{fill:var(--her)}.dt-own.p1{fill:var(--him)}
.dt-edge{stroke-linecap:round;stroke-width:1.9}
.dt-edge.free{stroke:rgba(255,255,255,.13);stroke-width:1;stroke-dasharray:1.5 2}
.dt-edge.p0{stroke:var(--her)}.dt-edge.p1{stroke:var(--him)}
.dt-edge.last{stroke-width:2.8;filter:drop-shadow(0 0 1.5px #fff)}
.dt-hit{stroke:transparent;stroke-width:8;stroke-linecap:round;cursor:pointer}
.dt-hit:active{stroke:rgba(255,255,255,.18)}
.dt-dot{fill:#F6EEFF}

/* ===== Oẳn tù tì ===== */
.rp-arena{width:100%;max-width:380px;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.rp-intro{font-size:44px;text-align:center;letter-spacing:.1em}.rp-intro div{font-size:13px;color:var(--dim);letter-spacing:0;margin-top:8px}
.rp-reveal{display:flex;align-items:center;justify-content:center;gap:14px;width:100%}
.rp-hand{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:64px;line-height:1}
.rp-hand span{font-size:12px;color:var(--dim)}
.rp-reveal.pop .rp-hand.me{animation:rpL .5s ease}.rp-reveal.pop .rp-hand.op{animation:rpR .5s ease}
@keyframes rpL{from{transform:translateX(-40px) rotate(-20deg);opacity:0}}@keyframes rpR{from{transform:translateX(40px) rotate(20deg);opacity:0}}
.rp-vs{font-family:var(--serif);font-weight:700;font-size:18px;min-width:60px;text-align:center;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rp-cap{font-size:12px;color:var(--dim)}
.rp-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:380px}
.rp-btn{background:var(--card);border:1.5px solid var(--line);border-radius:20px;padding:16px 4px 12px;font-size:42px;line-height:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.rp-btn span{font-size:12.5px;font-weight:700;color:var(--ink)}
.rp-btn:active{transform:scale(.94);border-color:var(--her);background:rgba(255,111,165,.15)}
.rp-locked{font-size:14px;color:var(--dim);text-align:center;padding:18px;background:var(--card);border-radius:16px;width:100%;max-width:380px}
.rp-hist{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:380px}
.rp-hist span{font-size:17px;padding:4px 8px;border-radius:10px;background:var(--card);border:1px solid var(--line)}
.rp-hist span i{font-style:normal;opacity:.55;margin-left:3px;font-size:13px}
.rp-hist .win{border-color:var(--mint)}.rp-hist .lose{border-color:rgba(255,92,92,.5)}

/* ===== Hiểu nhau không? ===== */
.qz-head{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:420px;font-size:12px;color:var(--dim)}
.qz-about{font-weight:700;color:var(--pc);background:color-mix(in srgb,var(--pc) 16%,transparent);border-radius:999px;padding:3px 10px}
.qz-q{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.35;text-align:center;max-width:420px;margin-top:4px}
.qz-sub{font-size:13px;color:var(--dim);text-align:center;margin-top:-4px}.qz-sub b{color:var(--ink)}
.qz-opts{display:flex;flex-direction:column;gap:9px;width:100%;max-width:420px}
.qz-opt{position:relative;display:flex;align-items:center;gap:11px;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:15px;padding:13px 14px;font-size:14.5px;color:var(--ink);flex-wrap:wrap}
.qz-opt b{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.08);font-size:12px;flex:0 0 auto}
button.qz-opt:not(:disabled):active{transform:scale(.98)}
.qz-opt.on{border-color:var(--her);background:rgba(255,111,165,.14)}
.qz-opt.ans{border-color:var(--mint);background:rgba(123,217,192,.14)}
.qz-opt.wrong{border-color:rgba(255,92,92,.55)}
.qz-opt:disabled{opacity:.72}
.qz-tag{font-style:normal;font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 8px;margin-left:auto}
.qz-tag.ans{background:var(--mint);color:#0C2B22}.qz-tag.gs{background:rgba(255,255,255,.12);color:var(--ink)}
.qz-res{font-family:var(--serif);font-size:18px;font-weight:700;text-align:center}
.qz-res.hit{color:var(--mint)}.qz-res.miss{color:var(--him)}

/* ===== Bạn chọn gì? ===== */
.wy-meter{display:flex;gap:5px;justify-content:center}
.wy-meter span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:rgba(255,255,255,.06)}
.wy-meter .now{box-shadow:inset 0 0 0 1.5px var(--her)}.wy-meter .hit{background:rgba(255,111,165,.22)}.wy-meter .miss{color:var(--dim)}
.wy-title{font-size:12.5px;color:var(--dim)}
.wy-opts{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;max-width:400px}
.wy-opt{border-radius:20px;padding:22px 16px;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:8px;border:1.5px solid var(--line);min-height:104px;justify-content:center;text-align:center}
.wy-opt.o0{background:linear-gradient(150deg,rgba(255,111,165,.2),rgba(255,111,165,.05))}
.wy-opt.o1{background:linear-gradient(150deg,rgba(120,180,255,.2),rgba(120,180,255,.05))}
.wy-opt.on{border-color:var(--ink);box-shadow:0 0 0 2px rgba(255,255,255,.2)}
.wy-opt:not(:disabled):active{transform:scale(.98)}
.wy-opt:disabled{opacity:1}
.wy-who{font-family:var(--sans);font-style:normal;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--pc);color:#2A1440;margin:0 2px}
.wy-or{text-align:center;font-size:12px;color:var(--dim);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.wy-res{font-family:var(--serif);font-size:19px;font-weight:700}.wy-res.hit{color:var(--her)}.wy-res.miss{color:var(--him)}

/* ===== Thật hay Thách ===== */
.td-top{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:420px;font-size:12px;color:var(--dim)}
.td-turn{font-weight:700;color:var(--pc);background:color-mix(in srgb,var(--pc) 16%,transparent);border-radius:999px;padding:3px 10px}
.td-ask{font-family:var(--serif);font-size:22px;font-weight:600;margin-top:6px}
.td-choose{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:400px}
.td-btn{border-radius:22px;padding:22px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:36px;border:1.5px solid var(--line)}
.td-btn b{font-family:var(--serif);font-size:20px;color:var(--ink)}.td-btn span{font-size:11.5px;color:var(--dim)}
.td-btn.t{background:linear-gradient(160deg,rgba(120,180,255,.22),rgba(120,180,255,.04))}
.td-btn.d{background:linear-gradient(160deg,rgba(255,111,165,.24),rgba(255,193,94,.08))}
.td-btn:active{transform:scale(.96)}
.td-rand{max-width:400px}
.td-wait{text-align:center;color:var(--dim);font-size:14px;padding:30px 10px}
.td-spin{font-size:48px;animation:tdSpin 1.4s ease-in-out infinite;margin-bottom:10px}
@keyframes tdSpin{50%{transform:rotate(12deg) scale(1.08)}}
.td-card{width:100%;max-width:400px;border-radius:24px;padding:24px 20px;text-align:center;border:1.5px solid var(--line);min-height:210px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.td-card.t{background:linear-gradient(160deg,rgba(120,180,255,.24),rgba(31,20,64,.9))}
.td-card.d{background:linear-gradient(160deg,rgba(255,111,165,.26),rgba(31,20,64,.9))}
.td-card.flip{animation:tdFlip .5s ease}
@keyframes tdFlip{from{transform:perspective(600px) rotateY(80deg);opacity:0}}
.td-kind{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--dim)}
.td-text{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.4}
.td-for{font-size:12px;color:var(--dim)}.td-for b{color:var(--ink)}
.td-acts{display:flex;gap:10px;width:100%;max-width:400px}.td-acts .cta{flex:2}.td-acts .ghostbtn{flex:1}
.td-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:11.5px}
.td-stats span{color:var(--pc);background:rgba(255,255,255,.05);border-radius:999px;padding:3px 10px}

/* ===== Vẽ & Đoán ===== */
.du-g-draw{gap:9px}
.dw-top{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;max-width:440px;font-size:12px;color:var(--dim)}
.dw-top b{color:var(--pc)}
.dw-time{flex:0 0 96px;height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.dw-time i{display:block;height:100%;background:var(--grad);transition:width .4s linear}
.dw-time.low i{background:var(--danger)}
.dw-word{font-size:14px;text-align:center;color:var(--dim);display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap}
.dw-word b{font-family:var(--serif);font-size:22px;color:var(--him);text-transform:uppercase;letter-spacing:.04em}
.dw-word.reveal.hit b{color:var(--mint)}
.dw-pattern{font-size:15px;letter-spacing:.14em;color:var(--ink)}
.dw-peek{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:5px 10px;font-size:12.5px;font-weight:700;color:var(--ink);user-select:none;-webkit-user-select:none}
.dw-paper{width:100%;max-width:440px;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px -14px #000;flex:0 0 auto}
.dw-cv{display:block;width:100%;aspect-ratio:5/4;background:#FFF8EF;touch-action:none}
.dw-cv.can{cursor:crosshair}
.dw-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.dw-col{width:28px;height:28px;border-radius:50%;background:var(--c);border:2px solid rgba(255,255,255,.25);font-size:12px;display:grid;place-items:center}
.dw-col.on{box-shadow:0 0 0 2px #160E30,0 0 0 4px #fff}
.dw-size{width:30px;height:30px;border-radius:9px;background:var(--card);display:grid;place-items:center;border:1px solid var(--line)}
.dw-size i{width:var(--s);height:var(--s);border-radius:50%;background:var(--ink)}
.dw-size.on{border-color:var(--her)}
.dw-tool{width:34px;height:30px;border-radius:9px;background:var(--card);border:1px solid var(--line);font-size:15px;color:var(--ink)}
.dw-sep{width:1px;height:20px;background:var(--line);margin:0 2px}
.dw-guess{display:flex;gap:8px;width:100%;max-width:440px}
.dw-in{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:13px;padding:12px 13px;font-size:15px;color:var(--ink);outline:none;font-family:inherit;user-select:text;-webkit-user-select:text}
.dw-in:focus{border-color:var(--her)}
.dw-send{background:var(--grad);color:#2A1440;font-weight:700;border-radius:13px;padding:0 16px;font-size:14px}
.dw-acts{display:flex;gap:10px;width:100%;max-width:440px}.dw-acts .cta{flex:2}.dw-acts .ghostbtn{flex:1}
.dw-gs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:440px}
.dw-gs span{font-size:12.5px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--pc);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.dw-res{font-family:var(--serif);font-size:17px;font-weight:700;text-align:center;color:var(--mint)}