@font-face{font-family:'Cormorant';src:url('fonts/GD-Display.woff') format('woff');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'WenKai';src:url('fonts/GD-Script.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
:root{--serif:'Cormorant','WenKai','Songti SC',serif;--body:'WenKai','Palatino Linotype',serif;--mint:#b8d1ba;--paper:#f1ecdf}
body,button,input{font-family:var(--body)}h1,h2,h3,.brand,.footer-brand,.year,.stat b,.hero h1{font-family:var(--serif)}.brand{font-size:35px;font-weight:500}.hero h1{font-weight:500;font-size:clamp(90px,11vw,165px);letter-spacing:-6px}.hero h2{letter-spacing:2px}.page-title h1{font-weight:500}.page-intro{font-size:18px;line-height:1.9}.eyebrow{font-family:var(--body);letter-spacing:2px}.playing-card,.corner,.mini-card{font-family:'Cormorant',Georgia,serif}html[lang=en] h2,html[lang=en] h3{font-weight:500}html[lang=en] .page-title h1{font-size:clamp(48px,6.2vw,86px);line-height:1.06}html[lang=en] body{font-family:'Cormorant',Georgia,serif;font-size:20px}html[lang=en] p{font-size:19px;line-height:1.65}html[lang=en] .links a{font-size:17px}
.history-shell{display:grid;grid-template-columns:180px minmax(0,1fr);gap:75px;align-items:start;padding-top:60px}.history-shell .history-reading{padding-top:0;width:100%;max-width:none;min-width:0}.history-nav{position:sticky;top:120px;padding-top:12px}.history-nav .eyebrow{font-size:11px;color:var(--muted);letter-spacing:1px}.history-nav nav{display:flex;flex-direction:column;margin-top:25px;gap:8px}.history-nav a{padding:10px 12px;border-left:1px solid var(--line);font-size:14px;color:var(--muted);transition:color .25s,background .25s,border-color .25s}.history-nav a:hover,.history-nav a.active{color:var(--gold);border-left-color:var(--gold);background:linear-gradient(90deg,#d5be8510,transparent)}.nav-flourish{font:40px var(--serif);color:#d5be8577;display:block;margin:40px 0 0 12px}#timeline,#aliases,#culture,#references{scroll-margin-top:110px}.history-reading .timeline li{grid-template-columns:135px 1fr;gap:44px}.history-reading .timeline li:before{left:151px}.history-reading .timeline li:after{left:147px}.history-reading .year{font-size:45px;font-style:italic}
/* A floating, softly bevelled playing surface. Interactive geometry stays flat. */
body[data-page=hands]{background:radial-gradient(ellipse at 80% 10%,#414c3524,transparent 40%),var(--bg)}.practice-wrap{max-width:1180px}.game-table{height:435px;margin:20px 20px 38px;background:radial-gradient(ellipse at 35% 20%,#50664d88,transparent 65%),linear-gradient(155deg,#344a38,#273b2e 60%,#223227);border:1px solid #a9c5a32e;border-radius:105px;box-shadow:inset 0 2px 3px #d2e4c828,inset 0 0 0 12px #324236,inset 0 0 0 13px #c5d5ab25,0 12px 0 #1f2c23,0 15px 0 #53624a55,0 32px 38px -12px #0008,0 55px 80px -28px #000a;isolation:isolate;transition:box-shadow .3s,border-color .3s}.game-table:before{content:'GuanDan';font-family:'Cormorant';font-size:86px;letter-spacing:-3px;color:#c8d9bd10;transform:translateY(30px)}.game-table:after{content:'';position:absolute;inset:25px;border-radius:85px;border:1px solid #ddebc70b;pointer-events:none;z-index:-1}.seat{min-width:115px;padding:7px 12px;border-radius:22px;transition:background .3s,box-shadow .3s}.seat.active{background:#d4e5bd10;box-shadow:inset 0 1px 0 #fff1}.seat.active strong{color:#d0e5c8}.seat.active:before{display:none}.seat strong{font-size:16px}.seat small{color:#c1ccba}.partner{top:20px}.you{bottom:14px}.west{left:20px}.east{right:20px}.card-backs i{width:24px;height:34px;border-radius:5px;background:linear-gradient(135deg,#9ea993,#6b7e68);border:1px solid #c9d6b788;box-shadow:0 3px 0 #4d5f4b,0 6px 8px #0004;transform:rotate(-8deg);margin-left:-9px}.card-backs i:nth-child(even){transform:rotate(6deg)}.table-center{left:175px;right:175px;top:130px;min-height:185px;z-index:4}.table-center>.eyebrow{font-size:12px;color:#d0debd}.table-center .cards{min-height:125px;padding:12px 0}.table-center p{color:#d1dbca;font-size:13px!important;line-height:1.5!important;margin-top:12px}.table-center .playing-card{width:75px;height:108px;transform:rotate(var(--rotation)) rotateX(10deg)}
.playing-card{background:linear-gradient(135deg,#faf7ed,var(--paper));border:1px solid #fffaf2;border-radius:11px;box-shadow:inset 0 1px 1px #fff,0 2px 0 #d6d0bd,0 4px 0 #b9b5a3,0 8px 12px #0003,0 16px 28px #0004;color:#334a3d;overflow:hidden}.playing-card.red{color:#bd6958}.playing-card .pip{inset:22% 16%;display:block;background-image:none;background-size:200% 200%;background-position:var(--suit-pos,0 0);background-repeat:no-repeat;font-size:0!important;border-radius:20%;mix-blend-mode:multiply}.playing-card[data-joker=true] .pip{background:none;font-size:42px!important;display:grid;place-content:center;color:var(--gold)}.corner{font-weight:600;z-index:1}.corner small{font-family:Georgia,serif}.hero-deal .playing-card{box-shadow:0 3px 0 #c5bc9b,0 7px 0 #91866a,0 35px 50px #0008}.hero-deal .pip{inset:23% 16%}.cards{perspective:800px}.demo{border-radius:22px;background:radial-gradient(ellipse at 50% 40%,#495a3c44,transparent 75%)}.demo .playing-card{border-radius:10px}.hand-tabs .hand-tab{border-radius:10px}
.hand-heading{margin-top:40px}.player-hand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:18px 4px 24px;overflow:visible;min-height:190px}.hand-group{min-width:0;min-height:136px;padding:16px 10px 32px;border-radius:18px;background:linear-gradient(135deg,#a4b39a09,#ffffff02);border:1px solid #b2c09b0b;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transform-style:preserve-3d}.hand-group .playing-card{width:68px;height:98px;margin-left:-43px;border-radius:8px;box-shadow:0 2px 0 #d0c8b3,0 4px 0 #a39e8c,0 12px 15px #0005;transform:rotate(var(--rotation)) rotateX(8deg);animation:none}.hand-group .playing-card:first-child{margin-left:0}.hand-group .corner{font-size:20px;left:5px;top:5px}.hand-group .corner small{font-size:13px}.hand-group .corner.bottom{right:5px;bottom:5px}.hand-group .pip{inset:24% 14%}.group-label{font-size:12px;bottom:7px;color:#abb7a2;letter-spacing:1px}.hand-group:hover{transform:translateY(-8px) rotateX(3deg);box-shadow:0 15px 25px -12px #0008}.hand-group[aria-pressed=true]{border-color:#bbd4ac;background:#b0cca514;box-shadow:0 0 0 3px #b9d2ad08}.hand-group.is-dragging{opacity:.28;transform:scale(.96)}.hand-group.is-dragging .playing-card{animation:none}.inspector{border-radius:20px;border:1px solid var(--line);background:#ffffff03;padding:25px;gap:25px}.inspector h3{font-size:28px}.play-controls .primary{border-radius:12px;background:#c7d7b8;border-color:#c7d7b8;color:#253c2d;box-shadow:0 4px 0 #8c9f7c;transition:transform .2s,background .2s}.play-controls .primary:active{transform:translateY(3px)}.shuffle{border-radius:10px}.play-controls button{padding:11px 19px}.table-toolbar{padding:0 20px}.drop-indicator{position:absolute;inset:-14px -30px;border:1px dashed transparent;border-radius:35px;pointer-events:none;transition:background .2s,border-color .2s;z-index:-1}.game-table.drop-ready{border-color:#bdd9b8;box-shadow:inset 0 0 0 12px #344b38,0 12px 0 #203324,0 30px 45px #0008,0 0 45px #b6d5aa15}.drop-ready .drop-indicator{background:#cde7be16;border-color:#c9e9bf99}.drop-invalid .drop-indicator{background:#d78b7017;border-color:#d7928099}.drop-indicator:after{content:attr(data-label);position:absolute;bottom:9px;left:0;right:0;text-align:center;font-size:12px;color:#d7e5ca}.drop-invalid .drop-indicator:after{color:#efb5a4}.drag-ghost{position:fixed;left:0;top:0;z-index:100;display:flex;align-items:center;justify-content:center;pointer-events:none;width:230px;height:160px;will-change:transform;filter:drop-shadow(0 25px 15px #0005);transform-origin:center;perspective:900px}.drag-ghost .playing-card{flex-shrink:0;width:85px;height:123px;margin-left:-46px;transform:rotate(var(--rotation)) rotateX(10deg) rotateY(-8deg);animation:none}.drag-ghost .playing-card:first-child{margin-left:0}.drag-ghost .pip{inset:23% 15%}.drag-ghost .corner{font-size:23px}.drag-ghost .corner small{font-size:15px}.drag-hint{position:fixed;z-index:101;pointer-events:none;background:#e6ecdb;color:#283d2e;border-radius:18px;padding:4px 12px;font-size:12px;white-space:nowrap;box-shadow:0 5px 20px #0004}.drag-active,.drag-active *{cursor:grabbing!important;user-select:none!important}.landed .playing-card{animation:softLand .45s cubic-bezier(.2,.8,.3,1) both;animation-delay:var(--delay)}@keyframes softLand{0%{opacity:0;transform:translateY(-42px) scale(1.1) rotate(var(--rotation))}65%{transform:translateY(4px) scale(.98) rotate(var(--rotation))}100%{opacity:1;transform:translateY(0) scale(1) rotate(var(--rotation))}}
@media(min-width:1400px){.player-hand{grid-template-columns:repeat(4,minmax(0,1fr))}.hand-group .playing-card{width:76px;height:109px}}
@media(max-width:1000px){.history-shell{grid-template-columns:150px minmax(0,1fr);gap:35px}.history-nav a{font-size:12px;padding-left:8px}.history-reading .timeline li{grid-template-columns:92px 1fr;gap:30px}.history-reading .timeline li:before{left:103px}.history-reading .timeline li:after{left:99px}.game-table{margin-inline:0}.table-center{left:135px;right:135px}.hand-group .playing-card{width:59px;height:86px;margin-left:-40px}.hand-group .corner{font-size:18px}}
@media(max-width:700px){.history-shell{display:block;padding-top:20px}.history-nav{position:sticky;top:70px;z-index:8;background:#121512ee;backdrop-filter:blur(15px);padding:12px 0;margin-bottom:25px;border-bottom:1px solid var(--line)}.history-nav .eyebrow,.nav-flourish{display:none}.history-nav nav{flex-direction:row;overflow:auto;gap:0;margin:0}.history-nav a{font-size:12px;white-space:nowrap;padding:8px 10px;border-left:0;border-bottom:1px solid transparent}.history-nav a.active{border-bottom-color:var(--gold)}#timeline,#aliases,#culture,#references{scroll-margin-top:145px}.history-reading .year{font-size:29px}.history-reading .timeline li{grid-template-columns:75px 1fr;gap:25px}.history-reading .timeline li:before{left:84px}.history-reading .timeline li:after{left:80px}.brand{font-size:30px}.hero h1{font-size:88px;letter-spacing:-3px}.page-title h1{font-size:39px}.page-intro{font-size:16px}.game-table{height:365px;border-radius:55px;margin-top:20px;box-shadow:inset 0 0 0 7px #324236,inset 0 0 0 8px #c5d5ab25,0 9px 0 #1f2c23,0 24px 30px #0006}.game-table:after{inset:17px;border-radius:40px}.game-table:before{font-size:58px}.seat{min-width:70px;padding:5px 7px}.seat strong{font-size:13px}.seat small{font-size:11px}.west{left:8px}.east{right:8px}.table-center{left:88px;right:88px;top:111px;min-height:158px}.table-center .playing-card{width:48px;height:70px}.table-center .corner{font-size:15px}.table-center .cards{min-height:102px}.table-center p{font-size:11px!important}.table-center .eyebrow{font-size:10px;letter-spacing:0}.table-toolbar{padding:0}.table-toolbar span{font-size:11px}.player-hand{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.hand-group{min-height:124px;padding:12px 6px 29px}.hand-group .playing-card{width:55px;height:80px;margin-left:-37px}.hand-group .corner{font-size:17px;left:4px}.hand-group .corner small{font-size:11px}.hand-group .corner.bottom{right:4px}.group-label{font-size:11px}.drop-indicator{inset:-10px -14px;border-radius:24px}.inspector{padding:20px 16px}.play-controls{justify-content:space-between}.play-controls button{padding:9px 15px}.drag-ghost{width:180px;height:130px}.drag-ghost .playing-card{width:64px;height:92px;margin-left:-38px}.drag-ghost .corner{font-size:19px}.drag-ghost .corner small{font-size:12px}.drag-hint{font-size:11px}.table-center .playing-card[data-joker=true] .pip{font-size:24px!important}html[lang=en] p{font-size:18px}html[lang=en] .history-nav a{font-size:13px}}
@media(prefers-reduced-motion:reduce){.landed .playing-card{animation:none}.hand-group:hover{transform:none}.drag-ghost .playing-card{transform:none}.game-table{transition:none}}