:root {--lacquer: #5e0a0c;--lacquer-2: #3a0607;--lacquer-3: #7d1114;--gold: #e7c26a;--gold-2: #f6dd98;--gold-dark: #9c7426;--ink: #2b1606;--wood-line: #5a2d0c;--paper: #fbf1d8;--red-piece: #b3121b;--black-piece: #1c2326;--jade: #2f7d5b;--shadow: rgba(0, 0, 0, .45);}* { box-sizing: border-box; }html, body { margin: 0; }body {min-height: 100vh;font-family: 'Noto Serif', Georgia, serif;color: var(--paper);background:radial-gradient(1200px 700px at 50% -10%, #8e1a1c 0%, transparent 60%),radial-gradient(900px 900px at 50% 120%, #2a0405 0%, transparent 60%),var(--lacquer);overflow-x: hidden;}.drum-bg {position: fixed; inset: 0; pointer-events: none; z-index: 0;display: grid; place-items: center; opacity: .09;}.drum-bg svg { width: 140vmax; height: 140vmax; animation: spin 400s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }.site-header { position: relative; z-index: 1; text-align: center; padding: 18px 16px 6px; }.title-wrap { display: inline-flex; align-items: center; gap: 18px; }h1 { margin: 0; line-height: 1; font-family: 'Playfair Display', serif; }h1 .t1 {display: block; font-size: clamp(16px, 2.2vw, 22px); letter-spacing: .5em; text-transform: uppercase;color: var(--gold-2); font-weight: 700; margin-bottom: 6px; padding-left: .5em;}h1 .t2 {display: block; font-size: clamp(30px, 4.4vw, 50px); font-weight: 900; font-style: italic;background: linear-gradient(180deg, #fff4c9 0%, var(--gold) 45%, #b3832b 100%);-webkit-background-clip: text; background-clip: text; color: transparent;filter: drop-shadow(0 3px 0 rgba(0,0,0,.35));}.subtitle { margin: 8px 0 0; color: #f0d9b0; font-size: 15px; opacity: .9; }.lotus {width: 54px; height: 54px; flex: none;background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23e7c26a' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M50 18 C38 34 38 56 50 72 C62 56 62 34 50 18Z' fill='%23e7c26a33'/%3E%3Cpath d='M50 72 C36 66 24 52 22 34 C34 38 44 48 50 60'/%3E%3Cpath d='M50 72 C64 66 76 52 78 34 C66 38 56 48 50 60'/%3E%3Cpath d='M50 74 C34 76 18 70 8 58 C22 54 36 58 46 68'/%3E%3Cpath d='M50 74 C66 76 82 70 92 58 C78 54 64 58 54 68'/%3E%3Cpath d='M20 84 H80' /%3E%3C/g%3E%3C/svg%3E");}.lotus.flip { transform: scaleX(-1); }.layout {position: relative; z-index: 1;display: grid; grid-template-columns: auto minmax(280px, 360px); gap: 24px;justify-content: center; align-items: start; padding: 10px 16px 24px;}.board-col { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }.seat {display: flex; align-items: center; gap: 12px; padding: 8px 14px;background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.4));border: 1px solid rgba(231,194,106,.35); border-radius: 14px;}.seat.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(231,194,106,.25), 0 0 18px rgba(231,194,106,.25); }.avatar {width: 46px; height: 46px; border-radius: 50%; flex: none;border: 2px solid var(--gold); background-size: cover;box-shadow: 0 2px 6px var(--shadow);}.ai-avatar { background: radial-gradient(circle at 40% 35%, #3a4448, #0d1113); position: relative; }.ai-avatar::after { content: '將'; position: absolute; inset: 0; display: grid; place-items: center; font: 900 24px 'Noto Serif TC', serif; color: var(--gold-2); }.you-avatar { background: radial-gradient(circle at 40% 35%, #d8323b, #6f080d); position: relative; }.you-avatar::after { content: '帥'; position: absolute; inset: 0; display: grid; place-items: center; font: 900 24px 'Noto Serif TC', serif; color: #fff1cf; }.seat-info { flex: 1; min-width: 0; }.seat-name { font-weight: 700; color: var(--gold-2); font-size: 15px; }.seat-status { font-size: 13px; color: #f3dfbd; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: #1c2326; color: #e9e2cf; margin-left: 6px; vertical-align: 2px; border: 1px solid #556; }.badge.red { background: #9e0f16; border-color: #e66; }.thinking { display: none; gap: 5px; }.thinking.on { display: flex; }.thinking i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: blink 1s infinite ease-in-out; }.thinking i:nth-child(2) { animation-delay: .15s; }.thinking i:nth-child(3) { animation-delay: .3s; }@keyframes blink { 0%, 100% { opacity: .2; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }.board-frame {--bw: min(92vw, 600px, max(400px, calc((100vh - 330px) * .9)));width: calc(var(--bw) + 36px);padding: 8px 18px;border-radius: 18px;background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 40%),linear-gradient(180deg, #7a1215, #4a0709);border: 3px solid var(--gold-dark);box-shadow:0 0 0 2px #2a0405,0 0 0 6px var(--gold),0 0 0 8px #2a0405,0 24px 50px rgba(0,0,0,.6);margin: 6px auto;}.files { display: grid; grid-template-columns: repeat(9, 1fr); width: var(--bw); color: var(--gold-2); font: 700 13px 'Noto Serif', serif; text-align: center; opacity: .85; }.files-top { margin-bottom: 4px; }.files-bottom { margin-top: 4px; }.board {position: relative; width: var(--bw); aspect-ratio: 9 / 10;container-type: inline-size;border-radius: 6px; overflow: visible;cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;}.board-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }.layer { position: absolute; inset: 0; pointer-events: none; }.piece {position: absolute; width: 10.6%; aspect-ratio: 1; border-radius: 50%;transform: translate(-50%, -50%);background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.85) 0 6%, transparent 22%),radial-gradient(circle at 50% 50%, #f7e6be 0%, #ecd09a 52%, #d2a663 78%, #9b6a2c 100%);box-shadow:0 .5cqw 0 #6f4718,0 1cqw 1.6cqw rgba(0,0,0,.55),inset 0 -.6cqw 1cqw rgba(90,50,10,.45),inset 0 .4cqw .5cqw rgba(255,255,255,.7);transition: left .38s cubic-bezier(.3,.7,.2,1), top .38s cubic-bezier(.3,.7,.2,1), transform .2s, box-shadow .2s, opacity .3s;display: grid; place-items: center;z-index: 2;}.piece::before {content: ''; position: absolute; inset: 8%; border-radius: 50%;border: .45cqw solid currentColor;box-shadow: 0 0 0 .25cqw rgba(255,255,255,.35), inset 0 0 0 .25cqw rgba(255,255,255,.35);opacity: .9;}.piece::after {content: ''; position: absolute; inset: 0; border-radius: 50%;background: repeating-radial-gradient(circle at 30% 120%, rgba(120,70,20,.08) 0 2px, transparent 2px 6px);mix-blend-mode: multiply;}.piece.red { color: var(--red-piece); }.piece.black { color: var(--black-piece); }.piece .ch {position: relative; z-index: 1;font-family: 'Noto Serif TC', 'Noto Serif', serif; font-weight: 900; font-size: 5.6cqw; line-height: 1;text-shadow: 0 .15cqw 0 rgba(255,255,255,.7), 0 -.1cqw 0 rgba(0,0,0,.35);}.piece .ch.vn { font-family: 'Noto Serif', serif; font-weight: 700; font-size: 2.55cqw; letter-spacing: -.02em; }.piece .ch.vn.long { font-size: 2.15cqw; }.piece.king::before { border-color: var(--gold-dark); border-width: .55cqw; box-shadow: 0 0 0 .3cqw currentColor, inset 0 0 0 .25cqw rgba(255,255,255,.35); }.piece.selected {transform: translate(-50%, -60%) scale(1.07);box-shadow:0 0 0 .5cqw var(--gold),0 0 3cqw rgba(255,214,110,.9),0 2.2cqw 2.4cqw rgba(0,0,0,.5),inset 0 -.6cqw 1cqw rgba(90,50,10,.45);z-index: 4;}.piece.moving { z-index: 5; }.piece.captured { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(40deg); }.piece.in-check { animation: check 0.9s ease-in-out infinite; }@keyframes check {0%, 100% { box-shadow: 0 0 0 .4cqw #ff3b30, 0 0 2.6cqw #ff3b30, 0 1cqw 1.6cqw rgba(0,0,0,.55); }50% { box-shadow: 0 0 0 .8cqw #ff3b30, 0 0 4.5cqw #ff6a3d, 0 1cqw 1.6cqw rgba(0,0,0,.55); }}.hint { position: absolute; width: 3cqw; height: 3cqw; border-radius: 50%; transform: translate(-50%, -50%);background: radial-gradient(circle, #3fbf86 0 45%, rgba(47,125,91,.4) 50%, transparent 70%); z-index: 3; animation: pop .2s ease-out; }.hint.cap { width: 11.4%; height: auto; aspect-ratio: 1; background: none; border: .6cqw solid rgba(220,40,40,.85); box-shadow: 0 0 1.6cqw rgba(255,60,60,.8); }@keyframes pop { from { transform: translate(-50%, -50%) scale(.2); opacity: 0; } }.mark { position: absolute; width: 11.2%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 1;background:linear-gradient(var(--c), var(--c)) top left / 28% .6cqw no-repeat,linear-gradient(var(--c), var(--c)) top left / .6cqw 28% no-repeat,linear-gradient(var(--c), var(--c)) top right / 28% .6cqw no-repeat,linear-gradient(var(--c), var(--c)) top right / .6cqw 28% no-repeat,linear-gradient(var(--c), var(--c)) bottom left / 28% .6cqw no-repeat,linear-gradient(var(--c), var(--c)) bottom left / .6cqw 28% no-repeat,linear-gradient(var(--c), var(--c)) bottom right / 28% .6cqw no-repeat,linear-gradient(var(--c), var(--c)) bottom right / .6cqw 28% no-repeat;--c: #1f6fd1; }.mark.from { opacity: .65; }.banner {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6);font: 900 italic 9cqw 'Playfair Display', serif; color: #fff2c8; white-space: nowrap;padding: 1.4cqw 5cqw; border-radius: 2cqw; pointer-events: none; opacity: 0; z-index: 10;background: linear-gradient(180deg, rgba(179,18,27,.92), rgba(110,8,12,.92));border: .5cqw solid var(--gold); box-shadow: 0 2cqw 5cqw rgba(0,0,0,.6);text-shadow: 0 .4cqw 0 rgba(0,0,0,.4);}.banner.show { animation: banner 1.4s ease-out forwards; }@keyframes banner {0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }15% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }25% { transform: translate(-50%, -50%) scale(1); }75% { opacity: 1; }100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }}.panel { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; }.card {background: linear-gradient(180deg, rgba(251,241,216,.97), rgba(240,222,182,.97));color: var(--ink); border-radius: 14px; padding: 12px 14px;border: 2px solid var(--gold-dark);box-shadow: 0 0 0 3px rgba(42,4,5,.6), 0 10px 22px rgba(0,0,0,.35);}.card h2 {margin: 0 0 8px; font: 700 15px 'Playfair Display', serif; letter-spacing: .08em; text-transform: uppercase;color: #8a1015; display: flex; align-items: center; gap: 8px;}.card h2::before, .card h2::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #b98d3e, transparent); }.speech-card { background: linear-gradient(180deg, #2a0f08, #1a0805); color: var(--gold-2); border-color: var(--gold); position: relative; }.speech { font-style: italic; font-size: 15px; line-height: 1.5; min-height: 46px; padding-left: 30px; position: relative; }.speech::before { content: '“'; position: absolute; left: 0; top: -10px; font: 900 44px 'Playfair Display', serif; color: var(--gold); }.speech.flash { animation: flash .5s; }@keyframes flash { from { opacity: .2; transform: translateY(4px); } }.evalbar { position: relative; height: 14px; border-radius: 99px; overflow: hidden; background: var(--black-piece); border: 1px solid #6b4a1c; }.evalbar-red { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, #7d0b10, #d7232b); transition: width .6s ease; }.evalbar-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--gold); }.eval-text { margin-top: 8px; font-weight: 700; color: #6b0c10; }.engine-info { font-size: 12px; color: #6b5330; margin-top: 2px; }.moves {list-style: none; margin: 0; padding: 0; max-height: 190px; overflow-y: auto;display: grid; grid-template-columns: 34px 1fr 1fr; font-size: 14px;counter-reset: mv;}.moves li { display: contents; }.moves .no { color: #8a6a3a; padding: 3px 0; }.moves .m { padding: 3px 6px; border-radius: 6px; font-weight: 600; }.moves .m.red { color: #a30f17; }.moves .m.black { color: #1c2326; }.moves .m.last { background: rgba(231,194,106,.45); }.moves:empty::before { content: 'Chưa có nước đi nào.'; grid-column: 1 / -1; color: #8a6a3a; font-style: italic; }.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.btn {font: 700 14px 'Noto Serif', serif; padding: 10px 12px; border-radius: 10px; cursor: pointer;color: var(--gold-2); background: linear-gradient(180deg, #3a0a0b, #250506);border: 1px solid var(--gold-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 0 #160203;transition: transform .1s, filter .15s;}.btn:hover { filter: brightness(1.25); }.btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 #160203; }.btn.primary { color: #3a1a02; background: linear-gradient(180deg, #ffe7a3, #d9a743); border-color: #fff0c2; box-shadow: 0 3px 0 #7a5418; }.btn:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }.site-footer { position: relative; z-index: 1; text-align: center; font-size: 12px; color: #e8cfa0; opacity: .7; padding: 0 16px 20px; }.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(10,0,0,.6); backdrop-filter: blur(3px); padding: 16px; }.modal[hidden] { display: none; }.modal-box {position: relative; max-width: 420px; width: 100%; text-align: center;background: linear-gradient(180deg, #fbf1d8, #ecd6a6); color: var(--ink);border: 3px solid var(--gold-dark); border-radius: 18px; padding: 54px 24px 22px;box-shadow: 0 0 0 6px #4a0709, 0 30px 70px rgba(0,0,0,.7);animation: rise .45s cubic-bezier(.2,.8,.2,1.2);}@keyframes rise { from { transform: translateY(30px) scale(.9); opacity: 0; } }.modal-seal {position: absolute; left: 50%; top: -44px; transform: translateX(-50%) rotate(-6deg);width: 88px; height: 88px; border-radius: 14px; background: #b3121b; border: 3px solid #fff0c2;box-shadow: 0 8px 18px rgba(0,0,0,.5); display: grid; place-items: center;font: 900 46px 'Noto Serif TC', serif; color: #fff3d6;}.modal-seal::after { content: attr(data-ch); }.modal-box h3 { margin: 0 0 8px; font: 900 italic 30px 'Playfair Display', serif; color: #8a1015; }.modal-box p { margin: 0 0 18px; line-height: 1.55; }@media (max-width: 980px) {.layout { grid-template-columns: 1fr; justify-items: center; }.board-frame { --bw: min(calc(100vw - 68px), 600px); }.panel { max-width: 640px; }.controls { grid-template-columns: repeat(4, 1fr); }}@media (max-width: 560px) {.lotus { display: none; }.controls { grid-template-columns: 1fr 1fr; }.board-frame { padding: 6px 8px; width: calc(var(--bw) + 16px); --bw: calc(100vw - 48px); }.seat { padding: 6px 10px; }}