/* ============================================================
   2048 mini-app

   Warm cream and the canonical tile palette — a partner surface again, owing
   nothing to the wallet's yellow or the bank's red, and instantly readable as
   the game everyone already knows. Like Tape Ball the whole screen is one
   fixed, non-scrolling board: a puzzle that scrolls under the thumb loses the
   swipe that was meant for it.
   ============================================================ */
:root {
  --t2-page: #FAF8EF;
  --t2-board: #BBADA0;
  --t2-hole: rgba(238, 228, 218, 0.35);
  --t2-ink: #776E65;
  --t2-ink-soft: #9C8F84;
  --t2-light: #F9F6F2;
  --t2-gold: #EDC22E;
}

.t2-app {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100%;
  overflow: hidden;
  background: var(--t2-page);
  color: var(--t2-ink);
  user-select: none;
  -webkit-user-select: none;
}
.t2-app:focus { outline: none; }

/* Same rule, same reason as Tape Ball: an author `display` declaration
   silently beats the browser's own `[hidden] { display: none }`, and one
   overlay that ships that way covers the board and swallows every tap. */
.t2-app [hidden] { display: none !important; }

/* Before the first move there is no score to report and the cover carries its
   own Play button, so the live HUD stays off the title screen rather than
   sitting above it looking live. */
.t2-app.on-cover .t2-hud,
.t2-app.on-cover .t2-hint { display: none; }

/* ---------- host chrome ---------- */
/* Above every overlay on purpose. Whatever the mini-app puts on screen —
   including its own full-screen cover — the way out stays tappable. */
.t2-top {
  position: relative;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 4px;
  flex-shrink: 0;
}
.t2-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.t2-brand-mark {
  display: inline-grid;
  place-items: center;
  height: 26px;
  padding: 0 9px;
  border-radius: 8px;
  background: var(--t2-gold);
  color: #FFF;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.t2-capsule {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 3px;
  border-radius: 999px;
  background: rgba(119, 110, 101, 0.1);
  border: 1px solid rgba(119, 110, 101, 0.16);
}
.t2-capsule-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border: 0;
  background: none;
  color: var(--t2-ink);
  cursor: pointer;
}
.t2-capsule-split {
  width: 1px;
  height: 14px;
  background: rgba(119, 110, 101, 0.25);
}

/* ---------- HUD ---------- */
.t2-hud {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 10px;
  flex-shrink: 0;
}
.t2-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 74px;
  padding: 5px 12px;
  border-radius: 10px;
  background: var(--t2-board);
  color: var(--t2-light);
}
.t2-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.t2-stat b { font-size: 19px; font-weight: 800; line-height: 1.15; }
.t2-new {
  margin-left: auto;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #8F7A66;
  color: #FFF;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.t2-new:active { transform: translateY(1px); }

/* ---------- board ---------- */
.t2-stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 14px;
  min-height: 0;
}
.t2-board-wrap { width: 100%; max-width: 360px; }

/* The container the tile type scales against, so the numbers stay in
   proportion on any phone without a resize listener. */
.t2-grid {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 12px;
  background: var(--t2-board);
  container-type: inline-size;
  touch-action: none;          /* the swipe belongs to the board, not the page */
}
.t2-holes,
.t2-tiles { position: absolute; inset: 3.2%; }

.t2-hole {
  position: absolute;
  border-radius: 8px;
  background: var(--t2-hole);
}

/* left/top rather than transform: percentage translate would resolve against
   the tile's own box instead of the board. See the note in g2048.js. */
.t2-tile {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #EEE4DA;
  color: var(--t2-ink);
  font-weight: 800;
  line-height: 1;
  font-size: 30px;
  font-size: 9cqw;
  transition: left 0.13s ease, top 0.13s ease;
}
.t2-tile.t2-len3 { font-size: 24px; font-size: 7cqw; }
.t2-tile.t2-len4 { font-size: 19px; font-size: 5.6cqw; }
.t2-tile.t2-len5 { font-size: 16px; font-size: 4.6cqw; }

/* The absorbed tile finishes its slide beneath the survivor. */
.t2-tile.t2-dead { z-index: 1; }
.t2-tile.t2-merged { z-index: 3; animation: t2-pop 0.16s ease; }
.t2-tile.t2-fresh { animation: t2-appear 0.16s ease; }

@keyframes t2-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes t2-appear {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .t2-tile { transition: none; }
  .t2-tile.t2-merged,
  .t2-tile.t2-fresh { animation: none; }
}

.t2-v2 { background: #EEE4DA; }
.t2-v4 { background: #EDE0C8; }
.t2-v8 { background: #F2B179; color: var(--t2-light); }
.t2-v16 { background: #F59563; color: var(--t2-light); }
.t2-v32 { background: #F67C5F; color: var(--t2-light); }
.t2-v64 { background: #F65E3B; color: var(--t2-light); }
.t2-v128 { background: #EDCF72; color: var(--t2-light); }
.t2-v256 { background: #EDCC61; color: var(--t2-light); }
.t2-v512 { background: #EDC850; color: var(--t2-light); }
.t2-v1024 { background: #EDC53F; color: var(--t2-light); }
.t2-v2048 { background: var(--t2-gold); color: var(--t2-light); box-shadow: 0 0 18px rgba(237, 194, 46, 0.6); }
.t2-vbig { background: #3C3A32; color: var(--t2-light); }

.t2-hint {
  font-size: 12px;
  color: var(--t2-ink-soft);
  flex-shrink: 0;
}

/* ---------- foot ---------- */
.t2-foot {
  flex-shrink: 0;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
}

/* ---------- cover ---------- */
.t2-cover {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--t2-page);
}
.t2-cover-inner { text-align: center; padding: 0 22px; }
.t2-cover-mark {
  display: inline-grid;
  place-items: center;
  min-width: 132px;
  padding: 16px 22px;
  border-radius: 16px;
  background: var(--t2-gold);
  color: #FFF;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 28px rgba(237, 194, 46, 0.35);
}
.t2-cover-tag {
  margin-top: 16px;
  font-size: 14px;
  color: var(--t2-ink-soft);
}
.t2-cover-best { margin-top: 10px; font-size: 13px; color: var(--t2-ink-soft); }
.t2-cover-best b { color: var(--t2-ink); font-weight: 800; }
.t2-start {
  margin-top: 20px;
  height: 46px;
  padding: 0 46px;
  border: 0;
  border-radius: 12px;
  background: #8F7A66;
  color: #FFF;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.t2-start:active { transform: translateY(1px); }
.t2-cover-links {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--t2-ink-soft);
}
.t2-cover-links button {
  border: 0;
  background: none;
  color: var(--t2-ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- leaderboard ---------- */
.t2-board { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.t2-board-compact { margin: 14px 0 18px; }
.t2-board-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(119, 110, 101, 0.06);
  font-size: 14px;
}
.t2-board-row.you {
  background: rgba(237, 194, 46, 0.18);
  border: 1px solid rgba(237, 194, 46, 0.5);
  font-weight: 700;
}
.t2-board-rank { width: 22px; color: var(--t2-ink-soft); font-weight: 700; }
.t2-board-name { flex: 1; min-width: 0; }
.t2-board-score { font-weight: 800; font-variant-numeric: tabular-nums; }
.t2-board-empty {
  margin-top: 10px;
  font-size: 12px;
  color: var(--t2-ink-soft);
  text-align: center;
}

.t2-sheet-body p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; }
.t2-sheet-hint { color: var(--t2-ink-soft); font-size: 13px; }
.t2-sheet-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--t2-ink-soft);
}

/* ---------- end cards ---------- */
.t2-over-card,
.t2-win-card {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  background: rgba(250, 248, 239, 0.94);
  backdrop-filter: blur(3px);
}
.t2-over-inner,
.t2-win-inner { width: 100%; max-width: 320px; text-align: center; }
.t2-over-title { font-size: 14px; color: var(--t2-ink-soft); }
.t2-over-score {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 4px;
}
.t2-over-sub { margin-top: 8px; font-size: 12px; color: var(--t2-ink-soft); }

.t2-win-mark {
  display: inline-grid;
  place-items: center;
  min-width: 118px;
  padding: 14px 20px;
  border-radius: 16px;
  background: var(--t2-gold);
  color: #FFF;
  font-size: 38px;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(237, 194, 46, 0.4);
}
.t2-win-title { margin-top: 16px; font-size: 20px; font-weight: 800; }
.t2-win-body {
  margin: 8px 0 20px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--t2-ink-soft);
}