:root{color-scheme:light;--ink:#163d34;--green:#1e5d4b;--gold:#cda467;--paper:#f5f2e9;--line:#d8ded4;--muted:#6b7d72;font-family:system-ui,-apple-system,'Segoe UI','Microsoft YaHei',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 0%,#e1eadd 0,transparent 50%);min-height:100dvh}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{min-height:46px;border-radius:12px;border:1px solid transparent;cursor:pointer;padding:10px 18px;font-weight:650;touch-action:manipulation}button:disabled{opacity:.43;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #d19b3b;outline-offset:3px}.primary{background:var(--green);color:#fff}.primary:hover:enabled{background:#174c3c}.secondary{color:var(--green);background:#fffdf7;border-color:#ccd7cd}.text-button{background:transparent;color:inherit;padding:8px 10px;font-size:14px;min-width:44px}.wide{width:100%}input{width:100%;min-width:0;background:#fbfcf8;border:1px solid #cdd8cc;border-radius:10px;padding:13px 14px;color:var(--ink);font-size:16px}label{font-size:14px;font-weight:600}main{max-width:1100px;margin:auto;padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}.topbar{height:85px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:750;text-decoration:none;color:inherit}.brand-mark{display:grid;place-items:center;background:var(--ink);color:#f5e9cc;width:37px;height:37px;border-radius:11px;font-size:27px}.eyebrow{font-size:11px;letter-spacing:.13em;font-weight:700;color:var(--muted);margin:0 0 8px}.home{display:grid;grid-template-columns:1fr 380px;gap:40px 70px;align-items:center;padding:50px 20px 20px}.hero{position:relative}.hero h1{font-size:60px;line-height:1.16;font-weight:750;letter-spacing:-.04em;margin:25px 0 18px}.subtitle{color:var(--muted);font-size:17px}.hero-cards{display:flex;position:absolute;right:0;top:20px;transform:rotate(10deg)}.hero-cards span{width:55px;height:83px;background:#fffcf3;border:1px solid #dddbc9;box-shadow:0 4px 12px #213d3410;border-radius:7px;font-family:Georgia,serif;font-size:27px;padding:7px;display:flex;flex-direction:column}.hero-cards span:first-child{transform:rotate(-15deg);margin-right:-16px}.hero-cards span:nth-child(2){color:#b25042;transform:translateY(-10px);margin-right:-15px}.hero-cards span:last-child{transform:rotate(15deg)}.hero-cards small{font-size:28px;line-height:1}.home-panel{background:#ffffffbd;border:1px solid #e0e4d9;padding:28px;border-radius:22px;box-shadow:0 15px 50px #26463508;display:grid;gap:12px}.home-panel .primary{margin-top:5px;display:flex;justify-content:space-between;padding:15px 18px}.divider{display:flex;align-items:center;gap:10px;font-size:12px;color:#809084;margin:9px 0}.divider:before,.divider:after{content:'';height:1px;background:var(--line);flex:1}.join-row{display:flex;gap:10px}#joinCode{text-transform:uppercase;letter-spacing:.1em}.home footer{grid-column:1/-1;font-size:12px;color:#859084;border-top:1px solid var(--line);padding:24px 0;display:flex;justify-content:space-between;gap:12px}.notice{padding:13px 16px;background:#fff1d8;color:#83551b;border:1px solid #e9d1a8;border-radius:12px;font-size:14px}.room-bar{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:14px 0;font-size:13px}.room-bar strong{font:700 19px ui-monospace,monospace;letter-spacing:.1em}.room-bar>div{display:flex;align-items:center;gap:3px}.room-bar .eyebrow{margin:0 7px 0 0}.connection{color:var(--muted);font-size:12px}.connection.online:before{content:'● ';color:#4b936c}.lobby{max-width:740px;margin:25px auto;background:#ffffffa8;padding:30px;border-radius:22px;border:1px solid #dce3d6}.section-title{display:flex;justify-content:space-between;align-items:center;gap:15px}h2{font-size:22px;margin:0}h3{font-size:17px;margin:24px 0 9px}.seats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:30px 0}.seat{background:#f4f7ef;border:1px solid #dfe5d9;border-radius:16px;text-align:center;padding:24px 10px;min-width:0}.seat.empty{background:transparent;border-style:dashed;color:#8b978c}.avatar{font-size:22px;border-radius:16px;background:#e4ecde;width:55px;height:55px;display:grid;place-items:center;margin:0 auto 12px;font-weight:700}.seat strong{display:block;overflow-wrap:anywhere}.seat p{font-size:12px;color:var(--muted);margin:7px 0 0}.seat .prepared{color:#347a50}.seat .tag{font-size:10px;background:#e8dfc9;border-radius:5px;padding:2px 5px;margin-left:4px}.recorder-setting{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:15px}.recorder-setting p{font-size:13px;color:var(--muted);margin:7px 0 0}.switch{position:relative;width:52px;height:32px;flex-shrink:0}.switch input{opacity:0;position:absolute;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}.switch span{display:block;width:52px;height:32px;background:#bdc8bd;border-radius:20px;position:relative}.switch span:before{content:'';position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:white;transition:transform .15s}.switch input:checked+span{background:var(--green)}.switch input:checked+span:before{transform:translateX(20px)}.switch input:focus-visible+span{outline:3px solid var(--gold);outline-offset:3px}.lobby-actions{display:flex;justify-content:center;gap:12px;margin-top:26px}.lobby-actions button{min-width:130px}.muted{color:var(--muted);font-size:13px;line-height:1.6}.center{text-align:center}.table{background:radial-gradient(ellipse at 50% 10%,#215d4b,#10392f);border:1px solid #476e50;border-radius:22px;color:#f1f3e6;padding:20px 25px 24px;box-shadow:0 12px 30px #183c341c}.table-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#c4d6c0;font-size:12px}.bottom-cards{display:flex;gap:5px;min-height:37px}.mini-card{background:#fffcf2;color:#214535;border-radius:4px;padding:5px 8px;min-width:27px;display:inline-flex;flex-direction:column;align-items:center;font:700 16px Georgia,serif;box-shadow:0 2px 3px #0002}.mini-card.red,.card.red{color:#ba493e}.card-back{background:repeating-linear-gradient(45deg,#4f7c68,#4f7c68 2px,#3e6957 2px,#3e6957 5px);border:1px solid #70917c;color:transparent}.badge{font-size:11px;border:1px solid #638574;border-radius:6px;padding:5px 7px;white-space:nowrap}.opponents{display:flex;justify-content:space-between;gap:20px;margin-top:20px}.opponent{display:flex;flex-direction:column;gap:5px;max-width:43%;font-size:13px;overflow-wrap:anywhere}.opponent:last-child{text-align:right;align-items:flex-end}.opponent .role{color:#d7bc7b;font-size:11px}.opponent .remaining{font-size:12px;color:#bed3bb}.opponent .remaining.alert{color:#ffd185;font-weight:800}.opponent .small-play{display:flex;flex-wrap:wrap;gap:3px;justify-content:inherit;max-width:250px;font-size:11px;min-height:27px;color:#e3cf9b}.opponent .small-play .mini-card{font-size:12px;padding:3px 4px;min-width:20px}.active-player{color:#ffd78a}.table-center{min-height:147px;padding:7px 0 15px;text-align:center}.turn-message{display:flex;justify-content:center;align-items:center;gap:10px;min-height:32px}#phaseTitle{font-size:18px}#phaseHint{color:#bfcebb;font-size:12px;line-height:1.6;margin:7px 0}.timer{display:inline-grid;place-items:center;min-width:28px;height:28px;border:1px solid #8aab86;border-radius:50%;font-size:12px;color:#e8d39c}.timer.urgent{color:#ffbc8b;border-color:#dc9573}.last-play{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin:10px auto 0;max-width:620px;min-height:32px}.bids{font-size:12px;color:#d8cdac}.self-bar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:12px;margin:17px 0 16px;color:#c4d6bd}.self-bar strong{color:white;font-size:14px}.self-bar #handCount{margin-left:auto}.hand{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;padding-top:12px;max-width:760px;margin:auto}.card{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;position:relative;min-height:82px;min-width:0;width:100%;padding:6px 7px;background:linear-gradient(#fffef9,#f2eddb);border:1px solid #dedbc9;border-radius:7px;color:#163d34;box-shadow:0 3px 4px #0002;font:700 24px Georgia,'Times New Roman',serif;transition:transform .12s,border-color .12s}.card small{font-size:25px;line-height:1.1;font-weight:400}.card.joker{font-family:system-ui,sans-serif;font-size:15px}.card[aria-pressed=true]{transform:translateY(-10px);border:2px solid #e9ba60;background:#fff4cc;box-shadow:0 0 0 1px #e9ba60}.card:disabled{opacity:.7}.selection-hint{height:20px;text-align:center;font-size:12px;color:#c9d5bd;margin:14px 0 7px}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;min-height:47px}.actions button{min-width:90px}.table .primary{background:#e6c183;color:#29432d}.table .secondary{background:#ffffff0c;color:#e1e8d6;border-color:#7e9d85}.counter{border:1px solid #64826a;background:#0c2b2526;border-radius:10px;padding:9px 10px;margin:5px 0 0}.counter-title{display:flex;justify-content:space-between;font-size:11px;color:#d5dfca;margin-bottom:7px}.counter-title small{font-size:10px;color:#abc2a9;margin-left:5px}.counter-ranks{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));text-align:center;gap:2px}.counter-ranks span{font:700 12px ui-monospace,monospace;display:flex;flex-direction:column;gap:4px;color:#e5d7aa}.counter-ranks b{font:600 14px system-ui,sans-serif;color:#f5f6e9}.counter-ranks .zero{opacity:.35}.result{max-width:390px;margin:10px auto;background:#123b2e;border:1px solid #8e9866;padding:15px;border-radius:12px}.result h3{margin:0 0 8px;color:#f1d39b}.result p{display:flex;justify-content:space-between;margin:8px 0;font-size:13px}.result small{color:#c7d1b9}.result .negative{color:#f0b8a7}.result .positive{color:#dfc383}dialog{max-width:640px;width:calc(100% - 28px);max-height:86dvh;border:1px solid #cbd6c5;border-radius:20px;background:#faf9f2;color:var(--ink);padding:22px}dialog::backdrop{background:#0e2b26a6;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.rule-copy{font-size:14px;line-height:1.85}.rule-copy p{margin:10px 0}.rule-copy a{color:var(--green)}[hidden]{display:none!important}
.join-row .secondary{flex:0 0 76px;white-space:nowrap}
@media(max-width:700px){main{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}.topbar{height:67px}.home{grid-template-columns:1fr;padding:30px 7px 0;gap:18px}.hero h1{font-size:42px;margin:17px 0 11px}.hero-cards{right:12px;top:34px}.hero-cards span{width:48px;height:73px;font-size:25px}.subtitle{font-size:14px;margin-bottom:7px}.home-panel{padding:23px}.home footer{padding-top:18px;font-size:10px;line-height:1.7}.lobby{margin:12px 0;padding:22px 17px}.section-title{align-items:flex-start}.section-title h2{font-size:19px;line-height:1.4}.section-title button{font-size:13px;padding:9px 10px;white-space:nowrap}.seats{gap:7px;margin:24px 0}.seat{padding:20px 5px}.seat strong{font-size:13px}.avatar{width:45px;height:45px;font-size:18px}.room-bar{flex-wrap:wrap;row-gap:1px;padding:8px 0}.room-bar .text-button{font-size:12px;padding:6px 8px}.room-bar strong{font-size:17px}.room-bar>div:first-child{flex:1}.table{padding:15px 12px 18px;border-radius:16px}.table-heading{font-size:10px}.table-heading .badge{font-size:9px;padding:5px}.bottom-cards{gap:3px}.bottom-cards .mini-card{padding:4px 6px;font-size:13px;min-width:24px}.opponents{margin-top:15px}.opponent{font-size:12px}.table-center{min-height:135px}#phaseTitle{font-size:16px}.hand{gap:3px}.card{min-height:67px;padding:5px 3px;font-size:19px;border-radius:5px}.card small{font-size:22px}.card.joker{font-size:11px;padding:5px 2px}.counter{padding:8px 6px}.counter-ranks span{font-size:10px}.counter-ranks b{font-size:12px}.counter-ranks span:nth-last-child(-n+2){font-size:9px}.actions{gap:8px}.actions button{min-width:74px;padding:10px 13px}.self-bar{margin:12px 0}.recorder-setting p{font-size:12px}}@media(min-width:900px){.hand{grid-template-columns:repeat(10,minmax(0,1fr));max-width:720px}.table-center{min-height:160px}}@media(max-height:480px) and (min-width:600px){.topbar{height:50px}.room-bar{padding:0}.table{padding:10px 18px}.opponents{margin-top:0}.table-center{min-height:80px;padding:0}.hand{grid-template-columns:repeat(20,minmax(0,1fr));max-width:none}.card{min-height:62px;font-size:17px;padding:4px}.card small{font-size:20px}.self-bar{margin:6px 0}.selection-hint{margin:4px 0}.counter{margin:0}.home{padding-top:20px}.hero h1{font-size:40px}}

pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.7}details{margin:18px 0;padding:16px;background:#fffdf7;border:1px solid var(--line);border-radius:12px}summary{cursor:pointer;font-weight:600}