@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
:root{font-family:'Be Vietnam Pro',system-ui,sans-serif;color:#143d50;background:#d5edf8;font-size:13px;color-scheme:light}*{box-sizing:border-box}body{margin:0;min-height:100vh;isolation:isolate}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #b4d5e3;border-radius:12px;padding:11px 14px;background:#f2faff;color:#23536b;font-weight:600;transition:transform .2s,box-shadow .2s}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 16px #17698420}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus,select:focus{outline:2px solid #139ec5;outline-offset:3px}input,select{width:100%;border:1px solid #c2dce7;background:#fbfeff;color:#143d50;border-radius:12px;padding:12px}label{display:block;font-size:11px;color:#527486;margin:12px 0}label input,label select{margin-top:8px}h1,h2,h3,p{margin-top:0}h2{font-size:22px;letter-spacing:-.6px;margin-bottom:12px}h3{font-size:14px}p{color:#507387;line-height:1.8}small{display:block;font-size:10px;line-height:1.9;color:#64808f;margin-top:13px}.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at 80% 10%,#fff9,transparent 50%),linear-gradient(140deg,#71c3eb,#c3eafa 48%,#eff9f8)}.sun{position:absolute;top:100px;right:8%;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fffde1,#ffe69b 65%,#ffc969);box-shadow:0 0 70px 20px #fff2bc80;animation:sun 8s infinite ease-in-out}.cloud{position:absolute;width:250px;height:60px;left:-300px;background:#ffffff8c;border-radius:100px;animation:cloud 90s linear infinite}.cloud:before,.cloud:after{content:'';position:absolute;border-radius:50%;background:inherit;bottom:20px;width:110px;height:100px;left:30px}.cloud:after{left:105px;width:120px;height:120px}.cloud.a{top:20%;animation-delay:-40s}.cloud.b{top:70%;animation-duration:120s;animation-delay:-5s;opacity:.6}header{max-width:1500px;margin:auto;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #fff9;background:#eaf8ff55;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:10px;color:#12506c;text-decoration:none;font-weight:800;font-size:19px;letter-spacing:1px}.brand-mark{display:grid;place-items:center;background:#146b86;color:#fff;width:38px;height:43px;border-radius:11px;font-size:28px;rotate:-7deg}.brand small{font-size:8px;margin:0 0 0 8px;letter-spacing:1.5px}nav{display:flex;gap:8px}nav button{background:#ffffff70;font-size:11px}main{max-width:1400px;margin:auto;padding:32px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:800;color:#33849d}.panel{border:1px solid #fff;border-radius:23px;padding:24px;background:linear-gradient(140deg,#ffffffed,#f3fbffdb);box-shadow:0 15px 40px #2d7a9620;backdrop-filter:blur(18px)}#welcome{display:grid;grid-template-columns:1.2fr 1fr;gap:65px;align-items:center;min-height:78vh}h1{font-size:clamp(38px,4.5vw,65px);line-height:1.15;letter-spacing:-2.8px;margin:23px 0}h1 em{font-style:normal;background:linear-gradient(100deg,#11708c,#229bc3);background-clip:text;color:transparent}.intro>p{max-width:480px;font-size:14px}.game-tiles{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}.game-tile{padding:10px 14px;border-radius:13px;display:flex;align-items:center;gap:9px;background:#ffffff85;border:1px solid #fff}.game-tile.active{background:#fff;border-color:#59a8c3;box-shadow:0 6px 20px #278dbb1a}.game-tile .icon{font-size:22px}.game-tile strong{font-size:10px}.hero-fan{display:flex;justify-content:center;max-width:440px;margin:35px 0 25px;height:185px}.hero-card{position:relative;width:118px;height:172px;background:linear-gradient(140deg,#fff,#f5fafb);border:1px solid #fff;border-radius:16px;box-shadow:0 15px 30px #276c8833,inset 0 0 0 6px #dfedf55c;font-weight:800;font-size:27px;color:#16465b;padding:16px;animation:float 5s ease-in-out infinite}.hero-card span{display:block;text-align:center;font-size:67px;line-height:1.4}.hero-card:first-child{rotate:-16deg;translate:15px 12px;animation-delay:-1s}.hero-card:last-child{rotate:16deg;translate:-15px 12px;animation-delay:-3s}.red{color:#c54359!important}.intro-note{font-size:10px;color:#3f7187}.entrance h2{margin-top:12px}.avatars{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:18px 0}.avatar-option{padding:9px 0;font-size:25px;background:#e9f5fb}.avatar-option[aria-pressed=true]{background:#c9ecf9;border-color:#279ac0;box-shadow:0 0 0 3px #189bcc18}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.primary{background:linear-gradient(120deg,#086e87,#159fc2);color:#fff;border:0;box-shadow:0 6px 20px #0c809d30}.wide{width:100%;display:flex;align-items:center;justify-content:space-between;margin-top:13px}.divider{font-size:10px;color:#8298a4;text-align:center;margin:23px 0}.join-row{display:flex;gap:9px}.join-row input{min-width:0}.join-row button{white-space:nowrap}.room-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.room-bar h2{font-size:25px;margin:8px 0 0;letter-spacing:2px}.room-buttons{display:flex;align-items:center;gap:10px}.room-buttons span{font-size:11px;color:#547686}.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px}.play-column,aside{min-width:0}aside .panel{margin-bottom:18px}.lobby{margin-bottom:20px}.lobby p{font-size:11px}.buttons{display:flex;align-items:center;flex-wrap:wrap;gap:9px}.players{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:18px}.player{position:relative;border:1px solid #ffffffb5;border-radius:17px;padding:12px 7px;text-align:center;background:#f4fcffe0;box-shadow:0 6px 20px #26759910}.player.turn{border-color:#168dba;box-shadow:0 0 0 2px #168dba25}.player.self{background:#e4f5fc}.player.folded{opacity:.55}.player .avatar{font-size:28px;margin:0 auto 6px}.player strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player .status{font-size:9px;color:#4d7d92;margin-top:6px}.player .chip{font-size:9px;color:#987132;margin-top:6px}.player .kick{position:absolute;top:4px;right:4px;border:0;font-size:8px;padding:3px 5px;background:transparent;color:#688b9a}.back-stack{height:25px;margin-top:9px;position:relative}.mini-back{display:inline-block;width:16px;height:24px;background:repeating-linear-gradient(45deg,#1e86a0 0 3px,#21758f 3px 6px);border:2px solid #fff;border-radius:3px;margin-left:-7px;box-shadow:0 2px 3px #0002}.table{background:radial-gradient(ellipse at 50% 25%,#1c8e9c,#0a6775 60%,#075469);color:#f7fcff;border-radius:30px;padding:20px 25px;margin-bottom:20px;min-height:280px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 7px #ffffff12,0 15px 35px #145c7933}.table:before{content:'';position:absolute;inset:40px;border:1px solid #9cdae128;border-radius:50%;pointer-events:none}.table-top,.table-bottom{display:flex;justify-content:space-between;align-items:center;font-size:10px;position:relative;z-index:1}.table-badge{background:#ffffff16;padding:7px 11px;border:1px solid #ffffff25;border-radius:20px}#timer{font-size:18px;font-weight:800;color:#ffebae}.table-center{position:relative;text-align:center;min-height:185px;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:10px}.table-center h2{font-size:19px;margin:0}.table-center p{font-size:10px;color:#c2e6ed;margin:0;max-width:480px}.light{color:#b4e1e8}.table-cards{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.table-cards:empty{display:none}.table-bottom{color:#b0dbe2}#turn-label{color:#fff}.hand-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.hand-head h2{font-size:18px;margin-top:8px}.turn-help{font-size:11px;background:#e5f3fb;border-left:3px solid #3fa6c3;padding:10px 13px;border-radius:0 10px 10px 0}.hand{display:flex;gap:7px;overflow-x:auto;padding:19px 4px 16px;min-height:139px}.card{position:relative;flex-shrink:0;width:62px;height:94px;padding:7px;border:1px solid #d5e4eb;border-radius:9px;background:linear-gradient(145deg,#fff,#f3f9fc);color:#184355;box-shadow:0 4px 9px #244d6d20;font-weight:800;text-align:left;transition:transform .18s,border-color .18s}.card:hover:not(:disabled){transform:translateY(-6px)}.card.selected{transform:translateY(-12px);border-color:#108fb8;box-shadow:0 0 0 2px #108fb833,0 7px 15px #17739a22}.card .corner{display:block;font-size:16px;line-height:1}.card .suit-small{display:block;font-size:11px}.card .center{position:absolute;top:39%;left:50%;translate:-50% 0;font-size:29px}.card .pack{position:absolute;bottom:5px;right:6px;font-size:9px;color:#79929f;font-weight:400}.card.eaten:after{content:'ĂN';position:absolute;bottom:6px;left:5px;font-size:6px;background:#ffd97f;color:#744a18;border-radius:3px;padding:2px}.card.locked{opacity:.35}.table .card{width:57px;height:85px;animation:deal .3s ease-out}.table .card .center{font-size:25px}.selection{font-size:11px;min-height:19px;color:#257d9e}.action-emphasis{background:#147f9b;color:#fff;border:0}.bet-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid #c5e1ee;margin-top:18px;padding-top:10px}.bet-controls label{max-width:180px;margin:0}.bet-controls small{width:100%;margin:0}.coach .eyebrow{font-size:8px}.coach h3{font-size:17px;margin:12px 0}.coach p{font-size:11px}.coach button{font-size:10px;width:100%}.multi-note{border-top:1px solid #c6e3ed;margin-top:17px;padding-top:13px;font-size:10px;color:#5a7a8d;line-height:1.8}.messages{height:180px;overflow:auto}.message{padding:10px;margin:9px 0;border-radius:10px;background:#e7f3fb}.message strong{font-size:10px;color:#16728e}.message p{font-size:11px;overflow-wrap:anywhere;margin:5px 0 0}.chat form{display:flex;gap:6px;margin-top:13px}.chat input{min-width:0;font-size:10px}.chat button{padding:9px}#events{max-height:230px;overflow:auto}#events p{font-size:10px;border-bottom:1px solid #cde1ec;padding-bottom:8px;margin:9px 0}.meld-owner{margin-bottom:17px}.meld-owner h4{font-size:11px;margin:0 0 8px}.meld-groups{display:flex;flex-wrap:wrap;gap:10px}.meld-group{padding:9px;border:1px solid #c3dce8;background:#eaf5fc;border-radius:12px}.meld-group .table-cards{gap:3px}.meld-group .card{width:43px;height:65px;font-size:12px}.meld-group .card .center{font-size:21px}.meld-group .card .corner{font-size:12px}.meld-group .card .pack{font-size:7px}.meld-group button{font-size:9px;padding:6px;margin-top:8px}.discards{font-size:10px;margin-top:7px;line-height:1.8}.discards span{margin:0 3px;font-weight:700}.draft-group{display:flex;gap:5px;align-items:center;margin:10px 0}.draft-group button{font-size:9px;margin-left:auto}.result{text-align:center;margin-top:20px;background:radial-gradient(ellipse at top,#fff6cd,#f5fcff)}.result h2{font-size:25px;margin:12px 0 20px}.result-row{padding:13px 0;display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;text-align:left;border-top:1px solid #d4e5ea}.result-row strong{font-size:12px}.result-row small{margin:5px 0 0}.result-row .result-hand{grid-column:2/4;display:flex;flex-wrap:wrap;gap:4px;font-size:10px}.result button{margin-top:22px}#pot-list{font-size:10px;color:#526d7b;margin-top:18px}.result-row.winner{color:#a57610}.source-note{font-size:9px;color:#74929f}.source-note a{color:#267d9c}dialog{max-width:94vw;max-height:88vh;width:800px;background:linear-gradient(140deg,#fbfeff,#e9f7ff);border:1px solid #fff;border-radius:25px;color:#143d50;padding:28px;box-shadow:0 25px 90px #0f526744}dialog::backdrop{background:#164b6b75;backdrop-filter:blur(7px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{margin:10px 0}.guide-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}.guide-tabs button.active{background:#137c98;color:#fff;border-color:#137c98}.guide-item{padding:15px 18px;border:1px solid #d5e8f1;border-radius:15px;margin:11px 0;background:#ffffffa6}.guide-item h3{font-size:13px;margin-bottom:7px}.guide-item p{font-size:11px;margin:0}#profile-dialog{width:410px}#toast{position:fixed;bottom:24px;left:50%;translate:-50% 0;background:#123f54;color:#fff;border:1px solid #ffffff35;padding:14px 22px;border-radius:12px;z-index:70;max-width:92vw;box-shadow:0 10px 30px #12476644;font-size:12px}#celebrate{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:60}.confetti{position:absolute;width:7px;height:12px;top:-15px;animation:confetti 2.5s ease-in forwards}.turn-pulse{animation:turn 1s ease-out}.result{animation:deal .5s ease-out}footer{text-align:center;padding:25px;color:#51829a;font-size:9px}[hidden]{display:none!important}
@keyframes cloud{to{left:calc(100% + 100px)}}@keyframes sun{50%{scale:1.06;box-shadow:0 0 90px 25px #fff2bc90}}@keyframes float{50%{transform:translateY(-9px)}}@keyframes deal{from{opacity:0;transform:translateY(-12px) scale(.94)}to{opacity:1;transform:none}}@keyframes turn{50%{box-shadow:0 0 0 6px #159ec529}}@keyframes confetti{to{transform:translateY(110vh) rotate(600deg);opacity:0}}
@media(max-width:1100px){.brand small{display:none}#welcome{gap:30px}.layout{grid-template-columns:minmax(0,1fr) 245px}.panel{padding:20px}.hand{gap:5px}.card{width:57px;height:88px}.room-buttons{flex-wrap:wrap;justify-content:flex-end}}
@media(max-width:820px){#welcome{grid-template-columns:1fr;gap:25px}.intro{padding-top:10px}.intro>p{max-width:600px}.hero-fan{margin:24px auto;height:170px}.hero-card{height:158px}.intro-note{text-align:center}.layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:15px}.log{grid-column:1/3}.entrance{max-width:600px;width:100%;margin:auto}.players{grid-template-columns:repeat(5,1fr)}h1{font-size:49px}}
@media(max-width:500px){header{padding:15px 14px}.brand{font-size:14px;gap:6px}.brand-mark{width:29px;height:34px;font-size:22px}nav{gap:4px}nav button{font-size:9px;padding:8px}main{padding:23px 14px}h1{font-size:39px;letter-spacing:-1.9px}.game-tiles{gap:6px}.game-tile{padding:9px;gap:5px}.game-tile strong{font-size:9px}.game-tile .icon{font-size:19px}.hero-fan{height:154px}.hero-card{width:100px;height:148px;font-size:23px}.hero-card span{font-size:56px}.intro-note{font-size:8px}.panel{padding:17px;border-radius:19px}.room-bar{align-items:flex-start;gap:7px}.room-bar h2{font-size:19px}.room-buttons{gap:5px;max-width:165px}.room-buttons span{width:100%;text-align:right;font-size:9px}.room-buttons button{font-size:9px;padding:8px}.players{grid-template-columns:repeat(3,1fr);gap:7px}.player{padding:10px 4px}.table{padding:17px;min-height:240px;border-radius:23px}.table-center{min-height:155px}.table-center h2{font-size:16px}.table-bottom{font-size:8px}.table .card{width:47px;height:72px}.hand{gap:5px;padding-top:19px}.card{width:56px;height:86px}.hand-head h2{font-size:15px}.hand-head button{font-size:9px;padding:8px}.buttons button{font-size:10px;padding:10px 12px}.turn-help{font-size:10px}.table-cards{gap:4px}aside{display:block}dialog{padding:19px}.guide-tabs button{font-size:10px;padding:9px}.form-row{gap:10px}.sun{width:75px;height:75px;top:85px}.cloud{scale:.7}.result-row{gap:8px}.result h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.cloud.a{left:5%}.cloud.b{left:75%}}

/* Three tables, three atmospheres. */
body[data-game=tienlen] .table{border-radius:100px;border:8px solid #b3e1e8;padding:19px 32px;box-shadow:inset 0 0 0 2px #81c4cf40,0 18px 36px #166d9133}
body[data-game=tienlen] .table:before{inset:20px;border-radius:90px;border-color:#bceaf224}
body[data-game=phom]{color:#543b27;background:#eee4cf}
body[data-game=phom] .sky{background:radial-gradient(ellipse at 20% 5%,#fffdf3,transparent 65%),repeating-linear-gradient(45deg,#b8a27a0a 0 1px,transparent 1px 12px),linear-gradient(140deg,#efdfb9,#f7f0e0 65%,#e4ceb0)}
body[data-game=phom] .sun,body[data-game=phom] .cloud{display:none}
body[data-game=phom] .sky:before{content:'✺';position:absolute;right:-35px;top:80px;font-size:450px;color:#b38d4820;line-height:1;animation:lotus 90s linear infinite}
body[data-game=phom] header{background:#fdf7e98c;border-color:#b9a07830}
body[data-game=phom] .brand{color:#644924}body[data-game=phom] .brand-mark{background:#95652c}
body[data-game=phom] h1 em{background-image:linear-gradient(100deg,#8c5628,#b88c38)}
body[data-game=phom] .eyebrow{color:#9c733f}body[data-game=phom] p,body[data-game=phom] label,body[data-game=phom] small,body[data-game=phom] .status,body[data-game=phom] footer{color:#826749}
body[data-game=phom] .panel{background:linear-gradient(140deg,#fffaf0ee,#f5eddded);border:1px solid #d6bc8d99;border-radius:13px;box-shadow:0 12px 30px #6c4e2514}
body[data-game=phom] button{color:#6f4a29;background:#fff8e9;border-color:#d9c7a7;border-radius:8px}body[data-game=phom] input,body[data-game=phom] select{background:#fffaf2;color:#543b27;border-color:#dbcaaa;border-radius:8px}
body[data-game=phom] .primary,body[data-game=phom] .action-emphasis{background:linear-gradient(120deg,#986632,#bf8b43);color:#fff;box-shadow:0 6px 20px #98663224}
body[data-game=phom] .avatar-option[aria-pressed=true]{background:#ead6af;border-color:#ac7c3e;box-shadow:0 0 0 3px #ac7c3e1c}
body[data-game=phom] .layout{grid-template-columns:250px minmax(0,1fr)}body[data-game=phom] .play-column{order:2}body[data-game=phom] aside{order:1}
body[data-game=phom] .players{gap:0;border-radius:12px;overflow:hidden;border:1px solid #c5a67266;background:#fbf4e5}
body[data-game=phom] .player{border-radius:0;background:#fcf7ec;border:0;border-right:1px solid #d2bf9944;box-shadow:none;padding:16px 7px}
body[data-game=phom] .player.self{background:#f1e5cc}body[data-game=phom] .player.turn{box-shadow:inset 0 -3px #b4823b;background:#f4e7c8}
body[data-game=phom] .table{border-radius:16px;background:repeating-linear-gradient(0deg,#ffffff03 0 2px,transparent 2px 10px),linear-gradient(120deg,#986a42,#b58a5b 45%,#8b5d39);border:9px solid #795033;box-shadow:inset 0 0 0 2px #d8b281,0 12px 25px #64402430}
body[data-game=phom] .table:before{border-radius:5px;inset:15px;border:1px solid #f3dbb43b}body[data-game=phom] .table p,body[data-game=phom] .table-bottom{color:#f6dfbd}body[data-game=phom] .light{color:#ffe7b8}
body[data-game=phom] .turn-help,body[data-game=phom] .message{background:#f1e5ce;color:#795d3e;border-color:#bf9452}
body[data-game=phom] .message strong{color:#875d2b}body[data-game=phom] .multi-note{border-color:#dac5a2;color:#826749}body[data-game=phom] .meld-group{background:#eee1c7;border-color:#d3b989}body[data-game=phom] .card{background:linear-gradient(140deg,#fffdf6,#fcf4e2);border-color:#d7c5a6;color:#453a29;border-radius:6px}body[data-game=phom] .card.selected{border-color:#bd8836;box-shadow:0 0 0 2px #bd883633}body[data-game=phom] .mini-back{background:repeating-linear-gradient(45deg,#a27137 0 3px,#b88a4c 3px 6px)}body[data-game=phom] .selection{color:#9a6a2c}
body[data-game=phom] .result{background:radial-gradient(ellipse at top,#fff1c1,#fff9ec)}
body[data-game=lieng]{color:#f2eaf6;background:#181124;color-scheme:dark}
body[data-game=lieng] .sky{background:radial-gradient(ellipse at 50% 20%,#65356477,transparent 55%),radial-gradient(ellipse at 90% 90%,#c0984718,transparent 60%),#171020}
body[data-game=lieng] .sun,body[data-game=lieng] .cloud{display:none}body[data-game=lieng] .sky:before,body[data-game=lieng] .sky:after{content:'';position:absolute;top:-20%;height:120%;width:250px;background:linear-gradient(#ffe4ac16,transparent 80%);filter:blur(30px);transform:rotate(20deg);left:12%;animation:spotlight 14s ease-in-out infinite alternate}body[data-game=lieng] .sky:after{left:auto;right:12%;transform:rotate(-20deg);animation-delay:-7s}
body[data-game=lieng] header{background:#21162eaa;border-color:#e4bb7130}body[data-game=lieng] .brand{color:#f0d49e}body[data-game=lieng] .brand-mark{background:linear-gradient(145deg,#ddb977,#a77b38);color:#291b25}body[data-game=lieng] h1 em{background-image:linear-gradient(100deg,#f9e2aa,#cca566)}body[data-game=lieng] .eyebrow{color:#d4b17a}
body[data-game=lieng] p,body[data-game=lieng] label,body[data-game=lieng] small,body[data-game=lieng] .intro-note,body[data-game=lieng] .room-buttons span,body[data-game=lieng] footer{color:#b9a7c4}
body[data-game=lieng] .panel{background:linear-gradient(145deg,#32233eee,#21182cee);border-color:#e0bc7440;box-shadow:0 16px 45px #08040c55}
body[data-game=lieng] button{color:#eddbba;background:#3a2a46;border-color:#b8966550}body[data-game=lieng] input,body[data-game=lieng] select{background:#1c1527;color:#f2eaf6;border-color:#7e628645}
body[data-game=lieng] .primary,body[data-game=lieng] .action-emphasis{background:linear-gradient(120deg,#efd198,#bb8c4e);color:#30202b;box-shadow:0 6px 22px #d4b17a20}
body[data-game=lieng] .avatar-option{background:#241b32}body[data-game=lieng] .avatar-option[aria-pressed=true]{background:#4d394a;border-color:#d4b17a;box-shadow:0 0 0 3px #d4b17a15}body[data-game=lieng] .game-tile{background:#312139aa;border-color:#d4b17a40}body[data-game=lieng] .game-tile.active{background:#53334e;border-color:#d4b17a}body[data-game=lieng] .hero-card{border-color:#ddb977;color:#453452;background:linear-gradient(140deg,#fffaf0,#ecdfcb);box-shadow:0 15px 30px #05020b66,inset 0 0 0 5px #d4b17a25}
body[data-game=lieng] .players{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}body[data-game=lieng] .player{flex:1 0 110px;max-width:155px;border-radius:35px 35px 15px 15px;background:linear-gradient(140deg,#3e2c48,#281b34);border-color:#d4b17a30;padding:13px 8px}body[data-game=lieng] .player.self{background:#483341}body[data-game=lieng] .player.turn{border-color:#e2bf7d;box-shadow:0 0 22px #e2bf7d22}body[data-game=lieng] .player .status{color:#c8b4d1}body[data-game=lieng] .player .chip{color:#e8c486}
body[data-game=lieng] .table{border-radius:130px;border:8px solid #a47a45;background:radial-gradient(ellipse at center,#654262,#392442 70%,#271a33);box-shadow:inset 0 0 0 3px #ebc58b30,0 20px 45px #0005;min-height:300px;padding:23px 35px}body[data-game=lieng] .table:before{inset:24px;border-radius:110px;border-color:#d4b17a30}body[data-game=lieng] .table-center{min-height:205px}body[data-game=lieng] .table-center h2{font-size:38px;letter-spacing:2px;color:#f1d49f;text-shadow:0 0 30px #eac78725}body[data-game=lieng] .table-center .eyebrow{color:#e6c695}body[data-game=lieng] .table-center p{color:#cdb8d7}
body[data-game=lieng] .hand{justify-content:center;gap:20px;min-height:180px}body[data-game=lieng] .hand .card{width:90px;height:137px;border-radius:12px;color:#332d44;background:linear-gradient(145deg,#fffbf3,#f2e6d5);border-color:#d8b880;box-shadow:0 10px 25px #0c061f55}body[data-game=lieng] .hand .card .corner{font-size:23px}body[data-game=lieng] .hand .card .center{font-size:46px}body[data-game=lieng] .hand .card .suit-small{font-size:16px}body[data-game=lieng] .card.selected{border-color:#ffe0a1;box-shadow:0 0 0 2px #d4b17a66}body[data-game=lieng] .mini-back{background:repeating-linear-gradient(45deg,#a88348 0 3px,#ceb174 3px 6px);border-color:#ebd4a9}body[data-game=lieng] .turn-help,body[data-game=lieng] .message{background:#261b33;border-color:#d4b17a;color:#bcabc6}body[data-game=lieng] .message strong,body[data-game=lieng] .selection{color:#e4c187}body[data-game=lieng] #events p,body[data-game=lieng] .bet-controls,body[data-game=lieng] .multi-note{border-color:#a78b612b}body[data-game=lieng] .multi-note{color:#b9a7c4}body[data-game=lieng] .result{background:radial-gradient(ellipse at top,#67503577,#271a33)}body[data-game=lieng] .result-row{border-color:#d4b17a30}body[data-game=lieng] #pot-list{color:#c6adcf}
@keyframes lotus{to{transform:rotate(360deg)}}@keyframes spotlight{to{transform:rotate(-10deg);opacity:.5}}
body[data-game=phom] .game-tile{background:#fff8e9;border-color:#dcc59a}body[data-game=phom] .game-tile.active{background:#ebd7b2;border-color:#b9873f}body[data-game=lieng] dialog{background:linear-gradient(140deg,#35243f,#21172b);color:#f2eaf6;border-color:#d4b17a60}body[data-game=lieng] .guide-item{background:#291e34;border-color:#d4b17a30}body[data-game=lieng] .guide-tabs button.active{background:#d4b17a;color:#291c2e}body[data-game=lieng] .source-note a{color:#dfc18b}
@media(max-width:820px){body[data-game=phom] .layout{grid-template-columns:1fr}body[data-game=phom] .play-column{order:1}body[data-game=phom] aside{order:2}}
@media(max-width:500px){body[data-game=tienlen] .table{border-radius:35px;padding:15px;border-width:5px}body[data-game=lieng] .table{border-radius:55px;border-width:5px;padding:18px;min-height:265px}body[data-game=lieng] .table-center{min-height:165px}body[data-game=lieng] .table-center h2{font-size:30px}body[data-game=lieng] .player{flex-basis:90px;max-width:120px}body[data-game=lieng] .hand{gap:14px}body[data-game=lieng] .hand .card{width:78px;height:120px}}

/* Vietnamese woven reed and original Đông Hồ inspired illustration. */
.hero-fan{background:linear-gradient(#fff1,#fff1),url('chieu-viet.png') center/cover;border:4px solid #fff9;border-radius:20px;padding:15px 30px;height:210px;max-width:480px;box-shadow:0 14px 30px #3d694226}
.hero-card{width:102px;height:153px;margin-top:2px}.hero-card span{font-size:58px}
.mini-back,body[data-game=phom] .mini-back,body[data-game=lieng] .mini-back{background:#a66f34 url('chieu-viet.png') left center/auto 100%;border-color:#f6e6be}
body[data-game=tienlen] .table{background-image:linear-gradient(90deg,#074f57b8,#096476a6 26%,#096476a6 74%,#074f57b8),url('chieu-viet.png');background-position:center;background-size:cover;border-color:#478f93}
body[data-game=phom] .table{background-image:linear-gradient(#fff1,#fff1),url('chieu-viet.png');background-position:center;background-size:cover;color:#503315;border-color:#875832}
body[data-game=phom] .table .eyebrow,body[data-game=phom] .table p,body[data-game=phom] .table-bottom,body[data-game=phom] #turn-label{color:#573718;text-shadow:0 1px #fff9}
body[data-game=phom] .table-badge{background:#fff3cfce;border-color:#aa733c55;color:#5b3819}body[data-game=phom] #timer{color:#5e391b;background:#fff3cfb0;border-radius:10px;padding:4px 9px}body[data-game=phom] .table-center h2,body[data-game=phom] .table-center p{background:#fff4d9b8;padding:5px 12px;border-radius:8px}
body[data-game=lieng] .table{background-image:linear-gradient(90deg,#25142bcc,#35203bb5 25%,#35203bb5 75%,#25142bcc),url('chieu-viet.png');background-position:center;background-size:cover}
body[data-game=phom] .hero-fan{border-color:#a67946}body[data-game=lieng] .hero-fan{border-color:#a47a45;background-image:linear-gradient(#24132760,#24132760),url('chieu-viet.png')}
.heritage-caption{font-size:9px;letter-spacing:.5px;text-align:center;color:#51784b;margin:-8px 0 19px;line-height:1.8}body[data-game=phom] .heritage-caption{color:#88612f}body[data-game=lieng] .heritage-caption{color:#d1b488}
@media(max-width:500px){.hero-fan{height:188px;padding:12px 26px}.hero-card{width:87px;height:136px}.hero-card span{font-size:50px}.heritage-caption{font-size:8px}.table-center p{max-width:85%}}

/* The reference mat keeps its natural straw and vermilion in every game. */
body[data-game=tienlen] .table,body[data-game=phom] .table,body[data-game=lieng] .table{background:#eed59b url('chieu-viet.png') center/100% 100%;color:#4f2e1c}
.table .eyebrow,.table .table-center p,.table .table-bottom,body[data-game=phom] .table .eyebrow,body[data-game=phom] .table p,body[data-game=phom] .table-bottom,body[data-game=lieng] .table .eyebrow,body[data-game=lieng] .table-center p{color:#5a3320;text-shadow:0 1px #fff8}
#turn-label,body[data-game=phom] #turn-label{color:#552c1e;text-shadow:0 1px #fff8}.table-badge{background:#fff3d5d9;color:#743b28;border-color:#b7684545}#timer,body[data-game=phom] #timer{color:#753b23;background:#fff4dac9;border-radius:10px;padding:4px 9px}
.table-center h2,.table-center p,body[data-game=lieng] .table-center h2{color:#602c20;background:#fff4deb8;padding:5px 12px;border-radius:8px;text-shadow:none}
body[data-game=tienlen] .table{border-color:#379393;border-radius:28px}body[data-game=lieng] .table{border-radius:30px;border-color:#b18a4d}
.tradition-scene{display:flex;align-items:center;position:relative;height:122px;border:1px solid #fff;border-radius:20px;background:linear-gradient(100deg,#f5fcf9ee,#d9eee3b8);overflow:hidden;margin:0 0 21px;box-shadow:0 8px 25px #44785f16}
.tradition-copy{position:relative;z-index:1;flex:0 0 275px;padding:20px 25px;pointer-events:none}.tradition-copy h3{font-size:16px;margin:9px 0 5px}.tradition-copy p{font-size:10px;line-height:1.6;margin:0}
.folk-stage{position:relative;flex:1;height:100%;min-width:0;overflow:hidden;pointer-events:none}.folk-mover{position:absolute;width:145px;height:122px;left:5%;bottom:0;animation:rooster-walk 18s ease-in-out infinite alternate}.folk-mover img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 95%;animation:rooster-step 1.4s ease-in-out infinite;filter:drop-shadow(0 5px 5px #77552425)}
.reed-line{position:absolute;left:0;right:0;bottom:8px;height:10px;background:repeating-linear-gradient(115deg,transparent 0 18px,#708d4f33 19px 20px,transparent 21px 30px);border-bottom:1px solid #65884a35}
.folk-note{position:absolute;top:17%;right:18%;font-size:15px;color:#a15f29;opacity:0;animation:folk-music 3s ease-out infinite}.note-two{animation-delay:1.4s;right:8%;top:30%}
body[data-game=tienlen] .folk-note{display:none}
body[data-game=phom] .tradition-scene{background:linear-gradient(100deg,#fcf5e7,#eee0bb);border-color:#d3b984;border-radius:13px}body[data-game=phom] .folk-mover{width:190px;animation:buffalo-walk 24s ease-in-out infinite alternate}body[data-game=phom] .folk-mover img{animation:buffalo-bob 2.2s ease-in-out infinite}
body[data-game=lieng] .tradition-scene{background:linear-gradient(100deg,#38273b,#3b384c);border-color:#ba98534a}body[data-game=lieng] .tradition-copy p{color:#bfaaca}body[data-game=lieng] .folk-mover{width:210px;bottom:2px;animation:boat-drift 26s ease-in-out infinite alternate}body[data-game=lieng] .folk-mover img{animation:boat-rock 3.8s ease-in-out infinite}body[data-game=lieng] .folk-note{color:#e5c98f}body[data-game=lieng] .reed-line{display:none}
.river-lines{display:none;position:absolute;left:-100%;right:-100%;bottom:0;height:40px;background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 12px,#ccdaec25 13px 14px,transparent 15px 30px);background-size:100px 45px;animation:river-flow 10s linear infinite}body[data-game=lieng] .river-lines{display:block}
.welcome-folk{height:92px;position:relative;max-width:440px;margin:-12px auto 13px;pointer-events:none}.welcome-folk img{display:block;width:125px;height:100px;object-fit:contain;margin:auto;animation:rooster-step 1.4s ease-in-out infinite;transform-origin:50% 90%}body[data-game=phom] .welcome-folk img{width:165px;animation:buffalo-bob 2.2s ease-in-out infinite}body[data-game=lieng] .welcome-folk img{width:185px;animation:boat-rock 3.8s ease-in-out infinite}
@keyframes rooster-walk{0%,15%{left:5%}80%,100%{left:calc(100% - 165px)}}@keyframes rooster-step{0%,100%{transform:rotate(-2deg) translateY(0)}35%{transform:rotate(3deg) translateY(-4px)}60%{transform:rotate(-4deg) translateY(1px)}}
@keyframes buffalo-walk{0%,10%{left:2%}90%,100%{left:calc(100% - 200px)}}@keyframes buffalo-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes boat-drift{from{left:3%}to{left:calc(100% - 215px)}}@keyframes boat-rock{0%,100%{transform:translateY(1px) rotate(-1.5deg)}50%{transform:translateY(-3px) rotate(1.5deg)}}@keyframes river-flow{to{transform:translateX(100px)}}@keyframes folk-music{0%{opacity:0;transform:translateY(0)}25%{opacity:.8}100%{opacity:0;transform:translateY(-32px) translateX(16px)}}
@media(max-width:700px){.tradition-copy{flex-basis:225px;padding:17px}.tradition-copy h3{font-size:14px}.tradition-copy p{font-size:9px}.folk-mover{width:110px}body[data-game=phom] .folk-mover{width:145px}body[data-game=lieng] .folk-mover{width:165px}}
@media(max-width:500px){.tradition-scene{height:105px;border-radius:15px}.tradition-copy{flex-basis:48%;padding:13px}.tradition-copy .eyebrow{font-size:7px;letter-spacing:1px}.tradition-copy h3{font-size:12px;line-height:1.5}.tradition-copy p{font-size:8px}.folk-mover{width:90px;height:100px;animation-duration:12s}body[data-game=phom] .folk-mover{width:120px;animation-duration:15s}body[data-game=lieng] .folk-mover{width:140px;animation-duration:18s}.table-center h2,body[data-game=lieng] .table-center h2{font-size:23px}.welcome-folk{height:85px}}
@media(prefers-reduced-motion:reduce){.folk-mover,body[data-game=phom] .folk-mover,body[data-game=lieng] .folk-mover{animation:none;left:20%}.folk-mover img,.welcome-folk img,.river-lines,.folk-note{animation:none!important}.folk-note{display:none}}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){.folk-mover,body[data-game=phom] .folk-mover,body[data-game=lieng] .folk-mover{animation-name:folk-mobile}}
@keyframes folk-mobile{from{left:2%}to{left:10%}}


/* Keep the entire illustration inside even narrow game columns. */
.folk-stage{container-type:inline-size}
.folk-mover,body[data-game=phom] .folk-mover,body[data-game=lieng] .folk-mover{left:0;max-width:100%;animation-name:folk-contained}
@keyframes folk-contained{from{transform:translateX(0)}to{transform:translateX(max(0px,calc(100cqw - 100%)))}}
@media(prefers-reduced-motion:reduce){.folk-mover,body[data-game=phom] .folk-mover,body[data-game=lieng] .folk-mover{left:0;animation:none}}

/* A shared floor scene, with distinct lighting for each game. */
#game .layout,body[data-game=phom] #game .layout,body[data-game=lieng] #game .layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px}
#game .play-column{min-width:0;grid-column:1;grid-row:1}#game aside{grid-column:2;grid-row:1}
.mat-arena{position:relative;height:530px;isolation:isolate;perspective:1100px;margin:15px 0 0;border-radius:34px;background:radial-gradient(ellipse at center,#d7b57d30,transparent 68%),repeating-linear-gradient(90deg,#b3814d18 0 2px,transparent 2px 85px);overflow:visible}
.floor-glow{position:absolute;inset:10% 6%;border-radius:50%;background:#b99b6830;filter:blur(30px)}
#game .mat-arena .table,body[data-game=phom] #game .mat-arena .table,body[data-game=lieng] #game .mat-arena .table{position:absolute;left:13%;top:20%;width:74%;height:61%;min-height:0;margin:0;padding:25px 30px;border:7px solid #b64735;border-radius:16px;background:#eed59b url('chieu-viet.png') center/100% 100%;transform:rotateX(28deg);transform-style:preserve-3d;box-shadow:0 8px 0 #8f532c,0 12px 0 #653e27,0 32px 40px #331e2145,inset 0 0 30px #92562c33;z-index:1;overflow:visible}
#game .mat-arena .table:before{inset:10px;border:1px solid #fff5;border-radius:3px}
#game .mat-arena .table-center{min-height:0;height:calc(100% - 52px);gap:7px}
#game .mat-arena .table-center h2,body[data-game=lieng] #game .mat-arena .table-center h2{font-size:22px}
#game .mat-arena .table-top,#game .mat-arena .table-bottom{font-size:9px}
#game .mat-arena .players,body[data-game=phom] #game .mat-arena .players,body[data-game=lieng] #game .mat-arena .players{position:absolute;inset:0;display:block;margin:0;z-index:3;pointer-events:none}
#game .mat-arena .player,body[data-game=phom] #game .mat-arena .player,body[data-game=lieng] #game .mat-arena .player{position:absolute;left:var(--seat-x);top:var(--seat-y);transform:translate(-50%,-50%);width:102px;min-width:0;padding:8px 5px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;border-radius:18px;background:#fff9e9e8;box-shadow:0 8px 15px #4e2e2825;pointer-events:auto;color:#533625;transition:box-shadow .25s;min-height:0}
#game .mat-arena .player:before{content:'';position:absolute;z-index:-1;width:84px;height:38px;border-radius:50%;background:radial-gradient(ellipse,#af724599,#5a423818 70%,transparent);bottom:-12px}
#game .mat-arena .player .avatar{width:44px;height:44px;font-size:28px;display:grid;place-items:center;margin:0;border-radius:50%;background:linear-gradient(145deg,#fff4cf,#d9b884);border:2px solid #fff4d5;box-shadow:0 4px 0 #a87b48,0 9px 12px #603b3b35;transform:perspective(200px) rotateX(-8deg)}
#game .mat-arena .player strong{font-size:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#game .mat-arena .player .status{font-size:8px;margin:0}#game .mat-arena .player .chip{font-size:9px;margin:0}
#game .mat-arena .player .discards{font-size:8px;line-height:1.3;margin:0;max-width:90px}
#game .mat-arena .player.turn{box-shadow:0 0 0 3px #f2cb65,0 0 25px #ffda7199;background:#fff7d9}
#game .mat-arena .player.self{border:2px solid #2f9a9b}#game .mat-arena .player.folded{opacity:.55}
#game .mat-arena .back-stack{height:20px;margin:3px 0 0;transform:rotateX(15deg)}#game .mat-arena .mini-back{height:22px;width:15px}
#hand-panel,body[data-game=phom] #hand-panel,body[data-game=lieng] #hand-panel{position:relative;z-index:4;margin-top:-4px;background:linear-gradient(155deg,#fff9ecef,#f0e1c7f5);border:1px solid #fff5dc;border-radius:24px;box-shadow:0 14px 28px #482e2528;color:#513e2d}
#hand-panel .hand{justify-content:center;perspective:850px;min-height:160px;padding:25px 12px 20px;gap:0}
#hand-panel .card,body[data-game=lieng] #hand-panel .card{width:70px;height:108px;margin-left:-18px;background:linear-gradient(130deg,#fff,#fff9ed 75%,#dfcbb1);border:1px solid #dacbb9;box-shadow:2px 3px 0 #c5b69f,4px 6px 0 #8b7e6a,0 12px 15px #30262035;transform:rotateX(10deg) rotateZ(-3deg);transition:transform .2s,box-shadow .2s}
#hand-panel .card:first-child{margin-left:0}#hand-panel .card:hover,#hand-panel .card.selected{transform:translateY(-18px) rotateX(0deg) rotateZ(0deg);box-shadow:2px 3px 0 #c5b69f,0 17px 22px #30262035;z-index:2}#hand-panel .card.selected{border-color:#258f99;outline:2px solid #258f9980}
#game .table .card{animation:none;box-shadow:1px 2px 0 #c5b69f,3px 4px 0 #a3947e,0 8px 10px #482e2535;transform:rotateZ(-4deg)}
.flying-card{position:fixed!important;width:60px!important;height:90px!important;margin:0!important;pointer-events:none;z-index:100;transform-style:preserve-3d;box-shadow:0 12px 25px #321e3545}
.card-back{display:grid;place-items:center;font-size:30px;background:repeating-linear-gradient(45deg,#943e32 0 4px,#b95c46 4px 8px);color:#ffe4a6;border:4px solid #fff0c6}
.flying-chip{position:fixed;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:radial-gradient(#fff0a6,#c89a35);color:#835629;border:3px dashed #fff1c3;box-shadow:0 5px 0 #986921;font-size:22px}
body[data-game=tienlen] .mat-arena{background-color:#c1dfd644}body[data-game=phom] .mat-arena{background-color:#bd875d24}body[data-game=lieng] .mat-arena{background-color:#27192e55;box-shadow:inset 0 0 90px #edb85810}
body[data-game=lieng] #game .mat-arena .player{background:#3b2b42ee;color:#f3dbad}body[data-game=lieng] #game .mat-arena .player.turn{background:#654a40}
@media(max-width:1050px){#game .layout,body[data-game=phom] #game .layout,body[data-game=lieng] #game .layout{grid-template-columns:1fr}#game aside{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.mat-arena{height:530px}}
@media(max-width:600px){.mat-arena{height:470px;margin-left:-8px;margin-right:-8px}#game .mat-arena .table,body[data-game=phom] #game .mat-arena .table,body[data-game=lieng] #game .mat-arena .table{left:12%;width:76%;top:22%;height:58%;padding:14px 9px;border-width:4px;transform:rotateX(18deg)}#game .mat-arena .player,body[data-game=phom] #game .mat-arena .player,body[data-game=lieng] #game .mat-arena .player{width:66px;padding:5px 3px;border-radius:12px}#game .mat-arena .player .avatar{width:31px;height:31px;font-size:21px}#game .mat-arena .player strong{font-size:8px}#game .mat-arena .player .status,#game .mat-arena .player .chip{font-size:7px}#game .mat-arena .player .discards{display:none}#game .mat-arena .table-center h2,body[data-game=lieng] #game .mat-arena .table-center h2{font-size:16px}#game .mat-arena .table-center p{font-size:8px}#hand-panel .card,body[data-game=lieng] #hand-panel .card{width:52px;height:86px;margin-left:-29px;padding:5px}#hand-panel .card .corner{font-size:14px}#hand-panel .card .center{font-size:24px}#hand-panel .hand{min-height:128px;overflow-x:auto;justify-content:center}#game aside{display:block}.table-badge{padding:4px;font-size:7px}#timer{font-size:12px}}
@media(prefers-reduced-motion:reduce){#hand-panel .card{transition:none}}
#game .mat-arena .players,body[data-game=phom] #game .mat-arena .players,body[data-game=lieng] #game .mat-arena .players{background:transparent;border:0;padding:0;box-shadow:none;overflow:visible}

#hand-panel .card,body[data-game=lieng] #hand-panel .card{transform:rotateX(10deg) rotateZ(var(--fan-angle,0deg));transform-origin:50% 130%}
#hand-panel .card:hover,#hand-panel .card.selected,body[data-game=lieng] #hand-panel .card.selected{transform:translateY(-18px) rotateX(0deg) rotateZ(0deg)}
.flying-card.card-back{background:repeating-linear-gradient(45deg,#943e32 0 4px,#b95c46 4px 8px);color:#ffe4a6;border:4px solid #fff0c6}