.hand-help{text-align:center;color:var(--muted);font-size:12px;margin:0 0 12px}:root{color-scheme:dark;--bg:#0b1117;--panel:#121c25;--mint:#22d3a6;--text:#edf7f4;--muted:#a5b8b5;--line:#2b3a45}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 30%,#12292a,var(--bg) 70%);color:var(--text);font:16px/1.55 system-ui,-apple-system,"Microsoft YaHei",sans-serif}#app{max-width:1100px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;align-items:center;gap:20px}h1{font-size:clamp(30px,5vw,46px);letter-spacing:.12em;margin:0 0 16px}h2{font-size:17px;margin:0}.eyebrow,.back{color:#8af0d1;font-size:13px}.eyebrow{margin:12px 0 4px}.back{text-decoration:none}.muted{color:var(--muted)}button,summary,a{touch-action:manipulation}button{font:inherit;min-height:44px;border:1px solid var(--mint);border-radius:10px;background:var(--mint);color:#06251d;font-weight:700;padding:10px 22px;cursor:pointer}button.quiet{background:var(--panel);color:var(--text);border-color:#48615e}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #ffd27a;outline-offset:4px}button:hover:not(:disabled){filter:brightness(1.1)}[hidden]{display:none!important}.scorebar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 20px;margin-bottom:18px;font-size:14px}.scorebar b{color:#8af0d1}.bottom-wrap{display:flex;gap:12px;align-items:center;margin-left:auto}#bottom{display:flex;gap:5px}.table{position:relative;padding:22px;border:1px solid #335951;border-radius:28px;background:radial-gradient(ellipse at center,#164b3e,#102e2a 75%);box-shadow:0 24px 70px #0005;overflow:hidden}.opponents{display:grid;grid-template-columns:1fr 1fr;gap:30px}.opponent{display:grid;grid-template-columns:44px 1fr;gap:8px 12px;align-items:center;background:#0b191bd9;border:1px solid #37524c;border-radius:16px;padding:14px;transition:border-color .2s}.opponent.active{border-color:var(--mint);box-shadow:0 0 0 2px #22d3a62a}.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#253f38;font-size:26px;color:#8af0d1}.opponent-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px}.identity{font-size:12px;color:#ffd27a;margin-left:8px}.recent{grid-column:1/-1;min-height:42px;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:3px;flex-wrap:wrap}.trick{min-height:222px;text-align:center;padding:18px 0}.stage{display:inline-block;color:#8af0d1;font-size:12px;letter-spacing:.15em;margin:0;border:1px solid #588074;padding:3px 12px;border-radius:20px}#status{font-size:17px;margin:10px 0}#played{min-height:76px;display:flex;justify-content:center;gap:4px;flex-wrap:wrap}.card{width:66px;height:92px;border-radius:9px;background:#f4f6ed;color:#14232c;box-shadow:0 3px 8px #0003;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:7px 8px;font-size:21px;font-weight:750;line-height:1.1;border:1px solid #c9d4c9}.card.red{color:#bd334c}.card small{font-size:17px;align-self:flex-end}.card.joker{font-size:17px}.card.back{background:repeating-linear-gradient(45deg,#234c42,#234c42 5px,#2e6355 5px,#2e6355 10px);border-color:#75aa92;width:28px;height:38px}#bottom .card,.recent .card{width:30px;height:42px;font-size:13px;padding:3px;border-radius:4px}.recent .card small,#bottom .card small{font-size:11px}.player-heading{display:flex;align-items:center;gap:16px;border-top:1px solid #67918055;padding-top:14px;font-size:13px}.player-heading h2{white-space:nowrap}.player-heading #selection{margin-left:auto}.hand-scroll{overflow-x:auto;overflow-y:hidden;padding:0 8px;scrollbar-color:#619580 transparent}.hand{position:relative;height:166px;margin:auto;min-width:280px}.hand .card{position:absolute;top:38px;min-height:106px;width:70px;height:106px;padding:9px 6px;transform-origin:50% 140%;transform:translateY(var(--arc)) rotate(var(--angle));transition:transform .15s ease,box-shadow .15s;cursor:pointer;text-align:left}.hand .card[aria-pressed=true]{transform:translateY(calc(var(--arc) - 22px)) rotate(var(--angle));border:3px solid var(--mint);box-shadow:0 0 0 2px #0b3024,0 8px 18px #0004}.hand .card:focus-visible{outline:3px solid #ffd27a;outline-offset:1px;z-index:50!important}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:8px}.feedback{text-align:center;color:#ffd27a;font-size:14px;min-height:22px;margin:10px 0 0}.result{margin:0 auto 20px;max-width:540px;text-align:center;background:#0b191b;border:1px solid #8af0d1;border-radius:18px;padding:22px;animation:arrive .25s ease}.result h2{font-size:25px;color:#8af0d1}.result #scores{display:flex;justify-content:center;gap:18px;margin:16px}.result #scores span{display:block;color:#ffd27a;font-size:22px}.rules{margin:22px auto;color:var(--muted);font-size:14px}.rules summary{color:#8af0d1;cursor:pointer;min-height:44px;padding:10px 0}.rules p{max-width:850px}#played .card{animation:arrive .2s ease}@keyframes arrive{from{opacity:.2;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){#app{padding:12px}header{gap:10px}header button{font-size:13px;padding:10px 12px}.scorebar{gap:8px 14px;padding:10px 12px;font-size:12px}.bottom-wrap{margin-left:0}.table{padding:12px 8px;border-radius:20px}.opponents{gap:8px}.opponent{padding:8px;grid-template-columns:28px 1fr;gap:6px}.avatar{width:28px;height:28px;font-size:18px}.opponent h2{font-size:14px}.opponent-head{font-size:12px}.identity{font-size:10px;margin-left:3px}.trick{min-height:220px}#status{font-size:14px}.card{width:45px;height:65px;padding:5px;font-size:17px}.card small{font-size:14px}.player-heading{gap:8px;font-size:12px;flex-wrap:wrap}.player-heading #selection{width:100%;margin-left:0;text-align:center}.actions{gap:8px}.actions button{padding:10px 18px}.hand .card{width:62px;height:100px;font-size:19px}.hand{height:164px}.result{padding:16px 8px}.result #scores{gap:12px}.recent{min-height:48px}.recent .card{width:24px;height:34px;font-size:11px;padding:2px}.recent .card small{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}