.bath-characters-layer {
  position: absolute;
  top: 25px;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.tub-front-mask {
  position: absolute;
  top: 55px;
  left: 15px;
  right: 15px;
  height: 60px;
  background: #ffffff;
  border: 3px solid #e5e5e5;
  border-radius: 5px 5px 50px 50px / 5px 5px 60px 60px;
  z-index: 20;
  pointer-events: none;
}

.tub-front-mask::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -6px;
  right: -6px;
  height: 10px;
  background: #ffffff;
  border: 3px solid #e5e5e5;
  border-radius: 15px;
}

.mini-legs {
  position: absolute;
  bottom: -1px;
  width: 100%;
}

.leg-l, .leg-r {
  position: absolute;
  width: 8px;
  height: 14px;
  background: #d4af37;
  clip-path: polygon(10% 0, 90% 0, 100% 80%, 50% 100%, 0 80%);
}
.leg-l { left: 45px; transform: rotate(12deg); }
.leg-r { right: 45px; transform: rotate(-12deg); }

.bath-ultimate-viewport { position: relative; width: 100%; max-width: 300px; margin: 0 auto; height: 200px; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 10px; background: transparent; overflow: visible; }

/* 【修正】タイル：色（#e0f2f7）を最後に記述 */
.fixed-tiles { 
  position: absolute; 
  top: 0; 
  left: 50%; 
  transform: translateX(-50%); 
  width: 400px; 
  height: 100%; 
  z-index: 1; 
  background: linear-gradient(white 1px, transparent 1px), 
              linear-gradient(90deg, white 1px, transparent 1px) #e0f2f7; 
  background-size: 30px 30px; 
}

.char-shampoo-wrap { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; z-index: 15; }
.char-shampoo { font-size: 18px; display: block; transform-origin: bottom center; animation: ready-to-use 2s infinite ease-in-out; }
@keyframes ready-to-use { 0%, 100% { transform: scaleX(-1) rotate(15deg) translateY(0); } 50% { transform: scaleX(-1) rotate(35deg) translateY(-2px); } }
.shampoo-bubble { position: absolute; top: 0; left: -5px; font-size: 10px; opacity: 0; z-index: 20; animation: shampoo-pop 2s infinite; }
@keyframes shampoo-pop { 0%, 48% { transform: scale(0) translate(0, 0); opacity: 0; } 52% { opacity: 1; } 100% { transform: scale(1.3) translate(-30px, 10px); opacity: 0; } }
.mini-mirror-unit { position: absolute; top: 45px; right: 10%; width: 45px; height: 45px; background: #555; border: 2.5px solid #bdc3c7; border-radius: 3px; overflow: hidden; z-index: 5; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.m-silver-metallic { position: absolute; inset: 0; background: linear-gradient(135deg, #4e545c, #ecf0f1 50%, #2c3e50); }
.m-fog-layer { position: absolute; inset: 0; background: #ffffff; mix-blend-mode: screen; opacity: 0.94; z-index: 2; }
.m-scribble-area { position: relative; width: 100%; height: 100%; z-index: 5; }
.rabbit-scribble-fix { position: absolute; top: 3px; left: 4px; transform: scale(0.24) rotate(15deg); transform-origin: 0 0; filter: blur(0.3px); }
.r-ears { position: relative; width: 60px; height: 32px; z-index: 2; }
.r-ears::before { content: ""; position: absolute; width: 14px; height: 32px; border: 5.5px solid rgba(0,0,0,0.45); border-bottom: none; border-radius: 15px 10px 0 0; left: 4px; top: 0; transform: rotate(-15deg); }
.r-ears::after { content: ""; position: absolute; width: 14px; height: 28px; border: 5.5px solid rgba(0,0,0,0.45); border-bottom: none; border-radius: 15px 10px 0 0; right: 4px; top: 4px; transform: rotate(12deg); }
.r-face { width: 60px; height: 50px; border: 5.5px solid rgba(0,0,0,0.45); border-radius: 28px 32px 25px 30px; margin-top: -3px; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.r-eyes::before, .r-eyes::after { content: ""; width: 6px; height: 6px; background: rgba(0,0,0,0.7); border-radius: 50%; display: inline-block; margin: 0 10px; }
.r-mouth { width: 14px; height: 7px; border-bottom: 5.5px solid rgba(0,0,0,0.45); border-radius: 0 0 8px 8px; margin-top: 5px; }
.bear-scribble-fix { position: absolute; bottom: 1px; right: 1px; transform: scale(0.3); transform-origin: 100% 100%; filter: blur(0.3px); }
.b-face { width: 55px; height: 45px; border: 4.5px solid rgba(0,0,0,0.45); border-radius: 22px 28px 20px 24px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.b-ear-l, .b-ear-r { position: absolute; width: 15px; height: 12px; border: 4.5px solid rgba(0,0,0,0.45); border-bottom: none; border-radius: 10px 10px 0 0; top: -8px; }
.b-ear-l { left: -2px; transform: rotate(-30deg); } .b-ear-r { right: -2px; transform: rotate(30deg); }
.b-eyes::before, .b-eyes::after { content: ""; width: 5.5px; height: 5.5px; background: rgba(0,0,0,0.7); border-radius: 50%; display: inline-block; margin: 0 9px; }
.b-nose-mouth { position: relative; width: 8px; height: 5px; background: rgba(0,0,0,0.6); border-radius: 50%; }
.b-nose-mouth::before, .b-nose-mouth::after { content: ""; position: absolute; top: 1px; width: 11px; height: 8px; border-bottom: 2.5px solid rgba(0,0,0,0.45); border-radius: 0 0 8px 8px; }
.body-towel-hook { position: absolute; top: 42px; right: 2%; width: 20px; z-index: 4; display: flex; flex-direction: column; align-items: center; }
.towel-string { width: 8px; height: 8px; border: 1.5px solid #999; border-bottom: none; border-radius: 4px 4px 0 0; }

/* 【修正】タオル：最後に色指定 */
.towel-cloth { 
  width: 14px; 
  height: 32px; 
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, #e0f7fa 3px, #e0f7fa 5px) #fff; 
  border-radius: 8px 8px 10px 10px; 
  transform-origin: top center; 
  animation: towel-sway 5s infinite ease-in-out; 
}

@keyframes towel-sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
.char-duck-group { position: absolute; top: 5px; left: 50%; display: flex; flex-direction: column; align-items: center; z-index: 10; animation: duck-shake 5s infinite ease-in-out; }
@keyframes duck-shake { 0%, 68% { transform: translateX(-42px) scaleX(-1) rotate(15deg); } 70%, 74%, 78%, 82%, 86%, 90% { transform: translateX(-44px) scaleX(-1) rotate(10deg); } 72%, 76%, 80%, 84%, 88%, 92% { transform: translateX(-40px) scaleX(-1) rotate(20deg); } 100% { transform: translateX(-42px) scaleX(-1) rotate(15deg); } }
.char-duck { font-size: 40px; transform: rotate(-5deg); position: relative; z-index: 10; }
.duck-foam-wrap { position: absolute; top: -2px; left: 28%; width: 12px; height: 12px; z-index: 13; }
.foam-particle { position: absolute; background: #ffffff; border-radius: 50%; }
.p1 { width: 11px; height: 11px; animation: foam-burst-p1 5s infinite ease-out; }
.p2 { width: 9px; height: 9px; left: 5px; top: -1px; animation: foam-burst-p2 5s infinite ease-out; }
.p3 { width: 9px; height: 9px; left: -3px; top: 1px; animation: foam-burst-p3 5s infinite ease-out; }
.p4 { width: 8px; height: 8px; left: 1px; top: -3px; animation: foam-burst-p4 5s infinite ease-out; }
@keyframes foam-burst-p1 { 0%, 68% { transform: translate(0, 0) scale(1); opacity: 1; } 80% { opacity: 1; } 93% { transform: translate(-20px, -40px) scale(0); opacity: 0; } 100% { transform: translate(0, 0) scale(1); opacity: 1; } }
@keyframes foam-burst-p2 { 0%, 68% { transform: translate(0, 0) scale(1); opacity: 1; } 80% { opacity: 1; } 93% { transform: translate(32px, -30px) scale(0); opacity: 0; } 100% { transform: translate(0, 0) scale(1); opacity: 1; } }
@keyframes foam-burst-p3 { 0%, 68% { transform: translate(0, 0) scale(1); opacity: 1; } 80% { opacity: 1; } 93% { transform: translate(-35px, -15px) scale(0); opacity: 0; } 100% { transform: translate(0, 0) scale(1); opacity: 1; } }
@keyframes foam-burst-p4 { 0%, 68% { transform: translate(0, 0) scale(1); opacity: 1; } 80% { opacity: 1; } 93% { transform: translate(15px, -50px) scale(0); opacity: 0; } 100% { transform: translate(0, 0) scale(1); opacity: 1; } }
.char-cactus-group { position: absolute; top: -3px; left: 50%; transform: translateX(-12px) rotate(-5deg); z-index: 8; }
.char-cactus { font-size: 38px; }
.tub-container { position: relative; width: 280px; height: 120px; z-index: 10; margin-bottom: 18px; } 
.shower-curtain-wrap { position: absolute; top: -50px; left: 5px; right: 5px; height: 155px; z-index: 0; }
.curtain-rail { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: #aaa; border-radius: 2px; z-index: 20; }

/* 【修正】カーテン：最後に色指定 */
.curtain-main { 
  width: 60%; 
  height: 100%; 
  position: relative; 
  z-index: 5; 
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0%, rgba(255,255,255,0.4) 10%, rgba(0,0,0,0.05) 20%) #fff0f5; 
  background-size: 30% 100%; 
}

.curtain-hooks { 
  position: absolute; 
  top: -2px; 
  left: 0; 
  width: 100%; 
  height: 8px; 
  background: repeating-linear-gradient(90deg, transparent 0%, transparent 9%, #888 9%, #888 11%, transparent 11%, transparent 30%); 
  background-size: 30% 100%; 
  z-index: 15; 
}

.bear-group { position: absolute; bottom: 2px; left: -14px; width: 30px; height: 30px; z-index: 4; transform: rotate(-45deg); }
.char-bear { font-size: 24px; filter: grayscale(100%) brightness(1.2); display: block; }
.char-ribbon { position: absolute; top: 9px; left: 9px; font-size: 10px; filter: hue-rotate(145deg) saturate(3) brightness(0.6); display: block; }
.tub-input-area { position: absolute; top: 76%; left: 50%; transform: translate(-50%, -50%); width: 80%; z-index: 25; }
.tub-input { text-align: center; font-size: 12px; color: #555; outline: none; word-break: break-all; }
.bub { position: absolute; z-index: 4; opacity: 0; animation: float-bub 4s infinite ease-in-out; }
.b1 { left: 18%; top: 25px; font-size: 20px; animation-delay: 0s; }
.b2 { right: 22%; top: 20px; font-size: 15px; animation-delay: 1s; }
.b4 { right: 15%; top: 23px; font-size: 18px; animation-delay: 0.5s; }
.b5 { left: 32%; top: 15px; font-size: 14px; animation-delay: 3.2s; }
@keyframes float-bub { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 0.8; } 100% { transform: translate(10px, -80px); opacity: 0; } }

/* 【修正】風呂椅子：最後に色指定 */
.bunny-stool-tiny-final { 
  position: absolute; 
  right: 12px; 
  bottom: 8px; 
  z-index: 20; 
  width: 40px; 
  height: 31px; 
  background: radial-gradient(circle at 50% -32px, transparent 46px, #efcfdb 47px, #efcfdb 48px, transparent 49px), 
              radial-gradient(ellipse at 12px -5px, #ffccd5 2.5px, transparent 3.5px), 
              radial-gradient(ellipse at 27.5px -5px, #ffccd5 2.5px, transparent 3.5px) #ffe0ed; 
  background-repeat: no-repeat; 
  border-radius: 9px 9px 3px 3px; 
}

.bunny-stool-tiny-final::after { 
  content: ''; 
  position: absolute; 
  top: -10px; 
  left: 9px; 
  width: 6.5px; 
  height: 18px; 
  background: #ffe0ed; 
  border-radius: 3px 3px 0 0; 
  box-shadow: 14.5px 0 0 #ffe0ed; 
}

.bunny-stool-tiny-final .face { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); color: #777; font-size: 9px; font-family: sans-serif; font-weight: bold; letter-spacing: -1px; white-space: nowrap; pointer-events: none; }
.bunny-stool-tiny-final::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 21px; height: 10px; background: #e0f2f7; border-radius: 10px 10px 0 0; border-top: 1px solid #efcfdb; }