/* Merge Number Up — scoped game UI */
.tu-shell{
  --tu-board: rgba(0,0,0,.28);
  --tu-cell: rgba(255,255,255,.06);
  --tu-cell-hover: rgba(255,255,255,.12);
  --tu-line: rgba(255,255,255,.1);
  max-width: 520px;
  margin: 0 auto 48px;
}

.tu-hud{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}
.tu-stat{
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  text-align:center;
}
.tu-stat .label{
  display:block;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
  margin-bottom:4px;
}
.tu-stat .value{
  font-size:22px;
  font-weight:800;
  font-variant-numeric: tabular-nums;
}

.tu-tray{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  background: rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:14px;
  overflow:visible;
}
.tu-tray-label{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}
.tu-next-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:56px;
  padding:6px 8px;
  margin:-6px -8px;
  overflow:visible;
}
.tu-mini{
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:16px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  color:#0b1020;
  box-sizing:border-box;
  transition: transform .24s ease, opacity .24s ease, outline-color .24s ease;
}
.tu-mini.is-current{
  outline:2px solid rgba(255,255,255,.55);
  outline-offset:2px;
  box-shadow: 0 0 0 2px rgba(109,94,246,.35), 0 8px 18px rgba(0,0,0,.25);
}
.tu-mini.is-next{
  opacity:.7;
}
.tu-mini.tu-mini-exit{
  animation: tu-mini-exit .24s ease forwards;
}
.tu-mini.tu-mini-promote{
  animation: tu-mini-promote .24s ease forwards;
}
.tu-mini.tu-mini-enter{
  animation: tu-mini-enter .28s ease;
}
.tu-mini.tu-mini-enter-next{
  animation: tu-mini-enter-next .32s ease;
}
@keyframes tu-mini-exit{
  to{
    transform: translateX(-18px) scale(.82);
    opacity:0;
  }
}
@keyframes tu-mini-promote{
  from{
    transform: translateX(0) scale(1);
    opacity:.7;
  }
  to{
    transform: translateX(calc(-48px - 10px)) scale(1);
    opacity:1;
  }
}
@keyframes tu-mini-enter{
  from{
    transform: translateX(12px) scale(.9);
    opacity:0;
  }
  to{
    transform: translateX(0) scale(1);
    opacity:1;
  }
}
@keyframes tu-mini-enter-next{
  from{
    transform: translateX(16px);
    opacity:0;
  }
  to{
    transform: translateX(0);
    opacity:.7;
  }
}

.tu-board-wrap{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1;
}

.tu-board{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap:10px;
  background: var(--tu-board);
  border:1px solid var(--border);
  border-radius:20px;
  padding:12px;
  width:100%;
  height:100%;
  touch-action: manipulation;
  user-select:none;
  overflow:hidden;
  box-sizing:border-box;
}

.tu-fx{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  overflow:hidden;
  border-radius:20px;
}

.tu-cell{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  border-radius:14px;
  background: var(--tu-cell);
  border:1px solid transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease;
  min-width:0;
  min-height:0;
  padding:0;
  margin:0;
  box-sizing:border-box;
}
.tu-cell:not(.filled):hover,
.tu-cell:not(.filled):focus-visible{
  background: var(--tu-cell-hover);
  border-color: rgba(255,255,255,.28);
  outline:none;
}
.tu-shell.is-over .tu-cell:not(.filled){
  cursor:default;
  pointer-events:none;
}
.tu-shell.is-busy .tu-cell{
  pointer-events:none;
}
.tu-cell.flash{
  animation: tu-flash .35s ease;
}
.tu-cell.tu-merging .tu-tile{
  animation: tu-merge-pulse .28s ease infinite;
  z-index:2;
}
@keyframes tu-flash{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}
@keyframes tu-merge-pulse{
  0%, 100%{ transform: scale(1); filter: brightness(1); }
  50%{ transform: scale(1.08); filter: brightness(1.25) saturate(1.2); }
}

.tu-tile{
  width:100%;
  height:100%;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size: clamp(16px, 4.8vw, 26px);
  line-height:1;
  color:#0b1020;
  border:1px solid rgba(255,255,255,.2);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  box-sizing:border-box;
}
.tu-tile-place{
  animation: tu-pop .22s ease;
}
.tu-tile-born{
  animation: tu-born .42s cubic-bezier(.2,1.4,.3,1);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.45),
    0 0 28px rgba(109,94,246,.65),
    0 10px 22px rgba(0,0,0,.28);
}
.tu-tile-absorb{
  animation: tu-absorb .32s ease forwards;
}
.tu-tile-fly{
  position:absolute;
  z-index:5;
  pointer-events:none;
  margin:0;
  animation: tu-fly .32s ease forwards;
}
@keyframes tu-pop{
  from{ transform: scale(.82); opacity:.4; }
  to{ transform: scale(1); opacity:1; }
}
@keyframes tu-born{
  0%{ transform: scale(.35); opacity:.3; }
  60%{ transform: scale(1.18); opacity:1; }
  100%{ transform: scale(1); }
}
@keyframes tu-absorb{
  to{ transform: scale(.55); opacity:.35; filter: brightness(1.4); }
}
@keyframes tu-fly{
  to{
    transform: translate(var(--tu-dx), var(--tu-dy)) scale(.35);
    opacity:0;
  }
}

.tu-score-float{
  position:absolute;
  z-index:8;
  transform: translate(-50%, -50%);
  font-weight:800;
  font-size:18px;
  color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  pointer-events:none;
  animation: tu-float-up .7s ease forwards;
}
@keyframes tu-float-up{
  0%{ opacity:0; transform: translate(-50%, -30%) scale(.8); }
  20%{ opacity:1; }
  100%{ opacity:0; transform: translate(-50%, -120%) scale(1.05); }
}

.tu-burst{
  position:absolute;
  z-index:4;
  width:12px;
  height:12px;
  border-radius:50%;
  transform: translate(-50%, -50%);
  pointer-events:none;
  box-shadow:
    0 0 0 0 rgba(255,255,255,.55),
    18px -8px 0 -2px #fbbf24,
    -16px -10px 0 -2px #60a5fa,
    14px 14px 0 -2px #4ade80,
    -18px 12px 0 -2px #f472b6,
    0 -20px 0 -2px #a78bfa,
    0 20px 0 -2px #22d3ee;
  animation: tu-burst .48s ease-out forwards;
}
@keyframes tu-burst{
  0%{ opacity:1; transform: translate(-50%, -50%) scale(.4); }
  100%{ opacity:0; transform: translate(-50%, -50%) scale(1.8); }
}

.tu-stat .value.tu-score-pop{
  animation: tu-score-bump .35s ease;
}
@keyframes tu-score-bump{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.18); color:#86efac; }
  100%{ transform: scale(1); }
}

.tu-v2{ background: linear-gradient(145deg, #93c5fd, #60a5fa); }
.tu-v4{ background: linear-gradient(145deg, #86efac, #4ade80); }
.tu-v8{ background: linear-gradient(145deg, #fcd34d, #fbbf24); }
.tu-v16{ background: linear-gradient(145deg, #fdba74, #fb923c); }
.tu-v32{ background: linear-gradient(145deg, #f9a8d4, #f472b6); }
.tu-v64{ background: linear-gradient(145deg, #c4b5fd, #a78bfa); }
.tu-v128{ background: linear-gradient(145deg, #67e8f9, #22d3ee); color:#083344; }
.tu-v256{ background: linear-gradient(145deg, #fda4af, #fb7185); }
.tu-v512{ background: linear-gradient(145deg, #a5b4fc, #818cf8); }
.tu-v1024,
.tu-v2048,
.tu-v4096{
  background: linear-gradient(145deg, #fde68a, #f59e0b);
  font-size: clamp(13px, 4.2vw, 20px);
}

.tu-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.tu-actions .btn{
  flex:1 1 140px;
}
.tu-actions .btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}

.tu-overlay{
  display:none;
  position:absolute;
  inset:0;
  z-index:10;
  border-radius:20px;
  background: rgba(7,10,18,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items:center;
  justify-content:center;
  padding:20px;
  text-align:center;
  animation: tu-overlay-in .28s ease;
}
.tu-overlay.show{
  display:flex;
}
.tu-overlay-card{
  width:min(100%, 280px);
  padding:20px 18px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
.tu-overlay-card h2{
  margin:0 0 8px;
  font-size:22px;
  color:var(--text);
}
.tu-overlay-card p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}
@keyframes tu-overlay-in{
  from{ opacity:0; }
  to{ opacity:1; }
}

.tu-help{
  margin-top:18px;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.tu-help h2{
  margin:0 0 10px;
  font-size:18px;
  color:var(--text);
}
.tu-help p{ margin:0 0 12px; }
.tu-help strong{ color:var(--text); }
.tu-help a{ text-decoration:underline; text-underline-offset:2px; }
.tu-seo-tags{
  margin-top:4px;
  padding-top:12px;
  border-top:1px solid var(--border);
  font-size:12px;
  color: rgba(234,240,255,.55);
  line-height:1.6;
}

@media (max-width: 520px){
  .tu-hud{ grid-template-columns: 1fr 1fr; }
  .tu-hud .tu-stat:last-child{ grid-column: 1 / -1; }
  .tu-board{ gap:8px; padding:10px; }
  .tu-cell, .tu-tile{ border-radius:12px; }
  .tu-mini{ width:44px; height:44px; flex-basis:44px; font-size:15px; }
}