
/* Memejong FX: accessibility-friendly, GPU-animated and independent of game rules. */
.fx-particle{position:fixed;z-index:45;pointer-events:none;width:6px;height:6px;border-radius:2px;background:var(--particle-color,#ffe88b);box-shadow:0 0 11px var(--particle-color,#ffe88b);animation:fxBurst .66s cubic-bezier(.15,.78,.28,1) var(--fx-delay,0ms) both;transform-origin:center}
@keyframes fxBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(1.3) rotate(0deg)}80%{opacity:.85}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.1) rotate(210deg)}}
.board--stack .tile.fx-pair.matched,.board--stack .tile.fx-gold-pair.matched{animation:fxTileOut .23s cubic-bezier(.15,.61,.32,1) forwards;pointer-events:none}
.board--stack .tile.fx-gold-pair.matched{animation-name:fxGoldOut}
@keyframes fxTileOut{0%{opacity:1;transform:translateY(-2px) scale(1)}30%{opacity:1;transform:translateY(-6px) scale(1.13);filter:brightness(1.28)}100%{opacity:0;transform:translateY(-9px) scale(.55) rotate(5deg)}}
@keyframes fxGoldOut{0%{opacity:1;transform:scale(1);filter:brightness(1)}38%{opacity:1;transform:scale(1.17);filter:brightness(1.65) saturate(1.3)}100%{opacity:0;transform:scale(.62) rotate(-9deg);filter:brightness(1.9)}}
.board--stack .tile.fx-just-selected{animation:fxSelect .24s ease-out}
@keyframes fxSelect{0%{filter:brightness(1.25);transform:translateY(-3px) scale(1.1)}100%{filter:brightness(1);transform:translateY(-3px) scale(1)}}
.board--stack .tile.fx-wrong{animation:fxWrong .22s ease-in-out;}
@keyframes fxWrong{0%,100%{translate:0 0}25%,75%{translate:-3px 0}50%{translate:3px 0}}
.fx-combo-label{position:fixed;z-index:46;pointer-events:none;transform:translate(-50%,-55%);color:#fff9c2;font-size:clamp(13px,2.4vw,21px);font-weight:1000;white-space:nowrap;letter-spacing:.3px;text-shadow:0 3px 0 #593b80,0 4px 15px #1c1140;animation:fxCombo .8s cubic-bezier(.2,.75,.3,1) both}
@keyframes fxCombo{0%{opacity:0;transform:translate(-50%,-20%) scale(.65)}22%{opacity:1;transform:translate(-50%,-75%) scale(1.13)}65%{opacity:1}100%{opacity:0;transform:translate(-50%,-145%) scale(.93)}}
.fx-celebration{position:fixed;left:50%;top:24%;z-index:48;pointer-events:none;color:#ffe69a;text-shadow:0 3px 0 #633f95,0 6px 18px #000;white-space:nowrap;font-size:clamp(19px,4vw,34px);font-weight:1000;animation:fxCelebrate 1.15s ease-out both;transform-origin:center}
.fx-celebration--big{font-size:clamp(23px,4.8vw,43px)}
@keyframes fxCelebrate{0%{opacity:0;transform:translate(-50%,-30%) scale(.65)}23%{opacity:1;transform:translate(-50%,0) scale(1.13)}65%{opacity:1;transform:translate(-50%,-12%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.02)}}
.board.fx-board-pulse{animation:fxBoardPulse .36s ease-out}
.board.fx-board-gold{animation:fxBoardGold .46s ease-out}
@keyframes fxBoardPulse{40%{filter:brightness(1.13) saturate(1.15)}to{filter:brightness(1)}}
@keyframes fxBoardGold{35%{filter:brightness(1.38) saturate(1.24) drop-shadow(0 0 18px #ffdc6380)}to{filter:none}}
.fx-settings{display:grid;gap:14px;margin:18px 0;text-align:left}
.fx-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#211a3a;border:1px solid #625078;border-radius:13px;color:#efe8ff}
.fx-setting b{font-size:14px}.fx-setting small{display:block;color:#b5a8d1;font-size:11px;margin-top:4px;line-height:1.3}
.fx-setting button{border:1px solid #725d96;background:#43335f;color:#fff;border-radius:10px;padding:9px 13px;font-size:13px;font-weight:850;min-width:83px;white-space:nowrap}
.fx-setting button.is-on{background:#e6d987;color:#2d2541;border-color:#ffeaa4}
.fx-volume{display:block}.fx-volume label{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-weight:800;margin-bottom:11px}.fx-volume input{width:100%;accent-color:#ffcc78;cursor:pointer}
.fx-settings-hint{font-size:12px!important;color:#c2b8d7!important;margin:9px 0!important}
.fx-offline-label{display:inline-block;color:#a4dfcc;font-size:11px;margin-top:4px}
.fx-disabled .fx-particle,.fx-disabled .fx-combo-label,.fx-disabled .fx-celebration{display:none!important}
.fx-disabled .board--stack .tile.fx-pair.matched,.fx-disabled .board--stack .tile.fx-gold-pair.matched{animation:none!important}
.fx-disabled .board--stack .tile.fx-just-selected,.fx-disabled .board--stack .tile.fx-wrong,.fx-disabled .board.fx-board-pulse,.fx-disabled .board.fx-board-gold{animation:none!important}
@media (prefers-reduced-motion:reduce){.fx-particle,.fx-combo-label,.fx-celebration{display:none!important}.board--stack .tile.fx-pair.matched,.board--stack .tile.fx-gold-pair.matched{animation:none!important}}
@media(max-width:450px){.top-actions{gap:5px}.top-actions .icon-btn{min-width:38px;min-height:40px;padding:0 7px}.fx-setting{padding:10px}.fx-celebration{top:22%}}
