/* =============================================================
   GAME: Tile Match
   ============================================================= */
.board-tilematch { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; --tw: 48px; --th: 53px; --slot: 46px; }
.tm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.tm-pile {
  position: relative; max-width: 100%; border-radius: 18px;
  background: radial-gradient(90% 70% at 50% 40%, rgba(255, 207, 92, .1), transparent 70%), linear-gradient(180deg, #0d3442, #071b24);
  box-shadow: 0 0 0 2px #ffcf5c, 0 0 26px rgba(255, 207, 92, .3), inset 0 -5px 0 rgba(0, 0, 0, .3);
}
.tm-tile {
  position: absolute; left: var(--ox, 6px); top: var(--oy, 12px); width: var(--tw); height: var(--th); padding: 1px; border: 0; background: none; cursor: pointer;
  transition: filter .25s; -webkit-tap-highlight-color: transparent;
}
.tm-tile[hidden] { display: none; }
.tm-face {
  display: grid; place-items: center; width: 100%; height: calc(100% - 5px); border-radius: calc(var(--tw) * .2);
  background: linear-gradient(165deg, #ffffff, #fbf3e2 55%, #f1e2c4);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .95), inset 0 -2px 0 rgba(200, 170, 120, .5), 0 3px 0 #4fd0bc, 0 5px 0 #1d6e64, 0 7px 9px rgba(0, 0, 0, .5);
  transition: transform .14s, box-shadow .14s;
}
.tm-face svg { width: 80%; height: 80%; overflow: visible; }
.tm-tile:not(.tm-locked):hover .tm-face { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px #fff, inset 0 -2px 0 rgba(200, 170, 120, .5), 0 3px 0 #4fd0bc, 0 5px 0 #1d6e64, 0 0 16px rgba(255, 207, 92, .7), 0 10px 12px rgba(0, 0, 0, .45); }
.tm-tile:focus-visible { outline: none; }
.tm-tile:focus-visible .tm-face { box-shadow: 0 0 0 3px #fff, 0 0 16px #ffcf5c, 0 5px 0 #1d6e64; }
.tm-tile:not(.tm-locked):active .tm-face { transform: translateY(1px) scale(.97); }
.tm-locked { cursor: default; }
.tm-locked .tm-face { filter: brightness(.5) saturate(.55); }
.tm-shuf .tm-face { animation: tmShuf .45s ease; }
@keyframes tmShuf { 50% { transform: rotateY(90deg) scale(.9); } }

/* tray: 7 sunken slots */
.tm-tray-wrap { padding: 6px; border-radius: 18px; background: linear-gradient(180deg, #3b2a12, #24180a); box-shadow: 0 0 0 2px #ffcf5c, 0 0 20px rgba(255, 207, 92, .35), inset 0 2px 0 rgba(255, 255, 255, .12); }
.tm-tray { position: relative; display: flex; padding: 4px; border-radius: 13px; background: #140d05; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7); transition: box-shadow .3s; }
.tm-slot { width: var(--slot); height: calc(var(--slot) * 1.12); display: block; position: relative; }
.tm-slot::after { content: ""; position: absolute; inset: 3px; border-radius: 9px; background: rgba(255, 207, 92, .06); box-shadow: inset 0 0 0 1px rgba(255, 207, 92, .16); }
.tm-ttile { position: absolute; left: 4px; top: 4px; width: var(--slot); height: calc(var(--slot) * 1.12); padding: 2px; transition: transform .2s cubic-bezier(.3, .8, .4, 1); }
.tm-ttile .tm-face { height: calc(100% - 4px); box-shadow: inset 0 0 0 1.5px #fff, 0 3px 0 #4fd0bc, 0 4px 0 #1d6e64, 0 5px 6px rgba(0, 0, 0, .5); }
.tm-danger { box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7), 0 0 0 2px rgba(255, 61, 94, .8), 0 0 18px rgba(255, 61, 94, .55); }
.tm-pop { z-index: 2; }
.tm-pop .tm-face { animation: tmPop .33s ease-in forwards; }
@keyframes tmPop { 0% { transform: scale(1); } 40% { transform: scale(1.25) translateY(-6px); filter: brightness(1.4); box-shadow: 0 0 0 3px #fff, 0 0 22px #ffcf5c; } 100% { transform: scale(.1) translateY(-20px); opacity: 0; } }
.tm-spark {
  position: absolute; left: 50%; top: 45%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; pointer-events: none;
  background: #fff3b0; box-shadow: 0 0 8px #ffcf5c; animation: tmSpark .5s ease-out forwards;
}
@keyframes tmSpark { to { translate: var(--dx) var(--dy); opacity: 0; scale: .3; } }
.tm-shake { animation: tmShake .45s ease; }
@keyframes tmShake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }
.tm-lost .tm-tray { box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7), 0 0 0 2px #ff3d5e, 0 0 24px rgba(255, 61, 94, .6); }

.tm-tools { display: flex; gap: 8px; }
.tm-tool {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 .88rem var(--font-body); color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255, 207, 92, .45), 0 3px 0 rgba(0, 0, 0, .35);
}
.tm-tool svg { width: 18px; height: 18px; fill: #ffcf5c; }
.tm-tool:hover:not(:disabled) { box-shadow: inset 0 0 0 1px #ffcf5c, 0 0 14px rgba(255, 207, 92, .4), 0 3px 0 rgba(0, 0, 0, .35); }
.tm-tool:active:not(:disabled) { transform: translateY(2px); }
.tm-tool:disabled { opacity: .45; cursor: default; }
.tm-tool:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.tm-badge { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: .75rem; color: #2a1c00; background: #ffcf5c; }
.tm-num { color: #ffdc85; font-variant-numeric: tabular-nums; }
.tm-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.board-tilematch { position: relative; }
.tm-level { min-width: 110px; }
@media (prefers-reduced-motion: reduce) { .tm-ttile, .tm-tile { transition: none; } }