8.5

public/css/main.css

@@ -1796,7 +1796,7 @@ input[type=submit] {
 
 .barrage .header-avatar {
     -webkit-border-radius: 50%;
-            border-radius: 50%;
+    border-radius: 50%;
     position: relative;
     right: 7px;
     display: flex;
@@ -1807,10 +1807,108 @@ input[type=submit] {
 .barrage .header-avatar img {
     width: 100%;
     height: 100%;
-    object-fit: cover; /* 使头像充满容器并保持比例 */
+    object-fit: cover;
+    /* 使头像充满容器并保持比例 */
 }
 
 .pause {
     -webkit-animation-play-state: paused;
     animation-play-state: paused;
+}
+
+
+/* sakana */
+.sakana-box-l {
+    position: fixed !important;
+    inset: auto auto -1rem -5rem;
+    z-index: 555;
+}
+
+.sakana-box-r {
+    position: fixed !important;
+    inset: auto -5rem -1rem auto;
+    z-index: 555;
+}
+
+@media (max-width: 650px) {
+
+    .sakana-box-l,
+    .sakana-box-r {
+        display: none;
+    }
+}
+
+@media (max-width: 1120px) {
+
+    .sakana-box-l,
+    .sakana-box-r {
+        transform: translateY(0px) scale(0.25) !important;
+    }
+
+    .sakana-box-l {
+        inset: auto auto -1rem -10rem;
+    }
+
+    .sakana-box-r {
+        inset: auto -10rem -1rem auto;
+    }
+}
+
+.sakana-box {
+    width: 500px;
+    height: 800px;
+    position: relative;
+    transform-origin: 50% 100%;
+    pointer-events: none
+}
+
+.sakana-box canvas {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none
+}
+
+.sakana-box .sakana-character {
+    width: 300px;
+    height: 300px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    bottom: 260px;
+    cursor: pointer;
+    pointer-events: auto;
+    transform-origin: 50% 400px;
+    background: no-repeat 50% 50%;
+    background-size: cover
+}
+
+.sakana-box .sakana-character[data-character=chisato] {
+    background-image: url(https://t.tutu.to/img/BMuY5)!important
+}
+
+.sakana-box .sakana-character[data-character=takina] {
+    background-image: url(https://t.tutu.to/img/BMn86)!important
+}
+
+.sakana-box .sakana-bed {
+    width: 160px;
+    height: 20px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    bottom: 0;
+    background: rgba(255, 255, 255, .5) no-repeat 50% 50%;
+    border-radius: 2px;
+    cursor: pointer;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAAnRSTlMAM8lDrC4AAAE2SURBVEjH7dVBjsMwCAVQiyUnGXG0OQXqsqdgif4pJ8YkTh1bnWqkWVRlkVR+BiHiJuUT7x3sKxGsBNBXhQBbiazF58LglXgTnwmi6EToqfBc2IvoKAWat/8Qu0g2JUYoV7EXhf4iD48JiFGKDkIAvA15EMEWmuXFuxAQSbuI9ZSIFEYXAMaAQpvAejGtC9aEugg8Mh1AxbieD7pAANi5HFqTnNLL0X4P0VYk92rKfZP4oSVlb/7uuWVvzZ/LDYPYSmD5nznG4ycR2FwI8BAbhQFUER9F4pGm9JbkkDqOQeAEY+QIu3gtGFJibt+7bCvQIiaeU4YeoiHYhB+EmtxgOZiTWJV7LHyl9ENVL8fO89l1AvwqjAi7SmmiF8kkn761o9hUOFOuUsh+9Q2w14WXQlo+8Z7xAxPfAJiIc7LIAAAAAElFTkSuQmCC);
+    background-size: 20px 20px;
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, .05)
+}
+
+.sakana-box[data-can-switch-character=true] .sakana-bed {
+    pointer-events: auto
 }