:root{color-scheme:dark;--gold:#f8cf78;--mint:#a9e4d0;--text:#e8f3eb;--muted:#9fbeb6}*{box-sizing:border-box}body{margin:0;background:#092826;color:var(--text);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background-image:radial-gradient(ellipse at 50% 30%,#17514755,transparent 70%);min-height:100dvh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:1px solid #ffffff25;background:#ffffff08;color:inherit;border-radius:10px;padding:10px 18px;font-size:14px;transition:transform .15s,background .15s}button:hover:not(:disabled){background:#ffffff16;transform:translateY(-1px)}button:focus-visible,a:focus-visible{outline:3px solid #ffde91;outline-offset:4px}button:disabled{opacity:.4;cursor:default}button.primary{background:linear-gradient(140deg,#ffe4a6,#eeb452);color:#553d16;border-color:#ffe3a0;box-shadow:0 4px 0 #97632b,0 8px 24px #0003;font-weight:800;font-size:18px}button.primary:hover:not(:disabled){background:#ffe4a6}button.secondary{color:var(--gold);background:#8b73392a;border-color:#b3965366;font-weight:700}.app{max-width:1440px;margin:auto;padding:0 44px}header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #b8d8bd18}.brand{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit}.brand-icon{font-family:Georgia,serif;color:#163c32;background:linear-gradient(135deg,#ffe4a6,#c79845);width:50px;height:58px;display:grid;place-items:center;border-radius:13px;font-size:39px;transform:rotate(-7deg);border:1px solid #ffe6aa;box-shadow:0 4px 10px #0003}h1{font-size:27px;margin:0;letter-spacing:2px}h1 span{font-size:10px;font-weight:500;letter-spacing:3px;margin-left:14px;color:#94b5a9}.brand p{font-size:13px;letter-spacing:2px;margin:5px 0 0;color:var(--gold)}nav{display:flex;gap:10px}nav button{background:#06211f70;border-color:#a8c6b42c}.table-top{display:flex;justify-content:space-between;align-items:center;height:60px;color:#accbc1;font-size:14px}.table-top button{font-size:12px;border:0;padding:6px 10px}.room{font-weight:700;letter-spacing:1px}.room i{display:inline-block;width:7px;height:7px;background:#cdd88c;border-radius:50%;margin-right:9px;box-shadow:0 0 10px #cad28a66}.table{height:400px;position:relative;border:7px solid #776443;border-radius:155px;background:radial-gradient(ellipse at 50% 45%,#307b65,#1d6052 60%,#174d43);box-shadow:0 0 0 2px #b097602a,0 0 0 10px #031e1c,0 18px 35px #0004,inset 0 0 45px #032f2c99}.table:before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.2;pointer-events:none;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' opacity='.24' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.felt-line{position:absolute;inset:17px;border:1px solid #d4d38d2b;border-radius:140px;pointer-events:none}.table-watermark{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);color:#bfe0c416;text-align:center;font-size:42px;font-weight:900;letter-spacing:8px;white-space:nowrap}.table-watermark small{display:block;font-size:12px;letter-spacing:5px;margin-top:7px}.player{display:flex;align-items:center;gap:11px;z-index:2}.north,.west,.east{position:absolute}.north{left:50%;top:14px;transform:translateX(-50%)}.west{left:28px;top:123px;flex-direction:column;text-align:center}.east{right:28px;top:123px;flex-direction:column;text-align:center}.avatar{height:70px;width:70px;flex-shrink:0;border-radius:20px;background-image:url('avatars.png');background-size:200% 200%;border:2px solid #d5c387;box-shadow:0 4px 10px #0004;position:relative}.avatar.a0{background-position:left top}.avatar.a1{background-position:right top}.avatar.a2{background-position:left bottom}.avatar.a3{background-position:right bottom}.player.active .avatar{border:3px solid #ffe29c;box-shadow:0 0 0 4px #f5d38333,0 0 25px #f5d38355}.player.active .avatar:after{content:'出牌中';position:absolute;bottom:-8px;left:0;right:0;background:#f7d78b;color:#453418;border-radius:5px;font-size:11px;padding:2px 0;text-align:center;white-space:nowrap}.name{font-size:15px;font-weight:700;white-space:nowrap}.name small{font-weight:400;font-size:10px;background:#082e2977;color:#bdcfc6;padding:2px 5px;border-radius:4px;margin-left:6px}.beans{color:#ffe094;font-variant-numeric:tabular-nums;font-size:15px;font-weight:700;margin:4px 0}.beans:before{content:'●';color:#f3c564;font-size:11px;margin-right:5px}.capture{font-size:12px;color:#b8d2c9;line-height:1.7}.bubble{position:absolute;white-space:nowrap;font-size:12px;color:#365247;background:#ecf2d9;border-radius:12px;padding:7px 11px;top:-35px;left:50%;transform:translateX(-50%);box-shadow:0 2px 5px #0002;animation:pop .3s}.center-area{position:absolute;inset:98px 160px 59px;display:flex;align-items:center;justify-content:center;text-align:center}#welcome{z-index:1}#welcome h2{font-size:25px;color:#f9edd2;margin:9px 0;font-weight:700;letter-spacing:2px}#welcome p{font-size:13px;color:#b4d4c3;margin:9px 0 18px}.welcome-suits{color:#b9d7c2;font-size:24px;letter-spacing:15px}.welcome-suits em{font-style:normal;color:#e1ae8f}.start{min-width:210px;padding:12px 25px}.start span{margin-left:20px}#welcome small{display:block;color:#a5c4b6;font-size:11px;margin-top:15px}#specials{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:22px;white-space:nowrap;color:#e6cda0;font-family:Georgia,serif;font-size:16px}#specials b{font-family:system-ui,sans-serif;font-size:11px;color:#aacabd;font-weight:400;margin-left:4px}.my-area{padding:25px 24px 0}.my-info{display:flex;align-items:center;gap:25px}.self .avatar{height:55px;width:55px;border-radius:16px}.self .capture{display:none}.my-status{flex:1;text-align:center;max-width:600px;margin:auto}.my-status>div{font-size:16px;font-weight:600;color:#f4e4be}.my-status small{font-size:12px;color:#92b8a8;display:block;margin-top:6px}#auto[aria-pressed="true"]{background:#e5c27b;color:#30443b}#hand{height:157px;display:flex;align-items:flex-end;justify-content:center;margin:6px auto 0;padding:16px 8px 0;max-width:980px}.card{width:91px;height:128px;background:linear-gradient(125deg,#fffef9,#f1efe4);border:1px solid #d0d0c0;border-radius:9px;color:#233736;position:relative;display:inline-block;flex-shrink:0;box-shadow:1px 2px 5px #001e2599;user-select:none;vertical-align:middle}.card.red{color:#c94648}.card .corner{position:absolute;left:9px;top:6px;display:flex;flex-direction:column;align-items:center;font:bold 26px/1 Georgia,serif}.card .corner span{font-size:24px;margin-top:3px}.card .pip{position:absolute;font:40px/1 Georgia,serif;left:50%;top:55%;transform:translate(-50%,-50%)}.card .bottom{position:absolute;right:7px;bottom:7px;font:bold 16px Georgia,serif;transform:rotate(180deg)}.card .badge{position:absolute;bottom:9px;left:7px;border:1px solid currentColor;border-radius:4px;font-size:10px;padding:2px 4px;background:#fff9}.card .mascot{font-size:34px}.card.select{transform:translateY(-20px);outline:3px solid var(--gold);z-index:5!important;box-shadow:0 3px 20px #e8bd7540}.card.unavailable{filter:brightness(.61)}#hand .card{padding:0;margin-left:calc(-1 * var(--overlap,22px));transition:transform .15s,filter .2s;background:linear-gradient(125deg,#fffef9,#f1efe4);color:#233736}#hand .card:first-child{margin-left:0}#hand .card.red{color:#c94648}#hand .card:hover:not(:disabled){transform:translateY(-12px);background:#fffef9}#hand .card.select:hover{transform:translateY(-20px)}#hand .card:disabled{opacity:1;cursor:default}.back{background:repeating-linear-gradient(45deg,#20594b 0px,#20594b 5px,#29634f 5px,#29634f 7px)!important;border:5px solid #ece3c9}.back:after{content:'♠';position:absolute;inset:8px;border:1px solid #dbcb8955;border-radius:4px;display:grid;place-items:center;color:#c5b988;font-size:30px}.actions{display:flex;align-items:center;justify-content:space-between;margin-top:20px}.play-actions{display:flex;gap:16px}.play-actions button{min-width:135px;padding:11px 30px}.gesture{color:#7fa395;font-size:12px}#last{font-size:12px;padding:8px 12px;color:#b5c9bb}.actions>button,.gesture{width:150px}.gesture{text-align:right}footer{display:flex;justify-content:space-between;margin:25px 0 18px;color:#70988b;font-size:11px}#trick{position:relative;width:360px;height:210px;flex-shrink:0}#trick[hidden]{display:none}.played{position:absolute;animation:pop .22s}.played .card{width:69px;height:96px}.played .card .corner{font-size:21px;left:6px;top:4px}.played .card .corner span{font-size:19px}.played .card .pip{font-size:30px}.played .card .badge{bottom:6px;left:4px;font-size:9px;padding:1px 3px}.played .card .bottom{font-size:13px;bottom:5px;right:4px}.played small{font-size:10px;display:block;color:#d9e2c5;margin-top:4px}.played.pos0{left:145px;top:107px;transform:rotate(-5deg)}.played.pos1{left:42px;top:51px;transform:rotate(-12deg)}.played.pos2{left:149px;top:-5px;transform:rotate(4deg)}.played.pos3{right:42px;top:51px;transform:rotate(12deg)}.played.winning .card{outline:2px solid #ffe38d;box-shadow:0 0 22px #f3d48844}#trick-message{position:absolute;top:1px;left:50%;transform:translateX(-50%);font-size:12px;white-space:nowrap;color:#dce2bd;z-index:3;background:#0c463cea;padding:5px 10px;border-radius:14px}#trick-message:empty{display:none}dialog{border:1px solid #8d957155;border-radius:22px;background:#103d35;color:#e4eadd;padding:25px;width:min(580px,92vw);box-shadow:0 25px 100px #0008;max-height:85dvh}dialog::backdrop{background:#001b1ad9;backdrop-filter:blur(5px)}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.modal-head h2{margin:0;font-size:23px;color:#f4d795}.modal-head button{font-size:24px;line-height:1;padding:4px 9px;border:0}.rule{font-size:14px;line-height:1.9;color:#c5d9cb}.rule h3{font-size:16px;color:#ffe2a0;margin:16px 0 5px}.rule p{margin:4px 0}.rule ul{padding-left:20px}.score-table{width:100%;border-collapse:collapse;font-size:14px}.score-table th{text-align:right;color:#92b6a8;font-size:12px;font-weight:500;padding:12px 5px}.score-table td{text-align:right;padding:14px 5px;border-top:1px solid #ffffff15}.score-table td:first-child,.score-table th:first-child{text-align:left}.positive{color:#efcd7c}.negative{color:#ee9390}.result-hero{text-align:center;margin:10px 0 20px}.result-hero .result-icon{font-size:40px}.result-hero h3{font-size:24px;margin:10px;color:#f7d994}.result-hero p{font-size:13px;color:#b3cbbd}.next{display:block;width:100%;margin-top:23px}.record{display:flex;justify-content:space-between;font-size:14px;padding:12px 0;border-bottom:1px solid #fff1}.empty{text-align:center;color:#adc5b8;padding:30px 0;font-size:14px}.mini-cards{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.mini-cards .card{transform:scale(.85);margin:-5px}.modal-note{font-size:12px;color:#96b4a4;line-height:1.8;margin:15px 0}.reset{margin-top:20px;color:#ccac94;font-size:12px}.toast{animation:pop .2s}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 20px;background:#fff2d7;color:#29463d;border-radius:12px;font-size:14px;z-index:10;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw}#toast.show{opacity:1}@keyframes pop{from{opacity:0;scale:.8}to{opacity:1;scale:1}}@media(min-width:1400px) and (min-height:850px){.table{height:450px}.my-area{padding-top:30px}#hand{margin-top:16px;height:177px}.card{width:100px;height:144px}.west,.east{top:149px}.actions{margin-top:25px}}
@media(max-width:900px){.app{padding:0 20px}.table{border-radius:100px;height:370px}.felt-line{border-radius:85px}.west{left:13px}.east{right:13px}.avatar{width:61px;height:61px}.center-area{left:115px;right:115px}.my-area{padding:24px 0 0}.my-info{gap:12px}#specials{gap:14px}.gesture{display:none}.actions>button{width:auto}.actions{justify-content:center;gap:22px}.card{width:79px;height:116px}.card .corner{font-size:24px}.card .pip{font-size:36px}header{height:88px}h1 span{display:none}}
@media(max-width:600px){.app{padding:0 12px}header{height:78px}.brand{gap:9px}.brand-icon{width:35px;height:43px;font-size:29px;border-radius:10px}h1{font-size:21px}.brand p{font-size:10px;letter-spacing:1px}nav{gap:4px}nav button{font-size:12px;padding:8px 10px}#sound span{display:none}.table-top{height:47px;font-size:12px}.table{height:380px;border-width:4px;border-radius:50px;box-shadow:0 0 0 4px #031e1c,0 10px 25px #0004}.felt-line{inset:10px;border-radius:40px}.table-watermark{font-size:29px}.north{top:14px}.north .avatar{width:49px;height:49px;border-radius:14px}.north .capture{font-size:10px}.name{font-size:13px}.beans{font-size:13px;margin:3px 0}.west,.east{top:115px;gap:8px}.west{left:10px}.east{right:10px}.avatar{width:52px;height:52px;border-radius:15px}.name small{display:none}.capture{font-size:10px}.center-area{inset:103px 67px 65px}#welcome h2{font-size:17px;letter-spacing:0}#welcome p{font-size:11px;line-height:1.8;max-width:175px;margin:10px auto 17px}.welcome-suits{font-size:19px;letter-spacing:9px}.start{min-width:165px;font-size:16px!important;padding:11px 18px}.start span{margin-left:12px}#welcome small{font-size:10px}.my-area{padding-top:20px}.self .avatar{height:43px;width:43px;border-radius:13px}.player.self{gap:7px}.my-info{gap:5px;flex-wrap:wrap}.my-status{order:3;flex-basis:100%;margin-top:13px}.my-status>div{font-size:14px}.my-status small{font-size:11px}#auto{margin-left:auto;font-size:12px;padding:8px 12px}.my-info .self{flex:1}.self .name small{display:inline}#hand{height:136px;margin-top:0;padding:20px 0 0}.card{width:64px;height:104px;border-radius:7px}.card .corner{font-size:22px;left:5px;top:6px}.card .corner span{font-size:20px}.card .pip{font-size:30px;left:55%;top:60%}.card .badge{font-size:9px;padding:1px 3px;left:4px;bottom:6px}.card .bottom{font-size:13px;right:4px;bottom:5px}.card.select{transform:translateY(-16px)}.actions{gap:12px;margin-top:14px}.play-actions{gap:10px}.play-actions button{min-width:96px;padding:10px 18px;font-size:16px}#last{font-size:11px;padding:8px}.actions>button{max-width:70px}footer{margin-top:23px;font-size:10px;justify-content:center}footer span:first-child{display:none}#specials{bottom:18px;gap:9px;font-size:13px;width:95%;justify-content:center}#specials b{font-size:9px;margin-left:2px}#specials span:last-child{display:none}#trick{transform:scale(.8);width:270px}.played.pos0{left:103px}.played.pos1{left:15px}.played.pos2{left:106px}.played.pos3{right:15px}.bubble{font-size:10px;padding:6px 8px;top:-28px}.table-watermark small{font-size:9px;letter-spacing:2px}#trick-message{font-size:10px;top:6px}dialog{padding:20px}.score-table{font-size:12px}}
@media(max-height:650px) and (min-width:650px){header{height:65px}.table-top{height:36px}.table{height:290px}.north{top:9px}.west,.east{top:93px}.center-area{inset:65px 160px 38px}#specials{bottom:14px}.north .avatar{width:47px;height:47px}.my-area{padding-top:17px}.my-info .self .avatar{height:42px;width:42px}#hand{height:117px}.card{height:98px;width:72px}.actions{margin-top:12px}.play-actions button{padding:7px 28px}footer{margin-top:15px}#trick{transform:scale(.78)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}