/* ==========================================
   ARTISANAL 3D CERAMIC RAMEN BOWL & ACCESSORIES
   100% Pure CSS Geometry & Highlights
   ========================================== */

/* Main 3D Bowl Container (Centered in Viewport) */
.ramen-bowl-wrapper {
  position: absolute;
  top: 48%;
  left: 42%;
  transform: translate(-50%, -50%) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--zoom-level));
  width: 500px;
  height: 360px;
  z-index: 20;
  transform-style: preserve-3d;
  transition: transform 0.1s cubic-bezier(0.1, 0.5, 0.1, 1);
}

/* Outer Ceramic Bowl Body */
.bowl-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 290px;
  border-radius: 0 0 240px 240px / 0 0 280px 280px;
  background: linear-gradient(
    175deg,
    var(--bowl-outer-1) 0%,
    var(--bowl-outer-2) 65%,
    #05070a 100%
  );
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.85),
    inset 0 -20px 40px rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  z-index: 10;
}

/* Ceramic Hand-Glaze Gloss Curve */
.bowl-body::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 8%;
  width: 35%;
  height: 65%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at top left,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 75%
  );
  transform: rotate(-15deg);
  pointer-events: none;
}

/* Traditional Japanese Gold & Blue Patterned Rim Band */
.bowl-rim-pattern {
  position: absolute;
  top: 0;
  width: 100%;
  height: 42px;
  background: 
    linear-gradient(180deg, var(--bowl-rim-gold) 0px, var(--bowl-rim-gold) 3px, transparent 3px),
    repeating-conic-gradient(
      from 0deg,
      var(--bowl-pattern-dark) 0deg 15deg,
      var(--bowl-pattern-light) 15deg 30deg
    );
  border-bottom: 2px solid var(--bowl-rim-gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  z-index: 12;
}

/* Bowl Base Foot Ring */
.bowl-base {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  height: 36px;
  background: linear-gradient(180deg, #18202c 0%, #080b10 100%);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  box-shadow: 
    0 10px 20px rgba(0, 0, 0, 0.95),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  z-index: 5;
}

/* Chopsticks & Ceramic Rest ("Hashi & Hashi-oki") */
.chopsticks-assembly {
  position: absolute;
  bottom: 10px;
  right: -50px;
  width: 320px;
  height: 75px;
  transform: rotate(-16deg);
  z-index: 45;
  transition: transform 0.3s ease;
}

.chopsticks-assembly:hover {
  transform: rotate(-13deg) translateY(-6px);
}

/* Ceramic Chopstick Rest */
.chopstick-rest {
  position: absolute;
  bottom: 18px;
  left: 65px;
  width: 50px;
  height: 18px;
  background: linear-gradient(135deg, #1a4971, #0c263d);
  border-radius: 90px 90px 40px 40px / 90px 90px 30px 30px;
  box-shadow: 
    0 6px 14px rgba(0, 0, 0, 0.7),
    inset 0 2px 4px rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Wooden Chopsticks */
.chopstick {
  position: absolute;
  height: 7px;
  background: linear-gradient(
    90deg,
    #7a4928 0%,
    #b87a4b 15%,
    #693d1f 70%,
    #4a2912 100%
  );
  border-radius: 2px 8px 8px 2px;
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

.chopstick.one {
  top: 22px;
  left: 0;
  width: 300px;
  transform: rotate(-1deg);
}

.chopstick.two {
  top: 33px;
  left: 10px;
  width: 290px;
  transform: rotate(1.5deg);
}

/* Gold Band Detail on Chopsticks handle */
.chopstick::before {
  content: "";
  position: absolute;
  right: 20px;
  top: 0;
  width: 12px;
  height: 100%;
  background: var(--bowl-rim-gold);
  box-shadow: 0 0 5px rgba(212, 175, 55, 0.7);
}