*{box-sizing:border-box;margin:0;padding:0}:root{--felt: #1e6b4a;--felt-dark: #175539;--wood: #6b4a2a;--wood-dark: #4e351d;--tile-bg: #f6f1e3;--tile-edge: #d8cfb8;--gold: #e8c96a;--text: #e9e4d3;font-family:Microsoft YaHei,PingFang SC,Noto Sans SC,system-ui,sans-serif}html,body{height:100%;background:#101410;color:var(--text)}#app{min-height:100vh}.btn{border:none;border-radius:8px;padding:10px 22px;font-size:16px;cursor:pointer;background:#3a4a3d;color:var(--text);transition:transform .1s,filter .15s}.btn:hover{filter:brightness(1.15)}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:#b5482c}.btn-win{background:#c9a227;color:#221a05;font-weight:700}.btn-act{background:#2c6e8f}.btn-riichi{background:#5a3b8f}.btn-pass{background:#57605a}.btn-ghost{background:transparent;border:1px solid #5a6a5e}.btn-sm{padding:5px 12px;font-size:13px}.lobby{max-width:1180px;margin:0 auto;padding:36px 20px 60px}.lobby-header{text-align:center;margin-bottom:30px}.lobby-title{font-size:46px;font-weight:800;letter-spacing:8px;background:linear-gradient(180deg,#f5dfa0,#d8ab4a 55%,#a97e2c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 10px rgba(232,201,106,.3))}.lobby-header{position:relative}.lobby-header:before{content:"🀄";position:absolute;font-size:30px;opacity:.9;left:calc(50% - 210px);top:4px;transform:rotate(-10deg)}.lobby-header:after{content:"🀄";position:absolute;font-size:30px;opacity:.9;right:calc(50% - 210px);top:4px;transform:rotate(10deg)}.lobby-subtitle{margin-top:10px;color:#9aa896;font-size:14px}.variant-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(500px,1fr));gap:20px}.variant-card{background:linear-gradient(160deg,#1d2b22,#16211b);border:1px solid #2f4437;border-radius:14px;padding:22px;box-shadow:0 6px 24px #00000059}.card-name{font-size:22px;font-weight:700;color:var(--gold)}.card-desc{margin:8px 0 12px;color:#b7c2b2;font-size:14px;line-height:1.5;min-height:42px}.card-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.tag{background:#2c4435;border:1px solid #3d5c48;color:#9fd8b3;font-size:12px;padding:2px 10px;border-radius:999px}.card-stats{color:#8b978a;font-size:13px;margin-bottom:12px}.card-config{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.config-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.cfg-label{color:#93a390;font-size:13px;width:52px}.seg{display:flex;gap:4px}.seg-btn{border:1px solid #3c5044;background:#203028;color:#b9c5b4;padding:4px 12px;border-radius:6px;font-size:13px;cursor:pointer}.seg-btn.active{background:#3a6b4d;color:#fff;border-color:#5a9a72}.card-actions{display:flex;gap:10px;justify-content:flex-end}.lobby-footer{text-align:center;margin-top:26px}.table-screen{height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#14241b,#0d1712 70%)}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#00000040}.top-title{font-size:16px;color:var(--gold);letter-spacing:2px}.top-right{display:flex;gap:8px}.table-frame{flex:1;min-height:0;margin:6px 12px 2px;padding:10px;border-radius:22px;background:repeating-linear-gradient(88deg,#6d4b2a 0,#6d4b2a 2px,#63421f 2px,#63421f 5px,#755230 5px,#755230 9px,#5d3f22 9px,#5d3f22 13px);box-shadow:0 14px 44px #0000008c,inset 0 0 0 2px #3b2713,inset 0 0 0 5px #ffebbe14}.table{height:100%;position:relative;display:grid;grid-template-areas:". north ." "west center east" ". south .";grid-template-columns:210px 1fr 210px;grid-template-rows:190px 1fr auto;padding:10px 14px 4px;gap:4px;min-height:0;border-radius:14px;background:radial-gradient(ellipse at 50% 42%,#2c8a5e,#1e6b4a 48%,#175c3e 76%,#124732);box-shadow:inset 0 0 70px #0000006b,inset 0 0 0 1px #ffffff0d}.btn-autopilot{background:#2c6e8f;color:#eaf4ff}.btn-autopilot.active{background:#c9a227;color:#221a05;font-weight:700;animation:seatPulse 1.6s ease-in-out infinite}.autopilot-tag{background:#c9a227;color:#221a05;border-radius:4px;padding:0 6px;font-size:11px;font-weight:700}.callout{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:60;animation:calloutPop 1.25s ease-out forwards;text-shadow:0 2px 12px rgba(0,0,0,.6);will-change:transform,opacity}.callout-main{font-size:74px;font-weight:900;letter-spacing:8px;color:#fff}.callout.claim .callout-main{color:#7fd0ff}.callout.win .callout-main{color:var(--gold);background:radial-gradient(circle,rgba(232,201,106,.28) 0%,transparent 68%);border-radius:50%;padding:0 34px;text-shadow:0 0 22px rgba(232,201,106,.9),0 3px 10px rgba(0,0,0,.65);animation:calloutPop 1.25s ease-out forwards,winSpin 1.25s linear}@keyframes winSpin{0%{filter:blur(2px)}30%{filter:blur(0)}}.callout.lose .callout-main{color:#ff7a6a;font-size:56px}.callout.info .callout-main{color:#d8d2c0;font-size:52px}.callout-sub{font-size:18px;color:#f0e9d2;letter-spacing:2px}@keyframes calloutPop{0%{opacity:0;transform:translate(-50%,-50%) scale(2.1)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}78%{opacity:1}to{opacity:0;transform:translate(-50%,-56%) scale(.96)}}.table-screen{position:relative}.ai-bubble{position:absolute;transform:translate(-50%);background:#fff;color:#333;font-size:13px;padding:5px 12px;border-radius:12px;white-space:nowrap;z-index:40;box-shadow:0 2px 8px #0006;animation:bubblePop .18s ease-out;pointer-events:none}@keyframes bubblePop{0%{transform:translate(-50%) scale(.6);opacity:0}}.replay-modal{max-width:1020px}.replay-body{display:flex;flex-direction:column;gap:8px}.replay-info{color:var(--gold);font-size:13px}.replay-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.replay-seat{background:#00000038;border-radius:8px;padding:8px 10px}.replay-seat.me{outline:1px solid rgba(232,201,106,.5)}.replay-seat-head{font-size:13px;color:#cfe6d4;margin-bottom:6px}.replay-hand{display:flex;gap:2px;flex-wrap:wrap;align-items:center;margin-bottom:6px;min-height:35px}.replay-river{display:grid;grid-template-columns:repeat(14,auto);gap:2px;min-height:35px;align-content:start}.replay-slider{width:260px}.replay-step{color:var(--gold);min-width:64px;text-align:center}.tile.safe:after{content:"";position:absolute;right:2px;top:2px;width:7px;height:7px;border-radius:50%;background:#2e7d4f;border:1px solid rgba(255,255,255,.65)}.tile.received{outline:2px dashed #7fd0ff;animation:receivedGlow 1.2s ease-in-out 3}@keyframes receivedGlow{50%{box-shadow:0 0 12px #7fd0ffcc}}.tile.shake{animation:shakeX .3s}@keyframes shakeX{0%,to{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-3px)}}.seat{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:0}.seat-north{grid-area:north}.seat-south{grid-area:south}.seat-west{grid-area:west;justify-content:flex-start;padding-top:12px}.seat-east{grid-area:east;justify-content:flex-start;padding-top:12px}.seat-south .seat-melds{margin-bottom:4px}.seat-north .seat-melds{order:3;margin-top:2px}.seat-west .seat-melds,.seat-east .seat-melds{order:3;margin-top:4px}.seat-info{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,#0006,#00000047);border:1px solid rgba(255,255,255,.12);padding:3px 12px 3px 4px;border-radius:999px;font-size:13px;box-shadow:0 2px 8px #00000059}.avatar{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:17px;background:linear-gradient(160deg,#57706a,#31473f);border:2px solid rgba(255,255,255,.25)}.avatar.bot-0{background:linear-gradient(160deg,#6a7fa8,#3a4d75)}.avatar.bot-1{background:linear-gradient(160deg,#a8796a,#754d3a)}.avatar.bot-2{background:linear-gradient(160deg,#74a86a,#4a753a)}.seat-name{font-weight:700}.seat-wind{color:var(--gold)}.seat-score{color:#cfe6d4}.riichi-tag{background:#5a3b8f;color:#fff;border-radius:4px;padding:0 6px;font-size:11px}.dealer-tag{background:#b5482c;color:#fff;border-radius:4px;padding:0 6px;font-size:11px}.flower-tag{background:#2c6e8f;color:#fff;border-radius:4px;padding:0 6px;font-size:11px}.seat-hand{display:flex;gap:3px;align-items:flex-end;height:74px;padding-top:12px;flex-wrap:wrap;justify-content:center}.seat-melds{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:3px;background:#00000024;border-radius:8px;min-height:46px;align-content:flex-start}.seat-south .seat-melds,.seat-north .seat-melds{min-height:46px}.seat-west .seat-melds,.seat-east .seat-melds{min-height:42px}.seat-south .seat-melds{justify-content:flex-end}.meld-group{display:flex;gap:1px;align-items:flex-end;background:#00000047;padding:3px;border-radius:5px;box-shadow:inset 0 1px 3px #0000004d}.meld-group .tile.sideways{transform:rotate(90deg) translateY(-14%);margin:0 4px}.seat-river{display:grid;grid-template-columns:repeat(6,auto);gap:2px;background:#0000002e;padding:6px;border-radius:8px;min-height:60px;align-content:start}.seat-south .seat-river{grid-template-columns:repeat(14,auto)}.table-center{grid-area:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(ellipse at center,rgba(255,255,255,.06),transparent 70%)}.wall-info{font-size:15px;color:#cfe6d4}.dora-info{display:flex;align-items:center;gap:4px}.dora-label{font-size:12px;color:#9fb3a4;margin-right:4px}.center-msg{min-height:26px;font-size:16px;color:var(--gold)}.win-list{display:flex;flex-direction:column;gap:3px}.win-tag{background:#c9a22726;border:1px solid rgba(201,162,39,.4);color:var(--gold);font-size:13px;padding:2px 10px;border-radius:6px}.action-bar{min-height:62px;display:flex;align-items:center;justify-content:center;gap:12px;background:#00000059;padding:10px}.tile{display:inline-flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(160deg,#fcf8ee,#f4eedb 55%,#eae2c9);border:1px solid #d6ccb2;border-radius:6px;color:#1c2b4a;font-weight:800;box-shadow:inset 0 1px #fffffff2,inset 0 -2px 3px #a3967a61,0 2px #c8bda0,0 4px 7px #0000006b;-webkit-user-select:none;user-select:none;line-height:1.05;flex-direction:column;padding:1px}.tile.lg{width:46px;height:62px}.tile.md{width:34px;height:46px}.tile.sm{width:26px;height:35px;border-radius:4px;box-shadow:inset 0 1px #ffffffe6,inset 0 -1px 2px #a3967a59,0 1px #c8bda0,0 3px 5px #0006}.tile.face svg{width:100%;height:100%;display:block}.tile.back{background:linear-gradient(135deg,rgba(255,255,255,.09) 0 2px,transparent 2px 5px),repeating-linear-gradient(45deg,#2d618e 0,#2d618e 5px,#254f76 5px,#254f76 11px);border-color:#17324e;box-shadow:inset 0 0 0 2px #ffffff1a,0 2px #1a3c5c,0 4px 7px #0000006b}.tile.clickable{cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}.tile.clickable:hover{transform:translateY(-7px) rotate(-1.5deg)}.tile.selected{transform:translateY(-11px);outline:2px solid var(--gold);box-shadow:0 0 16px #e8c96a8c,0 2px #c8bda0,0 6px 10px #00000073}.tile.drawn{margin-left:10px;animation:drawIn .25s ease-out}.tile.hint:before{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border:2px dashed rgba(201,162,39,.85);border-radius:7px;pointer-events:none}.tile.dim{opacity:.35}.tile.called{opacity:.4}.tile.mark{outline:2px solid #c9a227}.tile.latest{outline:2px solid #ffd76a;animation:flyIn .26s ease-out}.seat-river{overflow:hidden}.seat-south .seat-river .tile.latest{--fx: 0px;--fy: 26px}.seat-north .seat-river .tile.latest{--fx: 0px;--fy: -26px}.seat-east .seat-river .tile.latest{--fx: 26px;--fy: 0px}.seat-west .seat-river .tile.latest{--fx: -26px;--fy: 0px}@keyframes flyIn{0%{transform:translate(var(--fx, 0),var(--fy, 0));opacity:.2}to{transform:translate(0);opacity:1}}.seat.turn-active .seat-info{background:#e8c96a38;border:1px solid rgba(232,201,106,.75);box-shadow:0 0 14px #e8c96a73;animation:seatPulse 1.6s ease-in-out infinite}@keyframes seatPulse{0%,to{box-shadow:0 0 8px #e8c96a4d}50%{box-shadow:0 0 20px #e8c96ab3}}.seat.turn-active .seat-name:after{content:" ▸出牌";color:var(--gold);font-size:11px}.center-msg.mine{color:#ffe9a8;font-size:20px;font-weight:800;letter-spacing:2px;text-shadow:0 0 12px rgba(232,201,106,.55)}.timer-wrap{display:flex;align-items:center;gap:8px;margin-left:18px}.timer-wrap.urgent .timer-num{color:#ff7a6a;animation:timerBlink .5s steps(2) infinite}.timer-wrap.urgent .timer-bar{background:#d84a38}@keyframes timerBlink{50%{opacity:.35}}.timer-bar-wrap{width:90px;height:7px;background:#00000080;border-radius:4px;overflow:hidden}.timer-bar{height:100%;background:linear-gradient(90deg,#e8c96a,#d3872f);transition:width 1s linear}.timer-num{color:var(--gold);font-weight:800;font-size:18px;min-width:26px;text-align:center}@keyframes drawIn{0%{transform:translateY(-16px);opacity:0}to{opacity:1}}@media (max-height: 820px){.tile.lg{width:40px;height:54px;font-size:19px}.tile.md{width:30px;height:41px;font-size:14px}.tile.sm{width:22px;height:30px;font-size:11px}.table{grid-template-rows:150px 1fr auto;grid-template-columns:180px 1fr 180px}.seat-hand{min-height:48px}.action-bar{min-height:54px}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal{background:linear-gradient(165deg,#22322a,#17231c);border:1px solid #3a5445;border-radius:14px;max-width:860px;width:min(92vw,860px);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 10px 50px #0009;animation:pop .18s ease-out}@keyframes pop{0%{transform:scale(.94);opacity:0}}.modal-head{font-size:18px;font-weight:700;color:var(--gold);padding:14px 20px;border-bottom:1px solid #33493c;position:relative;background:linear-gradient(180deg,rgba(232,201,106,.07),transparent)}.modal-close{position:absolute;right:12px;top:8px;background:none;border:none;color:#8fa08b;font-size:22px;cursor:pointer}.modal-body{padding:16px 20px;overflow-y:auto}.modal-foot{padding:12px 20px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid #33493c}.settle-win{margin-bottom:14px;border-radius:10px;padding:12px 16px;background:linear-gradient(150deg,#e8c96a1f,#00000040 55%);border:1px solid rgba(232,201,106,.35);box-shadow:inset 0 1px #ffffff0f}.settle-win-head{color:var(--gold);margin-bottom:8px;font-size:15px}.settle-hand{display:flex;gap:3px;flex-wrap:wrap;align-items:center;margin-bottom:8px}.settle-items{display:flex;gap:6px;flex-wrap:wrap}.fan-item{background:#2c4435;border:1px solid #3d5c48;color:#bfe8c9;font-size:13px;padding:2px 10px;border-radius:6px}.settle-notes{color:#c8b18a;font-size:14px;margin-bottom:10px;line-height:1.6}.settle-delta{display:flex;gap:14px;flex-wrap:wrap}.settle-delta .pos{color:#7fe08f}.settle-delta .neg{color:#ef8a7a}.rank-table{width:100%;border-collapse:collapse;font-size:15px}.rank-table td{padding:8px 14px;border-bottom:1px solid #2c4034}.swap-modal{max-width:900px}.swap-hand{display:flex;gap:6px;flex-wrap:wrap}.help-modal .modal-body{font-size:14px;line-height:1.7;color:#c9d4c4}.help-modal h3{color:var(--gold);margin:4px 0 10px}.help-modal h4{color:#d8be72;margin:14px 0 6px}.help-modal ul{padding-left:20px}.help-modal li{margin:4px 0}.fan-table{border-collapse:collapse;margin-top:6px}.fan-table td{border:1px solid #33493c;padding:4px 10px;font-size:13px}@media (max-width: 1100px){.table{grid-template-columns:150px 1fr 150px}.tile.lg{width:38px;height:52px;font-size:18px}.seat-south .seat-river{grid-template-columns:repeat(10,auto)}}