.puff-tile {
  isolation: isolate;
  background: linear-gradient(155deg, #fff7ca, #ffc94f) !important;
  color: #102638 !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.puff-tile::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 94% 100%, transparent 0 74px, #fff8 75px 77px, transparent 78px 112px, #fff5 113px 115px, transparent 116px), linear-gradient(105deg, transparent 35%, #fff5 50%, transparent 65%);
  background-position: 0 0, -240px 0;
  animation: puffTileWater 7s linear infinite;
  pointer-events: none;
}
.puff-tile h3, .puff-tile > p, .puff-tile > strong { position: relative; z-index: 3; max-width: 58%; }
.puff-tile strong { color: #75551b !important; }
.puff-tile em { z-index: 3; color: #071f2f; }
.puff-tile:hover, .puff-tile:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 38px #8f5a152b; }
.puff-preview {
  position: absolute;
  z-index: 2;
  right: 34px;
  bottom: 44px;
  width: 124px;
  height: 124px;
  border: 3px solid #f17817;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 23%, #ffb32d 0 4%, transparent 4.5%), radial-gradient(circle at 53% 17%, #ec7117 0 3%, transparent 3.5%), radial-gradient(circle at 72% 28%, #f68a1e 0 4%, transparent 4.5%), radial-gradient(circle at 48% 48%, #ffa323 0 69%, #ee7417 70%);
  box-shadow: inset 7px 8px #ffc43b55, inset -8px -9px #d95f1344, 0 14px 25px #9b591844;
  animation: puffTileBob 2.8s ease-in-out infinite;
}
.puff-preview .spikes { position: absolute; z-index: -1; inset: -10px; border-radius: 50%; background: repeating-conic-gradient(from 2deg, #ef7716 0 3deg, transparent 3deg 18deg); }
.puff-preview .belly { position: absolute; z-index: 1; left: 14%; right: 14%; bottom: 3%; height: 48%; border-radius: 15% 15% 48% 48% / 20% 20% 66% 66%; background: radial-gradient(ellipse at 20% 30%, #ee7c1d 0 5%, transparent 6%), radial-gradient(ellipse at 49% 55%, #ee7c1d 0 5%, transparent 6%), radial-gradient(ellipse at 77% 29%, #ee7c1d 0 5%, transparent 6%), #fff1c2; border-top: 2px solid #f29126; }
.puff-preview .fin { position: absolute; z-index: 3; top: 53%; width: 18%; height: 15%; background: linear-gradient(#ffe64b, #ffbd16); clip-path: polygon(0 50%, 100% 0, 82% 50%, 100% 100%); }
.puff-preview .fin-a { left: 3%; transform: rotate(7deg); }
.puff-preview .fin-b { right: 3%; transform: scaleX(-1) rotate(7deg); }
.puff-preview .eye { position: absolute; z-index: 4; top: 27%; width: 15%; height: 18%; border: 1px solid #8d2f13; border-radius: 50%; background: #a64018; box-shadow: inset 3px 3px #fff; }
.puff-preview .eye-a { left: 26%; }
.puff-preview .eye-b { right: 26%; }
.puff-preview .cheek { position: absolute; z-index: 4; top: 45%; width: 11%; height: 6%; border-radius: 50%; background: #f36d3970; }
.puff-preview .cheek-a { left: 21%; }
.puff-preview .cheek-b { right: 21%; }
.puff-preview .smile { position: absolute; z-index: 5; left: 37%; top: 49%; width: 26%; height: 15%; border-bottom: 3px solid #8d3518; border-radius: 0 0 50% 50%; }
.puff-preview .smile::before, .puff-preview .smile::after { content: ""; position: absolute; top: -1px; width: 52%; height: 55%; border-bottom: 2px solid #8d3518; border-radius: 50%; }
.puff-preview .smile::before { left: -31%; transform: rotate(17deg); }
.puff-preview .smile::after { right: -31%; transform: rotate(-17deg); }
@keyframes puffTileBob { 50% { transform: translateY(-9px) rotate(3deg); } }
@keyframes puffTileWater { to { background-position: 140px 0, 240px 0; } }
@media (max-width: 800px) {
  .puff-tile h3, .puff-tile > p, .puff-tile > strong { width: calc(100% - 145px); max-width: none; }
  .puff-preview { right: 27px; bottom: 55px; width: 112px; height: 112px; }
}
@media (max-width: 430px) {
  .puff-tile { min-height: 275px; }
  .puff-tile h3, .puff-tile > p, .puff-tile > strong { width: calc(100% - 120px); }
  .puff-preview { right: 20px; bottom: 55px; width: 98px; height: 98px; }
  .puff-tile strong { font-size: 11px; }
}
@media (pointer: coarse) { .puff-tile:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .puff-tile::before, .puff-preview { animation: none !important; }
  .puff-tile:hover { transform: none; }
}