#mahjong-game{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:600px;padding:20px;box-sizing:border-box}#game-board{position:relative;width:min(90vw,1000px);height:min(70vh,600px);--layout-cols:16;--layout-rows:9;--tile-width:calc(100% / var(--layout-cols));--tile-height:calc(var(--tile-width) * 4 / 3);--tile-depth:4px;--layer-offset-x:-3px;--layer-offset-y:-4px}.mahjong-tile{position:absolute;width:var(--tile-width);aspect-ratio:3/4;cursor:pointer;user-select:none;-webkit-user-select:none;left:calc(50% - (var(--layout-cols)/2 * var(--tile-width)) + (var(--col) + 2) * var(--tile-width));top:calc(50% - (var(--layout-rows)/2 * var(--tile-height)) + var(--row) * var(--tile-height));z-index:calc(var(--layer) * 100 + 50);transform:translate( calc(var(--layer) * var(--layer-offset-x)),calc(var(--layer) * var(--layer-offset-y)) );transition:transform .15s ease,box-shadow .15s ease,opacity .3s ease}.mahjong-tile img{width:100%;height:100%;display:block;pointer-events:none;border-radius:4px;box-shadow:2px 2px #8b7355,3px 3px #6b5335,4px 5px 8px rgba(0,0,0,.3)}.mahjong-tile.free{cursor:pointer}.mahjong-tile.free:hover{transform:translate( calc(var(--layer) * var(--layer-offset-x) - 2px),calc(var(--layer) * var(--layer-offset-y) - 2px) )}.mahjong-tile.free:hover img{box-shadow:4px 4px #8b7355,5px 5px #6b5335,6px 8px 12px rgba(0,0,0,.35)}.mahjong-tile.blocked{cursor:not-allowed;opacity:.85}.mahjong-tile.selected{transform:translate( calc(var(--layer) * var(--layer-offset-x) - 3px),calc(var(--layer) * var(--layer-offset-y) - 3px) );z-index:calc(var(--layer) * 100 + 1000)}.mahjong-tile.selected img{box-shadow:0 0 0 3px #4caf50,4px 4px #8b7355,5px 5px #6b5335,6px 8px 12px rgba(0,0,0,.4)}.mahjong-tile.hint{animation:hintPulse .6s ease-in-out 3}@keyframes hintPulse{0%,100%{transform:translate( calc(var(--layer) * var(--layer-offset-x)),calc(var(--layer) * var(--layer-offset-y)) )}50%{transform:translate( calc(var(--layer) * var(--layer-offset-x) - 2px),calc(var(--layer) * var(--layer-offset-y) - 4px) )}}.mahjong-tile.hint img{box-shadow:0 0 15px 5px rgba(255,193,7,.8),2px 2px #8b7355,3px 3px #6b5335,4px 5px 8px rgba(0,0,0,.3)}.mahjong-tile.matched{animation:tileMatchFade .4s ease-out forwards;pointer-events:none}@keyframes tileMatchFade{0%{transform:translate( calc(var(--layer) * var(--layer-offset-x)),calc(var(--layer) * var(--layer-offset-y)) )scale(1);opacity:1}50%{transform:translate( calc(var(--layer) * var(--layer-offset-x)),calc(var(--layer) * var(--layer-offset-y)) )scale(1.1);opacity:.7}100%{transform:translate( calc(var(--layer) * var(--layer-offset-x)),calc(var(--layer) * var(--layer-offset-y)) )scale(0);opacity:0}}.mahjong-tile.shake{animation:shake .3s ease-in-out}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}.game-popup{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:10000}.popup-content{background:#faf8f0;border-radius:12px;padding:32px 48px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.3);max-width:90%;width:400px}.popup-content h2{margin:0 0 16px;color:#2d5016;font-size:28px}.popup-content p{margin:0 0 24px;color:#333;font-size:16px}.popup-stats{display:flex;justify-content:center;gap:24px;margin-bottom:24px;font-size:14px;color:#666}.popup-buttons{display:flex;gap:12px;justify-content:center}.popup-btn{padding:12px 24px;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:background-color .2s,transform .1s}.popup-btn:hover{transform:translateY(-2px)}.popup-btn:active{transform:translateY(0)}.popup-btn.new-game-btn{background:#4caf50;color:#fff}.popup-btn.new-game-btn:hover{background:#43a047}button.disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){#game-board{width:95vw;height:min(60vh,500px)}#mahjong-game{padding:10px;min-height:400px}.popup-content{padding:24px 32px;width:320px}.popup-content h2{font-size:24px}}@media(max-width:480px){#game-board{width:98vw;height:min(55vh,400px)}.popup-stats{flex-direction:column;gap:8px}.popup-buttons{flex-direction:column}.popup-btn{width:100%}}