:root{--tile-black: #2b2b2b;--tile-red: #b5302a;--tile-blue: #1f6dad;--tile-orange: #d7861a;--tile-face: linear-gradient(160deg, #fbf4e2 0%, #f3e7c9 55%, #e7d5ab 100%);--tile-face-flat: #f6ecd4;--wood-dark: #3a2113;--wood: #5a341c;--wood-light: #7a4a28;--felt: radial-gradient(circle at 50% 30%, #2f6b46 0%, #1f4d31 70%, #173b25 100%);--tile-w: clamp(34px, 7.4vw, 50px);--tile-h: calc(var(--tile-w) * 1.36);--gap: clamp(2px, .6vw, 5px);--ui-accent: #e0b15a}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{font-family:Segoe UI,PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:#f3e8d2;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}.app{height:100%;background:repeating-linear-gradient(91deg,#0000000f 0,#0000000f 6px,#ffffff06 6px,#ffffff06 13px),linear-gradient(160deg,var(--wood-light),var(--wood) 45%,var(--wood-dark));display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:12px;padding:8px 14px;background:linear-gradient(180deg,#00000052,#00000014);border-bottom:2px solid rgba(0,0,0,.35);flex-wrap:wrap}.topbar .title{font-weight:800;letter-spacing:1px;color:var(--ui-accent);font-size:15px}.topbar .spacer{flex:1}.pill{background:#00000047;border:1px solid rgba(255,255,255,.12);padding:3px 10px;border-radius:999px;font-size:12.5px;color:#f0e4cb}.pill b{color:var(--ui-accent)}.opponents{display:flex;gap:10px;padding:8px 14px;overflow-x:auto}.opp{min-width:92px;background:#00000038;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:7px 10px;display:flex;flex-direction:column;gap:3px;transition:box-shadow .2s,border-color .2s}.opp.active{border-color:var(--ui-accent);box-shadow:0 0 0 2px #e0b15a73,0 0 16px #e0b15a59}.opp .name{font-weight:700;font-size:13px;display:flex;align-items:center;gap:5px}.opp .meta{font-size:11.5px;opacity:.85;display:flex;justify-content:space-between}.opp .tilecount{display:inline-flex;align-items:center;gap:4px}.opp .think{color:var(--ui-accent);font-size:11px;animation:blink 1s infinite}@keyframes blink{50%{opacity:.35}}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.table-wrap{flex:1;padding:10px 14px;overflow:auto}.table{min-height:100%;background:var(--felt);border:6px solid var(--wood-dark);border-radius:16px;box-shadow:inset 0 0 40px #00000080;padding:14px;display:flex;flex-wrap:wrap;gap:14px;align-content:flex-start}.table.empty-hint:after{content:"把组合拖到这里 · 桌面空空如也";opacity:.5;font-size:14px;margin:auto}.group{display:flex;gap:var(--gap);padding:7px 8px;background:#00000029;border:1px dashed rgba(255,255,255,.18);border-radius:10px;align-items:center;transition:border-color .15s,background .15s}.group.valid{border-style:solid;border-color:#78dc968c;background:#285a3740}.group.invalid{border-color:#e6786ecc;background:#78282340}.group.can-drop{border-color:#ffd873;background:#785f1e66;cursor:pointer;box-shadow:0 0 0 2px #ffd87399,0 0 18px #ffc85a73;animation:dropglow 1.1s ease-in-out infinite}@keyframes dropglow{50%{box-shadow:0 0 0 2px #ffd873e6,0 0 26px #ffc85ab3}}.group.suggest-target{border-color:#5ec8ff!important;background:#1e5a7866;box-shadow:0 0 0 2px #5ec8ffb3,0 0 22px #5ec8ff99;animation:suggestpulse 1s ease-in-out infinite}.newgroup-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:calc(var(--tile-w) * 2.4);min-height:calc(var(--tile-h) + 14px);border:2px dashed rgba(255,255,255,.32);border-radius:10px;color:#ffffffa6;font-weight:700;font-size:13px;cursor:pointer;padding:6px}.newgroup-slot small{font-size:11px;opacity:.7;font-weight:400}.newgroup-slot.active{border-color:#ffd873;color:#ffe9b8;background:#785f1e59;box-shadow:0 0 0 2px #ffd87399,0 0 18px #ffc85a73;animation:dropglow 1.1s ease-in-out infinite}.group .badge{position:absolute;top:-9px;left:8px;font-size:10px;padding:0 6px;border-radius:6px;background:#0000008c;color:var(--ui-accent)}.group{position:relative}.tile{width:var(--tile-w);height:var(--tile-h);background:var(--tile-face);border-radius:7px;box-shadow:0 2px #b59b6b,0 4px 6px #0006,inset 0 1px 2px #ffffffb3;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;position:relative;cursor:grab;flex:none;transition:transform .08s}.tile:active{cursor:grabbing}.tile .num{font-size:calc(var(--tile-w) * .56);line-height:1}.tile .dot{width:6px;height:6px;border-radius:50%;margin-top:3px;background:currentColor;opacity:.85}.tile.black{color:var(--tile-black)}.tile.red{color:var(--tile-red)}.tile.blue{color:var(--tile-blue)}.tile.orange{color:var(--tile-orange)}.tile.joker{color:var(--tile-red)}.tile.joker .num{font-size:calc(var(--tile-w) * .46)}.tile.joker:after{content:"★";position:absolute;bottom:3px;font-size:11px;opacity:.8}.tile.selected{outline:3px solid var(--ui-accent);transform:translateY(-6px);box-shadow:0 8px 16px #00000080,0 0 14px #e0b15ab3;z-index:3}.tile.dragging-src{opacity:.28}.tile.fresh{box-shadow:0 2px #b59b6b,0 0 0 2px #ffcf6b,0 0 14px #ffc45acc,inset 0 1px 2px #ffffffb3;animation:freshpop .28s ease}@keyframes freshpop{0%{transform:scale(.7)}to{transform:scale(1)}}.tile .fresh-tag{position:absolute;top:-7px;right:-6px;background:#e0902a;color:#fff;font-size:9px;font-weight:800;padding:1px 4px;border-radius:6px;line-height:1.2;box-shadow:0 1px 3px #0006;z-index:4}.tile.suggested{box-shadow:0 2px #b59b6b,0 0 0 2px #5ec8ff,0 0 16px #5ec8ffd9,inset 0 1px 2px #ffffffb3;animation:suggestpulse 1s ease-in-out infinite}@keyframes suggestpulse{50%{box-shadow:0 2px #b59b6b,0 0 0 3px #8fe0ff,0 0 24px #5ec8ff,inset 0 1px 2px #ffffffb3}}.tile.dragclone{position:fixed;z-index:1000;pointer-events:none;transform:scale(1.08) rotate(-3deg);box-shadow:0 10px 22px #0000008c}.rack-area{padding:8px 14px 12px}.rack{background:repeating-linear-gradient(90deg,#0000000d 0,#0000000d 5px,#ffffff08 5px,#ffffff08 11px),linear-gradient(180deg,var(--wood-light),var(--wood-dark));border:4px solid var(--wood-dark);border-radius:14px;box-shadow:inset 0 6px 14px #00000073,0 4px 10px #0006;padding:12px 12px 14px;display:flex;flex-wrap:wrap;gap:var(--gap);min-height:calc(var(--tile-h) + 24px);align-content:flex-start}.rack.locked{opacity:.7;filter:saturate(.55) brightness(.9)}.rack-area.your-turn .rack{border-color:var(--ui-accent);box-shadow:inset 0 6px 14px #00000073,0 0 0 2px #e0b15a8c,0 0 22px #e0b15a66;animation:turnpulse 1.6s ease-in-out infinite}@keyframes turnpulse{50%{box-shadow:inset 0 6px 14px #00000073,0 0 0 2px #e0b15ad9,0 0 30px #e0b15a99}}.hintline{margin-top:8px;font-size:12px;opacity:.72}.hintline b{color:var(--ui-accent)}.suggest-bar{display:flex;align-items:center;gap:10px;margin-top:8px;background:#143c558c;border:1px solid rgba(94,200,255,.5);border-radius:10px;padding:8px 12px;font-size:13px;color:#d6f1ff}.suggest-bar span{flex:1}.suggest-bar .sb-close{border:none;background:#ffffff26;color:#fff;width:22px;height:22px;border-radius:6px;cursor:pointer;font-size:12px;line-height:1}.turn-banner{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1150}.turn-banner .tb-inner{font-size:clamp(28px,7vw,52px);font-weight:900;letter-spacing:6px;color:#fff5dc;padding:14px 42px;border-radius:16px;background:linear-gradient(180deg,#d8a94ef5,#966428f5);border:2px solid #ffe9b8;box-shadow:0 12px 40px #0000008c,0 0 40px #e0b15a99;text-shadow:0 2px 6px rgba(0,0,0,.4);animation:bannerIn .35s cubic-bezier(.2,1.4,.4,1) both,bannerOut .4s ease 1.3s both}@keyframes bannerIn{0%{transform:scale(.6) translateY(-14px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@keyframes bannerOut{to{opacity:0;transform:scale(1.05)}}.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}.btn{border:none;border-radius:10px;padding:9px 16px;font-weight:700;font-size:14px;cursor:pointer;color:#2a1a0c;background:linear-gradient(180deg,#f0d292,#d8a94e);box-shadow:0 3px #a87c2c,0 4px 8px #00000059;transition:transform .06s,filter .1s}.btn:hover{filter:brightness(1.05)}.btn:active{transform:translateY(2px);box-shadow:0 1px #a87c2c}.btn.primary{background:linear-gradient(180deg,#8fe0a3,#3fae63);color:#08260f;box-shadow:0 3px #2b7e46,0 4px 8px #00000059}.btn.ghost{background:#00000040;color:#f0e4cb;box-shadow:none;border:1px solid rgba(255,255,255,.18)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.controls .spacer{flex:1}.timer{font-weight:800;font-size:14px;padding:4px 10px;border-radius:8px;background:#0000004d}.timer.warn{color:#ffb4a8;animation:blink 1s infinite}.toast{position:fixed;left:50%;bottom:18%;transform:translate(-50%);background:#140c06eb;color:#ffe9c0;padding:11px 18px;border-radius:12px;border:1px solid var(--ui-accent);font-size:14px;z-index:1200;max-width:80vw;text-align:center;box-shadow:0 8px 24px #00000080}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000009e;display:flex;align-items:center;justify-content:center;z-index:1100;padding:18px}.panel{background:linear-gradient(165deg,#6a4326,#3c2414);border:3px solid var(--wood-dark);border-radius:18px;padding:22px 24px;width:min(560px,96vw);max-height:92vh;overflow:auto;box-shadow:0 20px 50px #0009}.panel h1{margin:0 0 4px;color:var(--ui-accent);font-size:26px;letter-spacing:2px}.panel h2{margin:0 0 14px;color:var(--ui-accent);font-size:20px}.panel.rules{width:min(620px,96vw)}.panel.rules h3{color:var(--ui-accent);font-size:15px;margin:16px 0 6px}.panel.rules p{font-size:13.5px;line-height:1.7;margin:4px 0;opacity:.95}.panel.rules ul{margin:4px 0;padding-left:20px}.panel.rules li{font-size:13.5px;line-height:1.75;margin:3px 0}.panel.rules b{color:#ffe1a6}.panel.rules .tile{--tile-w: 34px;box-shadow:0 1px #b59b6b,0 2px 4px #0006,inset 0 1px 2px #ffffffb3}.panel .sub{opacity:.8;font-size:13px;margin-bottom:16px}.field{margin-bottom:16px}.field>label{display:block;font-weight:700;margin-bottom:7px;font-size:14px}.seg{display:flex;gap:8px;flex-wrap:wrap}.seg button{flex:1;min-width:72px;border:1px solid rgba(255,255,255,.18);background:#00000038;color:#f0e4cb;padding:9px 6px;border-radius:10px;cursor:pointer;font-weight:700;font-size:13.5px}.seg button.on{background:linear-gradient(180deg,#f0d292,#d8a94e);color:#2a1a0c;border-color:transparent}.row{display:flex;gap:8px;align-items:center}.toggle{display:flex;align-items:center;gap:8px;cursor:pointer}input[type=text],input[type=number]{background:#00000047;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:8px;padding:8px 10px;font-size:14px;width:100%}input[type=range]{width:100%}.score-table{width:100%;border-collapse:collapse;margin:8px 0 16px}.score-table th,.score-table td{padding:8px 10px;text-align:center;border-bottom:1px solid rgba(255,255,255,.12);font-size:14px}.score-table tr.win{color:#9be8b0;font-weight:800}.score-table .pos{color:var(--ui-accent);font-weight:800}.log{margin-top:8px;max-height:120px;overflow:auto;font-size:12px;opacity:.8;background:#0000002e;border-radius:8px;padding:6px 10px}.log div{padding:1px 0}@media (min-width: 900px){.table{gap:16px}}@media (max-width: 560px){.topbar .title{font-size:13px}.btn{padding:8px 12px;font-size:13px}}