.tile.selected { z-index: 30; }
    .tile.selected img { transform: scale(.84); filter: drop-shadow(0 0 16px rgba(255,85,168,.85)); }
    .tile.keyboard-cursor { z-index: 28; }
    .tile.keyboard-cursor::before {
      outline: 4px solid rgba(66,165,255,.72);
      outline-offset: -4px;
    }
    .tile.hint-active img { animation: hint .45s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(255,226,63,.95)); }
    .tile.pop {
      opacity: 0;
      transform: translate3d(var(--x), var(--y), 0) !important;
      filter: brightness(1.55);
    }
    .tile.pop::before {
      animation: tilePadPop .34s cubic-bezier(.16,.84,.24,1) forwards;
    }
    .tile.pop img {
      animation: tileFacePop .34s cubic-bezier(.16,.84,.24,1) forwards;
      filter: drop-shadow(0 0 14px rgba(255,255,255,.95));
    }
    @keyframes tileFacePop {
      0% { transform: scale(1) rotate(0deg); opacity: 1; filter: drop-shadow(0 7px 7px rgba(70,44,88,.18)); }
      38% { transform: scale(1.18) rotate(3deg); opacity: 1; filter: drop-shadow(0 0 16px rgba(255,255,255,.95)); }
      100% { transform: scale(.42) rotate(-7deg); opacity: 0; filter: drop-shadow(0 0 18px rgba(255,255,255,.72)); }
    }
    @keyframes tilePadPop {
      0% { transform: scale(1); opacity: 1; }
      42% { transform: scale(1.08); opacity: .86; }
      100% { transform: scale(.58); opacity: 0; }
    }
    .tile.all-clear-pop {
      animation: allClearTilePop .46s cubic-bezier(.12,.78,.2,1) var(--pop-delay, 0ms) forwards;
      z-index: 20;
    }
    .tile.all-clear-pop img {
      animation: allClearFacePop .46s cubic-bezier(.12,.78,.2,1) var(--pop-delay, 0ms) forwards;
    }
    .tile.all-clear-pop::before {
      animation: allClearPadPop .46s cubic-bezier(.12,.78,.2,1) var(--pop-delay, 0ms) forwards;
    }
    @keyframes allClearTilePop {
      0% {
        opacity: 1;
        transform: translate3d(var(--x), var(--y), 0);
        filter: brightness(1);
      }
      38% {
        opacity: 1;
        transform: translate3d(var(--x), var(--y), 0);
        filter: brightness(1.45);
      }
      100% {
        opacity: 0;
        transform: translate3d(var(--x), var(--y), 0);
        filter: brightness(1.8) blur(1px);
      }
    }
    @keyframes allClearFacePop {
      0% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 7px 7px rgba(70,44,88,.18)); }
      42% { transform: scale(1.08) rotate(4deg); filter: drop-shadow(0 0 14px rgba(255,255,255,.95)); }
      100% { transform: scale(.25) rotate(-8deg); filter: drop-shadow(0 0 18px rgba(255,255,255,.9)); }
    }
    @keyframes allClearPadPop {
      0% { transform: scale(1); opacity: 1; }
      42% { transform: scale(1.05); opacity: .9; }
      100% { transform: scale(.28); opacity: 0; }
    }

    .tile.special-bomb::after {
      content: "";
      position: absolute;
      right: -4%;
      top: -5%;
      width: 40%;
      height: 40%;
      background: url("assets/specials/special_bomb.png") center/contain no-repeat;
      filter: drop-shadow(0 2px 4px rgba(255,90,90,.45));
      animation: bob 1.3s ease-in-out infinite alternate;
      z-index: 3;
    }
    .tile.special-line-h::after,
    .tile.special-line-v::after {
      content: "";
      position: absolute;
      z-index: 3;
      border-radius: 999px;
      background: linear-gradient(90deg, #fff, #69e8ff 28%, #ff65c8 72%, #fff);
      box-shadow: 0 0 0 2px rgba(255,255,255,.86), 0 3px 8px rgba(78,94,180,.24);
      animation: linePulse 1s ease-in-out infinite alternate;
    }
    .tile.special-line-h::after {
      width: 62%;
      height: 15%;
      left: 19%;
      top: 42%;
    }
    .tile.special-line-v::after {
      width: 15%;
      height: 62%;
      left: 42%;
      top: 19%;
      background: linear-gradient(180deg, #fff, #69e8ff 28%, #ff65c8 72%, #fff);
    }
    .tile.special-rainbow img { animation: rainbowFloat 1.1s ease-in-out infinite alternate; }

    @keyframes hint {
      0%, 100% { transform: translate(0,0) rotate(0deg); }
      25% { transform: translate(-2px,-2px) rotate(-5deg); }
      50% { transform: translate(2px,-1px) rotate(5deg); }
      75% { transform: translate(-1px,2px) rotate(-4deg); }
    }
    @keyframes bob { from { transform: rotate(-8deg) scale(.96); } to { transform: rotate(8deg) scale(1.05); } }
    @keyframes linePulse { from { filter: brightness(1); } to { filter: brightness(1.22); } }
    @keyframes rainbowFloat { from { transform: translateY(0) rotate(-5deg) scale(.96); } to { transform: translateY(-4px) rotate(5deg) scale(1.04); } }
    #fx-container {
      position: fixed;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 40;
    }
    .toast {
      position: fixed;
      left: 50%;
      top: 48%;
      transform: translate(-50%, -50%) scale(.8);
      z-index: 45;
      pointer-events: none;
      font-size: clamp(30px, 11vw, 60px);
      font-weight: 1000;
      font-style: italic;
      color: #fff;
      text-align: center;
      text-shadow:
        4px 4px 0 #ff66a8, -4px -4px 0 #5ec7ff,
        0 0 18px rgba(255,255,255,.95),
        0 10px 28px rgba(75,44,107,.38);
      opacity: 0;
      animation: toast .95s cubic-bezier(.15,.86,.26,1.2) forwards;
    }
    @keyframes toast {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(.62) rotate(-4deg); }
      20%,75% { opacity: 1; transform: translate(-50%, -50%) scale(1.04) rotate(0deg); }
      100% { opacity: 0; transform: translate(-50%, -62%) scale(.88); }
    }
    .special-callout {
      position: absolute;
      inset: 0;
      z-index: 6;
      width: 100%;
      height: 34px;
      padding: 0 14px;
      border-radius: 999px;
      pointer-events: none;
      display: grid;
      grid-template-columns: auto minmax(0,1fr) auto;
      align-items: center;
      gap: 8px;
      color: #fff;
      background:
        radial-gradient(circle at 16% 35%, rgba(255,255,255,.82), transparent 18%),
        linear-gradient(90deg, var(--cue-a), var(--cue-b));
      border: 2px solid rgba(255,255,255,.92);
      box-shadow:
        0 0 0 4px rgba(255,255,255,.34),
        0 0 22px var(--cue-glow),
        0 10px 20px rgba(77,45,104,.2),
        inset 0 2px 0 rgba(255,255,255,.6);
      overflow: hidden;
      animation: specialCallout 1.48s cubic-bezier(.12,.88,.22,1.05) forwards;
    }
    .special-callout::before,
    .special-callout::after {
      content: "";
      position: absolute;
      inset: 2px;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(100deg, transparent 0 18%, rgba(255,255,255,.7) 32%, transparent 48% 100%);
      transform: translateX(-110%);
      animation: cueSweep .78s ease-out forwards;
    }
    .special-callout::after {
      inset: -6px;
      border: 2px solid var(--cue-glow);
      background: none;
      transform: none;
      opacity: .8;
      animation: cuePulse .68s ease-out forwards;
    }
    .special-callout.line {
      --cue-a: #35c8ff;
      --cue-b: #ff6cc4;
      --cue-glow: rgba(84,226,255,.34);
    }
    .special-callout.bomb {
      --cue-a: #ff7b39;
      --cue-b: #ff3f83;
      --cue-glow: rgba(255,112,77,.36);
    }
    .special-callout.rainbow {
      --cue-a: #ff5ca8;
      --cue-b: #7b6dff;
      --cue-glow: rgba(255,101,200,.34);
    }
    .special-callout.all-clear {
      --cue-a: #ff5ca8;
      --cue-b: #5ed7ff;
      --cue-glow: rgba(255,255,255,.48);
      grid-template-columns: auto minmax(0,1fr) auto;
      height: 36px;
      background:
        radial-gradient(circle at 12% 34%, rgba(255,255,255,.9), transparent 18%),
        linear-gradient(90deg, #ff5ca8, #7b6dff 48%, #5ed7ff);
    }
    .special-callout.mass {
      --cue-a: #42a5ff;
      --cue-b: #69e8ad;
      --cue-glow: rgba(105,232,173,.32);
    }
    .callout-tag {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 20px;
      padding: 0 9px;
      border-radius: 999px;
      background: rgba(255,255,255,.24);
      border: 1px solid rgba(255,255,255,.48);
      font-size: 9px;
      font-weight: 1000;
      letter-spacing: .12em;
      text-shadow: 0 1px 5px rgba(58,33,86,.28);
      white-space: nowrap;
    }
    .callout-title {
      display: block;
      position: relative;
      z-index: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
      font-size: 17px;
      font-weight: 1000;
      line-height: 1;
      text-shadow:
        0 2px 0 rgba(76,40,106,.23),
        0 0 12px rgba(255,255,255,.9);
    }
    .callout-subtitle {
      display: block;
      position: relative;
      z-index: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: right;
      font-size: 10px;
      font-weight: 1000;
      line-height: 1;
      text-shadow: 0 2px 8px rgba(58,33,86,.34);
    }
    @keyframes specialCallout {
      0% { opacity: 0; transform: translateY(-8px) scale(.9); filter: brightness(1.35); }
      16% { opacity: 1; transform: translateY(0) scale(1.04); }
      78% { opacity: 1; transform: translateY(0) scale(1); }
      100% { opacity: 0; transform: translateY(7px) scale(.94); filter: brightness(1); }
    }
    @keyframes cuePulse {
      from { transform: scale(.96); opacity: .8; }
      to { transform: scale(1.12); opacity: 0; }
    }
    @keyframes cueSweep {
      from { transform: translateX(-110%); }
      to { transform: translateX(120%); }
    }
    .shake { animation: shake .23s linear; }
    .mega-shake { animation: megaShake .34s linear; }
    @keyframes shake {
      0%,100% { transform: translate(0,0); }
      25% { transform: translate(7px,0); }
      50% { transform: translate(-7px,4px); }
      75% { transform: translate(5px,-3px); }
    }
    @keyframes megaShake {
      0%,100% { transform: translate(0,0) rotate(0deg); }
      15% { transform: translate(10px,-4px) rotate(.6deg); }
      32% { transform: translate(-11px,6px) rotate(-.7deg); }
      48% { transform: translate(8px,5px) rotate(.5deg); }
      66% { transform: translate(-7px,-5px) rotate(-.4deg); }
      82% { transform: translate(5px,3px) rotate(.25deg); }
    }