@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#0d1c19;--panel:#142823;--line:#ffffff12;--muted:#8fa49a;--text:#eef1e9;--accent:#d8ed95;--felt:#205448}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;color:var(--text);font-size:16px}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}a{color:inherit;text-decoration:none}.topbar{height:98px;border-bottom:1px solid var(--line);padding:0 5%;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:13px;align-items:center;font-size:24px;font-weight:800;letter-spacing:2px}.brand-mark{color:var(--accent);font-family:Georgia,serif;font-size:46px;line-height:1}.brand-en{display:block;font-size:10px;letter-spacing:3.4px;font-weight:500;color:var(--muted);margin-top:2px}.top-meta{display:flex;align-items:center;gap:27px}.mode-chip{border:1px solid #496056;border-radius:20px;padding:7px 15px;font-size:13px;color:#c1d3c5}.plain-button,.icon-button,.text-button{border:0;background:none;color:#b7c8bd;font-size:14px;display:flex;align-items:center;gap:8px}.icon-button{font-size:22px}.icon-button span{font-size:13px}.question-mark{border:1px solid #84978b;border-radius:50%;width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}.layout{max-width:1536px;margin:0 auto;padding:40px 5% 24px;display:grid;grid-template-columns:224px minmax(0,1fr);gap:42px}.sidebar{display:flex;flex-direction:column;padding-top:29px}.eyebrow{font-size:13px;letter-spacing:2px;color:var(--accent);font-weight:500}.intro h1{font-size:54px;line-height:1.25;letter-spacing:-2px;margin:17px 0 18px;font-weight:800}.intro h1 span{display:block;color:var(--accent)}.intro p{color:var(--muted);font-size:15px;line-height:1.95;margin:0}.session{margin:42px 0 31px;padding:23px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.session-title{font-size:14px;display:flex;justify-content:space-between;align-items:center}.session-title>span{font-size:10px;letter-spacing:2px;color:#617c6f}.stats{display:flex;margin-top:19px}.stats>div{width:50%;display:flex;flex-direction:column;gap:5px}.stats strong{font-size:30px;font-weight:500}.stats span{font-size:13px;color:var(--muted)}.small-heading{font-size:14px;color:#d3decf}.quick-rules p{display:flex;gap:12px;font-size:13px;color:var(--muted);margin:17px 0}.quick-rules p>span{font-size:11px;color:#587767}.text-button{padding:8px 0;color:var(--accent);font-size:13px}.quick-rules .text-button{margin-top:20px;gap:20px}.sidebar-bottom{margin-top:auto;padding-top:42px;display:flex;align-items:center;gap:9px;color:#668274;font-size:12px}.tiny-spade{font-size:21px}.game{min-width:0}.game-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.table-no{font-size:10px;letter-spacing:2px;color:#729586}.game-heading h2{font-size:20px;margin:5px 0 0;font-weight:600}.game-heading h2 span{font-size:12px;font-weight:400;color:var(--muted);margin-left:15px}.restart span{font-size:20px}.felt{height:370px;position:relative;border-radius:22px;background:radial-gradient(ellipse at 50% 20%,#2b6657 0%,#205447 58%,#194338 100%);border:1px solid #4e7e6955;overflow:hidden;box-shadow:inset 0 0 45px #092c2533}.felt:after{content:'';position:absolute;inset:0;opacity:.11;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%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E")}.felt-ring{position:absolute;inset:17px;border:1px solid #b6d6ad15;border-radius:15px}.table-watermark{position:absolute;top:124px;left:50%;transform:translateX(-50%);font-size:62px;font-weight:900;letter-spacing:10px;opacity:.055;white-space:nowrap;pointer-events:none}.table-watermark span{display:block;text-align:center;font-size:12px;letter-spacing:7px;margin-top:5px}.opponents{position:relative;z-index:1;display:flex;justify-content:space-between;padding:30px 38px}.player{display:flex;gap:12px;align-items:center;position:relative}.avatar{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:600;flex-shrink:0}.avatar-one{background:#bdc9b4;color:#354b3b}.avatar-two{background:#c8b18b;color:#554834}.avatar-you{background:var(--accent);color:#354529}.player-info{display:flex;flex-direction:column;gap:5px}.player-info strong{font-size:15px;font-weight:600;white-space:nowrap}.player-info strong span{font-size:11px;color:#bfd0bd;font-weight:400;margin-left:6px}.player-status{font-size:12px;color:#b0cbb9}.card-count{display:flex;align-items:center;gap:5px;margin-left:13px;font-size:12px;color:#b6cdbf}.card-count b{color:#edf6e9;font-size:19px;font-weight:500}.mini-card{background:#71998a;border:1px solid #bed4bf60;width:19px;height:26px;display:grid;place-items:center;border-radius:3px;font-size:13px;color:#d6e8d7;transform:rotate(-8deg);margin-right:3px}.turn-dot{display:none}.player.active .avatar{box-shadow:0 0 0 3px #254f40,0 0 0 5px var(--accent)}.player.active .player-status{color:var(--accent)}.player.active .turn-dot{display:block;position:absolute;width:7px;height:7px;bottom:-5px;left:19px;background:var(--accent);border:2px solid #204c40;border-radius:50%}.table-center{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding-top:12px}.last-play{text-align:center;height:45px}.table-label{font-size:15px;color:#e1ecdb}.last-play p{font-size:13px;color:#adc6b5;margin:8px 0 0}.table-cards{display:flex;justify-content:center;gap:9px;min-height:115px;margin-top:14px}.turn-message{font-size:13px;background:#112f2766;border:1px solid #8eb49a22;padding:8px 18px;border-radius:20px;color:var(--accent);margin-top:8px;max-width:90%;text-align:center}.table-footer{position:absolute;bottom:24px;left:37px;right:37px;display:flex;justify-content:space-between;z-index:1;color:#94b29f;font-size:11px}.table-footer>span:first-child{display:flex;align-items:center;gap:6px}.table-footer i{width:5px;height:5px;background:#9fc899;border-radius:50%}.hand-panel{padding:24px 0 0}.hand-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.you .avatar{height:40px;width:40px;font-size:17px}.you .player-info strong span{font-size:12px;color:var(--muted);margin-left:12px}.you .player-info>span{font-size:12px;color:var(--muted)}.hand-tools{display:flex;align-items:center;gap:24px}.wild-legend{font-size:12px;color:var(--muted)}.wild-legend b{color:var(--accent);margin-right:4px}.hand{display:flex;align-items:flex-start;padding:17px 3px 12px;min-height:149px;isolation:isolate;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#3c6651 transparent}.card{position:relative;border:1px solid #dddccf;background:linear-gradient(115deg,#fffcf3,#eeeede);color:#26382e;border-radius:8px;width:72px;height:106px;flex:0 0 72px;padding:8px;text-align:left;box-shadow:0 3px 7px #0003;transition:transform .16s,box-shadow .16s,border-color .16s;user-select:none;font-family:Georgia,'Times New Roman',serif}.hand .card{margin-right:calc((100% - 72px * var(--cards))/max(1, var(--cards) - 1));max-width:72px}.hand .card:last-child{margin-right:0}.hand .card:hover{transform:translateY(-7px);z-index:3}.card.red{color:#bd493e}.card.wild{background:linear-gradient(120deg,#f6f4d8,#e9e7be)}.card.selected{transform:translateY(-16px);box-shadow:0 0 0 2px var(--accent),0 6px 18px #0004;z-index:4}.card.selected:hover{transform:translateY(-18px)}.card-corner{display:flex;flex-direction:column;line-height:1;font-size:22px;font-weight:700;align-items:center;width:max-content}.card-corner small{font-size:17px;margin-top:3px;font-weight:400}.card-center{position:absolute;right:10px;bottom:15px;font-size:38px;line-height:1}.card.wild .card-center{font-size:31px;opacity:.65}.wild-star{position:absolute;right:7px;top:7px;font-size:13px;color:#92803d}.joker-label{writing-mode:vertical-rl;font-size:13px;letter-spacing:2px;font-family:inherit;font-weight:700}.card .as-label{position:absolute;bottom:4px;left:6px;right:6px;text-align:center;font-family:'Noto Sans SC',sans-serif;font-size:10px;background:#dace9e;color:#5b512c;border-radius:3px;padding:2px 0}.table-cards .card{width:66px;height:93px;flex-basis:66px;padding:7px}.table-cards .card-corner{font-size:20px}.table-cards .card-center{font-size:32px;bottom:16px}.action-bar{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:15px}.selection-info{font-size:14px;color:#d1dccc;min-width:0}.selection-info>span{display:block;color:#6e8d7c;font-size:11px;margin-top:7px}.selection-info select{background:#1c332b;color:var(--accent);border:1px solid #4c6f55;border-radius:6px;padding:6px;max-width:100%;font-size:13px}.actions{display:flex;gap:10px;flex-shrink:0}.primary-button,.secondary-button{border-radius:9px;padding:13px 24px;font-size:14px;font-weight:600;min-height:46px;transition:background .16s,transform .16s}.primary-button{border:1px solid var(--accent);background:var(--accent);color:#253a24}.primary-button:hover:not(:disabled){background:#e4f5b1;transform:translateY(-1px)}.secondary-button{background:#1b3028;border:1px solid #49604d;color:#cbd7c3}.secondary-button:hover:not(:disabled){background:#2a4635}.hint-button span{font-size:20px;margin-right:5px}.primary-button>span{border-left:1px solid #4e663c33;padding-left:10px;margin-left:10px;font-size:13px}.game-bottom{display:flex;justify-content:space-between;font-size:11px;color:#638171;margin-top:24px;gap:16px}.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,15px);padding:13px 23px;background:#d9ed96;color:#253b26;z-index:10;border-radius:12px;font-size:14px;max-width:90%;text-align:center;opacity:0;transition:.2s;pointer-events:none;box-shadow:0 5px 30px #0006}.toast.visible{transform:translate(-50%,0);opacity:1}dialog{background:#142b24;border:1px solid #53725d;color:var(--text);border-radius:22px;padding:31px;width:min(560px,calc(100% - 32px));max-height:85vh;box-shadow:0 20px 90px #0007}dialog::backdrop{background:#061711be;backdrop-filter:blur(6px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.close-button{background:none;border:0;color:#b8c9b7;font-size:27px;width:36px;height:36px}dialog h2{font-size:28px;margin:12px 0}.dialog-subtitle{font-size:14px;color:var(--muted);line-height:1.7}.rule-list{margin:25px 0}.rule-list>div{display:flex;gap:15px;margin-bottom:19px}.rule-list b{color:#8baa72;font-size:13px;line-height:1.8}.rule-list p{margin:0;font-size:14px;line-height:1.8;color:#a9bfaf}.rule-list strong{display:block;color:#e6eedb;font-weight:500;margin-bottom:4px}.full-button{width:100%}#result-dialog{text-align:center;width:min(430px,calc(100% - 32px))}.result-suit{font-size:76px;color:var(--accent);margin:0 0 14px;font-family:Georgia,serif}#result-dialog p{font-size:14px;line-height:1.8;color:var(--muted)}.result-scores{display:flex;justify-content:space-around;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin:24px 0;font-size:13px;color:var(--muted)}.result-scores strong{display:block;font-size:25px;color:var(--text);margin-bottom:7px}#view-table{margin:14px auto 0}.card.dealing{animation:deal .35s both}@keyframes deal{from{opacity:0;transform:translate(25px,-15px)}to{opacity:1;transform:translate(0,0)}}
@media(min-width:1550px){.layout{padding-top:48px}.felt{height:420px}.table-center{padding-top:30px}.table-cards{margin-top:22px}.table-footer{bottom:27px}}
@media(max-width:1150px){.layout{grid-template-columns:175px minmax(0,1fr);gap:28px;padding:30px 4% 24px}.intro h1{font-size:45px}.topbar{padding:0 4%}.opponents{padding:28px 25px}.card-count{margin-left:3px}.actions{gap:7px}.primary-button,.secondary-button{padding:12px 17px}.game-bottom>span:last-child{display:none}.hand .card{width:66px;flex-basis:66px;margin-right:calc((100% - 66px * var(--cards))/max(1, var(--cards) - 1))}.card{padding:6px}.card-corner{font-size:20px}.card-center{font-size:31px;right:6px}.table-footer{left:26px;right:26px}}
@media(max-width:900px){.sidebar{display:none}.layout{display:block;max-width:950px;padding:27px 4% 24px}.topbar{height:81px}.brand{font-size:21px}.brand-mark{font-size:37px}.top-meta{gap:18px}.felt{height:365px}.game-heading h2{font-size:18px}.hand .card{flex-basis:72px;width:72px;margin-right:calc((100% - 72px * var(--cards))/max(1, var(--cards) - 1))}}
@media(max-width:600px){.topbar{height:74px;padding:0 18px}.brand{font-size:19px;gap:9px}.brand-en{font-size:8px;letter-spacing:2px}.brand-mark{font-size:34px}.mode-chip{display:none}.top-meta{gap:16px}.icon-button span{display:none}.top-meta .plain-button{font-size:12px}.layout{padding:23px 14px 18px}.table-no{font-size:9px}.game-heading h2{font-size:17px}.game-heading h2 span{font-size:10px;margin-left:7px}.restart{font-size:12px;gap:4px}.game-heading{margin-bottom:16px}.felt{height:335px;border-radius:17px}.felt-ring{inset:10px}.opponents{padding:24px 19px}.opponent{gap:8px}.avatar{width:34px;height:34px;font-size:16px}.player-info strong{font-size:13px}.player-info strong span{display:none}.player-status{font-size:10px}.card-count{margin-left:0;gap:3px}.card-count b{font-size:16px}.card-count>span:last-child{display:none}.mini-card{width:15px;height:21px;font-size:11px;margin:0}.player.active .turn-dot{left:14px}.table-center{padding-top:18px}.table-cards{gap:5px;margin-top:16px;min-height:92px}.table-cards .card{width:47px;height:76px;flex-basis:47px;border-radius:6px;padding:5px}.table-cards .card-corner{font-size:17px}.table-cards .card-corner small{font-size:13px}.table-cards .card-center{font-size:22px;right:4px;bottom:13px}.table-cards .joker-label{font-size:11px;letter-spacing:1px}.card .as-label{font-size:8px;left:3px;right:3px;bottom:3px}.table-footer{left:20px;right:20px;bottom:20px;font-size:10px}.table-watermark{font-size:47px;top:137px}.turn-message{margin-top:12px;font-size:12px}.hand-panel{padding-top:21px}.hand-heading{margin-bottom:15px}.hand-tools{gap:12px}.hand-tools .plain-button{font-size:12px}.wild-legend{font-size:10px}.you .player-info strong{font-size:14px}.you .player-info>span{font-size:11px}.you .player-info strong span{font-size:11px;margin-left:8px}.hand{min-height:136px;padding-top:19px;padding-bottom:10px}.hand .card{width:57px;flex-basis:57px;height:98px;max-width:57px;margin-right:calc((100% - 57px * var(--cards))/max(1, var(--cards) - 1))}.hand .card-corner{font-size:20px}.hand .card-center{bottom:13px;font-size:29px}.hand .wild-star{right:4px;top:5px;font-size:11px}.hand .joker-label{font-size:12px;letter-spacing:1px}.action-bar{display:flex;flex-direction:column;gap:16px;align-items:stretch;padding-top:16px}.selection-info{font-size:13px;text-align:center;min-height:37px}.selection-info>span{font-size:10px}.actions{justify-content:center;gap:10px}.primary-button,.secondary-button{padding:12px 25px;min-height:47px}.game-bottom{justify-content:center;text-align:center;font-size:10px;line-height:1.7;margin-top:20px}.rule-list p{font-size:14px}dialog{padding:24px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.you .player-info strong span{display:inline}.hand .card{margin-right:max(-45px,calc((100% - 72px * var(--cards))/max(1, var(--cards) - 1)))}.hand .card:last-child{margin-right:0}@media(min-width:901px) and (max-width:1150px){.hand .card{margin-right:max(-39px,calc((100% - 66px * var(--cards))/max(1, var(--cards) - 1)))}}@media(max-width:600px){.hand .card{margin-right:max(-30px,calc((100% - 57px * var(--cards))/max(1, var(--cards) - 1)))}}