/* ===== 联机麻将 · MC 像素风 ===== */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
:root{
    --bg:#1a2a1a;--bg2:#2a3a2a;--panel:#1e2818;
    --gold:#f0c040;--gold2:#e8b830;
    --em:#1abc9c;--em2:#16a085;
    --text:#e8dcc8;--dim:#6a8a5a;--dim2:#4a6a3a;
    --bdr:#3a4a2a;
    --wan:#cc4433;--tiao:#33bb55;--tong:#3388cc;
    --feng:#f0c040;--jian:#9b59b6;--hua:#7f8c8d;
    --cream:#fdf5e6;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:'Microsoft YaHei','PingFang SC','Noto Sans SC','WenQuanYi Micro Hei',system-ui,-apple-system,sans-serif;overflow:hidden;height:100vh;width:100vw;font-weight:900}
/* ===== CRT 效果（JS 动态控制参数） ===== */
.crt-scanlines{position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0;transition:opacity 0.3s}
@keyframes crtScroll{0%{background-position:0 0}100%{background-position:0 var(--scan-step,4px)}}

.screen{display:flex;align-items:center;justify-content:center;height:100vh;width:100vw;position:relative}
.hidden{display:none!important}
.lobby-bg{position:absolute;inset:0;background:radial-gradient(ellipse at center,#1a3a1a 0%,#0d1a0d 100%);z-index:0}
.lobby-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:520px;padding:20px}
.title-block{text-align:center;margin-top:15vh}
.main-title{font-family:'Press Start 2P','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;font-size:80px;color:var(--gold);text-shadow:7px 7px 0 #0a0503,0 0 50px rgba(240,192,64,0.5);letter-spacing:14px;white-space:nowrap;font-weight:bold;animation:titleBreath 3s ease-in-out infinite}
.sub-line{color:var(--em);font-size:18px;margin-top:14px;letter-spacing:8px;font-family:'Press Start 2P','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;opacity:1;font-weight:bold;animation:subFade 4s ease-in-out infinite}
@keyframes titleBreath{0%,100%{text-shadow:4px 4px 0 #0a0503,0 0 20px rgba(240,192,64,0.3)}50%{text-shadow:4px 4px 0 #0a0503,0 0 40px rgba(240,192,64,0.6)}}
@keyframes subFade{0%,100%{opacity:0.5}50%{opacity:1}}
.start-wrap{position:relative;margin-top:8vh;animation:btnAppear 0.6s ease-out 0.3s both}
.start-btn{font-family:'Press Start 2P','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;font-size:24px;padding:26px 64px;background:var(--em);border:5px solid var(--gold);border-radius:12px;color:white;cursor:pointer;font-weight:bold;text-shadow:3px 3px 0 rgba(0,0,0,0.3);box-shadow:0 10px 0 #0d5a4a,0 12px 40px rgba(26,188,156,0.4);transition:all 0.1s;position:relative;letter-spacing:8px}
.start-btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 #0d5a4a,0 10px 24px rgba(26,188,156,0.4)}
.start-btn:active{transform:translateY(2px);box-shadow:0 3px 0 #0d5a4a}
@keyframes btnAppear{0%{transform:scale(0);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.start-btn.expand{animation:btnExpand 0.4s ease-in forwards;pointer-events:none}
@keyframes btnExpand{0%{transform:scale(1);opacity:1}30%{transform:scale(1.2);opacity:0.8;box-shadow:0 0 60px rgba(240,192,64,0.6)}100%{transform:scale(20);opacity:0}}
.burst-overlay{position:fixed;inset:0;z-index:50;pointer-events:none;background:radial-gradient(circle at center,rgba(240,192,64,0.15) 0%,transparent 50%);animation:burstFlash 0.5s ease-out forwards}
@keyframes burstFlash{0%{opacity:1}100%{opacity:0}}
.lobby-footer{position:absolute;top:24px;right:24px;display:flex;align-items:center;gap:14px;z-index:10}
.version-tag{font-size:16px;color:var(--dim2);font-family:'Press Start 2P','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;font-weight:bold}
.icon-btn{font-size:30px;background:none;border:4px solid var(--dim);border-radius:10px;color:var(--dim);cursor:pointer;padding:10px 14px;transition:0.15s;line-height:1;font-weight:bold}
.icon-btn:hover{border-color:var(--gold);color:var(--gold)}
.lobby-menu{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.3s ease}
.menu-card{background:var(--bg);border:3px solid var(--gold);border-radius:12px;padding:28px 32px;max-width:400px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.5)}
.menu-title{font-family:'Press Start 2P','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;font-size:16px;color:var(--gold);text-align:center;margin-bottom:18px;text-shadow:2px 2px 0 #0a0503}
.menu-btns{display:flex;flex-direction:column;gap:8px}
.join-panel{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.join-panel.hidden{display:none}
.p-btn{font-family:'Press Start 2P','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;font-size:14px;padding:16px 28px;border:3px solid;border-radius:8px;cursor:pointer;transition:all 0.12s;text-transform:uppercase;box-shadow:0 4px 0 rgba(0,0,0,0.3);margin:2px 0}
.p-btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(0,0,0,0.3)}
.p-btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,0.3)}
.p-btn.gold{background:var(--gold);color:#1a1510;border-color:var(--gold2)}
.p-btn.gold:hover{background:var(--gold2)}
.p-btn.dark{background:var(--panel);color:var(--dim);border-color:var(--bdr)}
.p-btn.dark:hover{background:#2a3520;color:var(--text)}
.p-btn.sm{padding:10px 20px;font-size:12px}
.p-inp{width:100%;padding:16px 18px;background:var(--panel);border:3px solid var(--bdr);border-radius:8px;color:var(--text);font-size:18px;font-weight:bold;outline:none;font-family:'Courier New','Microsoft YaHei',sans-serif;transition:border-color 0.2s}
.p-inp:focus{border-color:var(--gold)}
.code-inp{text-align:center;font-size:28px;letter-spacing:14px}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:14px;gap:12px}
.set-inp{flex:1;padding:6px 10px;background:var(--panel);border:2px solid var(--bdr);border-radius:6px;color:var(--text);font-size:13px;outline:none;max-width:160px;font-family:'Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif}
.set-inp:focus{border-color:var(--gold)}
.set-divider{height:1px;background:var(--bdr);margin:8px 0}
.tg{position:relative;width:40px;height:22px;display:inline-block}
.tg input{opacity:0;width:0;height:0}
.tg-slider{position:absolute;inset:0;background:var(--dim2);border-radius:4px;transition:0.2s;cursor:pointer}
.tg-slider::before{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;background:var(--text);border-radius:2px;transition:0.2s}
.tg input:checked+.tg-slider{background:var(--em)}
.tg input:checked+.tg-slider::before{transform:translateX(18px)}
.room-code-area{text-align:center;margin:8px 0}
.code-display{display:block;font-size:52px;font-family:'Press Start 2P','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;color:var(--gold);letter-spacing:16px;text-shadow:3px 3px 0 #0a0503;margin-top:6px}
.room-players-list{text-align:center;min-height:40px}
.room-actions{text-align:center}
.player-tag{display:inline-block;margin:4px;padding:8px 16px;border:3px solid var(--bdr);border-radius:8px;background:var(--panel);font-size:12px;font-weight:bold;font-family:'Press Start 2P','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif}
.player-tag.bot{border-color:var(--dim);color:var(--dim)}
.player-tag.owner{border-color:var(--gold)}
.table-border{border:3px solid var(--bdr);border-radius:10px;background:var(--bg);height:calc(100vh - 6px);width:calc(100vw - 6px);display:flex;box-shadow:inset 0 0 30px rgba(0,0,0,0.3)}
.table-inner{flex:1;margin:4px;background:var(--bg2);border:3px solid var(--bdr);border-radius:8px;display:flex;flex-direction:column;padding:6px;gap:2px;box-shadow:inset 0 0 20px rgba(0,0,0,0.2)}
.seat{position:relative}
.pi{padding:4px 10px;font-size:16px;display:flex;align-items:center;gap:8px}
.pn{font-weight:900;font-size:20px}
.pbot{font-size:11px;color:var(--dim);font-family:'Press Start 2P','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif}
.pturn-icon{font-size:13px;color:var(--gold);animation:pulse 0.8s infinite}
.seat-top{text-align:center}
.seat-top .hr{display:flex;justify-content:center;gap:3px;min-height:36px}
.seat-top .pi{justify-content:center;display:inline-flex}
.mid-s{display:flex;flex:1;gap:3px;min-height:380px}
.seat-l,.seat-r{width:140px;display:flex;flex-direction:column;align-items:center}
.seat-l .hc,.seat-r .hc{display:flex;flex-direction:column;gap:3px;align-items:center}
.seat-l .pi,.seat-r .pi{flex-direction:column}
.c-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.12);border-radius:6px}
.top-bar{display:flex;align-items:center;gap:8px;width:100%;max-width:660px;padding:4px 10px}
.room-tag{font-size:18px;color:var(--gold);font-family:'Press Start 2P','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;letter-spacing:2px;white-space:nowrap}
.m-log{flex:1;max-height:220px;overflow-y:auto;font-size:14px;color:var(--dim);padding:8px 12px;background:rgba(0,0,0,0.2);border-radius:6px;line-height:1.6;border:2px solid rgba(0,0,0,0.15)}
.d-pool{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;min-height:120px;max-width:720px;width:100%;padding:8px}
.a-row{display:flex;gap:4px;flex-wrap:wrap;align-items:center;min-height:38px;padding-left:10px}
.a-row .a-btn{font-size:15px;padding:10px 16px;white-space:nowrap;border-width:3px}
.t-row{display:flex;gap:6px;justify-content:center;min-height:24px;align-items:center;margin-top:2px}
.seat-b{text-align:center}
.seat-b .hr{display:flex;justify-content:center;gap:6px;min-height:64px;padding:5px 0;flex-wrap:wrap}
.seat-b .pi{justify-content:center;display:inline-flex}
.bottom-row{display:flex;align-items:center;justify-content:center;gap:12px}

.mr{display:flex;justify-content:center;gap:8px;padding:4px;min-height:30px}
.my-h{perspective:800px}
.tile{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:80px;height:108px;background:linear-gradient(180deg,#fff8e8 0%,#f0e6d0 100%);border:4px solid var(--bdr);border-radius:10px;cursor:pointer;user-select:none;position:relative;transition:transform 0.1s,box-shadow 0.1s;box-shadow:3px 5px 12px rgba(0,0,0,0.4);animation:tileBob 3.5s ease-in-out infinite;will-change:transform}
.my-h .tile:not(.disabled){transition:transform 0.08s ease-out,box-shadow 0.08s}
.tile:hover{animation:none;z-index:5}
.tile.selected{transform:translateY(-45px) scale(1.55)!important;box-shadow:2px 24px 45px rgba(0,0,0,0.6),0 0 45px rgba(240,192,64,0.5)!important;border-color:var(--gold)!important;z-index:10!important;animation:selectedPulse 0.8s ease-in-out infinite!important}
@keyframes selectedPulse{0%,100%{box-shadow:2px 18px 30px rgba(0,0,0,0.5),0 0 25px rgba(240,192,64,0.4)}50%{box-shadow:2px 18px 30px rgba(0,0,0,0.5),0 0 50px rgba(240,192,64,0.7)}}
.tile-flying{position:fixed!important;z-index:1000!important;pointer-events:none!important;margin:0!important;animation:none!important;transition:none!important}
.tile .tv{font-size:44px;line-height:1;font-weight:900;text-shadow:1px 1px 1px rgba(0,0,0,0.15)}
.tile .ts{font-size:20px;line-height:1;margin-top:2px;font-weight:900}
.tile.suit-WAN{border-color:var(--wan)}.tile.suit-WAN .tv{color:var(--wan);text-shadow:0 1px 1px rgba(0,0,0,0.1)}.tile.suit-WAN .ts{color:var(--wan)}
.tile.suit-TIAO{border-color:var(--tiao)}.tile.suit-TIAO .tv{color:var(--tiao)}.tile.suit-TIAO .ts{color:var(--tiao)}
.tile.suit-TONG{border-color:var(--tong)}.tile.suit-TONG .tv{color:var(--tong)}.tile.suit-TONG .ts{color:var(--tong)}
.tile.suit-FENG{border-color:var(--feng)}.tile.suit-FENG .tv{color:var(--feng);font-size:24px}.tile.suit-FENG .ts{color:var(--feng);font-size:12px}
.tile.suit-JIAN{border-color:var(--jian)}.tile.suit-JIAN .tv{color:var(--jian);font-size:24px}.tile.suit-JIAN .ts{color:var(--jian);font-size:12px}
.tile.suit-HUA{border-color:var(--hua)}.tile.suit-HUA .tv{color:var(--hua);font-size:20px}.tile.suit-HUA .ts{color:var(--hua);font-size:10px}
.tile-back{width:60px;height:80px;background:linear-gradient(135deg,#1a3a1a,#0d2818);border:2px solid #1a0e08;border-radius:6px;box-shadow:1px 2px 4px rgba(0,0,0,0.3)}
.tile-sm{width:56px;height:76px;animation:none!important;border-width:3px;border-radius:6px}
.tile-sm .tv{font-size:30px;font-weight:900}.tile-sm .ts{font-size:17px;font-weight:bold}
.tile-sm:hover{transform:none!important;box-shadow:2px 3px 6px rgba(0,0,0,0.35)!important}
.tile-xs{width:46px;height:64px;animation:none!important;border-width:3px;border-radius:5px}
.tile-xs .tv{font-size:26px;font-weight:bold}.tile-xs .ts{font-size:14px}
.tile-xs:hover{transform:none!important}

.meld-group{display:flex;gap:2px}
.meld-group .tile{width:42px;height:58px;cursor:default;animation:none!important;box-shadow:1px 2px 3px rgba(0,0,0,0.25);border-width:2px;border-radius:4px}
.meld-group .tv{font-size:20px}.meld-group .ts{font-size:12px}
.meld-group .tile:hover{transform:none!important}
.a-btn{font-family:'Press Start 2P','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;font-size:18px;padding:14px 32px;border:3px solid;border-radius:8px;cursor:pointer;background:var(--panel);transition:all 0.1s;box-shadow:0 3px 0 rgba(0,0,0,0.3)}
.a-btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(0,0,0,0.3)}
.a-btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,0.3)}
.a-btn:disabled{opacity:0.3;cursor:not-allowed;transform:none}
.a-btn.disc{border-color:var(--gold);color:var(--gold)}.a-btn.disc:hover{background:#252018}
.a-btn.win{border-color:var(--wan);color:var(--wan);animation:winPulseBtn 0.6s infinite alternate}.a-btn.win:hover{background:#1a0a0a}
.a-btn.pung{border-color:var(--tong);color:var(--tong)}
.a-btn.chi{border-color:var(--tiao);color:var(--tiao)}
.a-btn.kong{border-color:var(--jian);color:var(--jian)}
.a-btn.pass{border-color:var(--dim);color:var(--dim)}.a-btn.pass:hover{background:#1e2818}
.tomato-btn{font-size:18px;padding:4px 10px;background:transparent;border:2px solid var(--dim);color:var(--dim);cursor:pointer;font-family:'Press Start 2P','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;font-size:11px;transition:0.15s;border-radius:4px}
.tomato-btn:hover{border-color:#e74c3c;color:#e74c3c}
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:999}
.m-box{background:var(--panel);border:2px solid var(--gold);border-radius:10px;padding:24px 32px;text-align:center;max-width:460px;width:92%;box-shadow:0 8px 32px rgba(0,0,0,0.4)}
.m-box h2{font-family:'Press Start 2P','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;color:var(--gold);font-size:16px;text-shadow:2px 2px 0 #0a0503;margin-bottom:12px}
.m-box p{margin-bottom:16px;font-size:14px}
.m-hands{margin:10px 0;max-height:300px;overflow-y:auto}
.rv-player{margin:8px 0}
.rv-player .rv-name{font-size:11px;color:var(--dim);margin-bottom:3px}
.rv-player .rv-hand{display:flex;gap:2px;justify-content:center;flex-wrap:wrap}
.rv-player .rv-melds{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin:2px 0}
.rv-player .rv-meld{display:inline-flex;gap:1px;padding:1px 2px;background:rgba(0,0,0,0.08);border-radius:3px}
.rv-player .rv-hand{display:flex;gap:2px;justify-content:center;flex-wrap:wrap}
.rv-player .rv-hand .tile,.rv-player .rv-meld .tile{width:26px;height:38px;cursor:default;animation:none!important;box-shadow:1px 2px 3px rgba(0,0,0,0.25);border-width:2px;border-radius:4px}
.rv-player .rv-hand .tv,.rv-player .rv-meld .tv{font-size:10px}.rv-player .rv-hand .ts,.rv-player .rv-meld .ts{font-size:6px}
.m-btns{display:flex;gap:10px;justify-content:center}
#tomatoLayer{position:fixed;inset:0;pointer-events:none;z-index:9998}
.fly-tomato{position:fixed;z-index:9999;pointer-events:none;will-change:transform}
@keyframes tileBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes winPulseBtn{0%{transform:scale(1)}100%{transform:scale(1.07)}}
@keyframes pulse{0%,100%{opacity:0.4}50%{opacity:1}}
.shake-fast{animation:shakeAnim 0.15s}.shake-win{animation:shakeWin 0.5s}.flash-gold{animation:flashGold 0.6s}
@keyframes shakeAnim{0%,100%{transform:translate(0)}25%{transform:translate(-4px,1px)}50%{transform:translate(4px,-1px)}75%{transform:translate(-2px,0)}}
@keyframes shakeWin{0%,100%{transform:translate(0) rotate(0)}15%{transform:translate(-5px,2px) rotate(-1deg)}30%{transform:translate(5px,-2px) rotate(1deg)}45%{transform:translate(-3px,-1px) rotate(-0.5deg)}60%{transform:translate(3px,1px) rotate(0.5deg)}75%{transform:translate(-2px,2px) rotate(-0.3deg)}}
@keyframes flashGold{0%{background-color:transparent}20%{background-color:rgba(240,192,64,0.12)}40%{background-color:rgba(240,192,64,0.04)}100%{background-color:transparent}}
.tile-new{animation:tileSlideIn 0.25s ease-out}
@keyframes tileSlideIn{0%{transform:translateY(-24px) scale(0.7);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
.tile-glow{animation:tileGlow 0.5s ease-out}
@keyframes tileGlow{0%{box-shadow:0 0 0 rgba(240,192,64,0)}50%{box-shadow:0 0 24px rgba(240,192,64,0.5)}100%{box-shadow:0 0 0 rgba(240,192,64,0)}}
.log-line{animation:fadeIn 0.2s ease;margin:2px 0}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.m-log::-webkit-scrollbar,.m-hands::-webkit-scrollbar{width:3px}
.m-log::-webkit-scrollbar-thumb,.m-hands::-webkit-scrollbar-thumb{background:var(--dim2);border-radius:2px}
@media(max-width:768px){.main-title{font-size:42px}.start-btn{font-size:17px;padding:18px 40px}.tile{width:42px;height:58px}.tile .tv{font-size:20px}.tile .ts{font-size:11px}.tile-back{width:32px;height:46px}.seat-l,.seat-r{width:100px}.code-display{font-size:40px}}
@media(max-width:480px){.tile{width:32px;height:46px}.tile .tv{font-size:14px}.tile .ts{font-size:8px}.main-title{font-size:32px}.start-btn{font-size:14px;padding:16px 30px}.code-display{font-size:32px;letter-spacing:6px}.set-row{font-size:12px}}
.tile.disabled{opacity:0.5;cursor:default;pointer-events:none}.tile.disabled:hover{transform:none!important;box-shadow:2px 4px 8px rgba(0,0,0,0.35)!important}
.hidden{display:none!important}
.seat.highlight-turn{background:rgba(240,192,64,0.06);border-radius:6px}
.mid-s .seat.highlight-turn{background:rgba(240,192,64,0.04)}
.my-h .tile.disabled{pointer-events:none}
.meld-group .tile,.rv-hand .tile{cursor:default}
.burst-overlay.hidden{display:none!important}
/* 番茄飞溅粒子 */
.splat-container{position:fixed;inset:0;pointer-events:none;z-index:9999}
.splat-particle{position:absolute;width:8px;height:8px;background:#e74c3c;border-radius:50%;animation:splatBurst 0.5s ease-out forwards}
@keyframes splatBurst{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}