@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Libre+Caslon+Display&display=swap";*{box-sizing:border-box}body{color:#263c33;background:#f7f6f0;margin:0;font:14px DM Sans,sans-serif}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;background:0 0;border:0}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline-offset:4px;outline:3px solid #d4ab5e}a{color:inherit}.shell{min-height:100vh;display:flex}.sidebar{background:#f2f3eb;border-right:1px solid #e2e4db;flex-direction:column;width:226px;padding:38px 23px 24px;display:flex;position:fixed;inset:0 auto 0 0}.brand{letter-spacing:-.5px;align-items:center;gap:12px;font-size:19px;line-height:1.15;text-decoration:none;display:flex}.brand b{font-weight:650}.brand-icon{color:#f7f3dc;background:#234d3f;border-radius:8px;padding:7px 10px;font:34px serif;box-shadow:0 4px #b3bfa8}.nav-label{letter-spacing:1.8px;color:#8a9489;margin:63px 10px 17px;font-size:9px;font-weight:600}.nav{text-align:left;color:#6c7c6f;border-radius:6px;align-items:center;gap:12px;margin:3px 0;padding:14px 12px;display:flex}.nav span{font-size:12px}.nav small{margin-left:auto;font-size:9px}.nav.active{color:#31533e;background:#e1e8db;font-weight:600}.side-bottom{background:#e9ecdf;border:1px solid #dfe4d5;border-radius:9px;margin-top:auto;padding:18px 14px}.side-bottom>span{color:#8d9b73;font-size:29px}.side-bottom h3{margin:12px 0 8px;font-size:12px}.side-bottom p{color:#7a8877;font-size:11px;line-height:1.8}.safe{color:#69815d;border-top:1px solid #d9dfd0;padding-top:15px;font-size:9px}.sidebar footer{letter-spacing:1.5px;text-align:center;color:#95a08e;margin-top:25px;font-size:7px}main{width:calc(100% - 226px);max-width:1700px;margin-left:226px;padding:0 42px}header{border-bottom:1px solid #e2e4dc;justify-content:space-between;align-items:center;height:88px;display:flex}header>span{letter-spacing:2px;color:#7c8a7d;font-size:9px}.profile{align-items:center;gap:12px;font-size:18px;display:flex}.profile span{font-size:11px}.intro{justify-content:space-between;align-items:center;padding:41px 0 35px;display:flex}.eyebrow{letter-spacing:2px;color:#8b9277;font-size:9px;font-weight:600}h1{letter-spacing:-1.7px;margin:18px 0 16px;font:400 52px/1.1 Libre Caslon Display,Georgia,serif}h1 em{color:#7b8965;font-weight:400}p{color:#7a8577;line-height:1.8}.intro p{margin-bottom:0;font-size:12px}.hero-tiles{flex-shrink:0;width:300px;height:192px;position:relative}.hero-disc{color:#d2d9c5;background:repeating-radial-gradient(#0000 0 9px,#e6e8df 10px 11px);border:1px solid #e2e5d9;border-radius:50%;place-items:center;width:172px;height:172px;font:75px serif;display:grid;position:absolute;top:0;left:70px}.hero-a,.hero-b,.hero-c{filter:drop-shadow(5px 12px 9px #6d775128);position:absolute}.hero-a{top:32px;left:40px;transform:rotate(-19deg)}.hero-b{top:22px;left:109px;transform:rotate(4deg)}.hero-c{top:49px;left:177px;transform:rotate(22deg)}.hero-tiles .tile{width:65px;height:88px}.hero-tiles .tile strong{font-size:32px}.hero-tiles>span{letter-spacing:1.8px;color:#99a18f;font-size:7px;position:absolute;bottom:0;left:42px}.workspace{grid-template-columns:minmax(0,1fr) 238px;gap:25px;display:grid}.game-section{background:#fffef9;border:1px solid #dde2d5;border-radius:11px;min-width:0;overflow:hidden}.section-top{justify-content:space-between;align-items:center;gap:6px;min-height:64px;padding:0 18px;display:flex}.tabs{align-self:stretch;gap:22px;display:flex}.tabs button{color:#889180;padding:0;font-size:11px;position:relative}.tabs .chosen{color:#365b45;font-weight:600}.tabs .chosen:after{content:"";background:#4c7051;height:2px;position:absolute;bottom:0;left:0;right:0}.practice{letter-spacing:1px;color:#8a9a74;font-size:7px}.table{color:#f3f1da;background:radial-gradient(at 50% 40%,#315d4c,#224a3d);border-radius:7px;height:417px;margin:0 12px;position:relative;overflow:hidden;box-shadow:inset 0 0 50px #122d3738}.table:after{content:"";pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.25' d='M0 0h180v180H0z'/%3E%3C/svg%3E");position:absolute;inset:0}.table-border{pointer-events:none;border:1px solid #a9bf9a28;border-radius:50px;position:absolute;inset:15px}.opponent{z-index:1;align-items:center;gap:7px;font-size:10px;display:flex;position:absolute}.avatar{background:#a7b39b24;border:1px solid #bed0b042;border-radius:50%;place-items:center;width:29px;height:29px;font:16px serif;display:grid}.opponent small{color:#a6bba8;font-size:8px;display:block}.top{flex-wrap:wrap;justify-content:center;width:190px;top:22px;left:50%;transform:translate(-50%)}.top .backs{justify-content:center;gap:3px;width:100%;margin-top:2px;display:flex}.left,.right{flex-direction:column;gap:6px;top:148px}.left{left:26px}.right{right:26px}.vertical-back{writing-mode:vertical-lr;color:#82a595;font-size:21px;line-height:1}.tile{color:#a04c39;background:#f8f4de;border:1px solid #d3cfb7;border-radius:4px;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;width:35px;height:49px;padding:2px;transition:transform .15s;display:inline-flex;position:relative;box-shadow:0 4px #b9bea6,0 6px #163d31,0 7px 3px #153c3266}.tile i{color:inherit;font:9px sans-serif;position:absolute;top:2px;left:3px}.tile strong{font:24px/1.1 Georgia,serif}.tile em{color:#a04c39;font:12px serif}.tile.suit1{color:#2d7257}.tile.suit2{color:#426783}.tile.suit2 strong{font-size:18px}.tile.suit3{color:#a34e3d}.tile.small{border-radius:3px;width:25px;height:34px;box-shadow:0 3px #bdc1a8,0 4px 2px #163d3166}.tile.small strong{font-size:17px}.tile.small i{font-size:7px;top:1px;left:2px}.tile.small em{font-size:8px}.tile.back{color:#bdcfb6;background:#6b9480;border-color:#8cad95;width:17px;height:23px;font:12px serif;box-shadow:0 2px #cad2bb}.tile.back span{border:1px solid #9fb7a2;border-radius:2px}.tile.selected{outline:2px solid #d7b572;transform:translateY(-9px)}.hand .tile:hover{transform:translateY(-6px)}.table-center{text-align:center;z-index:1;position:absolute;top:105px;left:85px;right:85px}.table-seal{color:#a7ba93;border:1px solid #aebd9755;border-radius:7px;place-items:center;width:42px;height:42px;margin:0 auto 10px;font:25px serif;display:grid;transform:rotate(-5deg)}.table-center h2{letter-spacing:-.2px;margin:8px 0;font:25px/1.2 Libre Caslon Display,Georgia,serif}.table-center p{color:#b9c7b2;margin:9px 0 15px;font-size:9px}.cream-button{color:#2d503d;background:#f1eed7;border-radius:4px;padding:11px 20px;font-size:11px;font-weight:600}.cream-button span{margin-left:17px}.table-center>small{letter-spacing:1.3px;color:#9aae99;margin-top:14px;font-size:6px;display:block}.hand-area{z-index:2;position:absolute;bottom:22px;left:25px;right:25px}.hand-label{justify-content:space-between;margin:0 4px 11px;font-size:9px;display:flex}.hand-label small{color:#a0b69f;font-size:8px}.hand-label>span:last-child{letter-spacing:1px;color:#a4b999;font-size:6px}.hand{justify-content:center;gap:4px;display:flex}.hand .tile{width:calc(7.14286% - 3.71429px);max-width:36px}.table-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;min-height:61px;padding:12px 19px;display:flex}.table-toolbar>span{color:#919a88;font-size:9px}.table-toolbar>div{flex-wrap:wrap;gap:10px;display:flex}.table-toolbar button{font-size:9px}.primary{border-radius:5px;padding:11px 17px;font-size:11px;color:#fffde9!important;background:#355d47!important}.learning{background:#f0f1e7;border:1px solid #dfe3d5;border-radius:11px;padding:23px 23px 17px}.lesson-head{letter-spacing:1px;color:#859275;justify-content:space-between;font-size:7px;display:flex}.lesson-head small{color:#a0a58f;font-size:7px}.learning h2{margin:23px 0 16px;font:29px/1.05 Libre Caslon Display,Georgia,serif}.learning>p{font-size:10px}.learning b{font-weight:600}.example{gap:5px;margin:20px 0 12px;display:flex}.example .tile{width:31px;height:42px}.example .tile strong{font-size:22px}.example-label{align-items:flex-start;gap:20px;display:flex}.example-label b{white-space:nowrap;font-size:11px}.example-label b span{color:#a2aa8e;margin-left:4px;font:11px serif}.example-label p{margin:0;font-size:9px;line-height:1.5}.text-link{border-bottom:1px solid #dce0cf;justify-content:space-between;width:100%;padding:20px 0 17px;font-size:9px;display:flex}.beginner-note{color:#8b9977;gap:10px;margin-top:17px;font-size:19px;display:flex}.beginner-note span{font-size:8px;line-height:1.7}.bottom-notes{color:#8d9883;border-bottom:1px solid #e0e3d7;justify-content:space-between;padding:27px 3px 31px;font-size:9px;display:flex}.bottom-notes b{color:#63775e;font-weight:500}.main-footer{color:#a2aa98;justify-content:space-between;padding:21px 0;font-size:8px;display:flex}.main-footer>span:first-child{letter-spacing:1.8px;font-size:7px}.lobby{text-align:center;background:#edf0e3;min-height:417px;padding:35px}.lobby h2{font:32px Georgia,serif}.lobby p{font-size:12px}.lobby input{background:#fffef7;border:1px solid #cdd6c5;border-radius:5px;width:255px;max-width:100%;margin:12px auto;padding:12px;display:block}.join{justify-content:center;align-items:center;gap:8px;margin-top:25px;display:flex}.join input{width:180px;margin:0}.seats{flex-wrap:wrap;justify-content:center;gap:10px;margin:25px 0;display:flex}.seats span{border:1px solid #c5cfb9;border-radius:6px;padding:10px}.notice{color:#6a6844;background:#eee9d5;margin:0;padding:10px 20px;font-size:11px}.round{letter-spacing:1px;color:#b4c5a9;justify-content:space-between;margin-bottom:16px;font-size:8px;display:flex}.round span{letter-spacing:0;font-size:8px}.discards{flex-wrap:wrap;justify-content:center;gap:5px;max-width:290px;min-height:60px;margin:auto;display:flex}.table-center .message{color:#ecebd4;margin-top:15px;font-size:10px}.faint{opacity:.35}.melds{justify-content:center;gap:12px;margin-bottom:15px;display:flex}.melds>div{gap:2px;display:flex}.guide{max-width:1000px;min-height:80vh;padding:50px 0}.guide>p{max-width:800px}.guide-grid{grid-template-columns:1fr 1fr;gap:22px;margin:35px 0;display:grid}.guide article{background:#f0f2e8;border:1px solid #dce0d1;border-radius:10px;padding:25px}.guide article>span{color:#92a27b;font:35px Georgia}.guide h2{font:26px Georgia}.tile-library{margin:20px 0}.tile-library>div{flex-wrap:wrap;gap:22px;display:flex}.tile-library>div>div{flex-direction:column;align-items:center;gap:15px;display:flex}.tile-library small{font-size:9px}.modal-bg{z-index:100;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#17382dbb;place-items:center;padding:22px;display:grid;position:fixed;inset:0}.modal{background:#f7f6ed;border-radius:12px;max-width:480px;padding:40px;position:relative}.modal h2{font:32px Georgia}.modal p{font-size:13px}.close{position:absolute;top:15px;right:18px}@media (width>=1450px){.table{height:470px}.table-center{top:120px}.hand-area{bottom:30px}.hand .tile{max-width:43px;height:58px}.learning{padding:28px}.learning h2{font-size:36px}.example{margin-top:29px}.intro{padding:48px 0}h1{font-size:61px}}@media (width<=1150px){.sidebar{width:180px;padding:30px 14px}main{width:calc(100% - 180px);margin-left:180px;padding:0 25px}.workspace{grid-template-columns:minmax(0,1fr) 200px;gap:16px}.learning{padding:20px 15px}.hero-tiles{transform-origin:100%;width:250px;transform:scale(.85)}h1{font-size:43px}.hand-area{left:17px;right:17px}.hand{gap:3px}.table-center{left:65px;right:65px}.practice{display:none}.tabs{gap:20px}.bottom-notes{font-size:8px}}@media (width<=900px){.sidebar{width:76px;padding:25px 10px}.brand>span:last-child,.nav-label,.nav span,.nav small,.side-bottom,.sidebar footer{display:none}.brand{justify-content:center}.brand-icon{font-size:25px}.nav{justify-content:center;margin-top:15px;padding:12px;font-size:22px}.nav:first-of-type{margin-top:45px}main{width:calc(100% - 76px);margin-left:76px;padding:0 22px}.workspace{grid-template-columns:minmax(0,1fr) 190px;gap:15px}.hero-tiles{width:180px;transform:scale(.7)}h1{font-size:41px}.intro p{font-size:11px}.table .left{left:15px}.table .right{right:15px}.table-center h2{font-size:21px}.table-center p{font-size:8px}.hand .tile strong{font-size:21px}.hand .tile{height:44px}.hand-label>span:last-child{letter-spacing:0;font-size:5px}.learning h2{font-size:27px}.bottom-notes span:last-child{display:none}}@media (width<=700px){.sidebar{border-bottom:1px solid #e0e4d6;border-right:0;flex-direction:row;align-items:center;gap:15px;width:100%;height:68px;padding:12px 18px;position:relative}.brand{margin-right:auto}.brand>span:last-child{font-size:13px;display:block}.brand-icon{padding:4px 7px;font-size:20px}.nav,.nav:first-of-type{margin:0;padding:8px;font-size:21px}.shell{display:block}main{width:100%;margin:0;padding:0 16px}header{height:53px}header>span{letter-spacing:1px;font-size:6px}.profile{gap:7px;font-size:15px}.profile span{font-size:9px}.intro{padding:28px 0 25px;position:relative;overflow:hidden}.intro>div:first-child{z-index:1}h1{letter-spacing:-1.2px;font-size:38px}.eyebrow{letter-spacing:1px;font-size:7px}.intro p{font-size:10px}.hero-tiles{opacity:.7;width:120px;position:absolute;top:5px;right:0;transform:scale(.5)}.hero-tiles>span{display:none}.workspace{display:block}.learning{margin-top:20px;display:none}.section-top{min-height:54px;padding:0 15px}.tabs button{font-size:10px}.table{height:418px;margin:0 7px}.table-center{top:108px;left:52px;right:52px}.left,.right{top:145px}.table .left{left:10px}.table .right{right:10px}.opponent{font-size:8px}.opponent .avatar{width:25px;height:25px;font-size:14px}.hand-area{bottom:26px;left:10px;right:10px}.hand{gap:2px}.hand .tile{width:calc(7.14286% - 1.85714px);height:42px}.hand .tile strong{font-size:20px}.hand .tile i{font-size:7px;left:2px}.hand .tile em{font-size:9px}.hand-label{font-size:8px}.table-toolbar{padding:14px 12px}.table-toolbar>span{font-size:8px}.table-toolbar button{font-size:9px}.bottom-notes{gap:15px;padding:22px 0;font-size:8px;line-height:1.8}.main-footer{font-size:7px}.main-footer span:nth-child(2){display:none}.lobby{padding:25px 15px}.lobby h2{font-size:27px}.guide{padding:30px 0}.guide h1{font-size:37px}.guide-grid{grid-template-columns:1fr;gap:14px}.guide article{padding:20px}.tile-library>div{gap:20px 14px}.tile-library small{font-size:8px}.round{letter-spacing:0;font-size:6px}.round span{font-size:7px}.discards{gap:4px}.discards .tile.small{width:21px;height:30px}.table-center .message{font-size:9px}.table-center .cream-button{padding:10px}.melds{margin-bottom:12px}.melds .tile{width:20px;height:25px}.modal{padding:32px 25px}}.pips{grid-template-columns:repeat(3,1fr);align-content:center;justify-items:center;gap:3px;width:76%;height:68%;margin-top:5px;display:grid}.pips>span{display:block}.pips.dots>span{background:#496e85;border:2px solid #496e85;border-radius:50%;width:7px;height:7px;box-shadow:inset 0 0 0 1px #f8f4de}.pips.bamboo>span{background:linear-gradient(#30785b 40%,#cad7b4 40% 55%,#30785b 55%);border-radius:2px;width:3px;height:10px}.pips.count1{grid-template-columns:1fr}.pips.count1.dots>span{border-width:3px;width:17px;height:17px}.pips.count1.bamboo>span{width:6px;height:25px}.pips.count2,.pips.count4{grid-template-columns:repeat(2,1fr)}.tile.small .pips{gap:2px;margin-top:4px}.tile.small .pips.dots>span{border-width:1px;width:5px;height:5px}.tile.small .pips.bamboo>span{width:2px;height:7px}.tile.small .pips.count1.dots>span{width:13px;height:13px}.hero-tiles .pips.dots>span{width:12px;height:12px}.hero-tiles .pips{gap:5px}@media (width<=700px){.hand .pips{gap:2px;width:85%}.hand .pips.dots>span{border-width:1px;width:4px;height:4px}.hand .pips.bamboo>span{width:2px;height:8px}.hand .pips.count1.dots>span{width:13px;height:13px}}