/*
 * ===== FRUIT TOWERS =====
 * Extracted from style.css (lines 1738-2091)
 * All .ft- prefixed selectors, barrel/reveal images, keyframes, and related rules.
 */

/* Stage */
.ft-stage {
  background: url('/img/fruittowers/Background.png') center center / cover no-repeat;
  background-color: #0b1e0b;
  border: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  overflow: hidden;
}

/* Game board panel */
.ft-board {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 10px 8px;
}

/* Tower container */
.ft-tower {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Zone colors */
.ft-zone-banana {
  --zone-accent: #fbbf24;
  --zone-bg: rgba(251, 191, 36, 0.1);
  --zone-border: rgba(251, 191, 36, 0.25);
  --zone-glow: rgba(251, 191, 36, 0.35);
}
.ft-zone-berry {
  --zone-accent: #f472b6;
  --zone-bg: rgba(244, 114, 182, 0.1);
  --zone-border: rgba(244, 114, 182, 0.25);
  --zone-glow: rgba(244, 114, 182, 0.35);
}
.ft-zone-apple {
  --zone-accent: #f87171;
  --zone-bg: rgba(248, 113, 113, 0.1);
  --zone-border: rgba(248, 113, 113, 0.25);
  --zone-glow: rgba(248, 113, 113, 0.35);
}
.ft-zone-watermelon {
  --zone-accent: #4ade80;
  --zone-bg: rgba(74, 222, 128, 0.1);
  --zone-border: rgba(74, 222, 128, 0.25);
  --zone-glow: rgba(74, 222, 128, 0.35);
}

/* ---- Row wrapper ---- */
.ft-row-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  position: relative;
  transition: all 0.3s ease;
}

/* Active row */
.ft-row-wrap.active { }
.ft-row-wrap.active .ft-sign-text {
  color: var(--zone-accent);
  text-shadow: 0 0 12px var(--zone-glow);
}

/* Locked rows */
.ft-row-wrap.locked { }
.ft-row-wrap.locked .ft-tile { pointer-events: none; cursor: not-allowed; }

/* Cleared rows */
.ft-row-wrap.cleared { }

/* ---- Main row: zone indicators + barrels ---- */
.ft-row-main {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}

/* Zone indicators on sides */
.ft-zone-ind {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 40px;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.3s;
}
.ft-row-wrap.active .ft-zone-ind { opacity: 1; }
.ft-row-wrap.locked .ft-zone-ind { opacity: 0.5; }
.ft-zone-ind .ft-zone-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.ft-zone-ind span {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

/* ---- Tile row ---- */
.ft-row {
  display: flex;
  gap: 0;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* ---- Individual tile ---- */
.ft-tile {
  width: 115px;
  height: 110px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent !important;
  border: none;
  border-radius: 0;
  margin-left: -24px;
  margin-right: -24px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, filter 0.15s;
  /* Let images overflow visually but don't capture clicks on overflow */
  pointer-events: none;
}
/* Invisible hit area centered within each tile - prevents edge taps
   from registering on the wrong barrel due to negative-margin overlap */
.ft-tile::after {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  bottom: 0;
  pointer-events: auto;
  cursor: pointer;
  z-index: 10;
}
.ft-tile:first-child { margin-left: 0; }
.ft-tile:first-child::after { left: 0; }
.ft-tile:last-child { margin-right: 0; }
.ft-tile:last-child::after { right: 0; }

/* Plank shelf under barrels */
.ft-plank {
  width: 100%;
  height: 60px;
  object-fit: fill;
  margin-top: -40px;
  position: relative;
  z-index: 0;
  pointer-events: none;
}

/* Multiplier sign (Element_5) */
.ft-mult-sign {
  position: relative;
  width: 180px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -4px;
  margin-bottom: 2px;
}
.ft-mult-sign .ft-sign-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.ft-mult-sign .ft-sign-text {
  position: relative;
  z-index: 1;
  font-size: 0.85rem;
  font-weight: 800;
  color: rgba(255,255,255,0.75);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s, text-shadow 0.3s;
}

.ft-tile .barrel-img,
.ft-tile .reveal-img {
  border: 0;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.ft-tile .barrel-img {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: opacity 0.3s;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5));
  background: transparent;
}
.ft-tile.revealed .barrel-img { opacity: 0; }
.ft-tile.breaking .barrel-img { z-index: 3; }

@media (hover: hover) {
  .ft-tile:not(.revealed):not(.disabled):hover {
    transform: scale(1.12);
    z-index: 5;
    filter: brightness(1.25) drop-shadow(0 4px 16px rgba(255,215,0,0.35));
    pointer-events: none;
  }
  .ft-tile:not(.revealed):not(.disabled):hover::after {
    pointer-events: auto;
  }
}
.ft-tile.disabled { cursor: not-allowed; }
.ft-tile.disabled::after { pointer-events: none; cursor: not-allowed; }
.ft-tile.revealed { cursor: default; }
.ft-tile.revealed::after { pointer-events: none; cursor: default; }
.ft-tile:focus, .ft-tile:active { outline: none; background: transparent !important; box-shadow: none; }

/* Breaking animation */
.ft-tile.breaking .barrel-img {
  animation: ftBarrelBreak 1s ease-in-out forwards;
}
@keyframes ftBarrelBreak {
  0%   { transform: rotate(0deg) scale(1); opacity: 1; }
  10%  { transform: rotate(-5deg) scale(1.04); }
  20%  { transform: rotate(6deg) scale(1.06); }
  30%  { transform: rotate(-7deg) scale(1.05); }
  40%  { transform: rotate(5deg) scale(1.03); }
  50%  { transform: rotate(-3deg) scale(1.01); }
  65%  { transform: rotate(0deg) scale(1.1); filter: brightness(1.5); }
  85%  { transform: scale(1.3); opacity: 0.4; filter: brightness(2); }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Reveal images */
.ft-tile .reveal-img {
  position: absolute;
  z-index: 2;
  width: 75%;
  height: 75%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5));
}
.ft-tile.revealed .reveal-img { opacity: 1; transform: scale(1); }
.ft-tile.revealed.safe .reveal-img {
  animation: ftFruitPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.ft-tile.revealed.trap .reveal-img {
  animation: ftSkullAppear 0.45s ease-out forwards;
}
@keyframes ftFruitPop {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  55% { transform: scale(1.25) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes ftSkullAppear {
  0% { transform: scale(0); opacity: 0; }
  35% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.ft-tile.revealed.trap {
  animation: ftTileShake 0.5s ease-out;
}
@keyframes ftTileShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px) rotate(-2deg); }
  30% { transform: translateX(5px) rotate(2deg); }
  45% { transform: translateX(-3px) rotate(-1deg); }
  60% { transform: translateX(3px) rotate(1deg); }
  75% { transform: translateX(-1px); }
}
.ft-tile.revealed.safe { }

/* ---- Multiplier progress bar ---- */
.ft-mult-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  padding: 8px 0 4px;
}
.ft-mult-step {
  flex: 1;
  text-align: center;
  padding: 5px 0;
  font-size: 0.56rem;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  transition: all 0.3s;
  white-space: nowrap;
}
.ft-mult-step.reached {
  background: rgba(34, 197, 94, 0.25);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.4);
}
.ft-mult-step.current {
  background: rgba(255, 215, 0, 0.25);
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* Tower start button */
.ft-start-btn {
  background: linear-gradient(135deg, #15803d, #065f46) !important;
  color: #fff !important;
  box-shadow: 0 2px 16px rgba(21,128,61,0.5) !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
}
.ft-start-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  box-shadow: 0 4px 24px rgba(21,128,61,0.6) !important;
  transform: translateY(-1px);
}