@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

:root{color-scheme:dark;--bg:#11151d;--surface:#1b202b;--surface-deep:#161b24;--line:#2c3341;--text:#eef0f6;--muted:#989faf;--accent:#edb95f;--light-square:#ced6e0;--dark-square:#687b96;--selected:#e9be67;--radius:14px;font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:16px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);min-width:280px}button,select,input{font:inherit}button,a,select,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{color:inherit}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
.site-header{height:88px;max-width:1440px;padding:0 5.2%;margin:auto;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:42px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.55rem;letter-spacing:-.5px}.brand-mark{font-family:'Segoe UI Symbol',serif;font-size:2.5rem;color:var(--accent);line-height:1}.brand-dot{color:var(--accent)}.header-label{font-size:.75rem;letter-spacing:2px;color:var(--muted);padding-top:5px}.help-button{margin-left:auto;background:none;border:0;display:flex;align-items:center;gap:9px;font-size:.875rem;color:var(--muted);padding:10px 0}.help-button>span:first-child{width:21px;height:21px;border:1px solid #687284;border-radius:50%;font-weight:600;display:grid;place-items:center}.help-button:hover{color:var(--text)}
.workspace{max-width:1080px;margin:34px auto 26px;display:grid;grid-template-columns:minmax(0,584px) minmax(280px,320px);justify-content:center;gap:44px;padding:0 28px}.game-area{min-width:0}.player-bar{height:66px;display:flex;align-items:center;gap:12px;padding:0 4px}.avatar{height:43px;width:43px;border-radius:10px;display:grid;place-items:center;font-family:'Segoe UI Symbol',serif;font-size:2rem;flex-shrink:0}.dark-avatar{background:#313a49;color:#bcc7d6}.light-avatar{background:#e1e5ec;color:#3d485b}.player-info{display:flex;flex-direction:column;gap:4px;min-width:78px}.player-info strong{font-size:.9375rem;font-weight:600}.player-info>span{color:var(--muted);font-size:.75rem}.captured{color:#bbc5d4;display:flex;align-items:center;flex:1;flex-wrap:wrap;font-family:'Segoe UI Symbol',serif;font-size:1.3rem;line-height:1;letter-spacing:-3px;padding:0 3px}.material-score{font-family:'Be Vietnam Pro',sans-serif;font-size:.75rem;letter-spacing:0;margin-left:8px;color:var(--muted)}.turn-badge{color:var(--accent);background:#edb95f12;border:1px solid #edb95f25;padding:7px 10px;border-radius:6px;font-size:.75rem;flex-shrink:0}
.board-frame{border:7px solid #333e50;border-radius:8px;box-shadow:0 18px 44px #0004;overflow:hidden;margin:6px 0}.board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));aspect-ratio:1}.square{appearance:none;position:relative;border:0;border-radius:0;display:grid;place-items:center;min-width:0;width:100%;aspect-ratio:1;padding:0;overflow:hidden;isolation:isolate;background:var(--light-square)}.square.dark{background:var(--dark-square)}.square.last-move{background:#e5c77d}.square.dark.last-move{background:#9eaa79}.square.selected{background:var(--selected);box-shadow:inset 0 0 0 4px #a46a20}.square.in-check{background:#cc6470}.square:focus-visible{outline:0;box-shadow:inset 0 0 0 4px #f6a83a;z-index:2}.square:hover{filter:brightness(1.06)}.piece{font-family:'Segoe UI Symbol','DejaVu Sans',serif;font-size:clamp(1.6rem,4.5vw,3.4rem);line-height:1;user-select:none;transform:translateY(-1px);pointer-events:none;filter:drop-shadow(0 2px 1px #0003);z-index:1}.piece.white{color:#fffaf0;-webkit-text-stroke:1px #3a4657;text-shadow:0 1px #3a4657}.piece.black{color:#192333;-webkit-text-stroke:.65px #121925}.coordinate{position:absolute;font-family:'Be Vietnam Pro',sans-serif;font-weight:600;font-size:.6875rem;line-height:1;color:#566880;pointer-events:none;z-index:3}.dark .coordinate{color:#e2e8f1}.coordinate.rank{top:5px;left:5px}.coordinate.file{bottom:4px;right:5px}.square.legal::after{content:'';position:absolute;width:23%;height:23%;background:#27374b50;border-radius:50%;z-index:2;pointer-events:none}.square.legal.capture::after{width:88%;height:88%;border:5px solid #26364b65;background:none}.board-tools{display:flex;align-items:center;justify-content:space-between;margin-top:11px;gap:10px}.board-tip{color:var(--muted);font-size:.75rem}.tool-group{display:flex;gap:5px}.icon-button{border:1px solid var(--line);background:var(--surface-deep);width:38px;height:36px;border-radius:7px;display:grid;place-items:center}.icon-button:hover:not(:disabled){background:#2a3342;border-color:#586477}.icon-button svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sidebar{padding-top:10px;display:flex;flex-direction:column;gap:19px;min-width:0}.status-card{padding:16px 0 18px;border-bottom:1px solid var(--line);min-height:137px}.eyebrow{font-size:.6875rem;letter-spacing:2px;color:var(--accent);font-weight:600}.status-heading{display:flex;align-items:center;gap:10px;margin:12px 0 9px}.status-symbol{color:var(--accent);font-size:1.8rem;line-height:1;font-family:'Segoe UI Symbol',serif}.status-heading h1{font-size:1.45rem;letter-spacing:-.5px;font-weight:600;margin:0}.status-card p{font-size:.875rem;line-height:1.7;color:var(--muted);margin:0}.setup-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}.mode-fieldset{border:0;padding:0;margin:0}.mode-fieldset legend,.field-label{font-size:.875rem;color:#b8bfcc;font-weight:500}.mode-fieldset legend{padding:0 0 12px}.segmented{display:flex;background:var(--bg);padding:4px;border:1px solid #2b3240;border-radius:9px}.segmented label{flex:1;position:relative;cursor:pointer}.segmented input{position:absolute;opacity:0;width:100%;height:100%;margin:0}.segmented span{display:block;border-radius:6px;text-align:center;padding:10px 6px;font-size:.875rem;color:var(--muted)}.segmented input:checked+span{background:#3a4353;color:var(--text);box-shadow:0 1px 3px #0005}.segmented input:focus-visible+span{outline:2px solid var(--accent)}.configuration{display:grid;gap:14px;margin:19px 0 20px}.field-label{display:flex;flex-direction:column;gap:9px}select{appearance:auto;background:#232a36;border:1px solid #3b4454;color:var(--text);padding:10px;border-radius:7px;width:100%;font-size:.875rem;min-height:43px}.primary-button{border:0;background:var(--accent);color:#242017;font-weight:600;padding:12px 15px;min-height:45px;border-radius:8px;transition:background .15s}.primary-button:hover{background:#f8c979}.setup-card>.primary-button{width:100%}.primary-button>span{font-size:1.1rem}.setup-note{font-size:.75rem;color:var(--muted);line-height:1.6;text-align:center;margin:11px 0 0}.setup-card:has(#computer-settings[hidden])>.primary-button{margin-top:18px}
.history-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.section-heading{display:flex;align-items:center;justify-content:space-between;padding:17px 19px}.section-heading h2{font-size:.9375rem;font-weight:500;margin:0}.move-count{font-size:.75rem;color:var(--muted)}.history-columns,.move-row{display:grid;grid-template-columns:36px 1fr 1fr;align-items:center;padding:9px 19px;gap:6px}.history-columns{font-size:.75rem;color:var(--muted);background:#1b202a}.history-scroll{height:174px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#465269 transparent}.empty-history{display:grid;place-items:center;text-align:center;padding:20px}.empty-history>span{font-size:2rem;color:#56647b;font-family:'Segoe UI Symbol',serif}.empty-history p{font-size:.8125rem;line-height:1.8;color:var(--muted);margin:7px 0 0}#move-list{list-style:none;padding:0;margin:0}.move-row{font-size:.875rem;line-height:1.8}.move-row:nth-child(even){background:#ffffff03}.move-number{font-size:.75rem;color:var(--muted)}.move-san{font-family:ui-monospace,Consolas,monospace}.move-san.latest{color:var(--accent);font-weight:600}.sidebar-footer{display:flex;justify-content:center;align-items:center;gap:8px;color:#768095;font-size:.75rem;margin-top:0}.tiny-board{font-size:1.15rem}
dialog{background:var(--surface);color:var(--text);border:1px solid #475367;border-radius:16px;padding:27px;max-width:430px;width:calc(100% - 32px);box-shadow:0 24px 100px #0008}dialog::backdrop{background:#070b13bf;backdrop-filter:blur(3px)}dialog h2{font-size:1.25rem;margin:0 0 14px}dialog p,dialog li{font-size:.9375rem;line-height:1.8;color:#b8c0d0}dialog ul{padding-left:20px}dialog li+li{margin-top:9px}.dialog-heading{display:flex;justify-content:space-between;align-items:start}.close-button{background:none;border:0;font-size:1.7rem;line-height:1}.help-note{border-top:1px solid var(--line);padding-top:14px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:23px}.secondary-button{border:1px solid #485369;background:none;border-radius:8px;padding:10px 15px;font-size:.875rem}.promotion-options{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.promotion-choice{background:#303b4c;border:1px solid #53627a;border-radius:9px;display:flex;align-items:center;flex-direction:column;gap:10px;padding:12px 2px;font-size:.75rem}.promotion-choice .piece{font-size:2.5rem}.promotion-choice:hover{background:#46506a}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#364256;border:1px solid #596981;border-radius:9px;padding:13px 20px;font-size:.875rem;z-index:10;max-width:calc(100% - 30px);box-shadow:0 6px 25px #0005}.no-script{padding:20px;text-align:center;color:var(--accent)}
@media(min-width:1450px){.workspace{margin-top:48px}}@media(max-width:1000px){.workspace{gap:28px;grid-template-columns:minmax(0,560px) minmax(270px,300px);padding:0 22px}.piece{font-size:clamp(1.6rem,5vw,3.4rem)}.captured{font-size:1.1rem}.status-heading h1{font-size:1.3rem}}
@media(max-width:760px){.site-header{height:70px;padding:0 20px;gap:20px}.header-label{display:none}.brand{font-size:1.3rem}.brand-mark{font-size:2.15rem}.workspace{grid-template-columns:minmax(0,560px);gap:22px;margin:16px auto 28px;padding:0 16px}.sidebar{padding-top:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}.status-card{grid-column:1/-1;min-height:0;padding:10px 0 18px}.status-heading{margin:8px 0}.setup-card{padding:17px}.history-scroll{height:248px}.sidebar-footer{grid-column:1/-1}.piece{font-size:clamp(1.8rem,9.6vw,3.8rem)}.player-bar{height:61px}.board-frame{border-width:5px}.captured{font-size:1.35rem}.help-button{font-size:.8125rem}.coordinate{font-size:.6875rem}}
@media(max-width:460px){.sidebar{display:flex;gap:18px}.history-scroll{height:170px}.board-tip{max-width:210px;line-height:1.6}.board-tools{align-items:start}.captured{font-size:1.1rem;letter-spacing:-3px}.player-info{min-width:62px}.player-info strong{font-size:.875rem}.turn-badge{padding:6px;font-size:.6875rem}.square.legal.capture::after{border-width:3px}.coordinate.rank{top:3px;left:3px}.coordinate.file{bottom:3px;right:3px}.help-button>span:last-child{display:none}.board-frame{border-width:4px}.avatar{width:36px;height:36px;font-size:1.7rem}.dialog-actions{flex-wrap:wrap}.status-heading h1{font-size:1.3rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.online-status{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.875rem;white-space:nowrap;min-width:0}.presence-dot{width:7px;height:7px;border-radius:50%;background:#626d80;flex-shrink:0}.online-status.connected{color:#c7d5c8}.online-status.connected .presence-dot{background:#75c98b}.online-status strong{color:var(--text);font-weight:600}.online-status.unavailable{font-size:.8125rem}@media(max-width:760px){.site-header{gap:16px}.online-status{margin-left:auto;font-size:.8125rem}.help-button{margin-left:0}.online-status.unavailable{font-size:.75rem}}@media(max-width:360px){.site-header{padding:0 12px;gap:10px}.brand{gap:6px;font-size:1.15rem}.brand-mark{font-size:1.8rem}.online-status{font-size:.75rem}}

/* Xanh lá dịu làm màu chủ đạo cho một ván cờ thong thả. */
:root{color-scheme:light;--bg:#e7efdd;--surface:#f6faef;--surface-deep:#e3edda;--line:#cddbc1;--text:#283c31;--muted:#60705e;--accent:#3f6853;--light-square:#e7efd9;--dark-square:#8fab87;--selected:#d9cf90}
body{background:radial-gradient(ellipse at 5% 20%,#d4e4c7 0,transparent 60%),var(--bg)}
.site-header{border-color:var(--line)}.brand{letter-spacing:-.8px}.online-status.connected{color:#486c52}.online-status.connected .presence-dot{background:#638c60}.help-button>span:first-child{border-color:#99a68f}
.primary-button{background:var(--accent);color:#fffdf4;box-shadow:0 3px 0 #2e503b14}.primary-button:hover{background:#315941}.secondary-button{border-color:#bdc9b5}.icon-button:hover:not(:disabled){background:#e0e8d9;border-color:#95ab93}
.board-frame{border-color:#78917e;box-shadow:0 16px 38px #53674b18}.dark-avatar{background:#d8e2d1;color:#3e5f49}.light-avatar{background:#eee8d9;color:#6a715c}.captured{color:#4a654e}.turn-badge{color:#496744;background:#dfe8ce;border-color:#c4d2b2}
.piece.black{color:#243b30;-webkit-text-stroke:.65px #1c3225}.piece.white{color:#fffcef;-webkit-text-stroke:1px #51604a;text-shadow:0 1px #51604a}.coordinate{color:#68735d}.dark .coordinate{color:#314d38}.square.legal::after{background:#314e3d60}.square.legal.capture::after{border-color:#314e3d80}
.status-heading h2{font-size:1.45rem;letter-spacing:-.5px;font-weight:600;margin:0}.setup-card{box-shadow:0 6px 20px #6a7d5910}.field-label,.mode-fieldset legend{color:#586c5b}select{background:#f3f4ea;border-color:#ccd6c4;color:var(--text)}
.history-columns{background:#e9eedf}.move-row:nth-child(even){background:#dce5d02b}.empty-history>span{color:#8b9e81}.sidebar-footer{color:#6f8068}.game-summary{display:grid;gap:10px;margin-bottom:20px}.game-summary strong{font-size:1.1rem}.game-summary p{margin:0;color:var(--muted);font-size:.8125rem;line-height:1.6}
dialog{border-color:#bdc9b5;box-shadow:0 24px 90px #283c3126}dialog::backdrop{background:#283c3180}dialog p,dialog li{color:#586c5b}.promotion-choice{background:#e5ebda;border-color:#bdc9b5}.promotion-choice:hover{background:#d4e0c6}.toast{background:#e3ecd8;border-color:#afc49d;color:var(--text);box-shadow:0 6px 25px #4b664326}

.welcome-screen{max-width:1120px;margin:64px auto 42px;padding:0 38px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);gap:72px;align-items:center}
.welcome-intro>.eyebrow{letter-spacing:2.4px;font-size:.7rem}.welcome-intro h1{font-size:clamp(2.3rem,4vw,3.35rem);font-weight:600;line-height:1.2;letter-spacing:-2px;margin:22px 0 20px;max-width:480px;outline:0}.welcome-intro h1>span{display:block;color:var(--accent);font-weight:800}.welcome-description{color:var(--muted);font-size:.975rem;line-height:1.9;max-width:400px;margin:0}
.welcome-art{position:relative;min-height:272px;display:flex;align-items:center;gap:30px;margin:28px 0 16px;padding:10px 12px}.welcome-art::before{content:'';position:absolute;width:260px;height:260px;left:-12px;top:0;background:#dde6cb;border-radius:45% 55% 60% 40%;transform:rotate(-13deg);z-index:-1}.welcome-board{width:218px;height:218px;flex-shrink:0;border:9px solid #b2c1a3;border-radius:16px;background:repeating-conic-gradient(#d5dfbd 0 25%,#f7f4e5 0 50%) 50%/50px 50px;display:grid;place-items:center;transform:rotate(-8deg);box-shadow:8px 16px 0 #c8d3b755,0 24px 34px #62744a16}.welcome-board>span{font-family:'Segoe UI Symbol',serif;font-size:148px;line-height:1;color:#3e644b;text-shadow:3px 5px 0 #faf7e4;transform:rotate(8deg) translateY(-7px)}.art-caption{display:flex;flex-direction:column;gap:9px;max-width:140px;font-size:.75rem;line-height:1.7;color:#7b8b6a}.art-caption>span:first-child{font-weight:600;color:#4b6643;letter-spacing:1px}.welcome-footnote{font-size:.75rem;color:#7b886d;line-height:1.8}
.lobby-card{background:#fffcf5e8;border:1px solid #d8dfcd;border-radius:24px;padding:30px;box-shadow:0 16px 50px #546c4510}.lobby-heading h2{font-size:1.35rem;font-weight:600;letter-spacing:-.6px;margin:13px 0 9px}.lobby-heading p{font-size:.8125rem;line-height:1.7;color:var(--muted);margin:0 0 23px}.lobby-modes{display:grid;gap:11px}.lobby-modes legend{font-size:.75rem;padding-bottom:12px}.mode-option{position:relative;cursor:pointer;display:block}.mode-option input{position:absolute;opacity:0;width:1px;height:1px}.mode-content{display:flex;align-items:center;gap:13px;padding:16px 13px;border:1px solid #dbe0d1;border-radius:13px;background:#f9f8ef;min-height:89px}.mode-option input:checked+.mode-content{background:#e7eddc;border-color:#91ac83}.mode-option input:focus-visible+.mode-content{outline:3px solid var(--accent);outline-offset:3px}.mode-icon{display:grid;place-items:center;width:40px;height:43px;flex-shrink:0;border-radius:10px;background:#e1e8d5;color:#486547;font-family:'Segoe UI Symbol',serif;font-size:2rem}.mode-copy{display:grid;gap:6px}.mode-copy strong{font-size:.875rem;font-weight:600}.mode-copy>span{font-size:.7rem;color:var(--muted);line-height:1.6}.mode-check{display:grid;place-items:center;margin-left:auto;flex-shrink:0;width:19px;height:19px;border:1px solid #c0cbb5;border-radius:50%;font-size:.7rem;color:transparent}.mode-option input:checked+.mode-content .mode-check{background:var(--accent);border-color:var(--accent);color:#fffdf4}
.lobby-configuration{grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 0}.lobby-configuration .field-label{font-size:.75rem}.lobby-configuration select{font-size:.75rem;padding:9px 5px;min-height:44px}.lobby-mode-note{font-size:.75rem;line-height:1.75;color:var(--muted);margin:18px 0}.start-button{width:100%;display:flex;justify-content:center;align-items:center;gap:14px;min-height:50px;border-radius:11px;font-size:.9375rem}.start-button>span{font-size:1.2rem}.resume-button{display:block;width:100%;background:none;border:0;color:var(--accent);padding:12px 4px;min-height:44px;font-size:.8125rem;text-decoration:underline;text-underline-offset:4px}.resume-button:hover{color:#24442f}.lobby-tip{margin:16px 0 0;text-align:center;font-size:.6875rem;line-height:1.7;color:#7b886d}.back-to-menu{margin-top:6px}.workspace:focus{outline:none}
@media(max-width:1000px){.welcome-screen{gap:36px;padding:0 28px;margin-top:44px}.welcome-art{gap:18px;padding-left:0}.welcome-board{width:185px;height:185px}.welcome-board>span{font-size:125px}.art-caption{max-width:110px}.welcome-art::before{width:230px;height:230px}.status-heading h2{font-size:1.3rem}}
@media(max-width:760px){.welcome-screen{grid-template-columns:minmax(0,480px);justify-content:center;gap:20px;margin:36px auto 30px;padding:0 22px}.welcome-intro h1{font-size:2.45rem;letter-spacing:-1.5px;max-width:420px;margin:15px 0}.welcome-intro h1>span{display:inline}.welcome-description{font-size:.875rem;max-width:430px}.welcome-art{min-height:130px;margin:18px 0 8px;gap:26px;padding:0 14px}.welcome-board{width:115px;height:115px;border-width:6px;border-radius:11px;background-size:26px 26px;box-shadow:5px 9px 0 #c8d3b755,0 12px 20px #62744a16}.welcome-board>span{font-size:79px;transform:rotate(8deg) translateY(-3px)}.welcome-art::before{width:150px;height:150px;left:0;top:-5px}.art-caption{max-width:180px;font-size:.75rem}.welcome-footnote{margin:16px 0 0}.lobby-card{padding:25px;border-radius:20px}.lobby-heading h2{font-size:1.25rem}.status-heading h2{font-size:1.3rem}}
@media(max-width:380px){.welcome-screen{padding:0 16px;margin-top:28px}.welcome-intro h1{font-size:2.1rem}.lobby-card{padding:20px 16px}.lobby-configuration{grid-template-columns:1fr}.mode-content{padding:13px 10px;gap:10px}.mode-icon{width:34px}.mode-copy>span{font-size:.6875rem}.welcome-intro>.eyebrow{letter-spacing:1.5px;font-size:.625rem}}
.welcome-art{isolation:isolate}
.lobby-card{background:#f6faefe8;border-color:#cbdabe}.mode-content{background:#f0f5e8;border-color:#cedbc0}.mode-option input:checked+.mode-content{background:#dce9ce;border-color:#87a375}.mode-icon{background:#d6e4c7}.lobby-configuration select{background:#eaf1df;border-color:#c1d1b1}.welcome-board{background-image:repeating-conic-gradient(#bfd3a5 0 25%,#edf4de 0 50%);border-color:#97b584}.welcome-art::before{background:#c6dcb3}.welcome-footnote,.lobby-tip{color:#60745a}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sound-button{margin-left:auto;border:1px solid #c4d4b6;border-radius:10px;background:#edf4e3;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 12px;color:#55744a;font-size:.8125rem}.sound-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.sound-button:hover{background:#deebce}.sound-button.active{background:#d1e3be;border-color:#8caf73;color:#345d37}.site-header .help-button{margin-left:0}
@media(max-width:760px){.site-header{padding:0 16px;gap:8px}.sound-button{margin-left:0;width:44px;min-width:44px;padding:9px}.sound-button>span{display:none}.help-button{width:44px;min-height:44px;justify-content:center;padding:0}.help-button>span:last-child{display:none}.online-status{font-size:.75rem}.brand{gap:7px}}@media(max-width:360px){.site-header{padding:0 10px;gap:5px}.brand{font-size:1.05rem;gap:4px}.brand-mark{font-size:1.7rem}.online-status{gap:5px;font-size:.6875rem}.sound-button{width:40px;min-width:40px}.help-button{width:36px}}

/* Một phòng khách xanh dịu cho tài khoản, bạn bè và những ván cờ từ xa. */
.site-header{gap:22px}.site-header .online-status{margin-left:auto}.account-button{display:flex;align-items:center;gap:7px;min-height:44px;padding:8px 12px;border:1px solid #bacbad;border-radius:10px;background:#edf4e3;color:#3f654b;font-size:.8125rem;max-width:165px}.account-button>span:first-child{font-family:'Segoe UI Symbol',serif;font-size:1.5rem}.account-button>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#music-toggle{margin-left:0}
.welcome-screen{align-items:start;margin-top:48px}.welcome-intro{position:sticky;top:42px;padding-top:25px}.lobby-card{padding:28px}.lobby-heading .eyebrow{color:#4e7651}.online-panel{margin-top:12px;padding-top:5px;min-width:0}.hub-kicker{display:block;color:#6d8665;font-size:.625rem;font-weight:700;letter-spacing:1.4px}.online-panel h3{font-size:1rem;font-weight:600;letter-spacing:-.3px;line-height:1.5;margin:10px 0}.online-panel p{font-size:.75rem;line-height:1.8;color:var(--muted)}.account-gate{padding:23px 20px;border:1px solid #bccfac;border-radius:16px;background:linear-gradient(140deg,#e1ecd4,#f1f6e8)}.account-gate h3{font-size:1.2rem;margin-top:12px;max-width:240px}.button-row{display:flex;gap:8px;flex-wrap:wrap}.button-row>button{flex:1;min-width:115px}.online-panel button,.room-info button,.auth-form button{min-height:44px}.secondary-button{background:#f4f8ed;color:var(--accent);border:1px solid #bbcdae;border-radius:9px;padding:10px 13px;font-size:.75rem}.secondary-button:hover{background:#e0ebd5}.text-button{border:0;background:none;color:#416b4a;min-height:44px;padding:7px;font-size:.7rem;text-decoration:underline;text-underline-offset:3px}.text-button:hover{color:#1e4728}.danger-button{background:#f3e8de;border:1px solid #d7b8a0;border-radius:9px;color:#80573d;font-size:.75rem;min-height:44px;padding:10px 14px}.danger-button:hover{background:#e9d8c9}
.profile-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 0 18px;border-top:1px solid var(--line)}.profile-strip>div{min-width:0;display:grid;gap:7px}.profile-strip strong{font-size:1rem;overflow-wrap:anywhere}.profile-code{font-size:.6875rem;color:var(--muted)}.profile-code code{color:#355b3e;font-weight:700;letter-spacing:.8px;margin-left:5px}.compact-form{padding:15px;background:#e9f0df;border-radius:12px;margin-bottom:15px}.online-panel label{display:block;font-size:.75rem;color:#49604a;margin:12px 0 8px}.input-action{display:flex;gap:7px;min-width:0;align-items:stretch}.input-action input{flex:1;min-width:0;width:100%;border:1px solid #bdcdb2;border-radius:9px;background:#fcfdf7;padding:11px;color:var(--text);font-size:.75rem;min-height:44px}.input-action button{flex-shrink:0}.small-note{font-size:.6875rem!important;line-height:1.75!important;color:#6d7f65!important}.online-panel .small-note{margin:10px 0 0}.hub-tabs{display:flex;gap:4px;background:#e4eed7;border-radius:11px;padding:4px;margin:3px 0 22px}.hub-tabs>button{flex:1;border:0;border-radius:8px;background:none;color:#6b7f62;font-size:.75rem;padding:10px 8px;min-height:42px;white-space:nowrap}.hub-tabs>button[aria-selected="true"],.hub-tabs>button[aria-pressed="true"]{background:#fbfdf5;box-shadow:0 2px 6px #344f3020;color:#325d3c;font-weight:700}.notice-badge{display:inline-block;padding:1px 5px;margin-left:4px;border-radius:8px;background:#4d7850;color:white;font-size:.625rem}
.match-card{border:1px solid #c2d5b0;border-radius:16px;padding:22px 19px;background:radial-gradient(ellipse at 100% 0%,#cde1bb80,transparent 80%),#eaf2df;text-align:center}.match-art{font-family:'Segoe UI Symbol',serif;font-size:2.2rem;color:#5f8857;letter-spacing:10px;margin:0 0 10px}.match-card>h3{margin:7px 0}.match-card>p{margin:8px 0 16px}.match-card>button{width:100%;font-size:.8125rem}.private-play{margin-top:22px;padding-top:5px}.private-play>button{width:100%;margin:4px 0 7px}.private-play input{text-transform:uppercase;letter-spacing:1.5px}.social-section{margin-top:24px;padding-top:15px;border-top:1px solid var(--line)}.social-section h3{font-size:.875rem;display:flex;justify-content:space-between;align-items:center}.social-section h3>span{font-size:.6875rem;color:#718764}.people-list{display:grid;gap:8px;margin-top:12px}.person-row{display:flex;align-items:center;gap:9px;padding:10px 8px;background:#edf3e4;border:1px solid #d4e1c7;border-radius:11px;min-width:0}.person-avatar{flex-shrink:0;width:33px;height:33px;border-radius:50%;background:#d7e7c6;color:#496b40;display:grid;place-items:center;font-weight:600;font-size:.875rem}.person-copy{display:grid;gap:4px;min-width:0;flex:1}.person-copy strong{font-size:.75rem;overflow-wrap:anywhere}.person-copy>span{font-size:.625rem;font-family:monospace;color:#7b8d6e;letter-spacing:.6px}.person-actions{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}.person-actions>button{font-size:.625rem;padding:4px;min-height:36px}.empty-people{font-size:.6875rem!important;margin:4px 0;color:#819176!important}.online-message{min-height:0;font-size:.75rem;line-height:1.8;color:#486b42;margin:13px 0 0;overflow-wrap:anywhere}.online-message:empty{display:none}
.room-info{margin:18px 0;padding:17px 14px;background:#e6efd9;border:1px solid #c2d4b0;border-radius:12px}.room-code{display:block;font-family:monospace;font-size:1.5rem;letter-spacing:3px;margin:10px 0;color:#345e3b}.room-info>p{font-size:.6875rem;line-height:1.7;color:#607c56}.room-info .button-row>button{min-width:80px;font-size:.6875rem;padding:8px 5px}.room-info>input{width:100%;margin:10px 0;border:1px solid #c4d5b6;border-radius:7px;padding:9px;background:#f4f8ed;color:#66825b;font-size:.625rem}.room-info .danger-button{width:100%;margin-top:4px}.account-dialog{width:min(440px,calc(100vw - 24px));padding:28px;border-radius:22px;background:#f4f8eb}.account-dialog .dialog-heading{align-items:start;margin-bottom:20px}.account-dialog h2{font-size:1.35rem;line-height:1.5;margin:10px 0}.account-dialog .close-button{min-width:40px;min-height:40px}.auth-form{display:grid;gap:16px}.auth-form label{font-size:.75rem;color:#476044;display:grid;gap:8px}.auth-form input{width:100%;min-height:46px;border:1px solid #c1d2b0;border-radius:9px;background:#fcfdf7;padding:10px 12px;color:var(--text);font-size:.875rem}.auth-form button{margin-top:4px}.auth-form .small-note{margin:0}.account-dialog #auth-message{color:#8b4f3e}input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:1000px){.site-header{gap:13px}.welcome-screen{gap:30px}.lobby-card{padding:23px}.account-button{max-width:120px}.online-status{font-size:.75rem}}
@media(max-width:760px){.welcome-intro{position:static;padding-top:0}.welcome-screen{margin-top:30px}.site-header{height:auto;min-height:72px;flex-wrap:wrap;padding:12px 16px;gap:8px}.site-header .brand{margin-right:auto}.site-header .online-status{order:5;flex-basis:100%;justify-content:center;margin:0;font-size:.6875rem;min-height:20px}.account-button{max-width:120px;padding:6px 9px;min-height:42px}.account-button>span:first-child{font-size:1.25rem}.account-button>span:last-child{font-size:.6875rem}#music-toggle{min-height:42px;padding:8px 10px;font-size:.6875rem}.site-header .help-button{min-width:34px;width:34px;min-height:42px}.match-card{padding:20px 17px}.room-info{padding:16px}.account-dialog{padding:23px}.hub-tabs>button{font-size:.75rem}}
@media(max-width:380px){.site-header{padding:10px;gap:6px}.account-button{max-width:94px;gap:4px;padding:6px}.account-button>span:last-child{max-width:54px}#music-toggle{padding:8px;font-size:.625rem}.lobby-card{padding:20px 15px}.account-gate{padding:20px 15px}.person-avatar{display:none}.person-actions{max-width:130px}.person-row{gap:6px}.input-action button{padding:9px}.account-dialog{padding:20px}}