.fruit-score { position: absolute; z-index: 8; top: 10px; right: 12px; border-radius: 999px; padding: 8px 13px; background: rgba(255,255,255,.94); font-size: 1.05rem; font-weight: 900; box-shadow: 0 4px 0 rgba(51,39,98,.15); }
.fruit-progress { position: absolute; z-index: 8; top: 16px; left: 13px; display: flex; gap: 5px; }
.fruit-progress i { width: 9px; height: 9px; border-radius: 50%; background: rgba(65,46,135,.17); }
.fruit-progress i.done { background: #ffb92f; }
.fruit-arena { position: relative; height: min(76vh,610px); overflow: hidden; border: 7px solid #fff; border-radius: 34px; background: #f6a14b url("assets/arena-tropical.png") center / cover; box-shadow: 0 10px 28px rgba(66,43,45,.2); touch-action: none; user-select: none; }
.flying-fruit { position: absolute; z-index: 4; bottom: -95px; width: clamp(68px,17vw,98px); height: clamp(68px,17vw,98px); border: 0; border-radius: 50%; padding: 0; background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.76), rgba(255,255,255,.2) 28%, rgba(255,202,86,.25) 68%, rgba(78,36,67,.18)); font-size: clamp(3.2rem,13vw,5rem); cursor: crosshair; filter: drop-shadow(0 10px 7px rgba(52,33,40,.3)); }
.flying-fruit.sliced { animation: fruit-split .45s ease-out both; pointer-events: none; }
.fruit-splash { position: absolute; inset: 50% auto auto 50%; font-size: 2.7rem; transform: translate(-50%,-50%); animation: fruit-splash .4s ease-out both; }
.fruit-slash { position: absolute; z-index: 7; width: 56px; height: 9px; border-radius: 999px; background: linear-gradient(90deg, transparent, #fff, #fff7a3, transparent); box-shadow: 0 0 16px #fff; transform: translate(-50%,-50%) rotate(-28deg); pointer-events: none; animation: slash-fade .3s ease-out both; }
.fruit-hint { position: absolute; z-index: 2; top: 40%; left: 50%; width: 150px; height: 100px; transform: translate(-50%,-50%); pointer-events: none; animation: hint-hide 3.6s both; }
.fruit-hint span { position: absolute; left: 0; font-size: 4rem; }
.fruit-hint b { position: absolute; right: 0; bottom: 0; font-size: 3rem; animation: finger-swipe 1.25s ease-in-out 3; }
.fruit-hint i { position: absolute; top: 48%; left: 34%; width: 72px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.9); transform: rotate(-25deg); }
@keyframes fruit-split { 30% { transform: scale(1.28) rotate(-12deg); filter: brightness(1.25); } to { transform: scale(.55) rotate(28deg); opacity: 0; } }
@keyframes fruit-splash { from { transform: translate(-50%,-50%) scale(.2); } to { transform: translate(-50%,-50%) scale(1.8) rotate(25deg); opacity: 0; } }
@keyframes slash-fade { from { opacity: 1; transform: translate(-50%,-50%) rotate(-28deg) scaleX(.4); } to { opacity: 0; transform: translate(-50%,-50%) rotate(-28deg) scaleX(1.45); } }
@keyframes finger-swipe { 50% { transform: translate(-78px,-42px) rotate(-12deg); } }
@keyframes hint-hide { 0%,78% { opacity: 1; } to { opacity: 0; } }