.mahjong-screen{
  --mahjong-bg:#8fd8e9;
  --mahjong-accent:#f29b39;
  --mahjong-world-bg:none;
  --tile-w:min(10.9vw, 54px);
  --tile-h:calc(var(--tile-w) * 1.34);
  --tile-gap:calc(var(--tile-w) * 0.09);
  --tile-row-step:0.72;
  --layer-step:calc(var(--tile-w) * -0.08);

  position:relative;
  width:100vw;
  height:100dvh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:
    calc(16px + env(safe-area-inset-top))
    12px
    calc(16px + env(safe-area-inset-bottom));
  background-color:transparent;
  background-size:
    auto,
    cover;
  background-position:
    center,
    center;
  background-repeat:no-repeat;
  color:#fff8d8;
  font-family:
    "Trebuchet MS",
    "Segoe UI",
    Arial,
    sans-serif;
}

.mahjong-screen button,
.mahjong-label,
.mahjong-toast,
.mahjong-coin-preview,
.mahjong-victory-coins{
  font-family:
    "Trebuchet MS",
    "Segoe UI",
    Arial,
    sans-serif;
  font-weight:900;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

.mahjong-screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,0.20), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(8,20,25,0.28), rgba(20,36,38,0.14) 24%, rgba(10,24,28,0.18) 70%, rgba(6,16,20,0.36)),
    linear-gradient(90deg, rgba(8,20,25,0.32), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(8,20,25,0.32));
}

.mahjong-bg-pattern{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0.18;
  background:
    radial-gradient(circle at 16% 26%, rgba(255,255,255,0.36) 0 42px, rgba(255,255,255,0) 44px),
    radial-gradient(circle at 84% 20%, rgba(255,255,255,0.24) 0 58px, rgba(255,255,255,0) 60px),
    radial-gradient(circle at 70% 82%, rgba(255,255,255,0.20) 0 74px, rgba(255,255,255,0) 76px);
}

.mahjong-hud,
.mahjong-table-wrap,
.mahjong-tray,
.mahjong-actions,
.mahjong-back-btn,
.mahjong-reward-flight-layer,
.mahjong-victory-overlay,
.mahjong-toast{
  position:relative;
  z-index:2;
}

.mahjong-back-btn{
  position:relative;
  flex:0 0 auto;
  pointer-events:auto;
  min-width:76px;
  height:40px;
  padding:0 14px;
  font-size:15px;
  border-radius:999px;
  border:2px solid rgba(255,231,148,0.82);
  color:#fff5bc;
  font-weight:900;
  text-shadow:
    0 1px 0 rgba(255,255,230,0.70),
    0 2px 0 rgba(112,48,8,0.90),
    1px 0 0 rgba(112,48,8,0.78),
    -1px 0 0 rgba(112,48,8,0.78),
    0 0 8px rgba(255,226,112,0.46);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,247,190,0.46), rgba(255,247,190,0) 56%),
    linear-gradient(180deg, rgba(255,168,40,0.86), rgba(151,70,18,0.92));
  box-shadow:
    0 8px 16px rgba(34,35,30,0.28),
    inset 0 1px 0 rgba(255,255,255,0.34);
}

.mahjong-back-btn:active{
  transform:scale(0.96);
}

.mahjong-hud{
  width:min(780px, 98vw);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  pointer-events:none;
}

.mahjong-panel{
  min-height:58px;
  padding:4px 8px;
  border-radius:0;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  filter:
    drop-shadow(0 8px 10px rgba(22,28,24,0.24))
    drop-shadow(0 0 10px rgba(255,232,120,0.16));
  animation:mahjongHudFloat 2600ms ease-in-out infinite;
}

.mahjong-title-panel,
.mahjong-prize-panel,
.mahjong-stats-panel{
  width:106px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}

.mahjong-center-panel{
  flex:0 0 86px;
  max-width:86px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  text-align:center;
  animation-delay:140ms;
}

.mahjong-player-avatar{
  position:relative;
  width:74px;
  height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 36% 20%, rgba(255,255,255,0.72), rgba(255,226,100,0.28) 42%, rgba(116,52,10,0.92) 100%);
  border:4px solid rgba(255,224,94,0.96);
  box-shadow:
    0 5px 0 rgba(91,41,7,0.84),
    0 10px 16px rgba(20,30,34,0.28),
    0 0 24px rgba(255,218,96,0.46),
    inset 0 0 0 3px rgba(92,39,8,0.58),
    inset 0 2px 0 rgba(255,255,255,0.52);
  animation:
    mahjongAvatarFloat 1850ms ease-in-out infinite,
    mahjongAvatarEnter 520ms ease-out both;
}

.mahjong-player-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  filter:
    brightness(1.08)
    saturate(1.12);
}

.mahjong-player-avatar::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  pointer-events:none;
  background:
    conic-gradient(
      from 220deg,
      rgba(255,255,255,0),
      rgba(255,244,170,0.74),
      rgba(255,255,255,0) 26%
    );
  opacity:0;
  mix-blend-mode:screen;
  animation:mahjongAvatarShine 3200ms ease-in-out infinite;
}

@keyframes mahjongAvatarFloat{

  0%,
  100%{
    transform:
      translateY(0)
      scale(1);
  }

  50%{
    transform:
      translateY(-4px)
      scale(1.035);
  }
}

@keyframes mahjongHudFloat{

  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-4px);
  }
}

@keyframes mahjongAvatarEnter{

  0%{
    opacity:0;
    transform:
      translateY(-8px)
      scale(0.82);
  }

  70%{
    opacity:1;
    transform:
      translateY(-2px)
      scale(1.08);
  }

  100%{
    opacity:1;
    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes mahjongAvatarShine{

  0%,
  62%{
    opacity:0;
    transform:rotate(0deg) scale(0.92);
  }

  72%{
    opacity:0.72;
  }

  86%{
    opacity:0;
    transform:rotate(145deg) scale(1.04);
  }

  100%{
    opacity:0;
    transform:rotate(145deg) scale(1.04);
  }
}

.mahjong-center-panel strong,
.mahjong-title-panel strong{
  font-size:28px;
  line-height:1;
  text-shadow:
    0 1px 0 rgba(255,255,232,0.72),
    0 2px 0 rgba(103,42,10,0.82),
    1px 0 0 rgba(103,42,10,0.70),
    -1px 0 0 rgba(103,42,10,0.70),
    0 0 12px rgba(255,238,152,0.54);
}

.mahjong-center-panel span,
.mahjong-label,
.mahjong-prize-panel span,
.mahjong-stats-panel span{
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0;
  color:#fff3b7;
  text-shadow:
    0 1px 0 rgba(255,255,232,0.62),
    0 2px 0 rgba(91,36,8,0.82),
    1px 0 0 rgba(91,36,8,0.54),
    -1px 0 0 rgba(91,36,8,0.54),
    0 0 7px rgba(255,230,126,0.44);
}

#mahjong-level-name{
  display:none;
}

.mahjong-prize-panel{
  gap:5px;
  animation-delay:260ms;
}

.mahjong-title-panel{
  animation-delay:40ms;
}

.mahjong-stats-panel{
  animation-delay:380ms;
}

.mahjong-prize-panel.is-collecting{
  animation:mahjongPrizeCollect 720ms ease-in-out infinite;
}

.mahjong-prize-row,
.mahjong-coin-preview,
.mahjong-victory-prize,
.mahjong-victory-coins{
  display:flex;
  align-items:center;
  justify-content:center;
}

.mahjong-prize-row{
  width:100%;
  flex-direction:column;
  gap:2px;
}

.mahjong-stars{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:82px;
  min-height:27px;
  gap:0;
}

.mahjong-stars img{
  width:31px;
  height:31px;
  object-fit:contain;
  margin:0 -4px;
  filter:
    drop-shadow(0 2px 2px rgba(84,38,12,0.42))
    drop-shadow(0 0 8px rgba(255,224,88,0.42));
  animation:mahjongStarAlive 1900ms ease-in-out infinite;
}

.mahjong-stars img:nth-child(2){
  animation-delay:160ms;
}

.mahjong-stars img:nth-child(3){
  animation-delay:320ms;
}

.mahjong-stars img.is-dim{
  opacity:0.32;
  filter:
    grayscale(0.68)
    brightness(0.82)
    drop-shadow(0 1px 1px rgba(84,38,12,0.24));
}

.mahjong-coin-preview{
  min-height:22px;
  gap:2px;
  color:#fff6bf;
  font-weight:900;
  line-height:1;
  text-shadow:
    0 1px 0 rgba(255,255,232,0.66),
    0 2px 0 rgba(92,38,18,0.84),
    1px 0 0 rgba(92,38,18,0.58),
    -1px 0 0 rgba(92,38,18,0.58),
    0 0 9px rgba(255,226,112,0.46);
}

.mahjong-coin-preview img{
  width:28px;
  height:28px;
  object-fit:contain;
  filter:
    drop-shadow(0 2px 2px rgba(84,38,12,0.38))
    saturate(1.08);
  animation:mahjongCoinAlive 2200ms ease-in-out infinite;
}

.mahjong-coin-preview b{
  font-size:17px;
}

.mahjong-reward-flight-layer{
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:none;
  overflow:visible;
}

.mahjong-reward-fly{
  position:absolute;
  left:0;
  top:0;
  width:var(--size);
  height:var(--size);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:
    translate(var(--sx), var(--sy))
    translate(-50%, -50%)
    scale(0.35);
  animation:
    mahjongRewardFly 1180ms cubic-bezier(0.18, 0.84, 0.22, 1) var(--delay) both;
  will-change:transform, opacity;
}

.mahjong-reward-fly img{
  width:100%;
  height:100%;
  object-fit:contain;
  animation:
    mahjongRewardSpin 1180ms ease-in-out var(--delay) both;
  filter:
    drop-shadow(0 8px 8px rgba(62,32,8,0.38))
    drop-shadow(0 0 18px rgba(255,224,88,0.52));
}

.mahjong-reward-coin{
  width:calc(var(--size) * 0.86);
  height:var(--size);
}

.mahjong-reward-star img{
  filter:
    drop-shadow(0 8px 8px rgba(62,32,8,0.38))
    drop-shadow(0 0 24px rgba(255,230,82,0.68))
    saturate(1.12);
}

.mahjong-match-ring,
.mahjong-match-particle{
  position:absolute;
  left:0;
  top:0;
  pointer-events:none;
  transform:translate(var(--x), var(--y)) translate(-50%, -50%);
  will-change:transform, opacity;
}

.mahjong-match-ring{
  width:calc(var(--tile-w) * 1.65);
  height:calc(var(--tile-w) * 1.65);
  border-radius:50%;
  border:2px solid rgba(255,249,186,0.92);
  opacity:0;
  box-shadow:
    0 0 16px rgba(255,229,80,0.78),
    inset 0 0 14px rgba(255,255,220,0.46);
  animation:mahjongMatchRing 680ms ease-out var(--delay) both;
}

.mahjong-match-particle{
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  opacity:0;
  background:
    radial-gradient(circle at 34% 28%, #ffffff, #fff06a 42%, #ff9f24 78%);
  box-shadow:
    0 0 7px rgba(255,236,92,0.72);
  animation:mahjongMatchParticle 620ms cubic-bezier(0.12, 0.84, 0.22, 1) var(--delay) both;
}

.mahjong-match-particle.type-1{
  background:
    radial-gradient(circle at 34% 28%, #ffffff, #72f2ff 46%, #238cff 82%);
}

.mahjong-match-particle.type-2{
  border-radius:30%;
  background:
    radial-gradient(circle at 34% 28%, #ffffff, #ff88f3 44%, #ac43ff 80%);
}

.mahjong-match-particle.type-3{
  background:
    radial-gradient(circle at 34% 28%, #ffffff, #9dff79 46%, #26bd4c 82%);
}

.mahjong-stats-panel b{
  color:#fff;
  font-size:20px;
}

.mahjong-table-wrap{
  width:min(760px, 96vw);
  height:min(560px, 56dvh);
  display:flex;
  align-items:center;
  justify-content:center;
}

.mahjong-board{
  position:relative;
  width:calc((var(--tile-w) + var(--tile-gap)) * 12);
  height:calc((var(--tile-h) * var(--tile-row-step)) * 8 + var(--tile-h) * 0.28);
  max-width:100%;
  border-radius:34px;
  transform:translateY(2px);
}

.mahjong-board::before{
  content:"";
  position:absolute;
  inset:6px -4px -8px;
  border-radius:34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  border:2px solid rgba(255,244,206,0.48);
  box-shadow:
    0 24px 48px rgba(34,58,64,0.28),
    0 0 30px rgba(255,255,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.20);
}

.mahjong-tile{
  position:absolute;
  left:calc(var(--tile-x) * (var(--tile-w) + var(--tile-gap)) + var(--tile-z) * var(--layer-step));
  top:calc(var(--tile-y) * (var(--tile-h) * var(--tile-row-step)) + var(--tile-z) * var(--layer-step));
  width:var(--tile-w);
  height:var(--tile-h);
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:calc(10 + var(--tile-z) * 20 + var(--tile-y));
  transition:
    transform 150ms ease,
    opacity 210ms ease,
    filter 150ms ease;
  will-change:transform, opacity, filter;
}

.mahjong-tile-face{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:
    radial-gradient(circle at 30% 14%, rgba(255,255,255,0.96), rgba(255,255,255,0.24) 34%, rgba(255,255,255,0) 52%),
    linear-gradient(145deg, #fff8de, #f0c96f 52%, #ae6125);
  border:2px solid rgba(255,248,212,0.92);
  overflow:hidden;
  box-shadow:
    0 9px 0 #7e411c,
    0 17px 22px rgba(12,26,30,0.42),
    0 0 14px rgba(255,236,160,0.18),
    inset 0 2px 0 rgba(255,255,255,0.66),
    inset 0 -11px 17px rgba(104,50,20,0.24);
}

.mahjong-tile-face::before{
  content:"";
  position:absolute;
  left:-18%;
  top:-28%;
  width:72%;
  height:72%;
  pointer-events:none;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,255,255,0.58), rgba(255,255,255,0.16) 38%, rgba(255,255,255,0) 66%);
  opacity:0.62;
  mix-blend-mode:screen;
}

.mahjong-tile-face::after{
  content:"";
  position:absolute;
  inset:-24%;
  pointer-events:none;
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,230,0.44) 48%, rgba(255,255,255,0) 60%);
  opacity:0;
  transform:translateX(-72%);
}

.mahjong-tile:not(.is-open){
  filter:
    saturate(0.62)
    brightness(0.66)
    contrast(0.96);
}

.mahjong-tile:not(.is-open) .mahjong-tile-face{
  border-color:rgba(210,190,145,0.54);

  box-shadow:
    0 6px 0 #50301b,
    0 11px 13px rgba(8,18,22,0.30),
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -10px 16px rgba(38,26,18,0.34);
}

.mahjong-tile.is-open{
  filter:
    brightness(1.11)
    saturate(1.18)
    contrast(1.03);
}

.mahjong-tile.is-open .mahjong-tile-face{
  box-shadow:
    0 9px 0 #8b461b,
    0 18px 23px rgba(12,26,30,0.42),
    0 0 14px rgba(255,236,160,0.20),
    inset 0 2px 0 rgba(255,255,255,0.72),
    inset 0 -11px 17px rgba(104,50,20,0.20);
}

.mahjong-tile.is-selected{
  z-index:999;

  transform:
    translateY(-12px)
    scale(1.10);

  filter:
    brightness(1.34)
    saturate(1.32)
    contrast(1.06)
    drop-shadow(0 0 10px rgba(255,251,204,0.88))
    drop-shadow(0 0 25px rgba(255,197,40,0.62));

  animation:
    mahjongSelectedPulse 1050ms ease-in-out infinite;
}

.mahjong-tile.is-selected .mahjong-tile-face{
  border-color:rgba(255,255,224,0.98);
  box-shadow:
    0 10px 0 #9b4a11,
    0 18px 22px rgba(12,26,30,0.38),
    0 0 0 3px rgba(255,225,72,0.50),
    0 0 18px rgba(255,238,118,0.52),
    inset 0 2px 0 rgba(255,255,255,0.78),
    inset 0 -10px 16px rgba(104,50,20,0.18);
}

.mahjong-tile.is-selected .mahjong-tile-face::after{
  animation:mahjongTileShine 760ms ease-out infinite;
  opacity:1;
}

@keyframes mahjongSelectedPulse{

  0%{
    transform:
      translateY(-12px)
      scale(1.10);
  }

  50%{
    transform:
      translateY(-15px)
      scale(1.14);
  }

  100%{
    transform:
      translateY(-12px)
      scale(1.10);
  }
}

@keyframes mahjongTileShine{

  0%{
    transform:translateX(-82%) rotate(0deg);
    opacity:0;
  }

  28%{
    opacity:0.82;
  }

  100%{
    transform:translateX(82%) rotate(0deg);
    opacity:0;
  }
}

.mahjong-tile.is-hint{
  animation:mahjongHint 820ms ease-in-out infinite;
}

.mahjong-tile.is-blocked-hit{
  animation:mahjongBlocked 230ms ease-out;
}

.mahjong-tile.is-undo-return{
  z-index:1001;

  animation:
    mahjongUndoReturn 420ms ease-out;
}

.mahjong-tile.is-removed{
  pointer-events:none;
  opacity:0;
  transform:scale(0.72) translateY(-12px);
}

.mahjong-glyph{
  width:62%;
  height:62%;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,0.80), rgba(255,255,255,0) 36%),
    var(--glyph-bg, linear-gradient(145deg, #41c7ff, #176eb9));
  box-shadow:
    0 3px 5px rgba(82,38,18,0.28),
    inset 0 2px 0 rgba(255,255,255,0.45),
    inset 0 -8px 12px rgba(0,0,0,0.16);
}

.mahjong-symbol-img{
  width:90%;
  height:90%;
  object-fit:contain;
  pointer-events:none;
  transform:translateY(-1px);
  filter:
    brightness(1.13)
    saturate(1.24)
    contrast(1.04)
    drop-shadow(0 5px 6px rgba(80,38,18,0.28))
    drop-shadow(0 0 9px rgba(255,240,160,0.28));
}

.mahjong-bitmap-number{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:0;
  min-height:28px;
  white-space:nowrap;
}

.mahjong-digit-img{
  display:block;
  width:auto;
  height:28px;
  margin:0 -3px;
  object-fit:contain;
  filter:
    drop-shadow(1px 0 0 rgba(88,35,18,0.78))
    drop-shadow(2px 1px 1px rgba(88,35,18,0.44))
    drop-shadow(0 0 7px rgba(255,236,136,0.42));
}

.mahjong-title-panel .mahjong-digit-img{
  height:40px;
  margin:0 -5px;
}

.mahjong-stats-panel .mahjong-digit-img{
  height:24px;
  margin:0 -3px;
}

.mahjong-digit-separator{
  color:#fff6bf;
  font-weight:900;
  text-shadow:
    0 1px 0 rgba(255,255,232,0.66),
    0 2px 0 rgba(88,35,18,0.82),
    0 0 8px rgba(255,226,130,0.44);
}

.mahjong-symbol-anchor .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #40c7ff, #176eb9); }
.mahjong-symbol-compass .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #ffdf4f, #cc7e10); }
.mahjong-symbol-shell .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #ffb6d0, #c94878); }
.mahjong-symbol-star .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #fff06a, #e28b13); clip-path:polygon(50% 0, 61% 34%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 34%); }
.mahjong-symbol-moon .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #d9d0ff, #7652c9); }
.mahjong-symbol-sun .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #fff2a4, #ff8b22); }
.mahjong-symbol-wave .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #63f1df, #168fb2); }
.mahjong-symbol-gem .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #9ff6ff, #1c91d1); clip-path:polygon(50% 0, 92% 35%, 74% 100%, 26% 100%, 8% 35%); }
.mahjong-symbol-key .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #ffd36f, #b66f1d); }
.mahjong-symbol-crown .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #ffe66c, #d48810); clip-path:polygon(8% 88%, 8% 34%, 30% 56%, 50% 16%, 70% 56%, 92% 34%, 92% 88%); }
.mahjong-symbol-leaf .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #7df095, #158942); border-radius:60% 8% 60% 8%; }
.mahjong-symbol-flower .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #ffa8f0, #9a42c8); }
.mahjong-symbol-fish .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #69d6ff, #207ed8); border-radius:55% 12% 55% 12%; }
.mahjong-symbol-ship .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #ff9d4d, #a95418); clip-path:polygon(8% 62%, 92% 62%, 76% 88%, 22% 88%); }
.mahjong-symbol-pearl .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #ffffff, #8cd8ff); }
.mahjong-symbol-map .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #f4d18c, #9a6a2a); border-radius:12px; }
.mahjong-symbol-lantern .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #ff7562, #b32218); border-radius:35%; }
.mahjong-symbol-fan .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #e8d5ff, #8f59d8); clip-path:polygon(50% 8%, 96% 88%, 4% 88%); }
.mahjong-symbol-dragon .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #ff735e, #8e1815); }
.mahjong-symbol-coin .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #fff388, #d58b12); }
.mahjong-symbol-wind .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #d8fbff, #4ab7cb); }
.mahjong-symbol-fire .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #ffd15b, #e53d22); border-radius:68% 32% 68% 32%; }
.mahjong-symbol-water .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #9ff4ff, #1c79ce); border-radius:50% 50% 60% 40%; }
.mahjong-symbol-stone .mahjong-glyph{ --glyph-bg:linear-gradient(145deg, #ccd5d6, #596b72); border-radius:34%; }

.mahjong-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.mahjong-tray{
  position:relative;
  width:min(520px, 92vw);
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 14px 16px;
  border-radius:0;
  border:0;
  background:none;
  filter:
    drop-shadow(0 9px 12px rgba(18,16,12,0.30))
    drop-shadow(0 0 10px rgba(255,216,92,0.20));
}

.mahjong-tray::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:112%;
  height:175%;
  transform:translate(-50%, -50%);
  background:
    url("../assets/img/telon/kibelar1.webp") center / 100% 100% no-repeat;
  pointer-events:none;
  z-index:-1;
}

.mahjong-tray-slot{
  position:relative;
  width:44px;
  height:58px;
  border-radius:12px;
  border:1px solid rgba(255,232,150,0.34);
  background:
    radial-gradient(circle at 50% 20%, rgba(255,246,194,0.16), rgba(255,246,194,0) 54%),
    rgba(30,18,9,0.30);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.24),
    0 1px 0 rgba(255,255,255,0.10);
}

.mahjong-tray-slot.is-filled{
  border-color:rgba(255,237,162,0.72);
  background:rgba(42,24,9,0.18);
}

.mahjong-tray-slot.is-clearing{
  animation:mahjongTrayClear 220ms ease both;
}

.mahjong-tray-tile{
  position:absolute;
  inset:-4px -2px -2px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:
    linear-gradient(180deg, #fff8d6 0%, #f3cf7d 54%, #bb6e2d 100%);
  box-shadow:
    0 5px 8px rgba(0,0,0,0.28),
    inset 0 2px 0 rgba(255,255,255,0.72),
    inset 0 -5px 0 rgba(132,68,25,0.46);
}

.mahjong-tray-tile .mahjong-tile-face{
  width:82%;
  height:76%;
  border-radius:9px;
}

.mahjong-tray-tile .mahjong-symbol-img{
  width:100%;
  height:100%;
  object-fit:contain;
}

@keyframes mahjongTrayClear{
  0%{ transform:scale(1); filter:brightness(1); }
  70%{ transform:scale(1.13); filter:brightness(1.35); }
  100%{ transform:scale(0.16); filter:brightness(1.8); opacity:0; }
}

.mahjong-actions button{
  min-width:96px;
  height:44px;
  padding:0 14px;
  border:2px solid rgba(255,229,146,0.78);
  border-radius:999px;
  color:#fff8d8;
  font-weight:900;
  text-shadow:
    0 1px 0 rgba(255,255,232,0.66),
    0 2px 0 rgba(100,42,9,0.86),
    1px 0 0 rgba(100,42,9,0.64),
    -1px 0 0 rgba(100,42,9,0.64),
    0 0 8px rgba(255,226,112,0.40);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,250,218,0.50), rgba(255,255,255,0) 48%),
    linear-gradient(180deg, rgba(255,180,64,0.82), rgba(220,92,34,0.60));
  box-shadow:
    0 8px 16px rgba(58,55,50,0.24),
    inset 0 2px 0 rgba(255,255,255,0.36);
}

.mahjong-actions button:active{
  transform:translateY(2px);
}

.mahjong-actions button.is-danger-hint{
  border-color:rgba(255,242,170,0.96);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,250,210,0.70), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(255,112,62,0.94), rgba(188,28,24,0.88));
  box-shadow:
    0 8px 18px rgba(82,12,8,0.34),
    0 0 16px rgba(255,42,34,0.74),
    0 0 34px rgba(255,90,48,0.48),
    inset 0 2px 0 rgba(255,255,255,0.42);
  animation:mahjongUndoDanger 820ms ease-in-out infinite;
}

.mahjong-toast{
  position:absolute;
  left:50%;
  bottom:calc(86px + env(safe-area-inset-bottom));
  min-width:170px;
  padding:12px 18px;
  border-radius:999px;
  text-align:center;
  font-weight:900;
  color:#fff6bf;
  text-shadow:
    0 1px 0 rgba(255,255,232,0.58),
    0 2px 0 rgba(30,20,10,0.80),
    1px 0 0 rgba(30,20,10,0.58),
    -1px 0 0 rgba(30,20,10,0.58),
    0 0 8px rgba(255,226,112,0.38);
  opacity:0;
  transform:translate(-50%, 12px);
  background:rgba(16,33,51,0.72);
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:0 10px 22px rgba(16,33,51,0.22);
  pointer-events:none;
}

.mahjong-toast.is-visible{
  animation:mahjongToast 1500ms ease forwards;
}

.mahjong-victory-overlay.hidden,
.mahjong-defeat-overlay.hidden{
  display:none;
}

.mahjong-victory-overlay{
  position:absolute;
  inset:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,228,118,0.18), rgba(255,228,118,0) 34%),
    rgba(5,16,22,0.22);
  backdrop-filter:blur(2px);
}

.mahjong-victory-scene{
  position:relative;
  width:min(680px, 96vw);
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:10px 18px 18px;
  color:#fff5bf;
  text-align:center;
  border-radius:0;
  border:0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,228,92,0.24), rgba(255,228,92,0) 48%);
  box-shadow:
    none;
  overflow:visible;
  animation:mahjongVictoryEnter 360ms ease-out both;
}

.mahjong-victory-glow{
  position:absolute;
  inset:-36%;
  pointer-events:none;
  opacity:0.62;
  background:
    conic-gradient(
      from 0deg,
      rgba(255,255,255,0),
      rgba(255,242,160,0.36),
      rgba(255,255,255,0) 22%,
      rgba(255,196,56,0.28),
      rgba(255,255,255,0) 48%
    );
  animation:mahjongVictoryGlow 6200ms linear infinite;
}

.mahjong-victory-win-row{
  position:relative;
  z-index:2;
  width:min(640px, 96vw);
  height:176px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 -4px;
}

.mahjong-victory-win-img{
  width:min(214px, 38vw);
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 9px 12px rgba(32,14,4,0.40))
    drop-shadow(0 0 18px rgba(255,226,94,0.44))
    saturate(1.08);
  animation:mahjongVictoryWinPop 1050ms ease-in-out infinite;
}

.mahjong-victory-cannon{
  width:min(214px, 34vw);
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 10px 12px rgba(20,16,12,0.34))
    drop-shadow(0 0 12px rgba(255,206,74,0.28))
    saturate(1.08);
  animation:
    mahjongVictoryCannonEnter 520ms ease-out both,
    mahjongVictoryCannonKick 1150ms ease-in-out 560ms infinite;
}

.mahjong-victory-cannon.cannon-left{
  --cannon-enter-x:-190px;
  margin-right:-42px;
  transform-origin:82% 62%;
}

.mahjong-victory-cannon.cannon-right{
  --cannon-enter-x:190px;
  margin-left:-42px;
  transform-origin:18% 62%;
  animation-delay:70ms, 680ms;
}

.mahjong-victory-confetti{
  position:absolute;
  inset:-20px 0 0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.mahjong-victory-confetti i{
  position:absolute;
  left:var(--x);
  top:-24px;
  width:11px;
  height:22px;
  border-radius:3px;
  background:var(--c);
  opacity:0;
  box-shadow:
    0 0 8px color-mix(in srgb, var(--c), transparent 40%);
  transform:rotate(var(--r));
  animation:
    mahjongVictoryConfetti 1550ms ease-in var(--d) infinite;
}

.mahjong-victory-prize{
  position:relative;
  z-index:2;
  min-height:44px;
  gap:12px;
  margin:-4px 0 2px;
  padding:4px 14px;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,245,166,0.22), rgba(255,245,166,0) 62%),
    rgba(31,18,8,0.18);
  border:1px solid rgba(255,232,138,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 8px 16px rgba(16,14,10,0.12);
}

.mahjong-victory-prize .mahjong-stars{
  min-width:108px;
}

.mahjong-victory-prize .mahjong-stars img{
  width:38px;
  height:38px;
  margin:0 -6px;
}

.mahjong-victory-coins{
  gap:4px;
  color:#fff6bf;
  font-weight:900;
  text-shadow:
    0 1px 0 rgba(255,255,232,0.66),
    0 2px 0 rgba(92,38,18,0.88),
    1px 0 0 rgba(92,38,18,0.62),
    -1px 0 0 rgba(92,38,18,0.62),
    0 0 11px rgba(255,226,112,0.48);
}

.mahjong-victory-coins img{
  width:36px;
  height:36px;
  object-fit:contain;
  filter:
    drop-shadow(0 3px 3px rgba(84,38,12,0.42))
    saturate(1.1);
}

.mahjong-victory-coins b{
  font-size:24px;
}

.mahjong-victory-scene button{
  position:relative;
  z-index:1;
  min-width:166px;
  height:50px;
  margin-top:-8px;
  border:2px solid rgba(255,245,170,0.92);
  border-radius:999px;
  color:#4c2200;
  font-size:17px;
  font-weight:900;
  text-shadow:
    0 1px 0 rgba(255,255,220,0.78),
    0 2px 0 rgba(255,185,48,0.62);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,220,0.72), rgba(255,255,220,0) 46%),
    linear-gradient(180deg, #fff05e, #ff9d22 58%, #c76712);
  box-shadow:
    0 5px 0 rgba(111,50,6,0.88),
    0 0 18px rgba(255,218,82,0.36),
    inset 0 1px 0 rgba(255,255,255,0.52);
}

.mahjong-victory-scene button:active{
  transform:translateY(2px);
}

.mahjong-defeat-overlay{
  background:
    radial-gradient(circle at 50% 42%, rgba(255,70,46,0.20), rgba(255,70,46,0) 36%),
    rgba(5,10,16,0.46);
}

.mahjong-defeat-scene{
  min-height:230px;
  gap:14px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,92,58,0.28), rgba(255,92,58,0) 52%);
}

.mahjong-defeat-glow{
  opacity:0.36;
  background:
    conic-gradient(
      from 0deg,
      rgba(255,255,255,0),
      rgba(255,82,56,0.34),
      rgba(255,255,255,0) 24%,
      rgba(255,190,72,0.22),
      rgba(255,255,255,0) 50%
    );
}

.mahjong-defeat-title{
  position:relative;
  z-index:2;
  font-size:clamp(42px, 13vw, 86px);
  line-height:0.95;
  color:#fff2ca;
  text-transform:uppercase;
  text-shadow:
    0 3px 0 rgba(105,25,14,0.90),
    0 0 18px rgba(255,76,42,0.60);
}

.mahjong-defeat-copy{
  position:relative;
  z-index:2;
  margin:0;
  color:#ffeec0;
  font-size:18px;
  font-weight:900;
  text-shadow:0 2px 0 rgba(88,30,18,0.82);
}

.mahjong-actions button:disabled{
  opacity:0.54;
  filter:saturate(0.65);
  pointer-events:none;
}

@keyframes mahjongUndoDanger{

  0%,
  100%{
    transform:translateY(0) scale(1);
    filter:brightness(1);
  }

  50%{
    transform:translateY(-2px) scale(1.05);
    filter:brightness(1.22);
  }
}

@keyframes mahjongVictoryEnter{

  0%{
    opacity:0;
    transform:
      translateY(22px)
      scale(0.92);
  }

  100%{
    opacity:1;
    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes mahjongPrizeCollect{

  0%,
  100%{
    transform:scale(1);
    filter:brightness(1);
  }

  45%{
    transform:scale(1.07);
    filter:
      brightness(1.22)
      drop-shadow(0 0 12px rgba(255,226,92,0.42));
  }
}

@keyframes mahjongStarAlive{

  0%,
  100%{
    transform:translateY(0) scale(1) rotate(0deg);
    filter:
      drop-shadow(0 2px 2px rgba(84,38,12,0.42))
      drop-shadow(0 0 8px rgba(255,224,88,0.42));
  }

  48%{
    transform:translateY(-2px) scale(1.12) rotate(6deg);
    filter:
      drop-shadow(0 3px 3px rgba(84,38,12,0.36))
      drop-shadow(0 0 16px rgba(255,232,88,0.68))
      brightness(1.16);
  }
}

@keyframes mahjongCoinAlive{

  0%,
  100%{
    transform:translateY(0) rotateY(0deg) scale(1);
  }

  48%{
    transform:translateY(-2px) rotateY(20deg) scale(1.08);
  }
}

@keyframes mahjongRewardFly{

  0%{
    opacity:0;
    transform:
      translate(var(--sx), var(--sy))
      translate(-50%, -50%)
      scale(0.35);
  }

  18%{
    opacity:1;
    transform:
      translate(
        calc(var(--sx) + var(--bx)),
        calc(var(--sy) + var(--by))
      )
      translate(-50%, -50%)
      scale(1.55);
  }

  46%{
    opacity:1;
    transform:
      translate(var(--mx), var(--my))
      translate(-50%, -50%)
      scale(1.24);
  }

  82%{
    opacity:1;
  }

  100%{
    opacity:0;
    transform:
      translate(var(--tx), var(--ty))
      translate(-50%, -50%)
      scale(0.26);
  }
}

@keyframes mahjongRewardSpin{

  0%{
    transform:rotate(0deg);
  }

  100%{
    transform:rotate(var(--spin));
  }
}

@keyframes mahjongVictoryGlow{

  100%{
    transform:rotate(360deg);
  }
}

@keyframes mahjongVictoryWinPop{

  0%,
  100%{
    transform:translateY(0) scale(1);
  }

  50%{
    transform:translateY(-3px) scale(1.055);
  }
}

@keyframes mahjongVictoryCannonEnter{

  0%{
    opacity:0;
    transform:
      translateX(var(--cannon-enter-x))
      translateY(12px)
      scale(0.82);
  }

  72%{
    opacity:1;
    transform:
      translateX(0)
      translateY(-4px)
      scale(1.08);
  }

  100%{
    opacity:1;
    transform:
      translateX(0)
      translateY(0)
      scale(1);
  }
}

@keyframes mahjongVictoryCannonKick{

  0%,
  100%{
    transform:translateY(0) rotate(0deg) scale(1);
  }

  18%{
    transform:translateY(3px) rotate(-2deg) scale(1.04);
  }

  34%{
    transform:translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes mahjongVictoryConfetti{

  0%{
    opacity:0;
    transform:
      translateY(-20px)
      rotate(var(--r))
      scale(0.82);
  }

  10%{
    opacity:1;
  }

  82%{
    opacity:1;
  }

  100%{
    opacity:0;
    transform:
      translateY(380px)
      rotate(calc(var(--r) + 260deg))
      scale(1.08);
  }
}

@keyframes mahjongHint{
  0%,
  100%{
    transform:translateY(-4px) scale(1.02);
  }

  50%{
    transform:translateY(-10px) scale(1.07);
  }
}

@keyframes mahjongBlocked{
  0%,
  100%{
    transform:translateX(0);
  }

  30%{
    transform:translateX(-5px);
  }

  62%{
    transform:translateX(5px);
  }
}

@keyframes mahjongUndoReturn{

  0%{
    transform:
      translateY(-18px)
      scale(0.78);

    opacity:0.28;

    filter:
      brightness(1.7)
      saturate(1.35)
      drop-shadow(0 0 16px rgba(255,244,180,0.78));
  }

  58%{
    transform:
      translateY(-7px)
      scale(1.12);

    opacity:1;
  }

  100%{
    transform:
      translateY(0)
      scale(1);

    opacity:1;
  }
}

@keyframes mahjongToast{
  0%{
    opacity:0;
    transform:translate(-50%, 12px);
  }

  14%,
  78%{
    opacity:1;
    transform:translate(-50%, 0);
  }

  100%{
    opacity:0;
    transform:translate(-50%, -6px);
  }
}

@media (orientation:portrait) and (max-width:600px){
  .mahjong-screen{
    --mobile-hud-h:88px;
    --mobile-actions-h:58px;
    --mobile-board-shift-x:0px;
    --mobile-board-shift-y:-10px;
    --tile-w:min(10vw, 46px);
    --tile-gap:calc(var(--tile-w) * 0.075);
    --tile-row-step:0.52;
    --layer-step:calc(var(--tile-w) * -0.065);
    gap:0;
    justify-content:flex-start;
    padding:
      calc(10px + env(safe-area-inset-top))
      0
      calc(10px + env(safe-area-inset-bottom));
    background-position:
      center,
      center top,
      center;
  }

  .mahjong-hud{
    width:calc(100vw - 8px);
    height:var(--mobile-hud-h);
    min-height:var(--mobile-hud-h);
    gap:2px;
    align-items:center;
    overflow:visible;
    transform:translateY(12px);
  }

  .mahjong-back-btn{
    min-width:62px;
    height:36px;
    padding:0 8px;
    border-width:2px;
    font-size:12px;
    transform:translateY(-30px);
    z-index:3;
  }

  .mahjong-back-btn:active{
    transform:
      translateY(-30px)
      scale(0.96);
  }

  .mahjong-panel{
    height:82px;
    min-height:82px;
    padding:3px 2px;
    border-radius:0;
    border-width:0;
  }

  .mahjong-title-panel,
  .mahjong-prize-panel,
  .mahjong-stats-panel{
    width:66px;
    min-width:66px;
    max-width:66px;
  }

  .mahjong-center-panel{
    max-width:74px;
    min-width:0;
    flex:0 0 74px;
  }

  .mahjong-player-avatar{
    width:64px;
    height:64px;
    border-width:3px;
  }

  .mahjong-center-panel strong,
  .mahjong-title-panel strong{
    font-size:19px;
  }

  .mahjong-center-panel span,
  .mahjong-label,
  .mahjong-prize-panel span,
  .mahjong-stats-panel span{
    font-size:9px;
    line-height:1.05;
  }

  .mahjong-stars{
    min-width:58px;
    min-height:20px;
  }

  .mahjong-stars img{
    width:22px;
    height:22px;
    margin:0 -3px;
  }

  .mahjong-coin-preview img{
    width:22px;
    height:22px;
  }

  .mahjong-coin-preview b{
    font-size:13px;
  }

  .mahjong-table-wrap{
    width:100vw;
    height:
      calc(
        100dvh -
        var(--mobile-hud-h) -
        var(--mobile-actions-h) -
        12px -
        env(safe-area-inset-top) -
        env(safe-area-inset-bottom)
      );
    min-height:330px;
    align-items:center;
    padding-top:0;
    padding-bottom:calc(var(--mobile-actions-h) + 72px);
    overflow:visible;
  }

  .mahjong-board{
    width:
      calc(
        (var(--tile-w) + var(--tile-gap)) * var(--board-cols, 12)
      );
    height:
      calc(
        (var(--tile-h) * var(--tile-row-step)) * var(--board-rows, 8) +
        var(--tile-h) * 0.42
      );
    transform:
      translateX(var(--mobile-board-shift-x))
      translateY(var(--mobile-board-shift-y));
  }

  .mahjong-board::before{
    display:none;
  }

  .mahjong-tile-face{
    border-radius:9px;
    border-width:1px;
    box-shadow:
      0 5px 0 #8c4c21,
      0 9px 12px rgba(31,45,48,0.26),
      inset 0 2px 0 rgba(255,255,255,0.52),
      inset 0 -8px 12px rgba(118,60,22,0.18);
  }

  .mahjong-symbol-img{
    width:92%;
    height:92%;
  }

  .mahjong-title-panel .mahjong-digit-img{
    height:33px;
    margin:0 -4px;
  }

  .mahjong-stats-panel .mahjong-digit-img{
    height:19px;
    margin:0 -2px;
  }

  .mahjong-actions{
    position:absolute;
    left:0;
    right:0;
    height:var(--mobile-actions-h);
    bottom:calc(58px + env(safe-area-inset-bottom));
    gap:5px;
  }

  .mahjong-tray{
    position:absolute;
    left:50%;
    bottom:calc(110px + env(safe-area-inset-bottom));
    width:calc(100vw - 24px);
    min-height:82px;
    gap:5px;
    padding:14px 14px 16px;
    transform:translateX(-50%);
  }

  .mahjong-tray::before{
    width:116%;
    height:190%;
  }

  .mahjong-tray-slot{
    width:36px;
    height:56px;
    border-radius:10px;
  }

  .mahjong-actions button{
    min-width:78px;
    height:42px;
    padding:0 7px;
    border-radius:999px;
    font-size:12px;
  }

  .mahjong-toast{
    bottom:
      calc(
        var(--mobile-actions-h) +
        22px +
        env(safe-area-inset-bottom)
      );
  }

  .mahjong-victory-scene{
    width:98vw;
    min-height:238px;
    gap:4px;
    padding:18px 8px 18px;
  }

  .mahjong-victory-win-row{
    height:140px;
  }

  .mahjong-victory-win-img{
    width:min(154px, 37vw);
  }

  .mahjong-victory-cannon{
    width:min(138px, 32vw);
  }

  .mahjong-victory-prize{
    min-height:38px;
    gap:8px;
    padding:3px 10px;
  }

  .mahjong-victory-prize .mahjong-stars{
    min-width:86px;
  }

  .mahjong-victory-prize .mahjong-stars img{
    width:31px;
    height:31px;
    margin:0 -5px;
  }

  .mahjong-victory-coins img{
    width:30px;
    height:30px;
  }

  .mahjong-victory-coins b{
    font-size:20px;
  }
}
.mahjong-tile.is-matching{
  z-index:1000;

  animation:
    mahjongTileMatchPop 430ms cubic-bezier(.2,.9,.2,1) forwards;
}

.mahjong-tile.is-matching .mahjong-tile-face{
  border-color:rgba(255,255,230,0.98);
  box-shadow:
    0 10px 0 #9b4a11,
    0 18px 22px rgba(12,26,30,0.34),
    0 0 0 4px rgba(255,231,82,0.58),
    0 0 24px rgba(255,236,120,0.72),
    0 0 42px rgba(255,151,22,0.44),
    inset 0 2px 0 rgba(255,255,255,0.84),
    inset 0 -9px 14px rgba(104,50,20,0.14);
}

.mahjong-tile.is-matching .mahjong-tile-face::after{
  opacity:1;
  animation:mahjongMatchSweep 430ms ease-out forwards;
}

@keyframes mahjongTileMatchPop{

  0%{
    transform:
      translateY(-10px)
      scale(1.08);

    filter:
      brightness(1.25)
      saturate(1.18);
  }

  28%{
    transform:
      translateY(-16px)
      scale(1.20);

    filter:
      brightness(1.8)
      saturate(1.45)
      drop-shadow(0 0 14px rgba(255,255,210,0.88))
      drop-shadow(0 0 30px rgba(255,210,70,0.62));
  }

  62%{
    transform:
      translateY(-13px)
      scale(1.12);

    filter:
      brightness(1.65)
      saturate(1.35)
      drop-shadow(0 0 18px rgba(255,255,210,0.80))
      drop-shadow(0 0 36px rgba(255,184,40,0.56));
  }

  100%{
    transform:
      translateY(-4px)
      scale(0.16);

    opacity:0;

    filter:
      brightness(2)
      saturate(1.2);
  }
}

@keyframes mahjongMatchSweep{

  0%{
    transform:translateX(-88%);
    opacity:0;
  }

  22%{
    opacity:0.95;
  }

  100%{
    transform:translateX(88%);
    opacity:0;
  }
}

@keyframes mahjongMatchRing{

  0%{
    opacity:0;
    transform:
      translate(var(--x), var(--y))
      translate(-50%, -50%)
      scale(0.42);
  }

  24%{
    opacity:1;
  }

  100%{
    opacity:0;
    transform:
      translate(var(--x), var(--y))
      translate(-50%, -50%)
      scale(1.55);
  }
}

@keyframes mahjongMatchParticle{

  0%{
    opacity:0;
    transform:
      translate(var(--x), var(--y))
      translate(-50%, -50%)
      scale(0.35)
      rotate(0deg);
  }

  20%{
    opacity:1;
    transform:
      translate(var(--x), var(--y))
      translate(-50%, -50%)
      scale(1.28)
      rotate(60deg);
  }

  100%{
    opacity:0;
    transform:
      translate(
        calc(var(--x) + var(--dx)),
        calc(var(--y) + var(--dy))
      )
      translate(-50%, -50%)
      scale(0.2)
      rotate(260deg);
  }
}