.tn-shark-block{
  position:relative;
  width:100%;
  max-width:var(--tnshark-max-width,1100px);
  margin-left:auto;
  margin-right:auto;
  border-radius:22px;
  overflow:hidden;
  background:#ffffff;
  box-shadow:0 14px 34px rgba(0,0,0,0.10);
  border:1px solid rgba(0,0,0,0.08);
}
.tn-shark-main{
  padding:18px;
  background:#ffffff;
}
.tn-shark-topbar{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.tn-shark-stat{
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  background:#f8fbff;
  padding:10px 12px;
  text-align:center;
}
.tn-shark-stat-label{
  display:block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.7;
  margin-bottom:4px;
}
.tn-shark-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(280px, .75fr);
  gap:16px;
  align-items:stretch;
}
.tn-shark-aquarium-wrap{
  min-width:0;
}
.tn-shark-aquarium{
  position:relative;
  height:500px;
  overflow:hidden;
  border-radius:20px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.22), rgba(255,255,255,0) 28%),
    radial-gradient(circle at 78% 12%, rgba(255,255,255,0.16), rgba(255,255,255,0) 24%),
    linear-gradient(to bottom, #89dcff 0%, #2fa7dc 46%, #177cae 72%, #0f618e 100%);
  border:1px solid rgba(0,0,0,0.10);
}
.tn-shark-sand{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:76px;
  background:
    radial-gradient(circle at 10% 40%, rgba(255,255,255,0.18) 0 12px, transparent 13px),
    radial-gradient(circle at 35% 70%, rgba(255,255,255,0.12) 0 10px, transparent 11px),
    radial-gradient(circle at 62% 30%, rgba(255,255,255,0.13) 0 14px, transparent 15px),
    linear-gradient(to top, #caa46a, #e7c48e);
  z-index:1;
}
.tn-shark-rock{
  position:absolute;
  bottom:48px;
  width:90px;
  height:54px;
  border-radius:50px 50px 16px 16px;
  background:linear-gradient(to bottom, #7b8996, #586775);
  z-index:2;
}
.rock-a{left:44px;}
.rock-b{right:88px; width:110px; height:60px;}
.tn-shark-light-rays{
  position:absolute;
  inset:0;
  background:
    linear-gradient(110deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 22%),
    linear-gradient(95deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 18%),
    linear-gradient(100deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 16%);
  background-size:30% 100%, 22% 100%, 16% 100%;
  background-repeat:no-repeat;
  background-position:10% 0, 70% 0, 46% 0;
  pointer-events:none;
}
.tn-shark-bubbles span{
  position:absolute;
  bottom:-40px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,.65);
  box-shadow:0 0 0 4px rgba(255,255,255,.08);
  animation:tnSharkBubble linear infinite;
}
.tn-shark-bubbles span:nth-child(1){left:8%; animation-duration:7s; animation-delay:0s;}
.tn-shark-bubbles span:nth-child(2){left:20%; animation-duration:10s; animation-delay:2s;}
.tn-shark-bubbles span:nth-child(3){left:36%; animation-duration:8s; animation-delay:1s;}
.tn-shark-bubbles span:nth-child(4){left:58%; animation-duration:11s; animation-delay:4s;}
.tn-shark-bubbles span:nth-child(5){left:76%; animation-duration:9s; animation-delay:2.5s;}
.tn-shark-bubbles span:nth-child(6){left:90%; animation-duration:12s; animation-delay:5s;}
@keyframes tnSharkBubble{
  0%{transform:translateY(0) scale(.8); opacity:0;}
  10%{opacity:1;}
  100%{transform:translateY(-560px) scale(1.2); opacity:0;}
}
.tn-shark-seaweed{
  position:absolute;
  bottom:-8px;
  width:70px;
  height:180px;
  transform-origin:bottom center;
  animation:tnSeaweed 4.8s ease-in-out infinite alternate;
}
.tn-shark-seaweed::before,
.tn-shark-seaweed::after{
  content:"";
  position:absolute;
  bottom:0;
  width:18px;
  height:100%;
  border-radius:30px 30px 0 0;
  background:linear-gradient(to top, #1f8f5d, #62cf7d);
}
.tn-shark-seaweed::before{left:10px; transform:rotate(-8deg);}
.tn-shark-seaweed::after{right:12px; transform:rotate(10deg);}
.seaweed-a{left:30px; animation-duration:5.4s;}
.seaweed-b{left:150px; height:150px; animation-duration:4.2s;}
.seaweed-c{right:48px; height:170px; animation-duration:5.1s;}
@keyframes tnSeaweed{
  from{transform:rotate(-4deg);}
  to{transform:rotate(5deg);}
}
.tn-shark-coral{
  position:absolute;
  bottom:0;
  border-radius:40px 40px 8px 8px;
  opacity:.95;
}
.coral-a{left:95px; width:90px; height:80px; background:#ff7b54;}
.coral-b{left:230px; width:110px; height:70px; background:#ffb26b;}
.coral-c{right:110px; width:90px; height:76px; background:#b46cff;}
.tn-shark-swimmer{
  position:absolute;
  left:24px;
  top:150px;
  will-change:left, top, transform;
  z-index:6;
}
.tn-shark-fish{
  position:relative;
  width:172px;
  height:82px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.10), transparent 28%),
    linear-gradient(to bottom, #8595a4, #647484 60%, #54626f 100%);
  border-radius:54px 60px 48px 50px;
  box-shadow:inset 0 -10px 0 rgba(0,0,0,.08), 0 10px 16px rgba(0,0,0,.08);
}
.tn-shark-fish::before{
  content:"";
  position:absolute;
  top:8px;
  left:22px;
  width:124px;
  height:30px;
  background:rgba(255,255,255,.14);
  border-radius:50px;
}
.tn-shark-fish::marker{content:"";}
.tn-shark-fish::after{
  content:"";
  position:absolute;
  right:-20px;
  top:30px;
  width:0;
  height:0;
  border-top:13px solid transparent;
  border-bottom:13px solid transparent;
  border-left:24px solid #63717e;
}
.tn-shark-fish-tail{
  position:absolute;
  left:-32px;
  top:18px;
  width:0;
  height:0;
  border-top:20px solid transparent;
  border-bottom:20px solid transparent;
  border-right:32px solid #56626d;
  animation:tnSharkTail .55s ease-in-out infinite alternate;
}
.tn-shark-fish-fin{
  position:absolute;
  top:-18px;
  left:68px;
  width:0;
  height:0;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-bottom:30px solid #5c6874;
  animation:tnSharkFin .8s ease-in-out infinite alternate;
}
.tn-shark-fish-eye{
  position:absolute;
  right:22px;
  top:22px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#111;
}
.tn-shark-fish-number{
  position:absolute;
  left:26px;
  right:36px;
  top:22px;
  text-align:center;
  font-size:29px;
  font-weight:900;
  color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.22);
  z-index:3;
  unicode-bidi:isolate;
}
.tn-shark-swimmer.is-right-to-left .tn-shark-fish{
  transform:scaleX(-1);
}
.tn-shark-swimmer.is-left-to-right .tn-shark-fish{
  transform:scaleX(1);
}
.tn-shark-swimmer.is-right-to-left .tn-shark-fish-number,
.tn-shark-swimmer.is-left-to-right .tn-shark-fish-number{
  transform:none !important;
}
.tn-shark-swimmer.is-right-to-left .tn-shark-fish-eye{
  right:auto;
  left:22px;
}
.tn-shark-swimmer.is-left-to-right .tn-shark-fish-eye{
  right:22px;
  left:auto;
}
.tn-shark-swimmer.is-swimming .tn-shark-fish{
  animation:tnSharkBob 1.4s ease-in-out infinite;
}
.tn-shark-answer-panel{
  border:1px solid rgba(0,0,0,0.08);
  border-radius:20px;
  background:#fbfdff;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.tn-shark-answer-title{
  font-size:22px;
  font-weight:800;
  line-height:1.15;
  margin-bottom:14px;
}
.tn-shark-answers{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.tn-shark-answer-btn{
  min-height:64px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,0.12);
  background:#ffffff !important;
  color:#111 !important;
  font-size:18px;
  font-weight:700;
  padding:12px 14px;
  cursor:pointer;
}
.tn-shark-answer-btn:hover:not([disabled]){
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,0.08);
}
.tn-shark-answer-btn[disabled]{
  cursor:default;
  opacity:.95;
}
.tn-shark-answer-btn.is-good{border-color:#15803d;}
.tn-shark-answer-btn.is-bad{border-color:#d11a2a;}
.tn-shark-feedback{
  min-height:26px;
  margin-top:12px;
  font-weight:800;
}
.tn-shark-feedback.is-good{color:#15803d;}
.tn-shark-feedback.is-bad{color:#d11a2a;}

.tn-shark-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(14, 42, 74, 0.42);
  backdrop-filter:blur(2px);
  z-index:30;
}
.tn-shark-overlay[hidden]{display:none !important;}
.tn-shark-overlay-card{
  width:min(100%, 620px);
  background:rgba(255,255,255,0.95);
  border:1px solid rgba(0,0,0,0.10);
  border-radius:22px;
  padding:28px;
  box-shadow:0 18px 40px rgba(0,0,0,0.16);
  text-align:center;
}
.tn-shark-title{
  font-size:34px;
  line-height:1.05;
  font-weight:900;
  margin-bottom:8px;
}
.tn-shark-subtitle,
.tn-shark-final-detail{
  font-size:16px;
  line-height:1.45;
  opacity:.86;
}
.tn-shark-final-score{
  font-size:28px;
  font-weight:900;
  margin:10px 0 6px;
}
.tn-shark-start-btn,
.tn-shark-restart-btn{
  margin-top:16px;
  min-width:180px;
  padding:12px 18px;
  border-radius:14px;
  border:1px solid #163a70;
  background:#ffffff !important;
  color:#163a70 !important;
  font-weight:900;
  cursor:pointer;
}
.tn-shark-start-btn:hover,
.tn-shark-restart-btn:hover{
  background:#163a70 !important;
  color:#fff !important;
}

.tn-shark-editor-preview{
  padding:4px;
}

@media (max-width: 900px){
  .tn-shark-layout{
    grid-template-columns:1fr;
  }
  .tn-shark-answer-panel{
    order:2;
  }
}
@media (max-width: 640px){
  .tn-shark-main{padding:14px;}
  .tn-shark-topbar{grid-template-columns:1fr;}
  .tn-shark-aquarium{height:380px;}
  .tn-shark-fish{width:138px; height:68px;}
  .tn-shark-fish-number{font-size:24px; top:18px;}
  .tn-shark-title{font-size:28px;}
}

@keyframes tnSharkBob{
  0%{transform:translateY(0px);}
  50%{transform:translateY(-5px);}
  100%{transform:translateY(0px);}
}
@keyframes tnSharkTail{
  from{transform:rotate(-8deg);}
  to{transform:rotate(8deg);}
}
@keyframes tnSharkFin{
  from{transform:rotate(-5deg);}
  to{transform:rotate(4deg);}
}

.tn-shark-fish-gill{
  position:absolute;
  right:34px;
  top:28px;
  width:14px;
  height:22px;
  border-left:3px solid rgba(0,0,0,.22);
  border-radius:50%;
}
.tn-shark-swimmer.is-right-to-left .tn-shark-fish-gill{
  right:auto;
  left:34px;
  border-left:none;
  border-right:3px solid rgba(0,0,0,.22);
}
.tn-shark-swimmer.is-swimming .tn-shark-fish{
  animation:tnSharkBob 1.15s ease-in-out infinite;
}
.tn-shark-swimmer.is-swimming .tn-shark-fish-tail{
  animation:tnSharkTail .34s ease-in-out infinite alternate;
}
.tn-shark-swimmer.is-swimming .tn-shark-fish-fin{
  animation:tnSharkFin .55s ease-in-out infinite alternate;
}
.tn-shark-answer-btn.is-good{
  box-shadow:0 0 0 3px rgba(21,128,61,.12), 0 8px 20px rgba(21,128,61,.16);
}
.tn-shark-answer-btn.is-bad{
  box-shadow:0 0 0 3px rgba(209,26,42,.10), 0 8px 20px rgba(209,26,42,.12);
}

.tn-shark-fish-mouth{
  position:absolute;
  right:8px;
  top:34px;
  width:24px;
  height:14px;
  background:#111;
  border-radius:0 0 14px 14px;
}
.tn-shark-fish-teeth{
  position:absolute;
  right:10px;
  top:36px;
  display:flex;
  gap:2px;
}
.tn-shark-fish-teeth span{
  width:4px;
  height:6px;
  background:#fff;
  clip-path:polygon(50% 100%,0 0,100% 0);
}
.tn-shark-swimmer.is-right-to-left .tn-shark-fish-mouth{
  right:auto;
  left:8px;
}
.tn-shark-swimmer.is-right-to-left .tn-shark-fish-teeth{
  right:auto;
  left:10px;
}

.tn-shark-aquarium::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 80%, rgba(0,0,0,0.15), transparent 60%),
    radial-gradient(circle at 30% 60%, rgba(0,0,0,0.08), transparent 50%);
  pointer-events:none;
}

/* Improved shark styling inspired by reference */
.tn-shark-fish{
  background:linear-gradient(to bottom,#7f9bb3,#6e8aa3 55%,#5c748b 100%);
  border-radius:60px 70px 60px 60px;
  box-shadow:0 12px 18px rgba(0,0,0,0.15);
}

.tn-shark-fish::before{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:40%;
  background:linear-gradient(to top,#cfd8df,#9fb3c3);
  border-radius:0 0 60px 60px;
  opacity:.85;
}

.tn-shark-fish-eye{
  width:10px;
  height:10px;
  background:#000;
  border-radius:50%;
  top:28px;
}

.tn-shark-fish-gill{
  top:30px;
  height:26px;
}

.tn-shark-fish-mouth{
  background:#1a1a1a;
  height:16px;
  border-radius:0 0 18px 18px;
}

.tn-shark-fish-teeth span{
  width:5px;
  height:7px;
}

/* stronger outline look */
.tn-shark-fish{
  outline:4px solid rgba(255,255,255,0.85);
}

/* more dynamic swim */
.tn-shark-swimmer.is-swimming{
  animation:tnSharkGlide 2s ease-in-out infinite;
}

@keyframes tnSharkGlide{
  0%{transform:translateY(0px)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0px)}
}

/* richer ocean layers */
.tn-shark-aquarium{
  background:
    linear-gradient(to bottom,#7fd3ff 0%,#3fa9dd 40%,#1d7fb3 70%,#0c5c86 100%);
}

.tn-shark-aquarium::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.25), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.15), transparent 40%);
  pointer-events:none;
}

.tn-shark-bubble{
  animation-duration:6s;
}

/* FORCE NEW SHARK STYLE */
.tn-shark-fish{
  background:linear-gradient(to bottom,#7f9bb3,#6e8aa3 55%,#5c748b 100%) !important;
  border-radius:60px 70px 60px 60px !important;
  outline:4px solid rgba(255,255,255,0.9) !important;
}

.tn-shark-fish::before{
  content:"" !important;
  position:absolute !important;
  bottom:0 !important;
  left:0 !important;
  right:0 !important;
  height:40% !important;
  background:linear-gradient(to top,#cfd8df,#9fb3c3) !important;
  border-radius:0 0 60px 60px !important;
}

.tn-shark-fish-mouth{
  background:#111 !important;
  height:16px !important;
}

.tn-shark-fish-teeth span{
  width:5px !important;
  height:7px !important;
}

.tn-shark-fish-eye{
  width:10px !important;
  height:10px !important;
}

/* v1.0.6 SVG shark rebuild */
.tn-shark-fish{
  position:relative !important;
  width:220px !important;
  height:116px !important;
  background:none !important;
  outline:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.tn-shark-fish::before,
.tn-shark-fish::after,
.tn-shark-fish-tail,
.tn-shark-fish-fin,
.tn-shark-fish-eye,
.tn-shark-fish-gill,
.tn-shark-fish-mouth,
.tn-shark-fish-teeth{
  display:none !important;
}
.tn-shark-fish-svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  filter:drop-shadow(6px 8px 0 rgba(0,0,0,0.18));
}
.tn-shark-outline{
  fill:none;
  stroke:rgba(255,255,255,0.92);
  stroke-width:7;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.tn-shark-body{ fill:url(#tnSharkBody); }
.tn-shark-belly{ fill:url(#tnSharkBelly); }
.tn-shark-fin-top,
.tn-shark-fin-bottom,
.tn-shark-tail{ fill:#7391ad; }
.tn-shark-mouth{ fill:#1a1a1a; }
.tn-shark-eye{ fill:#111; }
.tn-shark-gills{
  fill:none;
  stroke:#111;
  stroke-width:3.2;
  stroke-linecap:round;
}
.tn-shark-smile-line{
  fill:none;
  stroke:#7b8ea1;
  stroke-width:2.2;
  stroke-linecap:round;
}
.tn-shark-fish-number{
  position:absolute;
  left:92px !important;
  top:41px !important;
  width:72px !important;
  right:auto !important;
  text-align:center;
  font-size:29px !important;
  font-weight:900;
  color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.22);
  z-index:4;
  transform:none !important;
}
.tn-shark-swimmer.is-right-to-left .tn-shark-fish{
  transform:scaleX(-1);
}
.tn-shark-swimmer.is-right-to-left .tn-shark-fish-number{
  transform:none !important;
}
.tn-shark-swimmer.is-swimming .tn-shark-fish-svg{
  animation:tnSharkBodyBob 1.15s ease-in-out infinite;
}
@keyframes tnSharkBodyBob{
  0%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
  100%{transform:translateY(0)}
}
/* richer background detail */
.tn-shark-aquarium{
  background:
    radial-gradient(circle at 20% 12%, rgba(255,255,255,0.22), transparent 18%),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,0.14), transparent 20%),
    linear-gradient(to bottom, #83d8ff 0%, #44addf 36%, #207faf 68%, #0d5b84 100%) !important;
}
.tn-shark-aquarium::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(255,255,255,0) 18%),
    radial-gradient(circle at 15% 72%, rgba(0,0,0,0.10), transparent 36%),
    radial-gradient(circle at 80% 65%, rgba(0,0,0,0.08), transparent 30%);
  pointer-events:none;
}
.tn-shark-aquarium::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:120px;
  background:
    radial-gradient(circle at 10% 60%, rgba(255,255,255,0.10) 0 10px, transparent 11px),
    radial-gradient(circle at 30% 85%, rgba(255,255,255,0.08) 0 7px, transparent 8px),
    radial-gradient(circle at 62% 50%, rgba(255,255,255,0.08) 0 9px, transparent 10px),
    linear-gradient(to top, rgba(8,55,77,0.18), rgba(8,55,77,0));
  pointer-events:none;
}
.tn-shark-rock{
  background:linear-gradient(to bottom,#8693a0,#5f6d79) !important;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.08);
}
.tn-shark-sand{
  background:
    radial-gradient(circle at 10% 40%, rgba(255,255,255,0.18) 0 12px, transparent 13px),
    radial-gradient(circle at 35% 70%, rgba(255,255,255,0.12) 0 10px, transparent 11px),
    radial-gradient(circle at 62% 30%, rgba(255,255,255,0.13) 0 14px, transparent 15px),
    linear-gradient(to top, #cba86e, #e7c58f) !important;
}
.coral-a,.coral-b,.coral-c{
  box-shadow:inset 0 -10px 0 rgba(0,0,0,.08);
}


/* v1.0.7 SVG shark visibility fix */
.tn-shark-fish,
.tn-shark-fish *{
  box-sizing:border-box;
}
.tn-shark-fish{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  overflow:visible !important;
}
.tn-shark-fish-svg{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:220px !important;
  height:116px !important;
  max-width:none !important;
}
.tn-shark-fish-number{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
.tn-shark-swimmer.is-right-to-left .tn-shark-fish-number{
  transform:scaleX(-1) !important;
}
.tn-shark-swimmer.is-left-to-right .tn-shark-fish-number{
  transform:none !important;
}

/* v1.0.8 real SVG shark fix */
.tn-shark-swimmer{
  position:absolute;
  left:24px;
  top:150px;
  width:220px;
  height:116px;
  will-change:left, top;
  z-index:6;
}
.tn-shark-fish{
  position:absolute !important;
  inset:0;
  width:220px !important;
  height:116px !important;
  background:none !important;
  outline:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}
.tn-shark-fish::before,
.tn-shark-fish::after,
.tn-shark-fish-tail,
.tn-shark-fish-fin,
.tn-shark-fish-eye,
.tn-shark-fish-gill,
.tn-shark-fish-mouth,
.tn-shark-fish-teeth{
  display:none !important;
}
.tn-shark-fish-svg{
  display:block !important;
  width:220px !important;
  height:116px !important;
  overflow:visible;
  filter:drop-shadow(6px 8px 0 rgba(0,0,0,0.18));
}
.tn-shark-outline{
  fill:none;
  stroke:rgba(255,255,255,0.92);
  stroke-width:7;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.tn-shark-body{ fill:url(#tnSharkBody); }
.tn-shark-belly{ fill:url(#tnSharkBelly); }
.tn-shark-fin-top,
.tn-shark-fin-bottom,
.tn-shark-tail{ fill:#7391ad; }
.tn-shark-mouth-path{ fill:#1a1a1a; }
.tn-shark-eye-dot{ fill:#111; }
.tn-shark-gills-path{
  fill:none;
  stroke:#111;
  stroke-width:3.2;
  stroke-linecap:round;
}
.tn-shark-fish-number{
  position:absolute !important;
  left:92px !important;
  top:40px !important;
  width:72px !important;
  text-align:center;
  font-size:29px !important;
  font-weight:900;
  color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.22);
  z-index:10;
  unicode-bidi:isolate;
}
.tn-shark-swimmer.is-left-to-right .tn-shark-fish{
  transform:scaleX(1);
}
.tn-shark-swimmer.is-right-to-left .tn-shark-fish{
  transform:scaleX(-1);
}
.tn-shark-swimmer.is-left-to-right .tn-shark-fish-number{
  transform:none !important;
}
.tn-shark-swimmer.is-right-to-left .tn-shark-fish-number{
  transform:scaleX(-1) !important;
}
.tn-shark-swimmer.is-swimming .tn-shark-fish-svg{
  animation:tnSharkBodyBob 1.15s ease-in-out infinite;
}

/* v1.0.9 direction and number orientation fix */
.tn-shark-swimmer.is-left-to-right .tn-shark-fish{
  transform: none !important;
}
.tn-shark-swimmer.is-right-to-left .tn-shark-fish{
  transform: scaleX(-1) !important;
}
.tn-shark-swimmer.is-left-to-right .tn-shark-fish-number{
  transform: none !important;
}
.tn-shark-swimmer.is-right-to-left .tn-shark-fish-number{
  transform: none !important;
}

/* v1.1.0 final shark direction correction */
.tn-shark-swimmer.is-left-to-right .tn-shark-fish{
  transform: scaleX(-1) !important;
}
.tn-shark-swimmer.is-right-to-left .tn-shark-fish{
  transform: none !important;
}
.tn-shark-swimmer.is-left-to-right .tn-shark-fish-number,
.tn-shark-swimmer.is-right-to-left .tn-shark-fish-number{
  transform: none !important;
}


/* v1.1.1 custom user shark SVG */
.tn-shark-fish{
  position:absolute !important;
  inset:0;
  width:220px !important;
  height:116px !important;
  background:none !important;
  outline:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}
.tn-shark-fish-svg{
  display:block !important;
  width:220px !important;
  height:116px !important;
  max-width:none !important;
  overflow:visible;
}
.tn-shark-swimmer.is-left-to-right .tn-shark-fish{
  transform:scaleX(-1) !important;
}
.tn-shark-swimmer.is-right-to-left .tn-shark-fish{
  transform:none !important;
}
.tn-shark-swimmer.is-left-to-right .tn-shark-fish-number,
.tn-shark-swimmer.is-right-to-left .tn-shark-fish-number{
  transform:none !important;
}


/* v1.1.2 custom shark cleanup */
.tn-shark-fish{
  position:absolute !important;
  inset:0;
  width:220px !important;
  height:116px !important;
  background:none !important;
  outline:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}
.tn-shark-fish-svg{
  display:block !important;
  width:220px !important;
  height:116px !important;
  max-width:none !important;
  overflow:visible !important;
}

/* Remove white artboard/background from uploaded SVG while keeping light shark details */
.tn-shark-fish-svg [fill="#FEFEFE"],
.tn-shark-fish-svg [fill="#FFFFFF"],
.tn-shark-fish-svg [fill="#fff"],
.tn-shark-fish-svg [fill="#FFF"]{
  fill-opacity:0 !important;
  opacity:0 !important;
}

/* Uploaded shark faces left by default */
.tn-shark-swimmer.is-right-to-left .tn-shark-fish{
  transform:none !important;
}
.tn-shark-swimmer.is-left-to-right .tn-shark-fish{
  transform:scaleX(-1) !important;
}

/* Keep numbers readable in both directions and move them farther toward the tail */
.tn-shark-fish-number{
  left:122px !important;
  top:40px !important;
  width:64px !important;
  right:auto !important;
  text-align:center !important;
  transform:none !important;
}
.tn-shark-swimmer.is-left-to-right .tn-shark-fish-number,
.tn-shark-swimmer.is-right-to-left .tn-shark-fish-number{
  transform:none !important;
}


/* v1.1.3 number color and per-direction placement */
.tn-shark-fish-number{
  color:#111 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.35) !important;
  font-weight:900 !important;
}

/* Uploaded shark faces left natively */
.tn-shark-swimmer.is-right-to-left .tn-shark-fish-number{
  left:112px !important;
  top:32px !important;
  width:62px !important;
  transform:none !important;
}

.tn-shark-swimmer.is-left-to-right .tn-shark-fish-number{
  left:70px !important;
  top:28px !important;
  width:62px !important;
  transform:none !important;
}