:root{--mau-nen-app: #e4f3fd;--mau-nen-app-dam: #c7ebfd;--mau-vien-khung: #7ed0fd;--mau-the: #ffffff;--mau-the-chim: #f2faff;--mau-ban-co: #faf6ed;--mau-ban-co-vien: #efe7d6;--mau-duong-ke: #e42f4c;--mau-diem-trong: #d9667c;--mau-quan-xanh: #01afdc;--mau-quan-xanh-sang: #73d6ed;--mau-quan-xanh-dam: #016593;--mau-quan-do: #fe658c;--mau-quan-do-sang: #feb0c0;--mau-quan-do-dam: #c32350;--mau-vanh-quan: #ffffff;--mau-chu: #3a2b44;--mau-chu-phu: #6b5577;--mau-chu-tat: #9a8fa3;--mau-dong-ho: #8a3a80;--mau-nhan-xanh: #1c6fc4;--mau-nhan-do: #c32350;--mau-nut-nen: #ffffff;--mau-nut-vien: #9fd9f7;--mau-nut-chinh: #0b71a8;--mau-nut-chinh-sang: #4ec3f6;--mau-nut-tiep: #b85102;--mau-nut-chu: #ffffff;--mau-nhan-manh: #b85102;--mau-nhan-manh-sang: #f3a33b;--mau-goi-y: #1e8ac4;--mau-chon: #b85102;--mau-nuoc-cuoi: #8a3a80;--mau-thut: #b85102;--mau-thi: #c32350;--mau-bao-ve: #0b71a8;--mau-tieu-diem: #0b71a8;--radius: 14px;--radius-nho: 10px;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--mau-nen-app);color:var(--mau-chu);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-text-size-adjust:100%}#root{min-height:100dvh}.screen{max-width:1080px;margin:0 auto;padding:12px;display:flex;flex-direction:column;gap:12px}.brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand h1{margin:8px 0 4px;font-size:clamp(1.6rem,7vw,2.4rem);letter-spacing:.02em;color:var(--mau-nhan-xanh)}.brand p{margin:0;color:var(--mau-chu-phu);font-size:.95rem}.setup section{background:var(--mau-the);border:2px solid var(--mau-nen-app-dam);border-radius:var(--radius);padding:12px}.setup h2{margin:0 0 10px;font-size:1rem;color:var(--mau-chu-phu);font-weight:600}.cards{display:grid;grid-template-columns:1fr;gap:10px}@media (min-width: 520px){.cards{grid-template-columns:1fr 1fr}}.card{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;background:var(--mau-ban-co);color:var(--mau-chu);border:2px solid var(--mau-ban-co-vien);border-radius:var(--radius);padding:10px;cursor:pointer;min-height:44px}.card.chosen{border-color:var(--mau-chon)}.card small{color:var(--mau-chu-phu);line-height:1.35}.thumb{width:100%;max-width:180px;aspect-ratio:1;align-self:center}.thumb line{stroke:var(--mau-duong-ke);stroke-width:1.4}.thumb circle{fill:var(--mau-diem-trong)}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border-radius:999px;border:2px solid var(--mau-nut-vien);background:var(--mau-the-chim);color:var(--mau-chu);font-size:.95rem;cursor:pointer}.chip.chosen{border-color:var(--mau-chon);background:var(--mau-nen-app)}.note{color:var(--mau-chu-phu);font-size:.85rem;margin:10px 0 0;line-height:1.4}.btn{min-height:44px;padding:10px 18px;border-radius:var(--radius-nho);border:2px solid var(--mau-nut-vien);background:var(--mau-nut-nen);color:var(--mau-chu);font-size:1rem;font-weight:600;cursor:pointer}.btn:disabled{color:var(--mau-chu-tat);border-color:var(--mau-nen-app-dam);cursor:default}.btn-primary{background:var(--mau-nut-chinh);color:var(--mau-nut-chu);border-color:var(--mau-nut-chinh);box-shadow:inset 0 2px 0 var(--mau-nut-chinh-sang);font-weight:700}.btn-resume{background:var(--mau-nut-tiep);color:var(--mau-nut-chu);border-color:var(--mau-nut-tiep);box-shadow:inset 0 2px 0 var(--mau-nhan-manh-sang);font-weight:700}:focus-visible{outline:3px solid var(--mau-tieu-diem);outline-offset:2px}.swatch{width:14px;height:14px;border-radius:50%;display:inline-block}.swatch-X{background:var(--mau-quan-xanh);box-shadow:inset 0 0 0 2px var(--mau-quan-xanh-dam)}.swatch-D{background:var(--mau-quan-do);box-shadow:inset 0 0 0 2px var(--mau-quan-do-dam)}.play{display:grid;grid-template-columns:1fr;gap:12px}@media (min-width: 860px){.play{grid-template-columns:minmax(0,1fr) 320px;align-items:start}.play .board{grid-row:1 / span 3}}.board{width:100%;aspect-ratio:1;max-height:min(70dvh,560px);margin:0 auto;display:block;touch-action:manipulation}.board-bg{fill:var(--mau-ban-co);stroke:var(--mau-vien-khung);stroke-width:1.4}.edge{stroke:var(--mau-duong-ke);stroke-width:1.1;stroke-linecap:round}.edge-mill{stroke:var(--mau-thut);stroke-width:2.2}.hit{fill:transparent;cursor:pointer}.dot{fill:var(--mau-diem-trong);transition:r .12s ease}.point.empty .dot{fill:var(--mau-diem-trong)}.point.target .dot{fill:var(--mau-goi-y);r:2.4}.point.target-soft .dot{fill:var(--mau-diem-trong);r:2.1}.piece-ring{fill:var(--mau-vanh-quan)}.gloss{fill:var(--mau-vanh-quan);opacity:.55}.point.piece-X .dot{fill:var(--mau-quan-xanh);stroke:var(--mau-quan-xanh-dam);stroke-width:.8}.point.piece-X .gloss{fill:var(--mau-quan-xanh-sang);opacity:.85}.point.piece-D .dot{fill:var(--mau-quan-do);stroke:var(--mau-quan-do-dam);stroke-width:.8}.point.piece-D .gloss{fill:var(--mau-quan-do-sang);opacity:.9}.engrave{fill:none;stroke:var(--mau-quan-do-dam);stroke-width:.9}.point.selected .dot{stroke:var(--mau-chon);stroke-width:1.2;r:4.8}.point.last-move .piece-ring{fill:var(--mau-nuoc-cuoi)}.point.last-move.empty .dot{fill:var(--mau-nuoc-cuoi);r:2.4}.point.in-mill .dot{stroke:var(--mau-thut);stroke-width:1.4}.point.capturable .piece-ring{stroke:var(--mau-chu);stroke-width:1.3;stroke-dasharray:2 1.4}.point.protected .piece{opacity:.45}.shield{fill:var(--mau-bao-ve);stroke:var(--mau-vanh-quan);stroke-width:.35}.focus-ring{fill:transparent;stroke:transparent;outline:none;cursor:pointer}.focus-ring:focus-visible{stroke:var(--mau-tieu-diem);stroke-width:1.2;outline:none}@keyframes pulse-thi{0%{transform:scale(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes pulse-thut{0%{transform:scale(1)}40%{transform:scale(1.18)}to{transform:scale(1)}}.pulse-thi,.pulse-thut{transform-box:fill-box;transform-origin:center}.pulse-thi{animation:pulse-thi .22s ease-out 1}.pulse-thut{animation:pulse-thut .26s ease-out 1}.info{display:flex;flex-direction:column;gap:8px}.players{display:grid;grid-template-columns:1fr 1fr;gap:8px}.player-card{background:var(--mau-the);border:2px solid var(--mau-nen-app-dam);border-radius:var(--radius);padding:8px 10px}.player-card.active{border-color:var(--mau-chon)}.player-name{display:flex;align-items:center;gap:6px;font-weight:700}.player-X .player-name{color:var(--mau-nhan-xanh)}.player-D .player-name{color:var(--mau-nhan-do)}.clock{color:var(--mau-dong-ho);font-variant-numeric:tabular-nums;font-size:1.05rem;font-weight:700}.hand{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin:4px 0;min-height:14px}.hand-piece{width:10px;height:10px;border-radius:50%}.hand-X{background:var(--mau-quan-xanh)}.hand-D{background:var(--mau-quan-do)}.hand-count{margin-left:6px;font-size:.8rem;color:var(--mau-chu-phu)}.captured{font-size:.9rem;color:var(--mau-chu)}.phase-row{display:flex;justify-content:space-between;gap:8px;font-size:.9rem;color:var(--mau-chu-phu);min-height:20px}.warn{color:var(--mau-nhan-manh);font-weight:700}.status-box{height:56px;display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--mau-the);border:2px solid var(--mau-nen-app-dam);border-radius:var(--radius);overflow:hidden}.status-text{font-size:.95rem;color:var(--mau-chu)}.shout{font-size:1.15rem;font-weight:800;letter-spacing:.02em;flex:none}.shout-thut{color:var(--mau-thut)}.shout-thi{color:var(--mau-thi)}.hint-box{min-height:20px;font-size:.85rem;color:var(--mau-chu-phu)}.controls{display:flex;flex-wrap:wrap;gap:8px}.controls .btn{flex:1 1 auto}.controls .lang-toggle{flex:0 0 auto}.lang-toggle{display:inline-flex;flex:none;border:2px solid var(--mau-nut-vien);border-radius:999px;background:var(--mau-the-chim);overflow:hidden}.lang-btn{min-height:44px;min-width:48px;padding:0 12px;border:0;background:transparent;color:var(--mau-chu-phu);font-size:.9rem;font-weight:700;letter-spacing:.04em;cursor:pointer}.lang-btn.chosen{background:var(--mau-nut-chinh);color:var(--mau-nut-chu)}.setup section.guide-invite{border-color:var(--mau-nut-tiep)}.guide-invite h2{color:var(--mau-nhan-manh)}.guide{display:flex;flex-direction:column;gap:12px}.guide .board{max-height:min(46dvh,420px)}.guide-card{background:var(--mau-the);border:2px solid var(--mau-nen-app-dam);border-radius:var(--radius);padding:12px}.guide-card h2{margin:0 0 6px;font-size:1.05rem;color:var(--mau-nhan-xanh)}.guide-card h2+p{margin:0;line-height:1.45}.guide-card .chips{margin:10px 0 0}.guide-nav{display:flex;flex-wrap:wrap;gap:8px}.guide-nav .btn{flex:1 1 auto}.btn-quiet{border-color:transparent;background:transparent;color:var(--mau-chu-phu);font-weight:600}.illustration{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}.mini-board{width:100%;max-width:320px;aspect-ratio:1}.illustration figcaption{text-align:center;max-width:44ch}.end-panel{background:var(--mau-the);border:2px solid var(--mau-vien-khung);border-radius:var(--radius);padding:14px}.end-panel h2{margin:0 0 6px;font-size:1.1rem;color:var(--mau-chu)}.end-reason{margin:0 0 10px;font-size:1.05rem;font-weight:700;color:var(--mau-nhan-manh)}.stats{display:grid;grid-template-columns:1fr auto;gap:2px 12px;margin:0 0 12px;font-size:.9rem}.stats>div{display:contents}.stats dt{color:var(--mau-chu-phu)}.stats dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}.end-actions{display:flex;gap:8px;flex-wrap:wrap}@media (prefers-reduced-motion: reduce){.pulse-thi,.pulse-thut{animation:none}.dot{transition:none}}