/* ==========================================================================
   Trái Cây Nối Nối: components (shared by the game and design-system.html)
   ========================================================================== */

/* ---------- Button: a 3D "block" pressed down by the finger ---------- */
.btn {
  --btn-top: var(--la-chuoi-400);
  --btn-bottom: var(--la-chuoi-500);
  --btn-edge: var(--la-chuoi-800);
  --btn-ink: var(--color-ink); /* ink on leaf green: 5.1:1 (white would be 2.7:1) */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: 0 var(--space-7);
  border: 0;
  border-radius: var(--radius-pill);
  font: var(--weight-black) 1.125rem/1 var(--font-ui);
  white-space: nowrap;
  color: var(--btn-ink);
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.45);
  background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom));
  box-shadow:
    inset 0 -3px 0 rgb(0 0 0 / 0.07),
    0 var(--block-depth) 0 var(--btn-edge),
    0 12px 18px -10px rgb(42 22 64 / 0.55);
  cursor: pointer;
  transition: transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-instant) var(--ease-out), filter var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 5px 16px auto;
  height: 36%;
  border-radius: var(--radius-pill);
  background: linear-gradient(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0));
  pointer-events: none;
}
.btn .icon { width: 22px; height: 22px; }
@media (hover: hover) { .btn:hover { filter: brightness(1.05) saturate(1.05); } }
.btn:active,
.btn.is-pressed {
  transform: translateY(calc(var(--block-depth) - var(--block-depth-pressed)));
  box-shadow:
    inset 0 -3px 0 rgb(0 0 0 / 0.07),
    0 var(--block-depth-pressed) 0 var(--btn-edge),
    0 4px 8px -4px rgb(42 22 64 / 0.5);
}
.btn:disabled { filter: grayscale(0.7) opacity(0.6); cursor: not-allowed; }
.btn--mango { --btn-top: #FFDB5C; --btn-bottom: var(--vang-xoai-500); --btn-edge: var(--vang-xoai-700); --btn-ink: var(--color-ink); text-shadow: 0 1px 0 rgb(255 255 255 / 0.55); }
.btn--pink { --btn-top: var(--hong-thanh-long-600); --btn-bottom: #B8174F; --btn-edge: #8C0F3B; --btn-ink: #fff; text-shadow: 0 1px 0 rgb(0 0 0 / 0.2); }
.btn--jade { --btn-top: #108380; --btn-bottom: var(--ngoc-gach-bong-700); --btn-edge: #073F3C; --btn-ink: #fff; text-shadow: 0 1px 0 rgb(0 0 0 / 0.2); }
.btn--ghost { --btn-top: #FFFFFF; --btn-bottom: #FFFFFF; --btn-edge: var(--muc-tim-200); --btn-ink: var(--color-ink); text-shadow: none; }
.btn--lg { min-height: 64px; padding: 0 var(--space-8); font-size: 1.375rem; }
.btn--sm { min-height: 44px; padding: 0 var(--space-5); font-size: 1rem; }
.btn--block { width: 100%; }

/* ---------- Icon button (pause, back, sound...) ---------- */
.icon-btn {
  --btn-edge: var(--muc-tim-200);
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 18px;
  color: var(--color-ink);
  background: linear-gradient(#FFFFFF, #FBF7FF);
  box-shadow: 0 4px 0 var(--btn-edge), 0 10px 16px -10px rgb(42 22 64 / 0.6);
  cursor: pointer;
  transition: transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-instant) var(--ease-out);
}
.icon-btn .icon { width: 26px; height: 26px; }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-edge), 0 3px 6px -3px rgb(42 22 64 / 0.6); }
.icon-btn.is-off { color: var(--color-ink-muted); }

/* ---------- Chip: small labelled fact (board movement, region...) ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border-radius: var(--radius-pill);
  font: var(--weight-bold) var(--text-sm)/1.2 var(--font-ui);
  color: var(--ngoc-gach-bong-800);
  background: var(--ngoc-gach-bong-100);
  white-space: nowrap;
}
.chip .icon { width: 18px; height: 18px; }
.chip--mango { color: #8A5200; background: var(--vang-xoai-100); }
.chip--pink { color: var(--hong-thanh-long-700); background: var(--hong-thanh-long-100); }

/* ---------- Count badge on power-ups ---------- */
.badge {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  font: var(--weight-black) 0.875rem/1 var(--font-ui);
  color: #fff;
  background: var(--hong-thanh-long-600);
  box-shadow: 0 0 0 3px #fff, 0 3px 6px rgb(42 22 64 / 0.3);
}

/* ---------- Tile: ivory face, jade edge, gạch bông corners ---------- */
.tile {
  --depth: calc(var(--ts, 64px) * 0.075);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ts, 64px);
  height: var(--ts, 64px);
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--radius-tile);
  transform: translate3d(var(--x, 0), var(--y, 0), 0);
  transition: transform 300ms var(--ease-out);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tile.no-anim { transition: none; }
.tile.is-selected,
.tile.is-leaving { z-index: 300 !important; }
.tile__body {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-tile);
  background:
    var(--tile-motif-image, none) center / 100% 100% no-repeat,
    linear-gradient(180deg, var(--tile-face), var(--tile-face-2));
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / 0.9),
    0 var(--depth) 0 var(--tile-edge),
    0 calc(var(--depth) + 2px) 0 var(--tile-edge-dark),
    0 calc(var(--depth) + 6px) calc(var(--ts, 64px) * 0.14) rgb(42 22 64 / 0.28);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}
.tile__body > .fruit {
  position: absolute;
  inset: 7% 7% 9%;
  width: 86%;
  height: 84%;
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-spring), filter var(--dur-base);
}
.tile__cage {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  pointer-events: none;
}
@media (hover: hover) { .tile:hover .tile__body { transform: translateY(-2px); } }
.tile.is-selected .tile__body {
  transform: translateY(calc(var(--ts, 64px) * -0.08)) scale(1.07);
  background:
    var(--tile-motif-image, none) center / 100% 100% no-repeat,
    linear-gradient(180deg, #FFF9DC, var(--tile-selected-face));
  box-shadow:
    0 0 0 3px var(--tile-selected-ring),
    0 0 0 7px rgb(255 197 46 / 0.35),
    0 calc(var(--depth) + 8px) 0 -4px var(--tile-edge),
    0 calc(var(--depth) + 14px) calc(var(--ts, 64px) * 0.2) rgb(42 22 64 / 0.3);
}
.tile.is-selected .fruit { animation: fruit-hop 0.5s var(--ease-spring); }
.tile.is-hint .tile__body { animation: hint-pulse 0.9s ease-in-out infinite; }
.tile.is-wrong .tile__body {
  animation: tile-shake 0.36s var(--ease-out);
  box-shadow: 0 0 0 3px var(--tile-error-ring), 0 var(--depth) 0 var(--tile-edge);
}
.tile.is-locked { cursor: not-allowed; }
.tile.is-locked .fruit { filter: saturate(0.6) brightness(0.96); }
@media (hover: hover) { .tile.is-locked:hover .tile__body { transform: none; } }
.tile.is-opening .tile__cage { animation: cage-open 0.42s var(--ease-in) forwards; }
.tile.is-leaving { pointer-events: none; }
.tile.is-leaving .tile__body { animation: tile-pop 0.34s var(--ease-in) forwards; }

@keyframes fruit-hop {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-10%) scale(1.08, 0.94); }
  70% { transform: translateY(0) scale(0.96, 1.05); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes hint-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--tile-hint-ring), 0 0 0 6px rgb(24 163 160 / 0.25), 0 var(--depth) 0 var(--tile-edge); transform: translateY(0); }
  50% { box-shadow: 0 0 0 3px var(--tile-hint-ring), 0 0 0 12px rgb(24 163 160 / 0.12), 0 var(--depth) 0 var(--tile-edge); transform: translateY(-3px); }
}
@keyframes tile-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8%); }
  40% { transform: translateX(7%); }
  60% { transform: translateX(-5%); }
  80% { transform: translateX(3%); }
}
@keyframes tile-pop {
  0% { transform: scale(1.08) translateY(-6%); opacity: 1; }
  45% { transform: scale(1.2) translateY(-10%); opacity: 1; }
  100% { transform: scale(0.1) translateY(-10%) rotate(14deg); opacity: 0; }
}
@keyframes cage-open {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.12) rotate(-4deg); opacity: 1; }
  100% { transform: scale(1.4) rotate(8deg) translateY(-12%); opacity: 0; }
}

/* ---------- Timer: a stalk that drains right to left, with star marks ---------- */
.timer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
}
.timer > .icon { width: 20px; height: 20px; color: var(--ngoc-gach-bong-700); }
.timer__track {
  position: relative;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--muc-tim-100);
  box-shadow: inset 0 2px 3px rgb(42 22 64 / 0.18);
  overflow: hidden;
}
.timer__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0) 0 22px, rgb(255 255 255 / 0.35) 22px 24px),
    linear-gradient(180deg, #5FE0B0, var(--la-chuoi-500));
  transform-origin: left center;
  transform: scaleX(var(--p, 1));
}
.timer__mark {
  position: absolute;
  left: var(--m, auto);
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: rgb(58 31 93 / 0.35);
}
.timer__text {
  min-width: 3.2em;
  font: var(--weight-black) var(--text-md)/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-ink);
}
.timer.is-mid .timer__fill { background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0) 0 22px, rgb(255 255 255 / 0.35) 22px 24px), linear-gradient(180deg, #FFDB5C, var(--vang-xoai-600)); }
.timer.is-low .timer__fill { background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0) 0 22px, rgb(255 255 255 / 0.35) 22px 24px), linear-gradient(180deg, #FF8A7A, var(--do-den-long-500)); }
.timer.is-low .timer__text { color: var(--do-den-long-600); animation: low-time 1s ease-in-out infinite; }
.timer.is-frozen .timer__fill { background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0) 0 22px, rgb(255 255 255 / 0.5) 22px 24px), linear-gradient(180deg, #A9E4FF, var(--tra-da-500)); }
.timer.is-frozen .timer__text { color: #1A73A3; }
@keyframes low-time { 50% { transform: scale(1.12); } }

/* ---------- Power-up button ---------- */
.tool {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: var(--weight-bold) var(--text-xs)/1.2 var(--font-ui);
  color: var(--color-ink);
}
.tool__face {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 22px;
  background: radial-gradient(circle at 35% 25%, #FFFFFF, var(--sua-dua-100));
  box-shadow: 0 5px 0 var(--tile-edge), 0 7px 0 var(--tile-edge-dark), 0 14px 20px -10px rgb(42 22 64 / 0.55);
  transition: transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-instant);
}
.tool .pu-art { width: 42px; height: 42px; }
.tool .badge { position: absolute; top: -8px; right: -8px; }
.tool__label {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.85);
}
.tool:active .tool__face { transform: translateY(4px); box-shadow: 0 1px 0 var(--tile-edge), 0 2px 0 var(--tile-edge-dark), 0 4px 8px -4px rgb(42 22 64 / 0.5); }
.tool:disabled { cursor: not-allowed; }
.tool:disabled .tool__face { filter: grayscale(1) opacity(0.55); }
.tool:disabled .badge { background: var(--muc-tim-400); }
.tool--mini .tool__face { width: 46px; height: 46px; border-radius: 16px; color: var(--color-ink); }
.tool--mini .tool__face .icon { width: 24px; height: 24px; }
.tool--mini.is-off .tool__face { color: var(--color-ink-muted); }
.tool.is-active .tool__face { box-shadow: 0 0 0 4px var(--tra-da-500), 0 5px 0 var(--tile-edge), 0 14px 20px -10px rgb(42 22 64 / 0.55); }

/* ---------- Stars ---------- */
.stars { display: inline-flex; align-items: flex-end; gap: 2px; }
.stars .star { width: 22px; height: 22px; }
.stars--lg { gap: 6px; }
.stars--lg .star { width: 64px; height: 64px; }
.stars--lg .star:nth-child(2) { width: 80px; height: 80px; transform: translateY(-14px); }
.stars--lg .star.is-on { animation: star-in 0.5s var(--ease-spring) both; }
@keyframes star-in {
  0% { transform: scale(0) rotate(-40deg); }
  100% { transform: scale(1) rotate(0); }
}
.stars--lg .star:nth-child(2).is-on { animation-name: star-in-mid; }
@keyframes star-in-mid {
  0% { transform: translateY(-14px) scale(0) rotate(-40deg); }
  100% { transform: translateY(-14px) scale(1) rotate(0); }
}

/* ---------- Dialog ---------- */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-4); }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: var(--color-backdrop); backdrop-filter: blur(3px); animation: fade-in var(--dur-base) var(--ease-out); }
.modal__card {
  position: relative;
  width: min(100%, 420px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: var(--space-7) var(--space-6) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: 0 8px 0 var(--sua-dua-200), var(--shadow-modal);
  text-align: center;
  animation: card-in var(--dur-slow) var(--ease-spring);
}
.modal__card--postcard { padding: 0 0 var(--space-6); overflow: hidden; }
.modal__art { display: grid; place-items: center; margin: calc(var(--space-9) * -1) auto var(--space-2); width: 150px; }
.modal__art .mascot { width: 150px; height: auto; filter: drop-shadow(0 10px 12px rgb(42 22 64 / 0.25)); }
.modal__card:has(.modal__art) { margin-top: var(--space-9); overflow: visible; }
.modal__eyebrow { font: var(--weight-bold) var(--text-sm)/1.2 var(--font-ui); color: var(--color-ink-soft); }
.modal__title { margin: var(--space-1) 0 var(--space-2); font: 400 var(--text-3xl)/1.1 var(--font-display); color: var(--color-ink); }
.modal__text { margin: 0 auto var(--space-5); max-width: 32ch; color: var(--color-ink-soft); }
.modal__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.modal__actions .btn { flex: 1 1 140px; padding: 0 var(--space-4); }
@keyframes card-in { from { transform: translateY(24px) scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Postcard (level card + level intro) ---------- */
.postcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 6px 0 var(--sua-dua-200), var(--shadow-soft);
  overflow: hidden;
  text-align: left;
}
.postcard__view {
  position: relative;
  height: 112px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-1), var(--sky-2) 60%, var(--sky-3));
}
.postcard__view .scene__bottom { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
.postcard__view .scene__top { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 60%; }
.postcard__num {
  position: absolute;
  left: 12px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font: 400 1.375rem/1 var(--font-display);
  color: var(--color-ink);
  background: var(--vang-xoai-500);
  box-shadow: 0 0 0 4px #fff, 0 6px 10px rgb(42 22 64 / 0.3);
}
.postcard__stamp {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 56px;
  height: 64px;
  padding: 5px;
  /* white paper with holes on an 8px grid; the inner panel covers the middle, so holes show only on the edge */
  background: radial-gradient(circle, transparent 2.6px, #fff 3px) -4px -4px / 8px 8px;
  filter: drop-shadow(0 3px 4px rgb(42 22 64 / 0.3));
  transform: rotate(6deg);
}
.postcard__stamp-inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1.5px solid var(--hong-thanh-long-300);
  background: var(--hong-thanh-long-100);
}
.postcard__stamp .fruit { width: 38px; height: 38px; }
.postcard__body { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3) var(--space-4) var(--space-4); }
.postcard__title { margin: 0; font: 400 var(--text-lg)/1.15 var(--font-display); color: var(--color-ink); }
.postcard__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.postcard__region { font: var(--weight-semibold) var(--text-sm)/1.2 var(--font-ui); color: var(--color-ink-soft); }
.postcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  top: max(16px, env(safe-area-inset-top));
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(100vw - 32px);
  padding: 10px 18px 10px 12px;
  border-radius: var(--radius-pill);
  font: var(--weight-bold) var(--text-md)/1.25 var(--font-ui);
  color: #fff;
  background: var(--muc-tim-800);
  box-shadow: var(--shadow-float);
  transform: translate(-50%, calc(-100% - 48px));
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-spring), visibility 0s linear var(--dur-slow);
  pointer-events: none;
}
.toast.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform var(--dur-slow) var(--ease-spring), visibility 0s; }
.toast .icon { flex: none; width: 22px; height: 22px; color: var(--vang-xoai-500); }

/* ---------- Toggle row (settings) ---------- */
.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 56px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  font: var(--weight-bold) var(--text-md)/1.2 var(--font-ui);
  color: var(--color-ink);
  background: var(--color-surface-sunken);
  cursor: pointer;
  text-align: left;
}
.toggle + .toggle { margin-top: var(--space-2); }
.toggle__switch {
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--muc-tim-200);
  transition: background var(--dur-fast);
}
.toggle__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgb(42 22 64 / 0.3);
  transition: transform var(--dur-base) var(--ease-spring);
}
.toggle[aria-checked="true"] .toggle__switch { background: var(--la-chuoi-500); }
.toggle[aria-checked="true"] .toggle__switch::after { transform: translateX(22px); }