:root{color-scheme:dark;font-family:Inter,Microsoft YaHei,system-ui,sans-serif;background:#101010;color:#f7f1df}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#101010}button,select,input{font:inherit}button{transition:transform .1s ease-out,filter .14s ease,box-shadow .14s ease,border-color .14s ease}button:not(.hand-card):not(:disabled):active{transform:scale(.93);transition-duration:80ms}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #22d3ee;outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.45}input{min-height:44px;border:1px solid #4a453e;background:#111;color:#f7f1df;padding:0 12px}.lobby-shell{display:grid;place-items:center;min-height:100vh;padding:18px;background:linear-gradient(#0c0c0c9e,#0c0c0cc7),radial-gradient(circle at 50% 16%,#394b4b,transparent 36%),linear-gradient(180deg,#22221f,#0f0f0f)}.lobby-card{width:min(440px,100%);border:1px solid #3e3931;background:#161616f0;box-shadow:0 22px 60px #0000006b}.lobby-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px;border-bottom:1px solid #34302a}.lobby-head span,.invite-panel span{display:block;color:#f7bd39;font-size:12px}.lobby-head h1{margin:4px 0 0;font-size:24px;letter-spacing:0}.join-panel,.player-list,.lobby-actions,.invite-panel{margin:14px}.join-panel{display:grid;gap:12px}.join-panel label{display:grid;gap:7px;color:#d3ccbd;font-size:13px}.join-row{display:grid;grid-template-columns:1fr 86px;gap:10px}.join-row button,.invite-panel button,.lobby-actions button,.wide{min-height:46px;border:0;color:#fff;background:#44423d;cursor:pointer}.wide{width:100%}.invite-panel{display:grid;grid-template-columns:1fr 78px;gap:10px;align-items:center;padding:12px;background:#24231f;border:1px solid #3c372f}.invite-panel strong{display:block;overflow:hidden;margin-top:4px;color:#f4efe3;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.player-list{display:grid;gap:8px}.lobby-player{display:grid;grid-template-columns:34px 1fr 16px;gap:10px;align-items:center;min-height:58px;padding:10px;background:#1b1b1b;border:1px solid #34302a}.lobby-player strong,.lobby-player span{display:block}.lobby-player span{color:#c8c0aa;font-size:12px}.lobby-player i{width:12px;height:12px;border:1px solid #6f6658;background:#37322b}.lobby-player i.ready{border-color:#8cffc1;background:#2e9d69}.lobby-actions{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:10px}.status-text{min-height:20px;margin:0 14px 14px;color:#ffd45f;font-size:13px}.app-shell{display:grid;grid-template-columns:minmax(320px,430px);justify-content:center;min-height:100vh;padding:0;background:#151515}.table-surface{position:relative;display:grid;grid-template-rows:auto 1fr;overflow:hidden;width:min(430px,100vw);min-height:100vh;border:0;background:radial-gradient(circle at 50% 12%,rgba(255,255,255,.12),transparent 34%),linear-gradient(180deg,#d8d7d2,#bcbab4 58%,#77756f)}.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;z-index:20;margin:38px auto 0;width:min(76%,340px);min-height:52px;padding:7px 10px;border:2px solid #d99c18;background:#432d06eb;box-shadow:4px 4px #00000052}.topbar strong,.topbar span{display:block}.eyebrow{color:#ffd45f;font-size:11px}.backend-pill{padding:5px 8px;background:#e44a3d;color:#fff;font-size:12px;white-space:nowrap}.backend-pill.online{background:#2e9d69}.opponents{position:absolute;top:100px;left:50%;z-index:12;display:flex;gap:6px;width:min(76%,340px);overflow:hidden;transform:translate(-50%);pointer-events:none}.player-seat{display:flex;align-items:center;flex:1 1 0;min-width:0;gap:5px;padding:4px 5px;border:1px solid rgba(255,255,255,.18);background:#13141557;opacity:.78}.player-seat strong{display:block;overflow:hidden;max-width:74px;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.player-seat span{display:block;color:#c8c0aa;font-size:9px;white-space:nowrap}.avatar{display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;background:#21252a;border:1px solid #6d6147;font-size:11px}.center-lane{position:relative;display:grid;place-content:center;gap:16px;min-height:0;padding:108px 0 260px;border:2px dashed transparent;transition:border-color .14s ease,background .14s ease}.center-lane.drop-ready{border-color:transparent;background:radial-gradient(circle at 50% 52%,rgba(255,210,74,.14),transparent 26%)}.drag-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;pointer-events:none}.drag-trajectory{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible}.drag-trajectory path{fill:none;stroke:#ffd24ae6;stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(255,210,74,.48))}.drag-trajectory circle{fill:#ffd24a1f;stroke:#ffd24ae0;stroke-width:2;filter:drop-shadow(0 0 12px rgba(255,210,74,.42))}.drag-card-preview{position:fixed;display:grid;align-content:space-between;width:62px;height:96px;padding:8px;border:2px solid #ffd24a;box-shadow:0 18px 30px #00000059,0 0 18px #ffd24a5c;transform:translate(-50%,-50%) rotate(-6deg)}.drag-card-preview span{color:#f8d86a;font-size:12px}.drag-card-preview strong{color:#fff8dc;font-size:24px;line-height:1.05;overflow-wrap:anywhere}.drag-card-preview.red{background:linear-gradient(145deg,#7a2628,#241d1d)}.drag-card-preview.blue{background:linear-gradient(145deg,#294f94,#1c2230)}.drag-card-preview.green{background:linear-gradient(145deg,#34764d,#1e2a20)}.drag-card-preview.yellow{background:linear-gradient(145deg,#8c752a,#2c2619)}.drag-card-preview.wild{background:linear-gradient(145deg,#22242a,#050607 68%)}.drag-card-preview.jinnang{background:linear-gradient(145deg,#473126,#161413 68%)}.drag-aim{position:absolute;left:50%;bottom:86px;z-index:28;width:4px;height:180px;transform:translate(-50%) rotate(-7deg);transform-origin:bottom center;pointer-events:none}.drag-aim:before{content:"";position:absolute;left:50%;bottom:0;width:3px;height:150px;transform:translate(-50%);background:linear-gradient(0deg,#ffd24a00,#ffd24af2);box-shadow:0 0 14px #ffd24a85}.drag-aim:after{content:"";position:absolute;left:50%;top:12px;width:18px;height:18px;border-top:4px solid rgba(255,210,74,.95);border-right:4px solid rgba(255,210,74,.95);transform:translate(-50%) rotate(-45deg)}.drag-aim span{position:absolute;left:50%;top:-10px;width:82px;height:42px;border:2px solid rgba(255,210,74,.84);border-radius:50%;transform:translate(-50%) rotate(7deg);box-shadow:0 0 18px #ffd24a57,inset 0 0 12px #ffd24a2e;animation:drop-target-pulse .76s ease-in-out infinite alternate}.table-perspective{position:relative;width:230px;height:200px;perspective:540px;transform-style:preserve-3d;isolation:isolate}.table-empty-target{position:absolute;left:50%;top:50%;width:96px;height:52px;border:1px dashed rgba(95,86,69,.24);border-radius:50%;transform:translate(-50%,-50%) rotate(-8deg)}.discard-card{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:58px;height:82px;border:2px solid #241f1a;background:linear-gradient(145deg,#501b1c,#1c1d21 62%);box-shadow:0 10px 18px #00000052}.discard-card.empty{transform:translate(-50%,-50%) rotateX(12deg) rotate(-8deg)}.table-card{z-index:var(--pile-z);transform:translate(-50%,-50%) translate3d(var(--pile-x),var(--pile-y),var(--pile-depth)) rotateX(58deg) rotateY(-6deg) rotate(var(--pile-r)) scale(var(--pile-scale));transform-origin:50% 50%;animation:table-card-drop .26s cubic-bezier(.2,.9,.25,1.12) both}.table-card.current{border-color:#ffd24a;box-shadow:0 10px 18px #00000052,0 0 16px #ffd24a9e,0 0 2px 2px #ffd24a94}.table-card.current:after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border:2px solid rgba(255,210,74,.92);border-radius:2px;pointer-events:none;box-shadow:0 0 18px #ffd24a9e;animation:table-current-pulse .9s ease-in-out infinite alternate}.table-card.red{background:linear-gradient(145deg,#772528,#241d1d 64%)}.table-card.blue{background:linear-gradient(145deg,#244a8a,#1c2230 64%)}.table-card.green{background:linear-gradient(145deg,#307047,#1e2a20 64%)}.table-card.yellow{background:linear-gradient(145deg,#826c25,#2c2619 64%)}.table-card.wild{background:linear-gradient(145deg,#24262c,#050607 68%)}.table-card.jinnang{background:linear-gradient(145deg,#4a3529,#171413 68%)}.discard-card span,.phase-panel span{color:#d7c6a1;font-size:9px}.discard-card strong{max-width:50px;color:#fff8dc;font-size:13px;line-height:1.05;text-align:center;overflow-wrap:anywhere}.phase-panel{display:flex;align-items:center;gap:10px;padding:8px;background:#0006}.phase-panel select{border:1px solid #575148;background:#191919;color:#fff;padding:6px}.response-bar{position:absolute;left:12px;right:12px;bottom:calc(142px + env(safe-area-inset-bottom));z-index:42;display:grid;grid-template-columns:1fr minmax(48px,auto) minmax(56px,auto);gap:6px;align-items:center;padding:7px;border:1px solid #f2b937;background:#9a5c12f5;box-shadow:0 6px 16px #00000059}.response-bar strong,.response-bar span{display:block;color:#fff3c2;font-size:11px;line-height:1.2}.response-bar button{min-height:34px;border:1px solid #5a4318;background:#3b3327;color:#fff4ce}.response-bar button:disabled{opacity:.45}.timer-track{height:9px;margin-top:5px;border:1px solid #f6d68c;background:#332618}.timer-track i{display:block;width:68%;height:100%;background:#ffd44c}.log-panel{position:absolute;left:50%;bottom:152px;z-index:14;width:min(70%,300px);max-height:54px;overflow:hidden;padding:5px 7px;transform:translate(-50%);background:#0c0c0c2e;pointer-events:none}.log-panel p{margin:2px 0;color:#eee3c37a;font-size:10px}.log-panel span{margin-right:7px;color:#f7bd39}.target-panel{position:absolute;left:50%;bottom:248px;z-index:24;width:min(76%,320px);padding:7px;transform:translate(-50%);border:1px solid rgba(255,210,74,.78);background:#181612d6;box-shadow:0 10px 22px #00000052}.target-panel>span{display:block;margin-bottom:6px;color:#ffd45f;font-size:12px;font-weight:700}.target-panel>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.target-panel button{min-height:36px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#464137f0;color:#fff6d4;cursor:pointer;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.target-panel button.selected{border-color:#ffd24a;background:#8a641a;box-shadow:0 0 12px #ffd24a61}.hand-dock{position:fixed;left:50%;bottom:0;z-index:30;display:grid;grid-template-rows:130px 42px 64px;width:min(430px,100vw);min-height:236px;padding:0 6px calc(6px + env(safe-area-inset-bottom));transform:translate(-50%);background:linear-gradient(180deg,transparent 0 126px,rgba(35,35,35,.96) 126px);border:0}.hand-dock>.status-text{position:absolute;left:8px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:4;width:min(66%,280px);min-height:0;margin:0;padding:3px 5px;background:#16161694;font-size:11px;pointer-events:none}.jinnang-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(56px,72px);align-self:end;justify-self:start;max-width:calc(100% - 224px);gap:4px;overflow-x:auto;order:2;padding:0 0 4px;scrollbar-width:none}.jinnang-strip::-webkit-scrollbar{display:none}.jinnang-card,.hand-card,.bottom-actions button{border:1px solid transparent;color:#fff;cursor:pointer}.jinnang-card,.hand-card{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.jinnang-card{position:relative;min-height:34px;padding:4px;background:#3b3b37;font-size:11px}.jinnang-card.playable{border-color:#20a3fff2;box-shadow:inset 0 0 0 1px #20a3ffe6,0 0 10px #20a3ff61}.jinnang-card.selected{border-color:#ffd24a;background:#6a4d16;box-shadow:inset 0 0 0 1px #ffd84af5,0 0 16px #ffd84a73;animation:selected-pulse .76s ease-in-out infinite alternate}.hand-row{display:flex;justify-content:center;align-items:flex-end;order:1;min-height:130px;padding:0 0 2px}.hand-card{position:relative;display:grid;align-content:space-between;width:clamp(58px,16vw,72px);height:clamp(94px,28vw,118px);margin-left:clamp(-22px,-4.5vw,-14px);padding:8px;border:2px solid #101010;background:#303030;transform:rotate(var(--tilt, 0deg));transition:transform .14s ease,margin .14s ease,border-color .14s ease;box-shadow:0 12px 16px #00000040}.hand-card:before,.hand-card:after{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;pointer-events:none;opacity:0}.hand-card:before{border:2px solid rgba(32,163,255,.95);box-shadow:0 0 14px #20a3ff99}.hand-card:after{border:2px solid rgba(255,216,74,.98);box-shadow:0 0 18px #ffd84aad}.hand-card:first-child{margin-left:0}.hand-card:hover,.hand-card.selected{z-index:3;transform:translateY(-16px) scale(1.045)}.hand-card.playable:before{opacity:1}.hand-card.selected:before{opacity:0}.hand-card.selected:after{opacity:1;animation:selected-pulse .76s ease-in-out infinite alternate}.hand-card:not(.playable):not(.selected){filter:saturate(.82) brightness(.86)}.hand-card.red{background:linear-gradient(145deg,#7a2628,#241d1d)}.hand-card.blue{background:linear-gradient(145deg,#294f94,#1c2230)}.hand-card.green{background:linear-gradient(145deg,#34764d,#1e2a20)}.hand-card.yellow{background:linear-gradient(145deg,#8c752a,#2c2619)}.hand-card.wild{background:linear-gradient(145deg,#4c3b77,#1b1b1f)}.hand-card span{color:#f8d86a;font-size:12px}.hand-card strong{font-size:24px}.bottom-actions{order:3;display:grid;grid-template-columns:minmax(38px,.55fr) minmax(38px,.55fr) auto auto minmax(64px,1fr) minmax(58px,.85fr) minmax(78px,1.1fr);gap:5px;align-items:center;min-height:64px;padding:6px 0 0}.bottom-actions button{min-height:48px;padding:0 6px;font-size:13px}.bottom-actions button:not(:disabled):hover,.join-row button:not(:disabled):hover,.invite-panel button:not(:disabled):hover,.lobby-actions button:not(:disabled):hover,.wide:not(:disabled):hover{filter:brightness(1.12)}.secondary{background:#44423d}.primary{background:#f28a23}.sort-button{background:#343434;color:#f4efe3!important;font-size:11px!important}.pass{background:#f7d94c;color:#141414!important;font-weight:700}.prompt{animation:action-prompt .84s ease-in-out infinite alternate}@keyframes selected-pulse{0%{transform:scale(1);opacity:.78}to{transform:scale(1.035);opacity:1}}@keyframes action-prompt{0%{box-shadow:0 0 #ffd84a00;transform:scale(1)}to{box-shadow:0 0 18px #ffd84a7a;transform:scale(1.055)}}@keyframes drop-target-pulse{0%{opacity:.62;transform:translate(-50%) rotate(7deg) scale(.94)}to{opacity:1;transform:translate(-50%) rotate(7deg) scale(1.05)}}@keyframes table-card-drop{0%{opacity:0;transform:translate(-50%,-50%) translate3d(calc(var(--pile-x) - 18px),calc(var(--pile-y) + 140px),calc(var(--pile-depth) + 42px)) rotateX(38deg) rotateY(-6deg) rotate(calc(var(--pile-r) - 18deg)) scale(1.18)}to{opacity:1;transform:translate(-50%,-50%) translate3d(var(--pile-x),var(--pile-y),var(--pile-depth)) rotateX(58deg) rotateY(-6deg) rotate(var(--pile-r)) scale(var(--pile-scale))}}@keyframes table-current-pulse{0%{opacity:.55;transform:scale(.96)}to{opacity:1;transform:scale(1.08)}}.deck-count{display:flex;align-items:center;gap:5px;min-width:34px;color:#f4efe3;font-size:11px}.deck-count i{width:12px;height:12px;flex:0 0 12px}.uno-dot{background:#1d2638}.jn-dot{background:#d88cb5}.side-panel{display:none}.side-panel h2{margin:0 0 10px;font-size:16px}.side-panel h2:not(:first-child){margin-top:20px}.side-panel ul{margin:0;padding-left:18px}.side-panel li,.side-panel dd,.side-panel p{color:#d3ccbd;line-height:1.45}.side-panel dl,.side-panel dd{margin:0}.side-panel div+div{margin-top:10px}.side-panel dt{color:#ffd45f;font-weight:700}@media(max-width:820px){.app-shell{display:block;padding:0}.table-surface{min-height:100vh;border:0}.hand-dock{left:0;right:0;bottom:0;width:100%;transform:none;border-left:0;border-right:0}.side-panel{display:none}.log-panel{margin-bottom:150px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}